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

.gitignore

@@ -1,6 +1,10 @@
 #####################
 # Python
 #####################
+# testing
+output.json
+outputlines.json
+
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]

client/package.json

@@ -7,8 +7,11 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.8",
+    "leaflet": "^1.9.4",
+    "leaflet-realtime": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

client/src/App.js

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Axios from "axios";
+import MapComponent from './components/RealtimeMap';
+import Title from './components/Title';
 
 function App() {
   const [products, setProducts] = useState([]);
@@ -15,16 +17,14 @@ function App() {
     const products = data;
     setProducts(products);
   };
-
   useEffect(() => {
     fetchProducts();
   }, []);
 
   return (
-    <div>
-      {products.map((product) => (
-        <p key={product.name}>{product.name}</p>
-      ))}
+    <div className="App">
+      <Title />
+      <MapComponent />
     </div>
   );
 }

client/src/components/Bus.js

@@ -0,0 +1,15 @@
+import React, { useState, useEffect } from "react";
+import './css/Vehicle.css';
+
+function Bus({ data }) {
+  return (
+    <div>
+      <h2>{data.type}</h2>
+      <p>ID: {data.id}</p>
+      <p>Latitude: {data.position.lat}</p>
+      <p>Longitude: {data.position.lon}</p>
+    </div>
+  );
+}
+
+export default Bus;

client/src/components/RealtimeMap.js

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from "react";
+import L from 'leaflet';
+import './../../node_modules/leaflet/dist/leaflet.css'
+import './css/RealtimeMap.css';
+import 'leaflet-realtime';
+import Bus from './Bus';
+import Tram from './Tram';
+import Train from './Train';
+import { Marker } from 'react-leaflet';
+import { MapContainer, TileLayer, useMap } from 'react-leaflet';
+
+function RealtimeMap() {
+  const map = useMap();
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const bounds = map.getBounds();
+    const upperLeft = bounds.getNorthWest();
+    const lowerRight = bounds.getSouthEast();
+    fetch('https://hackhpi24.ivo-zilkenat.de/api/trafficData/', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        "bounds": {
+          "upper-left": {
+            "lat": upperLeft.lat,
+            "lon": upperLeft.lng
+          },
+          "lower-right": {
+            "lat": lowerRight.lat,
+            "lon": lowerRight.lng
+          }
+        }
+      })
+    })
+      .then(response => response.json())
+      .then(data => {
+        setData(data);
+      });
+  }, []);
+  data["2"] = {"id": "2", "type": "bus", "position": {"lat": 52.3906, "lon": 13.0645}};
+
+  return Object.values(data).map(item => (
+    <Marker position={[item.position.lat, item.position.lon]}>
+      {item.type === "bus" && <Bus data={item} />}
+      {item.type === "tram" && <Tram data={item} />}
+      {item.type === "train" && <Train data={item} />}
+    </Marker>
+  ));
+}
+
+function MapComponent() {
+  return (
+    <MapContainer center={[52.3906, 13.0645]} zoom={13} className="map">
+      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+      <RealtimeMap />
+    </MapContainer>
+  );
+}
+
+export default MapComponent;

client/src/components/Title.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import './css/Title.css';
+
+function Title() {
+    return (
+        <div className="Title">
+          <h1>SFPOPOS</h1>
+                <div className="Title-Subtitle">San Franciscos Privately Owned Public Spaces</div>
+        </div>
+    )
+}
+
+export default Title

client/src/components/Train.js

@@ -0,0 +1,15 @@
+import React, { useState, useEffect } from "react";
+import './css/Vehicle.css';
+
+function Train({ data }) {
+  return (
+    <div>
+      <h2>{data.type}</h2>
+      <p>ID: {data.id}</p>
+      <p>Latitude: {data.position.lat}</p>
+      <p>Longitude: {data.position.lon}</p>
+    </div>
+  );
+}
+
+export default Train;

client/src/components/Tram.js

@@ -0,0 +1,15 @@
+import React, { useState, useEffect } from "react";
+import './css/Vehicle.css';
+
+function Tram({ data }) {
+  return (
+    <div>
+      <h2>{data.type}</h2>
+      <p>ID: {data.id}</p>
+      <p>Latitude: {data.position.lat}</p>
+      <p>Longitude: {data.position.lon}</p>
+    </div>
+  );
+}
+
+export default Tram;

