Merge pull request #17 from UTT-GL03/Frontend_UI_Improvements

Frontend UI improvements
UTT-GL03 · Dec 10, 2024 · ea2cc76 · ea2cc76
2 parents ab4e695 + cb8bac5
commit ea2cc76
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 58 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import './App.css';
-import DaySelector from './DaySelector';
 import Header from './Header';
 import WeatherCard from './WeatherCard';
+import TimeSelector from './TimeSelector';
 
 function App() {
   const [data, setData] = useState({});
@@ -25,7 +25,7 @@ function App() {
       .then(data => {
           setData(data.docs[0]);
       });
-  }, [selectedCity, selectedDate]);
+  }, [selectedCity, selectedDate, selectedMoment]);
 
   useEffect(() => {
     fetch('http://localhost:5984/ecometeo/_design/testCity/_view/city?reduce=true&group=true')     
@@ -43,6 +43,9 @@ function App() {
   const handleDate = (date) => {
     setSelectedDate(date);
   };
+  const handleMoment = (moment) => {
+    setSelectedMoment(moment);
+  }
 
   return (
     <div className="app-container">
@@ -52,9 +55,9 @@ function App() {
         cityChange={handleCity}
         selectedDate={selectedDate}
       />
+      <TimeSelector date={selectedDate} dateChange={handleDate} momentChange={handleMoment}/>
       <main className="main-content">
         <WeatherCard data={data} date={selectedDate} />
-        <DaySelector date={selectedDate} dateChange={handleDate} />
       </main>
     </div>
   );

diff --git a/frontend/src/DaySelector.jsx b/frontend/src/DaySelector.jsx
diff --git a/frontend/src/Header.css b/frontend/src/Header.css
@@ -3,14 +3,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 1rem 2rem;
-    background-color: #f4f4f4; /* Couleur de fond subtile */
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre douce */
+    background-color: #f4f4f4; 
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
     border-radius: 10px;
 }
 
 .select-container {
     flex: 1;
-    max-width: 300px; /* Limite la largeur du menu déroulant */
+    max-width: 300px;
 }
 
 .select {
@@ -25,7 +25,7 @@
 .logo-container h2 {
     font-family: 'Roboto', sans-serif;
     font-size: 1.8rem;
-    color: #2c3e50; /* Texte élégant */
+    color: #2c3e50;
     margin: 0;
 }
 

diff --git a/frontend/src/Header.jsx b/frontend/src/Header.jsx
@@ -19,7 +19,7 @@ function Header({ cities, ville, cityChange, selectedDate }) {
                     defaultValue={defaultValue}
                     onChange={handleChange}
                     options={options}
-                    placeholder="Choisissez une ville"
+                    placeholder={"Paris"}
                     className="select"
                 />
             </div>

diff --git a/frontend/src/TabMeteo.jsx b/frontend/src/TabMeteo.jsx
diff --git a/frontend/src/TimeSelector.css b/frontend/src/TimeSelector.css
@@ -0,0 +1,39 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  margin: 1rem 0; 
+}
+
+nav {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 1rem;
+}
+
+button {
+  margin: 0.5rem;
+  padding: 0.8rem 1.5rem;
+  font-weight: bold;
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+button:hover {
+  background-color: #0077cc;
+  color: white;
+}
+
+button:focus {
+  outline: none;
+  background-color: #005fa3;
+  color: white;
+}
+
+
+button.active {
+  background-color: #004080;
+  color: white;
+  border: 2px solid #005fa3;
+}
diff --git a/frontend/src/TimeSelector.jsx b/frontend/src/TimeSelector.jsx
@@ -0,0 +1,71 @@
+import { useState } from "react";
+import 'dayjs/locale/fr';
+import './TimeSelector.css';
+
+function TimeSelector({ dateChange, momentChange }) {
+  const [activeDate, setActiveDate] = useState("2024-10-08");
+  const [activeMoment, setActiveMoment] = useState("matin");
+
+  const handleDateClick = (value) => {
+    setActiveDate(value);
+    dateChange(value);
+  };
+
+  const handleMomentClick = (value) => {
+    setActiveMoment(value);
+    momentChange(value);
+  };
+
+  return (
+    <div className="container">
+      <nav className="grid">
+        <button
+          className={`button ${activeDate === "2024-10-08" ? "active" : ""}`}
+          onClick={() => handleDateClick("2024-10-08")}
+        >
+          8 octobre
+        </button>
+        <button
+          className={`button ${activeDate === "2024-10-09" ? "active" : ""}`}
+          onClick={() => handleDateClick("2024-10-09")}
+        >
+          9 octobre
+        </button>
+        <button
+          className={`button ${activeDate === "2024-10-10" ? "active" : ""}`}
+          onClick={() => handleDateClick("2024-10-10")}
+        >
+          10 octobre
+        </button>
+      </nav>
+      <nav className="grid">
+        <button
+          className={`button ${activeMoment === "matin" ? "active" : ""}`}
+          onClick={() => handleMomentClick("matin")}
+        >
+          Matin
+        </button>
+        <button
+          className={`button ${activeMoment === "après-midi" ? "active" : ""}`}
+          onClick={() => handleMomentClick("après-midi")}
+        >
+          Après-midi
+        </button>
+        <button
+          className={`button ${activeMoment === "soirée" ? "active" : ""}`}
+          onClick={() => handleMomentClick("soirée")}
+        >
+          Soir
+        </button>
+        <button
+          className={`button ${activeMoment === "nuit" ? "active" : ""}`}
+          onClick={() => handleMomentClick("nuit")}
+        >
+          Nuit
+        </button>
+      </nav>
+    </div>
+  );
+}
+
+export default TimeSelector;