Merge pull request #9 from hadeutscher/ui-fixes2

UI fixes
hadeutscher · Jan 18, 2025 · 260ddc9 · 260ddc9
2 parents 3a63ba0 + 7b83368
commit 260ddc9
Show file tree

Hide file tree

Showing 9 changed files with 344 additions and 205 deletions.
diff --git a/ui/eslint.config.js b/ui/eslint.config.js
@@ -1,38 +1,38 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
+import js from "@eslint/js";
+import globals from "globals";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
 
 export default [
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
-    files: ['**/*.{js,jsx}'],
+    files: ["**/*.{js,jsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        ecmaVersion: 'latest',
+        ecmaVersion: "latest",
         ecmaFeatures: { jsx: true },
-        sourceType: 'module',
+        sourceType: "module",
       },
     },
-    settings: { react: { version: '18.3' } },
+    settings: { react: { version: "18.3" } },
     plugins: {
       react,
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
+      ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': [
-        'warn',
+      "react/jsx-no-target-blank": "off",
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
   },
-]
+];
diff --git a/ui/index.html b/ui/index.html
@@ -1,16 +1,14 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HaRail</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>HaRail</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
-</body>
-
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
 </html>
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,10 @@
     "@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"
   },
@@ -27,6 +30,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
+    "prettier": "3.4.2",
     "vite": "^6.0.5"
   },
   "browserslist": {

diff --git a/ui/src/App.jsx b/ui/src/App.jsx
@@ -1,18 +1,21 @@
-import React, { useState, useEffect } from 'react';
-import { Container, Card } from '@mui/material';
-import axios from 'axios';
-import RouteFinder from './RouteFinder.jsx';
+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([]);
 
   useEffect(() => {
     const fetchStations = async () => {
       try {
-        const response = await axios.get('/harail/stations');
+        const response = await axios.get("/harail/stations");
         setStations(response.data);
       } catch (error) {
-        console.error('Error fetching stations:', error);
+        console.error("Error fetching stations:", error);
       }
     };
 
@@ -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>
   );
 };