Merge branch 'master' of https://github.com/ivozilkenat/hackhpi24

client/src/App.css

@@ -1,3 +1,41 @@
 .App {
-  text-align: center;
+  position: relative;
+}
+
+.RouteSearchDiv {
+  position: fixed;
+  z-index: 100000;
+  top: 100px;
+  width: 290px;
+  left: 10px;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  background-color: white;
+}
+
+
+
+.MapComponent {
+  z-index: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+
+@media (max-width: 600px) {
+.RouteSearchDiv {
+  position: fixed;
+  z-index: 100000;
+  width: 100%;
+  bottom: 0px;
+  top: auto;
+  height: fit-content;
+  left: 0px;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  background-color: white;
+}
 }

client/src/App.js

@@ -1,16 +1,17 @@
 import React from "react";
 import "./App.css"
-import MapComponent from './components/RealtimeMap';
 import Banner from "./components/Banner";
+import InputBox from "./components/InputBox";
 import RouteSearchDiv from "./components/RouteSearchDiv";
+import RealtimeMap from "./components/RealtimeMap";
 
 function App() {
 
   return (
     <div className="App">
-      <Banner />
-      <MapComponent />
+      <Banner className="Banner"/>
       <RouteSearchDiv />
+      <RealtimeMap className="RealtimeMap"/>
     </div>
   );
 }

client/src/components/Banner.js

@@ -18,4 +18,4 @@ function Banner() {
   );
 }
 
-export default Banner;
+export default Banner;

client/src/components/InputBox.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import './css/InputBox.css';
 
 function InputBox() {
     const [input1, setInput1] = useState('');
@@ -80,6 +81,7 @@ function InputBox() {
 
     return (
         <div>
+      <h2>Route Search</h2>
             <input
                 type="text"
                 value={input1}
@@ -107,6 +109,8 @@ function InputBox() {
                     <option key={index} value={station} />
                 ))}
             </datalist>
+          <input type="date" className="date-box"/>
+          <input type="time" className="time-box"/>
         </div>
     );
 }

client/src/components/RealtimeMap.js

