Single status

Author: HerrLevin

app/Http/Controllers/FrontendStatusController.php

@@ -62,6 +62,12 @@ public function statusesByEvent(string $slug): Renderable {
     }
 
     public function getStatus($statusId): Renderable {
+        if (\auth()->user()?->hasRole('open-beta')) {
+            return view('vue-status', [
+                'statusId' => $statusId,
+            ]);
+        }
+
         $status = StatusBackend::getStatus($statusId);
 
         try {

resources/js/app.js

@@ -25,6 +25,7 @@ import StatsDashboard from "../vue/components/Stats/StatsDashboard.vue";
 import Request from "../vue/components/Events/Request.vue";
 import ApiAlerts from "../vue/components/ApiAlerts.vue";
 import Dashboard from "../vue/views/Dashboard.vue";
+import SingleStatus from "../vue/views/SingleStatus.vue";
 
 window.notyf = new Notyf({
     duration: 5000,
@@ -144,6 +145,7 @@ document.addEventListener("DOMContentLoaded", function () {
         contentApp.component("StatsDashboard", StatsDashboard);
         contentApp.component("Webhooks", WebhookSettings);
         contentApp.component("TripCreationForm", TripCreationForm);
+        contentApp.component("SingleStatus", SingleStatus);
         contentApp.use(i18nVue, i18nOptions);
         contentApp.use(pinia);
         contentApp.mount("#vue-content");

resources/views/vue-status.blade.php

@@ -0,0 +1,11 @@
+@extends('layouts.app')
+
+@section('title', __('status.ogp-title', ['name' => '']))
+
+@section('content')
+    <div class="container">
+        <div id="vue-content">
+            <single-status></single-status>
+        </div>
+    </div>
+@endsection

resources/vue/components/Status/Partials/DestinationRow.vue

@@ -26,7 +26,8 @@ const arrival = getArrivalAttribute(props.status);
         {{ arrival.time?.toLocaleString(DateTime.TIME_SIMPLE) }}
       </span>
     </span>
-    <a href="#" class="text-trwl clearfix"><!-- todo: link to destination -->
+    <a :href="`/stationboard?stationId=${status.train.destination.id}&stationName=${status.train.destination.name}`"
+       class="text-trwl clearfix">
       {{ status.train.destination.name }}
     </a>
   </li>

resources/vue/components/Status/Partials/OriginRow.vue

@@ -34,7 +34,8 @@ const duration = getArrivalForStatus(props.status).dateTime.diff(getDepartureFor
         {{ arrival.time?.toLocaleString(DateTime.TIME_SIMPLE) }}
       </span>
     </span>
-    <a href="#" class="text-trwl clearfix"><!-- todo: link to origin -->
+    <a :href="`/stationboard?stationId=${status.train.origin.id}&${status.train.origin.name}`"
+       class="text-trwl clearfix">
       {{ status.train.origin.name }}
     </a>
     <p class="train-status text-muted m-0">

resources/vue/views/SingleStatus.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import {ref} from "vue";
+import {Api, StatusResource, UserAuthResource} from "../../types/Api.gen";
+import StatusCard from "../components/Status/StatusCard.vue";
+import {trans} from "laravel-vue-i18n";
+import {getDepartureForStatus} from "../helpers/DateTimeHelper";
+import {DateTime} from "luxon";
+
+const loading = ref(true);
+const status = ref<StatusResource | null>(null);
+const user = ref<UserAuthResource | null>(null);
+const pageError = ref<string | null>(null);
+
+const api = new Api({baseUrl: window.location.origin + '/api/v1'});
+
+function fetchStatus() {
+  const statusId = window.location.pathname.split('/').pop();
+  if (!statusId) {
+    console.error('Status ID not found in URL');
+    return;
+  }
+
+  api.status.getSingleStatus(parseInt(statusId)).then((response) => {
+    response.json().then((data) => {
+      loading.value = false;
+      status.value = data.data;
+    });
+  }).catch((error) => {
+    loading.value = false;
+    if (error.status === 404) {
+      pageError.value = trans('error.404');
+    } else if (error.status === 403) {
+      pageError.value = trans('error.403');
+    }
+    console.error('Error fetching status:', error);
+  });
+}
+
+function fetchUser() {
+  api.auth.getAuthenticatedUser().then((response) => {
+    response.json().then((data) => {
+      user.value = data.data;
+    });
+  }).catch((error) => {
+    console.error('Error fetching user:', error);
+  });
+}
+
+fetchStatus();
+fetchUser();
+</script>
+
+<template>
+  <div class="row justify-content-center">
+    <div class="col-md-8 col-lg-7">
+      <div v-if="loading">
+        <p class="text-center mt-5">
+          <i class="fas fa-spinner fa-spin"></i> Loading status...
+        </p>
+      </div>
+      <template v-else-if="status">
+        <h2 class="fs-5">{{ getDepartureForStatus(status).toLocaleString(DateTime.DATE_HUGE) }}</h2>
+        <StatusCard :status :show-map="true" :authenticated-user="user"/>
+      </template>
+      <h2 v-if="pageError">{{ pageError }} :(</h2>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>