client/src/components/Vehicle.js

@@ -0,0 +1,15 @@
+import React, { useState, useEffect } from "react";
+import './css/Vehicle.css';
+
+function Vehicle({ data }) {
+  return (
+    <div>
+      <h2>{data.type}</h2>
+      <p>ID: {data.id}</p>
+      <p>Latitude: {data.position.lat}</p>
+      <p>Longitude: {data.position.lon}</p>
+    </div>
+  );
+}
+
+export default Vehicle;

client/src/components/css/RealtimeMap.css

@@ -0,0 +1,9 @@
+.map {
+  height: 400px;
+  width: 800px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4);
+}

client/src/components/css/Title.css

@@ -0,0 +1,11 @@
+.Title {
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    padding: 1em;
+    margin-bottom: 2em;
+    background-color: rgb(192, 45, 26);
+    color: #fff;
+  }

client/src/components/css/Vehicle.css

@@ -0,0 +1,3 @@
+.bus{
+
+}

client/src/index.css

@@ -5,6 +5,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: white;
+  color: #000000;
 }
 
 code {

install.py

@@ -29,8 +29,6 @@ def install_backend_dependencies():
         # Linux and macOS use this command
         run_command('. venv/bin/activate && pip install -r requirements.txt')
 
-    print("Dependencies installed successfully.")
-
     os.chdir("..")
 
 def main():

server/database.py

@@ -0,0 +1,18 @@
+from typing import Dict, List
+from models import trafficDataItem
+
+trafficDataDict: Dict[str, trafficDataItem.TrafficDataItem] = dict()
+
+# Example traffic data (you would fetch or compute this data in a real application)
+trafficDataDict = {
+    "1": trafficDataItem.TrafficDataItem(
+        id="1",
+        type="Bus",
+        subType="City Bus",
+        position=trafficDataItem.Position(lat=40.7128, lon=-74.0060),
+        line="Line 1",
+        direction="North",
+        utilization=trafficDataItem.Utilization(abs=30, rel=0.6)
+    ),
+    # Add more items as needed...
+}

server/fetch_radar.py

@@ -0,0 +1,64 @@
+import httpx
+from fastapi import HTTPException
+from models import trafficDataItem
+import asyncio
+import database
+
+async def fetch_radar_data(north: float, west: float, south: float, east: float, results: int = 256, duration: int = 30, frames: int = 3, polylines: bool = True, language: str = "en"):
+    url = "https://v6.vbb.transport.rest/radar"
+    params = {
+        "north": north,
+        "west": west,
+        "south": south,
+        "east": east,
+        "results": results,
+        "duration": duration,
+        "frames": frames,
+        "polylines": polylines,
+        "language": language
+    }
+
+    async with httpx.AsyncClient() as client:
+        response = await client.get(url, params=params)
+
+    if response.status_code == 200:
+        return response.json()
+    else:
+        raise HTTPException(status_code=response.status_code, detail="Failed to fetch radar data from VBB API")
+
+async def fetch_radar_data_periodically(period_time: int = 1):
+    while True:
+        await asyncio.sleep(period_time)  # Wait for n seconds
+        # print("Fetching radar data...")
+        radar_data = await fetch_radar_data(
+            north=52.4288, 
+            west=12.96249, 
+            south=52.35401, 
+            east=13.16608, 
+            results=1024, 
+            duration=period_time * 2, 
+            frames=2, 
+            polylines=True, 
+            language="en"
+        )
+
+        database.trafficDataDict = dict()
+        for movement in radar_data["movements"]:
+
+            database.trafficDataDict[movement["tripId"]] = trafficDataItem.TrafficDataItem(
+                id=movement["tripId"],
+                type=movement["line"]["mode"],
+                subType=movement["line"]["product"],
+                position=trafficDataItem.Position(
+                    lon=movement["location"]["longitude"],
+                    lat=movement["location"]["latitude"]    
+                ),
+                line=movement["line"]["name"],
+                direction=movement["direction"],
+                utilization=trafficDataItem.Utilization(
+                    abs=None, 
+                    rel=None
+                )
+            )
+
+