@@ -24,7 +24,7 @@ function RealtimeMap() {
     const interval = setInterval(() => {
       fetchCurrentData(map, 'trips')
         .then(data => {
-          setData(data);
+          setData(data); // {...data}
         });
     }, 1000);
 
@@ -34,11 +34,12 @@ function RealtimeMap() {
   useEffect(() => {
     fetchCurrentData(map, 'stations')
       .then(data => {
-        setStations(data);
+        setStations(data); // What does this do?
       });
   }, []);
 
   const tripMarkers = Object.values(data).map(item => {
+    // console.log(item.utilization.rel);
     let icon;
     let colorClass;
     if (item.utilization.rel == null) {
@@ -55,8 +56,10 @@ function RealtimeMap() {
 
     icon.options.className = `${colorClass} vehicle-icon`;
 
+    console.log(icon.options)
+
     return (
-      <Marker position={[item.position.lat, item.position.lon]} icon={icon}>
+      <Marker key={item.id} position={[item.position.lat, item.position.lon]} icon={icon}>
         <Popup>
         <div className="popup-content">
           <div className="popup-heading">

client/src/components/RouteSearchDiv.js

@@ -3,7 +3,11 @@ import InputBox from "./InputBox";
 
 function RouteSearchDiv() {
   return (
-    <InputBox />
+    // <InputBox />
+    <div className="RouteSearchDiv">
+      <InputBox />
+
+    </div>
   );
 }
 

client/src/components/css/Banner.css

@@ -1,19 +1,20 @@
 /* In Navbar.css */
 .navbar {
   display: flex;
-  flex-direction: row; /* Default direction */
+  flex-direction: row;
   align-items: center;
-  justify-content: space-between; /* Align items with space between */
+  justify-content: space-between;
   background-color: #333;
   color: white;
-  padding: 5px 20px 5px 0px; /* Added padding to the right and left */
-  width: 100%; /* Full width */
+  padding: 10px 20px 10px 0px;
+  width: 100%;
   position: fixed;
-  z-index: 1000; /* Ensures it's above the map */
+  z-index: 1000;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 
 }
 
 .brand {
-  padding: 10px;
+  padding: 14px;
   font-size: large;
   font-weight: bold;
   /* margin-left: 50px; */ /* Ensures some space between the brand and the nav items */
@@ -25,15 +26,17 @@
 
 .nav-item {
   margin: 0 10px;
-  padding: 5px 10px; /* Padding inside each nav item for better touch targets */
+  padding: 10px 12px; /* Padding inside each nav item for better touch targets */
+  font-size: 16px;
   cursor: pointer;
   background-color: #3c3c3c; /* Slightly darker background for clickable items */
   border-radius: 5px; /* Rounded borders for a softer look */
   transition: background-color 0.3s; /* Smooth transition for hover effect */
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Slight shadow for depth */
 }
 
 .nav-item:hover {
-  background-color: #555; /* Slightly lighter on hover for feedback */
+  background-color: #222222; /* Slightly lighter on hover for feedback */
   text-decoration: none; /* Overrides the underline from previous styles if needed */
 }
 

client/src/components/css/Header.css

@@ -1,4 +1,4 @@
 .header {
     color: #F7F9FB;
     margin-left: 70px;
-  }
+  }

client/src/components/css/InputBox.css

@@ -1,18 +1,25 @@
-.translucent-box {
-    background-color: rgba(255, 255, 255, 0.7); /* Translucent white background */
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 20px;
-    width: 300px;
-    margin: 0 auto;
-    z-index: 999;
-  }
-
-  .input-field {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 10px;
-    z-index: 9999;
-  }
-
-
+.input-field {
+  width: 90%;
+  padding: 14px;
+  margin-bottom: 10px;
+  z-index: 9999;
+  border-radius: 5px;
+  border: none;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+.date-box{
+  padding: 14px;
+  border-radius: 5px;
+  border: none;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}   
+
+.time-box{
+  margin-left: 20px;
+  padding: 14px;
+  padding-left: 10px;
+  border-radius: 5px;
+  border: none;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}   

client/src/components/css/RealtimeMap.css

@@ -8,7 +8,7 @@
 
 .popup-content {
   max-width: 600px; /* or a higher value to allow more content in one line */
-  overflow-x: auto; /* Allows horizontal scrolling */
+  /*overflow-x: auto; /* Allows horizontal scrolling */
 }
 
 .popup-heading {
@@ -24,6 +24,10 @@
   white-space: pre-wrap; /* Allows text to wrap */
 }
 
+.info-line {
+  width: 100%;
+}
+
 .info-label {
   font-weight: bold; /* Makes the label text bold */
 }

dev/randomutil.py

@@ -3,8 +3,8 @@
 import time
 import numpy as np
 
-BASEURL = f"https://hackhpi24.ivo-zilkenat.de/api/"
-#BASEURL = f"http://localhost:3001/api/"
+# BASEURL = f"https://hackhpi24.ivo-zilkenat.de/api/"
+BASEURL = f"http://localhost:3001/api/"
 
 capacities = {"suburban": 600,
 "subway": 600,

server/main.py

@@ -1,6 +1,7 @@
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
-from routers import trafficData, updateUtilization, stations
+from routers import trafficData, updateUtilization, stations, lineUtilization
+
 from fetch_radar import fetch_radar_data_periodically
 from fetch_stations import fetch_station_data_periodically
 import asyncio
@@ -19,6 +20,8 @@
 app.include_router(trafficData.router, prefix="/api")
 app.include_router(updateUtilization.router, prefix="/api")
 app.include_router(stations.router, prefix="/api")
+app.include_router(lineUtilization.router, prefix="/api")
+
 # app.include_router(radar.router, prefix="/api")
 
 @app.on_event("startup")

server/routers/lineUtilization.py

@@ -1,6 +1,4 @@
 from fastapi import APIRouter
-from models import trafficDataItem, core
-from typing import Dict
 from statistics import mean
 
 import database
@@ -9,4 +7,7 @@
 
 @router.post("/lineUtilization/", response_model=float)
 async def getAverageUtilization(request: str):
-    return mean([x["utilization"]["rel"] for x in database.trafficDataDict.values() if x["line"] == request])
+    relevant_entries = [x.utilization.rel for x in database.trafficDataDict.values() if x.line == request and x.utilization.rel != None]
+    if len(relevant_entries) > 0:
+        return mean(relevant_entries)
+    return 0

server/routers/stations.py

@@ -5,6 +5,13 @@
 
 router = APIRouter()
 
+@router.post("/stations/{stationName}/getStationID", response_model=str)
+async def getStationId(stationName: str):
+    # Looks up the id of a station from the name stored in the DB
+    for v in database.stationDataDict.values():
+        if v.name == stationName: return v.id
+    return {"No known station with that name."}
+
 @router.post("/stations/", response_model=Dict[str, station.StationDataItem])
 async def get_stations(request: core.BoundDataRequest):
     return database.stationDataDict