moment UI

UTT-GL03 · Dec 3, 2024 · cdb9a1e · cdb9a1e
1 parent 1b9fad0
commit cdb9a1e
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 53 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/TabMeteo.jsx b/frontend/src/TabMeteo.jsx
diff --git a/frontend/src/TimeSelector.css b/frontend/src/TimeSelector.css
@@ -0,0 +1,26 @@
+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;
+  }
+
+  nav {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 1rem;
+  }
+
diff --git a/frontend/src/TimeSelector.jsx b/frontend/src/TimeSelector.jsx
@@ -0,0 +1,64 @@
+import 'dayjs/locale/fr';
+import './TimeSelector.css'
+
+function TimeSelector({ date, dateChange, momentChange }) {
+  return (
+    <div className="container">
+      <nav className='grid'>
+        <button
+          className="button"
+          value={"2024-10-08"}
+          onClick={() => dateChange("2024-10-08")}
+        >
+          8 octobre
+        </button>
+        <button
+          className="button"
+          value={"2024-10-09"}
+          onClick={() => dateChange("2024-10-09")}
+        >
+          9 octobre
+        </button>
+        <button
+          className="button"
+          value={"2024-10-10"}
+          onClick={() => dateChange("2024-10-10")}
+        >
+          10 octobre
+        </button>
+      </nav>
+      <nav className='grid'>
+        <button
+          className="button"
+          value={"Matin"}
+          onClick={() => momentChange("matin")}
+        >
+          Matin
+        </button>
+        <button
+          className="button"
+          value={"Après-midi"}
+          onClick={() => momentChange("après-midi")}
+        >
+          Après-midi
+        </button>
+        <button
+          className="button"
+          value={"Soir"}
+          onClick={() => momentChange("soirée")}
+        >
+          Soir
+        </button>
+        <button
+          className="button"
+          value={"Nuit"}
+          onClick={() => momentChange("nuit")}
+        >
+          Nuit
+        </button>
+      </nav>
+    </div>
+  );
+}
+
+export default TimeSelector;