Skip to content

Commit ad6de6c

Browse files
TothKristofTothKristof
committed
Design changes on Registration and Content page
1 parent a9fa2b2 commit ad6de6c

10 files changed

Lines changed: 331 additions & 165 deletions

File tree

‎Frontend/solarWatch/src/components/CityList.jsx‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,40 @@
11
export default function CityList({ cities }) {
2-
return (
3-
<div>
4-
<h3 className="text-lg font-semibold mb-2">Previous Searches:</h3>
5-
<ul className="space-y-2">
6-
{cities.map((city, i) => (
7-
<div key={i} className="border h-10 flex items-center p-3">
8-
<div>{city.city}</div>
9-
</div>
10-
))}
11-
</ul>
2+
return (
3+
<div className="w-full overflow-x-auto whitespace-nowrap p-4 bg-base-200 rounded-box shadow flex">
4+
{cities.map((city, i) => {
5+
const backgroundImage = city.pic
6+
? `url(${city.pic})`
7+
: `url('/default-city.jpg')`; // ezt cseréld ki saját fallback képre (pl. public mappában legyen)
8+
9+
return (
10+
<div
11+
key={i}
12+
className="inline-block w-64 h-80 mr-4 bg-base-100 rounded-box shadow bg-cover bg-center relative text-white"
13+
style={{ backgroundImage }}
14+
>
15+
<div className="absolute inset-0 rounded-box p-4 flex flex-col justify-end" style={{ backgroundColor: "rgba(0, 0, 0, 0.4)" }}>
16+
<div className="font-bold text-lg">{city.city}, {city.country}</div>
17+
{city.solarData?.[0] && (
18+
<div className="text-sm">
19+
<p><strong>Date:</strong> {city.solarData[0].date}</p>
20+
<p><strong>Sunrise:</strong> {city.solarData[0].sunrise}</p>
21+
<p><strong>Sunset:</strong> {city.solarData[0].sunset}</p>
22+
</div>
23+
)}
1224
</div>
13-
);
14-
}
15-
25+
</div>
26+
);
27+
})}
28+
</div>
29+
// <div>
30+
// <h3 className="text-lg font-semibold mb-2">Previous Searches:</h3>
31+
// <ul className="space-y-2">
32+
// {cities.map((city, i) => (
33+
// <div key={i} className="border h-10 flex items-center p-3">
34+
// <div>{city.city}</div>
35+
// </div>
36+
// ))}
37+
// </ul>
38+
// </div>
39+
);
40+
}

‎Frontend/solarWatch/src/components/Globe.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default function GlobeViewer({ city }) {
3737
pointRadius={0.5}
3838
pointColor={() => "red"}
3939
pointAltitude={0.05}
40-
onGlobeReady={handleGlobeInit} // Háttér beállítása inicializáláskor
40+
onGlobeReady={handleGlobeInit}
4141
/>
4242
);
4343
}

‎Frontend/solarWatch/src/components/Searchbar/Searchbar.jsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from "react";
2+
import { useState } from "react";
3+
4+
function Searchbar({ recommendations, setQuery, query, handleSearch }) {
5+
const [filtered, setFiltered] = useState([]);
6+
const [showSuggestions, setShowSuggestions] = useState(false);
7+
8+
return (
9+
<div className="flex justify-center w-full px-4 mt-10">
10+
<div className="relative w-full max-w-2xl backdrop-blur-md bg-white/10 border border-white/20 rounded-xl p-2 shadow-lg">
11+
<input
12+
type="text"
13+
className="w-full px-4 py-2 rounded-lg focus:outline-none text-white"
14+
value={query}
15+
onChange={(e) => {
16+
const value = e.target.value;
17+
setQuery(value);
18+
const matches = recommendations.filter((city) =>
19+
city.toLowerCase().includes(value.toLowerCase())
20+
);
21+
setFiltered(matches);
22+
setShowSuggestions(true);
23+
}}
24+
onFocus={() => query && setShowSuggestions(true)}
25+
onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
26+
placeholder="Search for a city..."
27+
/>
28+
29+
{showSuggestions && filtered.length > 0 && (
30+
<ul className="absolute top-full left-0 w-full mt-1 bg-white text-black border border-gray-300 rounded-lg shadow-lg z-50 max-h-60 overflow-y-auto">
31+
{filtered.map((city, index) => (
32+
<li
33+
key={index}
34+
onClick={() => {
35+
setQuery(city);
36+
setShowSuggestions(false);
37+
}}
38+
className="px-4 py-2 hover:bg-blue-100 cursor-pointer transition"
39+
>
40+
{city}
41+
</li>
42+
))}
43+
</ul>
44+
)}
45+
46+
<button
47+
onClick={handleSearch}
48+
className="absolute right-2 top-1/2 -translate-y-1/2 bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-1 rounded-lg transition"
49+
>
50+
Search
51+
</button>
52+
</div>
53+
</div>
54+
);
55+
}
56+
57+
export default Searchbar;

