diff --git a/Front-end/src/pages/Home.jsx b/Front-end/src/pages/Home.jsx index 83dfd9d..5e1499f 100644 --- a/Front-end/src/pages/Home.jsx +++ b/Front-end/src/pages/Home.jsx @@ -1,129 +1,852 @@ -import React, { useState, useEffect } from 'react'; -import { Search, MapPin, Calendar, Bus, ArrowRight, LogIn, UserPlus } from 'lucide-react'; +import React, { useState, useEffect } from "react"; +import { + UserPlus, + LogIn, + BadgePlus, + RadioTower, + Search, + Cloud, + CloudRain, + Droplets, + Wind, + Thermometer, + Sun, + Moon, + MapPin, + CalendarClock, + ArrowRight, + BellRing, + LayoutDashboard, + TowerControl, +} from "lucide-react"; import { useAuth } from "../AuthContext"; +function EnhancedWeatherHome() { + const [searchQuery, setSearchQuery] = useState(""); + const [activeFilter, setActiveFilter] = useState("all"); + const [currentTime, setCurrentTime] = useState(new Date()); + const { user, token } = useAuth(); -function Home() { - const [searchQuery, setSearchQuery] = useState(''); - const [activeFilter, setActiveFilter] = useState('all'); - const [name, setName] = useState([]); - const { token, logout } = useAuth(); - const { user } = useAuth(); + const isDayTime = currentTime.getHours() > 6 && currentTime.getHours() < 20; + + useEffect(() => { + const timer = setInterval(() => { + setCurrentTime(new Date()); + }, 60000); + + return () => clearInterval(timer); + }, []); + + const formatDate = (date) => { + const options = { weekday: "long", day: "numeric", month: "long" }; + return date.toLocaleDateString("fr-FR", options); + }; + + const hourlyForecast = [ + { + time: "Maintenant", + temp: "21°", + icon: , + }, + { + time: "14:00", + temp: "22°", + icon: , + }, + { + time: "15:00", + temp: "22°", + icon: , + }, + { + time: "16:00", + temp: "21°", + icon: , + }, + { + time: "17:00", + temp: "20°", + icon: , + }, + { + time: "18:00", + temp: "19°", + icon: , + }, + ]; + + const dailyForecast = [ + { + day: "Lun", + temp: "21°/15°", + icon: , + }, + { + day: "Mar", + temp: "23°/16°", + icon: , + }, + { + day: "Mer", + temp: "24°/17°", + icon: , + }, + { + day: "Jeu", + temp: "22°/16°", + icon: , + }, + { + day: "Ven", + temp: "20°/14°", + icon: , + }, + ]; return ( -
-
-
-

- Bienvenue dans ta ville intelligente.

- {user ? ( - <> -

Bienvenue, {user.name} {user.surname}!

-

Email : {user.sub}

-

Rôle : {user.role}

-

Rôle : {user.id}

+
+ {" "} +
+
+
+ {isDayTime ? ( + <> +
+
+
+ + ) : ( + <> +
+
+
+
+
+ + )} +
- - ):( -

Non connecté

- )} -

- Découvrez tout ce que votre ville a à offrir - des événements locaux aux horaires de transport, le tout en un seul endroit. +

+
+

+ La météo en temps réel +

+

+ Prévisions précises et personnalisées pour vous aider à planifier + votre journée en toute sérénité.

-
- -
-
- - setSearchQuery(e.target.value)} - /> -
-
- - - - -
-
- - {/* Features Grid */} -
-
-
- + +
+
+ + setSearchQuery(e.target.value)} + /> +
-

Points d'intérêt

-

- Découvrez les meilleurs endroits de votre ville, qu'il s'agisse de restaurants, de parcs ou de lieux culturels. -

- - Explorer les lieux - -
- -
-
- -
-

Evenements locaux

-

- Restez informé des derniers événements, festivals et rassemblements communautaires dans votre région. -

- - Voir les événements - -
- -
-
- -
-

Transports publics

-

- Accédez en temps réel aux horaires et aux itinéraires des bus, des trains et des autres transports publics. -

- - Vérifier les horaires -
- ); +
+
+
+
+
+
+ +

+ Paris, France +

+
+

+ {formatDate(currentTime)} +

+
+ {isDayTime ? ( + + ) : ( + + )} +
+

+ 21°C +

+

+ Partiellement nuageux +

+
+
+
+ +
+
+

+ Ressenti +

+
+ + + 23°C + +
+
+
+

+ Humidité +

+
+ + + 68% + +
+
+
+

+ Vent +

+
+ + + 12 km/h + +
+
+
+

+ Précipitations +

+
+ + + 30% + +
+
+
+

+ Lever du soleil +

+
+ + + 06:42 + +
+
+
+

+ Coucher du soleil +

+
+ + + 20:51 + +
+
+
+
+
+ +
+

+ Prévisions horaires +

+
+ {hourlyForecast.map((item, index) => ( +
+

+ {item.time} +

+ {item.icon} +

+ {item.temp} +

+
+ ))} +
+
+
+ +
+
+

+ Prévisions 5 jours +

+
+ {dailyForecast.map((item, index) => ( +
+
+ + {item.day} + + {item.icon} +
+ + {item.temp} + +
+ ))} +
+
+
+ +

+ Services météo +

+ {user?.role === "user" && ( +
+
+ +
+
+

+ Visualisation des objets connectés météorologiques +

+

+ Consultez l'ensemble des objets connectés ainsi que leurs + données dans l'ensemble de la France +

+ + Voir les objets + +
+
+ )} + + {!token && ( +
+
+
+ +
+
+

+ Inscrivez-vous !{" "} +

+

+ Avoir un compte sur notre site permet de consulter + l'intégralité des objets connectés météorologiques dans + l'ensemble de la France +

+ + S'inscrire + +
+
+
+
+ +
+
+

+ Connectez-vous ! +

+

+ Heureux de vous retrouver ! Retrouvez votre compte tel que + vous l'avez laissez ! +

+ + Se connecter + +
+
+
+ )} + {user?.role === "complexe" && ( +
+
+
+ +
+
+

+ Consulter les objets connectés météorologiques +

+

+ Accédez aux données en temps réel des objets connectés + météorologiques, modifiez leurs paramètres et consultez + l'historique des mesures.{" "} +

+ + Explorer les objets + +
+
+ +
+
+ +
+
+

+ Ajouter un nouvel objet connecté +

+

+ Intégrez facilement un nouvel objet connecté en renseignant + ses informations et en configurant ses paramètres pour une + gestion optimale. +

+ + Ajouter un objet{" "} + + +
+
+
+ )} + {user?.role === "admin" && ( +
+
+
+ +
+
+

+ Accéder au tableau d'Administration +

+

+ Vous pourrez gérer les utilisateurs du site mais aussi les objets connectés +

+ + Tableau d'Administration + +
+
+ +
+
+ +
+
+

+ Gestion des objets connectés +

+

+ Ce module vous permet de gérer les capteurs et stations connectés de France de manière simple et efficace. +

+ + Gestion des objets{" "} + + +
+
+
+ )} +
+ +
+ ); } -export default Home; - \ No newline at end of file +export default EnhancedWeatherHome;