Adapt vue stationboard to new id based endpoint

Author: HerrLevin

resources/views/stationboard.blade.php

@@ -7,7 +7,11 @@
         <div class="row justify-content-center">
             <div class="col-md-8 col-lg-7" id="station-board-new">
                 @if(auth()->user()->hasRole('open-beta'))
-                    <Stationboard @isset($station) station="{{$station->name}}" @endisset></Stationboard>
+                    <Stationboard
+                        @isset($station)
+                            station="{{$station->name}}"
+                            station-id="{{$station->id}}"
+                        @endisset></Stationboard>
                 @else
                     @include('includes.station-autocomplete')
                     <div id="timepicker-wrapper">

resources/vue/components/Stationboard.vue

@@ -15,6 +15,11 @@ export default {
             type: String,
             required: true,
             default: "Karlsruhe Hbf"
+        },
+        stationId: {
+            type: Number,
+            required: true,
+            default: 0
         }
     },
     data() {
@@ -27,7 +32,8 @@ export default {
             selectedTrain: null,
             selectedDestination: null,
             loading: false,
-            stationString: null,
+            stationName: null,
+            trwlStationId: null
         };
     },
     methods: {
@@ -39,7 +45,8 @@ export default {
             this.$refs.modal.show();
         },
         updateStation(station) {
-            this.stationString = station.name;
+            this.stationName   = station.name;
+            this.trwlStationId = station.id;
             this.data          = [];
             this.fetchData();
         },
@@ -69,10 +76,9 @@ export default {
                 time = this.fetchTime.minus({minutes: 5}).toString();
             }
 
-            let query      = this.stationString.replace(/%2F/, " ").replace(/\//, " ");
             let travelType = this.travelType ? this.travelType : "";
 
-            fetch(`/api/v1/trains/station/${query}/departures?when=${time}&travelType=${travelType}`) //TODO: change this to the new endpoint "/station/{id}/departures"
+            fetch(`/api/v1/station/${this.trwlStationId}/departures?when=${time}&travelType=${travelType}`)
                 .then((response) => {
                     this.loading = false;
                     this.now     = DateTime.now();
@@ -105,7 +111,11 @@ export default {
     },
     mounted() {
         this.fetchTime     = DateTime.now().setZone("UTC");
-        this.stationString = this.$props.station;
+
+        // These are needed for the communication with blade templates
+        this.stationName   = this.$props.station;
+        this.trwlStationId = this.$props.stationId;
+
         this.fetchData();
     },
     computed: {
@@ -123,7 +133,7 @@ export default {
         v-on:update:time="updateTime"
         v-on:update:station="updateStation"
         v-on:update:travel-type="updateTravelType"
-        :station="{name: stationString}"
+        :station="{name: stationName}"
         :time="now"
     />
     <div v-if="loading" style="max-width: 200px;" class="spinner-grow text-trwl mx-auto p-2" role="status">