‎Frontend/solarWatch/src/main.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
55
import App from './App.jsx';
66
import MainPage from './pages/MainPage.jsx';
77
import Landing from './pages/Landing.jsx';
8-
import Registration from './pages/Registration.jsx';
8+
import Registration from './pages/Registration/Registration.jsx';
99
import Login from './pages/Login.jsx';
1010
import Content from './pages/Content.jsx';
1111

‎Frontend/solarWatch/src/pages/Content.jsx‎

Lines changed: 32 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,71 +2,43 @@ import { useEffect, useState } from "react";
22
import { fetchData } from "../utils";
33
import Globe from "../components/Globe";
44
import CityList from "../components/CityList";
5+
import Searchbar from "../components/Searchbar/Searchbar";
56

67
export default function Content() {
7-
const [recommendations, setRecommendations] = useState([]);
8-
const [query, setQuery] = useState("");
9-
const [searchResults, setSearchResults] = useState([]);
10-
const [selectedCity, setSelectedCity] = useState(null);
11-
const jwt = localStorage.getItem("jwt")
8+
const [recommendations, setRecommendations] = useState([]);
9+
const [query, setQuery] = useState("");
10+
const [searchResults, setSearchResults] = useState([]);
11+
const [selectedCity, setSelectedCity] = useState(null);
12+
const jwt = localStorage.getItem("jwt");
1213

13-
useEffect(() => {
14-
const loadRecommendations = async () => {
15-
const data = await fetchData("report/cityNames", "GET", null, jwt);
16-
if (data) setRecommendations(data);
17-
};
18-
loadRecommendations();
19-
}, []);
20-
21-
const handleSearch = async () => {
22-
const result = await fetchData(`report?city=${query}`, "GET", null, jwt);
23-
if (result) {
24-
setSearchResults(prev => [result, ...prev]);
25-
setSelectedCity(result);
26-
}
14+
useEffect(() => {
15+
const loadRecommendations = async () => {
16+
const data = await fetchData("report/cityNames", "GET", null, jwt);
17+
console.log("🚀 ~ loadRecommendations ~ data:", data)
18+
if (data) setRecommendations(data);
2719
};
20+
loadRecommendations();
21+
}, []);
22+
23+
const handleSearch = async () => {
24+
const result = await fetchData(`report?city=${query}`, "GET", null, jwt);
25+
if (result) {
26+
setSearchResults((prev) => [result, ...prev]);
27+
setSelectedCity(result);
28+
}
29+
};
2830

29-
return (
30-
<div className="p-6 w-full h-screen flex flex-col gap-4 z-10">
31-
{/* Kereső */}
32-
<div className="p-6 w-full h-50 flex flex-col gap-2 z-10">
33-
{/* Kereső */}
34-
<div className="w-full flex justify-center">
35-
<div className="w-1/2 flex gap-2">
36-
<div className="relative w-full">
37-
<input
38-
type="text"
39-
list="city-recommendations"
40-
className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
41-
value={query}
42-
onChange={(e) => setQuery(e.target.value)}
43-
placeholder="Search for a city..."
44-
/>
45-
<datalist id="city-recommendations" className="w-full">
46-
{recommendations.map((city, i) => (
47-
<option key={i} value={city} />
48-
))}
49-
</datalist>
50-
</div>
51-
<button className="btn btn-primary" onClick={handleSearch}>
52-
Search
53-
</button>
54-
</div>
55-
</div>
56-
</div>
31+
return (
32+
<div className="p-6 w-full flex flex-col gap-4 z-10 h-screen box-border">
33+
<Searchbar recommendations={recommendations} setQuery={setQuery} query={query} handleSearch={handleSearch}></Searchbar>
34+
<div className="w-full overflow-x-auto">
35+
<CityList cities={searchResults} />
36+
</div>
5737

58-
{/* Alsó rész */}
59-
<div className="flex flex-1 gap-4">
60-
{/* Bal oldal - Földgömb */}
61-
<div className="flex items-center justify-center">
62-
<Globe city={selectedCity} />
63-
</div>
38+
<div className="flex-1 min-h-0 flex justify-center items-center">
39+
<Globe city={selectedCity} />
40+
</div>
41+
</div>
6442

65-
{/* Jobb oldal - Scrollable lista */}
66-
<div className="w-1/2 bg-white/50 rounded-[2rem] shadow p-4 overflow-y-auto text-black">
67-
<CityList cities={searchResults} />
68-
</div>
69-
</div>
70-
</div>
71-
);
43+
);
7244
}

‎Frontend/solarWatch/src/pages/MainPage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export default function MainPage() {
2727
initial={{ y: "100%", opacity: 0 }}
2828
animate={{ y: 0, opacity: 1 }}
2929
transition={{ duration: 2 }}
30-
className="absolute top-0 left-1/2 transform -translate-x-1/2 w-[400px] h-[400px] object-contain"
30+
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 w-full h-full object-contain"
3131
/>
3232

3333
<Outlet />

‎Frontend/solarWatch/src/pages/Registration.jsx‎

Lines changed: 0 additions & 89 deletions
This file was deleted.

‎Frontend/solarWatch/src/pages/Registration/Registration.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.valid {
2+
color: rgb(28, 239, 28);
3+
}
4+
.invalid {
5+
color: red;
6+
}
7+

0 commit comments

Comments
 (0)