🐛 Fix category icon for manual checkins (#3597)

Author: HerrLevin

resources/views/includes/status.blade.php

@@ -293,7 +293,8 @@ class="like {{ auth()->user() && $status->likes->where('user_id', auth()->user()
                                             'start' => $status->checkin->originStopover->station->id,
                                             'destination' => $status->checkin->destinationStopover->station->id,
                                             'departure' => $status->checkin->originStopover->departure_planned->toIso8601String(),
-                                            'idType' => 'trwl'
+                                            'idType' => 'trwl',
+                                            'category' => $status->checkin->trip->category->value,
                                         ]) }}" class="dropdown-item">
                                         <div class="dropdown-icon-suspense">
                                             <i class="fas fa-user-plus" aria-hidden="true"></i>

resources/vue/components/ProductIcon.vue

@@ -1,43 +1,38 @@
-<script>
-export default {
-    name: "ProductIcon",
-    props: {
-        product: {
-            type: String,
-            required: true
-        }
-    },
-    data() {
-        return {
-            iconPaths: {
-                tram: "/img/tram.svg",
-                bus: "/img/bus.svg",
-                subway: "/img/subway.svg",
-                suburban: "/img/suburban.svg",
-            }
-        };
-    },
-    computed: {
-        productExists() {
-            return this.iconPaths.hasOwnProperty(this.$props.product);
-        },
-        fontAwesomeIcon() {
-            if (this.$props.product === 'taxi') {
-                return 'fa-taxi';
-            }
-            if (this.$props.product === 'ferry') {
-                return 'fa-ship';
-            }
-            return 'fa-train';
-        }
-    }
-}
+<script lang="ts" setup>
+defineProps({
+  product: {
+    type: String,
+    default: '',
+    required: true
+  }
+});
+
+const iconForProduct = (product) => {
+  if (['tram', 'bus', 'subway', 'suburban'].includes(product)) {
+    return `/img/${product}.svg`;
+  }
+
+  return null;
+};
+
+const fontAwesomeIcon = (product) => {
+  switch (product) {
+    case 'taxi':
+      return 'fa-taxi';
+    case 'plane':
+      return 'fa-plane';
+    case 'ferry':
+      return 'fa-ship';
+    default:
+      return 'fa-train';
+  }
+};
 </script>
 
 <template>
-    <img v-if="productExists"
-         :alt="this.$props.product"
-         :src="this.iconPaths[this.$props.product]"
-         class="product-icon">
-    <i v-else class="fas" :class="fontAwesomeIcon"></i>
+  <img v-if="iconForProduct(this.product)"
+       :alt="this.product"
+       :src="iconForProduct(this.product)"
+       class="product-icon">
+  <i v-else class="fas" :class="fontAwesomeIcon(this.product)"></i>
 </template>

resources/vue/components/Stationboard.vue

@@ -47,6 +47,7 @@ export default {
         lineName: selectedItem.line.name,
         start: this.useInternalIdentifiers ? this.selectedTrain.stop.id : this.meta.station.ibnr,
         departure: selectedItem.when,
+        category: selectedItem.line.product,
       });
 
       this.pushHistory(data);
@@ -136,7 +137,8 @@ export default {
         this.selectedTrain = {
           tripId: urlParams.get('tripId'),
           line: {
-            name: urlParams.get('lineName')
+            name: urlParams.get('lineName'),
+            product: urlParams.get('category') || null
           },
           stop: {
             id: urlParams.get('start')

resources/vue/components/TripCreation/TripCreationForm.vue

@@ -192,7 +192,8 @@ export default {
               lineName: result.lineName,
               start: result.origin.id,
               departure: this.form.originDeparturePlanned,
-              idType: 'trwl'
+              idType: 'trwl',
+              category: result.category,
             };
 
             window.location.href = `/stationboard?${new URLSearchParams(query).toString()}`;