From 8cf8873bffe9bb81b0a083a0ebb6801b733bdfc5 Mon Sep 17 00:00:00 2001 From: Valentin Teutschbein Date: Sat, 6 Apr 2024 08:54:30 +0200 Subject: [PATCH 1/2] improved map marker popup labels --- client/src/App.js | 4 ++-- .../src/components/{inputBox.js => InputBox.js} | 4 ++-- client/src/components/RealtimeMap.js | 15 ++++++++++++--- client/src/components/RouteSearchDiv.js | 10 ++++++++++ client/src/components/VehicleIcons.js | 2 +- 5 files changed, 27 insertions(+), 8 deletions(-) rename client/src/components/{inputBox.js => InputBox.js} (98%) create mode 100644 client/src/components/RouteSearchDiv.js diff --git a/client/src/App.js b/client/src/App.js index a316c69c..762049bd 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -2,15 +2,15 @@ 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"; function App() { return (
- +
); } diff --git a/client/src/components/inputBox.js b/client/src/components/InputBox.js similarity index 98% rename from client/src/components/inputBox.js rename to client/src/components/InputBox.js index e8e7ec8a..d34f345e 100644 --- a/client/src/components/inputBox.js +++ b/client/src/components/InputBox.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -function App() { +function InputBox() { const [input1, setInput1] = useState(''); const [input2, setInput2] = useState(''); const [suggestedStations1, setSuggestedStations1] = useState([]); @@ -111,4 +111,4 @@ function App() { ); } -export default App; +export default InputBox; diff --git a/client/src/components/RealtimeMap.js b/client/src/components/RealtimeMap.js index f678d24c..4ef90eb9 100644 --- a/client/src/components/RealtimeMap.js +++ b/client/src/components/RealtimeMap.js @@ -56,10 +56,13 @@ function RealtimeMap() { +

+ {capitalizeFirstLetter(item.type)} +

+

+ {item.line} | To: {item.direction} +

- Type: {capitalizeFirstLetter(item.type)}
- Line: {item.line} | Direction: {item.direction}
-
Absolute Utilization: {item.utilization.abs}
Relative Utilization: {item.utilization.rel}

@@ -75,6 +78,12 @@ function RealtimeMap() {

{item.name}

+

Transportation mode(s): { + Object.entries(item.products) + .filter(([key, value]) => value) + .map(([key]) => key) + .join(', ') + }

Absolute Utilization: {item.utilization.abs}
Relative Utilization: {item.utilization.rel} diff --git a/client/src/components/RouteSearchDiv.js b/client/src/components/RouteSearchDiv.js new file mode 100644 index 00000000..9f449a44 --- /dev/null +++ b/client/src/components/RouteSearchDiv.js @@ -0,0 +1,10 @@ +import React, { useState } from 'react'; +import InputBox from "./InputBox"; + +function RouteSearchDiv() { + return ( + + ); +} + +export default RouteSearchDiv; diff --git a/client/src/components/VehicleIcons.js b/client/src/components/VehicleIcons.js index 56c0dbfe..e2a756c4 100644 --- a/client/src/components/VehicleIcons.js +++ b/client/src/components/VehicleIcons.js @@ -71,7 +71,7 @@ export function getColor(products) { return "red"; } else if (products.tram) { return "blue"; - } else if (products.bus) { + } else if (products.suburban) { return "yellow"; } else if (products.ferry) { return "purple"; From a5d7a05f6b89d44ca5f306e9a2d8b88cfc541b19 Mon Sep 17 00:00:00 2001 From: hoischreck Date: Sat, 6 Apr 2024 09:12:45 +0200 Subject: [PATCH 2/2] upgraded popup formatting --- client/src/components/RealtimeMap.js | 41 ++++++++++++++++------- client/src/components/css/RealtimeMap.css | 25 ++++++++++++++ 2 files changed, 54 insertions(+), 12 deletions(-) diff --git a/client/src/components/RealtimeMap.js b/client/src/components/RealtimeMap.js index 7c31184d..55085c9a 100644 --- a/client/src/components/RealtimeMap.js +++ b/client/src/components/RealtimeMap.js @@ -58,13 +58,22 @@ function RealtimeMap() { return ( -

- Type: {capitalizeFirstLetter(item.type)}
- Line: {item.line} | Direction: {item.direction}
-
- Absolute Utilization: {item.utilization.abs}
- Relative Utilization: {item.utilization.rel} -

+
+
+ Type: {capitalizeFirstLetter(item.subType)} | Line: {item.line} +
+
+
+ Direction: {item.direction} +
+
+ Absolute Utilization: {item.utilization.abs !== null ? item.utilization.abs : "null"} +
+
+ Relative Utilization: {item.utilization.rel !== null ? item.utilization.rel : "null"} +
+
+
); @@ -75,11 +84,19 @@ function RealtimeMap() { return ( -

{item.name}

-

- Absolute Utilization: {item.utilization.abs}
- Relative Utilization: {item.utilization.rel} -

+
+
+ {item.name} +
+
+
+ Absolute Utilization: {item.utilization.abs !== null ? item.utilization.abs : 'null'} +
+
+ Relative Utilization: {item.utilization.rel !== null ? item.utilization.rel : 'null'} +
+
+
); diff --git a/client/src/components/css/RealtimeMap.css b/client/src/components/css/RealtimeMap.css index 858ebfa3..12f4b06d 100644 --- a/client/src/components/css/RealtimeMap.css +++ b/client/src/components/css/RealtimeMap.css @@ -6,3 +6,28 @@ margin-right: auto; } +.popup-content { + max-width: 600px; /* or a higher value to allow more content in one line */ + overflow-x: auto; /* Allows horizontal scrolling */ +} + +.popup-heading { + font-size: 18px; + font-weight: bold; +} + +.popup-info .info-line { + background-color: #f2f2f2; + border-radius: 8px; + padding: 5px; + margin-top: 5px; + white-space: pre-wrap; /* Allows text to wrap */ +} + +.info-label { + font-weight: bold; /* Makes the label text bold */ +} + +.popup-heading, .popup-info .info-line { + white-space: nowrap; +}