From 2b3e45d90c43cc40c1117cde735e0e9710e005f5 Mon Sep 17 00:00:00 2001 From: hoischreck Date: Sat, 6 Apr 2024 12:20:03 +0200 Subject: [PATCH] holy fix --- client/src/components/Banner.js | 1 + client/src/components/RealtimeMap.js | 14 +- client/src/components/VehicleIcons.js | 237 +++++++++++++++++++++----- 3 files changed, 200 insertions(+), 52 deletions(-) diff --git a/client/src/components/Banner.js b/client/src/components/Banner.js index f2dafb93..3273eca6 100644 --- a/client/src/components/Banner.js +++ b/client/src/components/Banner.js @@ -7,6 +7,7 @@ function Banner() {
Wischen & Mischen
{/* This will take up the unused space */}
+
Docs
Home
Data Solutions
About
diff --git a/client/src/components/RealtimeMap.js b/client/src/components/RealtimeMap.js index 14e4a969..7ec2903d 100644 --- a/client/src/components/RealtimeMap.js +++ b/client/src/components/RealtimeMap.js @@ -41,20 +41,18 @@ function RealtimeMap() { const tripMarkers = Object.values(data).map(item => { // console.log(item.utilization.rel); let icon; - let colorClass; + let color; if (item.utilization.rel == null) { - colorClass = 'gray-icon'; + color = 'gray'; } else if (item.utilization.rel < 0.3) { - colorClass = 'green-icon'; + color = 'green'; } else if (item.utilization.rel >= 0.3 && item.utilization.rel <= 0.7) { - colorClass = 'yellow-icon'; + color = 'orange'; } else { - colorClass = 'red-icon'; + color = 'red'; } - icon = getIcon(item.subType); - - icon.options.className = `${colorClass} vehicle-icon`; + icon = getIcon(item.subType, color); console.log(icon.options) diff --git a/client/src/components/VehicleIcons.js b/client/src/components/VehicleIcons.js index ba018d32..78faac11 100644 --- a/client/src/components/VehicleIcons.js +++ b/client/src/components/VehicleIcons.js @@ -1,66 +1,215 @@ import L from 'leaflet'; -import busIconUrl from '../resources/bus_icon.png'; -import trainIconUrl from '../resources/train_icon.png'; -import tramIconUrl from '../resources/tram_icon.png'; -import subwayIconUrl from '../resources/subway_icon.png'; -import ferryIconUrl from '../resources/ferry_icon.png'; -import expressIconUrl from '../resources/express_icon.png'; -import suburbanIconUrl from '../resources/suburban_icon.png'; -const busIcon = L.icon({ - iconUrl: busIconUrl, - iconSize: [40, 40], -}); +import busIconGrayUrl from '../resources/bus_icon_gray.png'; +import busIconGreenUrl from '../resources/bus_icon_green.png'; +import busIconOrangeUrl from '../resources/bus_icon_orange.png'; +import busIconRedUrl from '../resources/bus_icon_red.png'; +import trainIconGrayUrl from '../resources/train_icon_gray.png'; +import trainIconGreenUrl from '../resources/train_icon_green.png'; +import trainIconOrangeUrl from '../resources/train_icon_orange.png'; +import trainIconRedUrl from '../resources/train_icon_red.png'; +import tramIconGrayUrl from '../resources/tram_icon_gray.png'; +import tramIconGreenUrl from '../resources/tram_icon_green.png'; +import tramIconOrangeUrl from '../resources/tram_icon_orange.png'; +import tramIconRedUrl from '../resources/tram_icon_red.png'; +import subwayIconGrayUrl from '../resources/subway_icon_gray.png'; +import subwayIconGreenUrl from '../resources/subway_icon_green.png'; +import subwayIconOrangeUrl from '../resources/subway_icon_orange.png'; +import subwayIconRedUrl from '../resources/subway_icon_red.png'; +import ferryIconGrayUrl from '../resources/ferry_icon_gray.png'; +import ferryIconGreenUrl from '../resources/ferry_icon_green.png'; +import ferryIconOrangeUrl from '../resources/ferry_icon_orange.png'; +import ferryIconRedUrl from '../resources/ferry_icon_red.png'; +import expressIconGrayUrl from '../resources/express_icon_gray.png'; +import expressIconGreenUrl from '../resources/express_icon_green.png'; +import expressIconOrangeUrl from '../resources/express_icon_orange.png'; +import expressIconRedUrl from '../resources/express_icon_red.png'; +import suburbanIconGrayUrl from '../resources/suburban_icon_gray.png'; +import suburbanIconGreenUrl from '../resources/suburban_icon_green.png'; +import suburbanIconOrangeUrl from '../resources/suburban_icon_orange.png'; +import suburbanIconRedUrl from '../resources/suburban_icon_red.png'; -const trainIcon = L.icon({ - iconUrl: trainIconUrl, - iconSize: [25, 25], -}); +// Updated icon function that uses the color parameter +const busIcon = (color) => { + let url; + switch(color) { + case 'gray': + url = busIconGrayUrl; + break; + case 'green': + url = busIconGreenUrl; + break; + case 'orange': + url = busIconOrangeUrl; + break; + case 'red': + url = busIconRedUrl; + break; + } + return L.icon({ + iconUrl: url, + iconSize: [50, 50], + className: "" + }); +}; + +const trainIcon = (color) => { + let url; + switch(color) { + case 'gray': + url = trainIconGrayUrl; + break; + case 'green': + url = trainIconGreenUrl; + break; + case 'orange': + url = trainIconOrangeUrl; + break; + case 'red': + url = trainIconRedUrl; + break; + } + return L.icon({ + iconUrl: url, + iconSize: [50, 50], + className: "" + }); +}; -const tramIcon = L.icon({ - iconUrl: tramIconUrl, - iconSize: [40, 40], -}); +const tramIcon = (color) => { + let url; + switch(color) { + case 'gray': + url = tramIconGrayUrl; + break; + case 'green': + url = tramIconGreenUrl; + break; + case 'orange': + url = tramIconOrangeUrl; + break; + case 'red': + url = tramIconRedUrl; + break; + } + return L.icon({ + iconUrl: url, + iconSize: [50, 50], + className: "" + }); +}; -const subwayIcon = L.icon({ - iconUrl: subwayIconUrl, - iconSize: [40, 40], -}); +const subwayIcon = (color) => { + let url; + switch(color) { + case 'gray': + url = subwayIconGrayUrl; + break; + case 'green': + url = subwayIconGreenUrl; + break; + case 'orange': + url = subwayIconOrangeUrl; + break; + case 'red': + url = subwayIconRedUrl; + break; + } + return L.icon({ + iconUrl: url, + iconSize: [50, 50], + className: "" + }); +}; -const ferryIcon = L.icon({ - iconUrl: ferryIconUrl, - iconSize: [40, 40], -}); +const ferryIcon = (color) => { + let url; + switch(color) { + case 'gray': + url = ferryIconGrayUrl; + break; + case 'green': + url = ferryIconGreenUrl; + break; + case 'orange': + url = ferryIconOrangeUrl; + break; + case 'red': + url = ferryIconRedUrl; + break; + } + return L.icon({ + iconUrl: url, + iconSize: [50, 50], + className: "" + }); +}; -const expressIcon = L.icon({ - iconUrl: expressIconUrl, - iconSize: [40, 40], -}); +const expressIcon = (color) => { + let url; + switch(color) { + case 'gray': + url = expressIconGrayUrl; + break; + case 'green': + url = expressIconGreenUrl; + break; + case 'orange': + url = expressIconOrangeUrl; + break; + case 'red': + url = expressIconRedUrl; + break; + } + return L.icon({ + iconUrl: url, + iconSize: [50, 50], + className: "" + }); +}; -const suburbanIcon = L.icon({ - iconUrl: suburbanIconUrl, - iconSize: [32, 32], -}); +const suburbanIcon = (color) => { + let url; + switch(color) { + case 'gray': + url = suburbanIconGrayUrl; + break; + case 'green': + url = suburbanIconGreenUrl; + break; + case 'orange': + url = suburbanIconOrangeUrl; + break; + case 'red': + url = suburbanIconRedUrl; + break; + } + return L.icon({ + iconUrl: url, + iconSize: [50, 50], + className: "" + }); +}; -export function getIcon(subtype) { +export function getIcon(subtype, color) { switch (subtype) { case "suburban": - return suburbanIcon; + return suburbanIcon(color); case "subway": - return subwayIcon; + return subwayIcon(color); case "tram": - return tramIcon; + return tramIcon(color); case "bus": - return busIcon; + return busIcon(color); case "ferry": - return ferryIcon; + return ferryIcon(color); case "express": - return expressIcon; + return expressIcon(color); case "regional": - return trainIcon; + return trainIcon(color); default: - return busIcon; + return busIcon(color); } }