holy fix

ivozilkenat · Apr 6, 2024 · 2b3e45d · 2b3e45d
1 parent afcf81e
commit 2b3e45d
Show file tree

Hide file tree

Showing 3 changed files with 200 additions and 52 deletions.
diff --git a/client/src/components/Banner.js b/client/src/components/Banner.js
@@ -7,6 +7,7 @@ function Banner() {
   <div className="brand">Wischen & Mischen</div>
   <div className="spacer"></div> {/* This will take up the unused space */}
   <div className="nav-items">
+  <div className="nav-item"><a href="/docs" target="_blank">Docs</a></div>
     <div className="nav-item"><a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" target="_blank">Home</a></div>
     <div className="nav-item"><a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" target="_blank">Data Solutions</a></div>
     <div className="nav-item"><a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" target="_blank">About</a></div>

diff --git 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
@@ -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);
   }
 }