Add date picker

hadeutscher · Jan 18, 2025 · 7b83368 · 7b83368
1 parent 5935bed
commit 7b83368
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 13 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -13,7 +13,9 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/material": "^6.4.0",
+    "@mui/x-date-pickers": "^7.24.0",
     "axios": "^1.7.9",
+    "dayjs": "^1.11.13",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

diff --git a/ui/src/App.jsx b/ui/src/App.jsx
@@ -2,6 +2,9 @@ import { useState, useEffect } from "react";
 import { Container, Card } from "@mui/material";
 import axios from "axios";
 import RouteFinder from "./RouteFinder.jsx";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import "dayjs/locale/en-il";
 
 const App = () => {
   const [stations, setStations] = useState([]);
@@ -21,12 +24,14 @@ const App = () => {
 
   return (
     <div>
-      <Container>
-        <h1>HaRail</h1>
-        <Card>
-          <RouteFinder stations={stations} />
-        </Card>
-      </Container>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en-il">
+        <Container>
+          <h1>HaRail</h1>
+          <Card>
+            <RouteFinder stations={stations} />
+          </Card>
+        </Container>
+      </LocalizationProvider>
     </div>
   );
 };

diff --git a/ui/src/RouteFinder.jsx b/ui/src/RouteFinder.jsx
@@ -11,16 +11,17 @@ import {
   ListItem,
   ListItemText,
 } from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import dayjs from "dayjs";
 
-const convertToIsoTime = (hhmmTime) => {
-  const currentDate = new Date(); // Get the current date
+const convertToIsoTime = (date, hhmmTime) => {
   const timeParts = hhmmTime.split(":");
 
   return new Date(
     Date.UTC(
-      currentDate.getFullYear(),
-      currentDate.getMonth(),
-      currentDate.getDate(),
+      date.year(),
+      date.month(),
+      date.date(),
       parseInt(timeParts[0]),
       parseInt(timeParts[1])
     )
@@ -37,6 +38,7 @@ const convertToHHMM = (isoTime) => {
 const RouteFinder = ({ stations }) => {
   const [source, setSource] = useState("");
   const [destination, setDestination] = useState("");
+  const [date, setDate] = useState(dayjs());
   const [startTime, setStartTime] = useState("");
   const [endTime, setEndTime] = useState("");
   const [routes, setRoutes] = useState([]);
@@ -60,9 +62,9 @@ const RouteFinder = ({ stations }) => {
         params: {
           search: "Multi",
           start_station: source,
-          start_time: convertToIsoTime(startTime),
+          start_time: convertToIsoTime(date, startTime),
           end_station: destination,
-          end_time: convertToIsoTime(endTime),
+          end_time: convertToIsoTime(date, endTime),
         },
       });
 
@@ -98,6 +100,11 @@ const RouteFinder = ({ stations }) => {
           </MenuItem>
         ))}
       </TextField>
+      <DatePicker
+        label="Date"
+        value={date}
+        onChange={(date) => setDate(date)}
+      />
       <TextField
         label="Start time"
         variant="outlined"