restruct: added driver view components

src/components/DriverView/DriverNotFound.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="driver-not-found">
+        <h2>&olcross; {{ $t('trains.driver-not-found-header') }}</h2>
+
+        <p class="text--grayed">
+            {{ $t('trains.driver-not-found-desc-1') }} <br />
+            {{ $t('trains.driver-not-found-desc-2') }}
+            <router-link to="/journal/timetables">{{ $t('trains.driver-not-found-journal') }} </router-link>!
+        </p>
+
+        <p v-if="props.trainId && otherDriverTrains.length > 0">
+            <i18n-t keypath="trains.driver-not-found-others">
+                <template v-slot:driver>
+                    <b>{{ otherDriverTrains[0].driverName }}</b>
+                </template>
+            </i18n-t>
+        </p>
+
+        <div class="other-driver-trains">
+            <template v-for="(train, i) in otherDriverTrains">
+                <router-link :to="`/driver?trainId=${train.id}`">
+                    {{ train.trainNo }}
+                    | {{ regions.find((r) => r.id == train.region)?.name ?? 'PL1' }}
+                </router-link>
+            </template>
+        </div>
+
+        <div style="margin-top: 1em">
+            <router-link to="/">&lt;&lt; {{ $t('trains.driver-not-found-return') }}</router-link>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+import { regions } from '../../data/options.json';
+
+const mainStore = useMainStore();
+
+const props = defineProps({
+    trainId: {
+        type: String
+    },
+});
+
+const otherDriverTrains = computed(() => {
+    return mainStore.trainList.filter(
+        (train) =>
+            train.driverId == Number(props.trainId?.split('|')[0]) &&
+            (train.timetableData || train.online || train.lastSeen >= Date.now() - 60000)
+    );
+});
+</script>
+
+
+<style lang="scss" scoped>
+.driver-not-found {
+    background-color: var(--clr-view-bg);
+    text-align: center;
+    padding: 1em;
+    border-radius: 0.5em 0.5em;
+
+    p {
+        padding: 0.5em 0;
+    }
+
+    a {
+        text-decoration: underline;
+        color: white;
+    }
+}
+
+.other-driver-trains {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0.5em;
+}
+</style>

src/components/DriverView/DriverTopActions.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="driver-top-actions">
+        <div class="actions-container">
+            <div class="actions actions-left">
+                <button class="a-button btn--filled btn--image" @click="routerReturn">
+                    <img src="/images/icon-back.svg" alt="train icon" />
+                    <span>
+                        {{ t('trains.driver-return-link') }}
+                    </span>
+                </button>
+            </div>
+
+            <div class="actions actions-right">
+                <a class="a-button btn--filled btn--image" :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
+                    target="_blank">
+                    <span class="hidable">
+                        {{ t('trains.driver-srjp-link') }}
+                    </span>
+
+                    <img src="/images/icon-srjp.svg" alt="srjp icon" />
+                </a>
+
+                <router-link :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
+                    class="a-button btn--filled btn--image">
+                    <span class="hidable">
+                        {{ t('trains.driver-journal-link') }}
+                    </span>
+
+                    <img src="/images/icon-train.svg" alt="train icon" />
+                </router-link>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { Train } from '../../typings/common';
+import { PropType } from 'vue';
+
+const router = useRouter();
+const { t } = useI18n();
+
+defineProps({
+    chosenTrain: {
+        type: Object as PropType<Train>,
+        required: true
+    }
+});
+
+function routerReturn() {
+    router.back();
+}
+</script>
+
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+
+
+.actions-container {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 0.5em;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5em;
+}
+
+.actions-container>.actions>.a-button {
+    padding: 0.5em;
+    border-radius: 0.5em 0.5em 0 0;
+}
+
+@include responsive.smallScreen {
+    span.hidable {
+        display: none;
+    }
+}
+</style>

src/components/DriverView/DriverTrainCard.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="driver-train-card">
+        <TrainInfo :train="chosenTrain" :extended="true" />
+
+        <!-- Train action buttons -->
+        <div class="train-stock-actions">
+            <button class="btn btn--action" style="margin: 1em 0" @click="copyStockToClipboard()">
+                <i class="fa-regular fa-copy"></i> {{ i18n.t('trains.stock-copy') }}
+            </button>
+
+            <button class="btn btn--action" style="margin: 1em 0" @click="showNumberPropositions()">
+                <i class="fa-regular fa-lightbulb"></i> {{ i18n.t('trains.number-propositions') }}
+            </button>
+        </div>
+
+        <StockList :trainStockList="chosenTrain.stockList" />
+        <TrainSchedule :train="chosenTrain" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { Train } from '../../typings/common';
+import { useI18n } from 'vue-i18n';
+
+import StockList from '../Global/StockList.vue';
+import TrainSchedule from '../TrainsView/TrainSchedule.vue';
+import TrainInfo from '../TrainsView/TrainInfo.vue';
+
+const i18n = useI18n();
+
+const props = defineProps({
+    chosenTrain: {
+        type: Object as PropType<Train>,
+        required: true
+    }
+});
+
+function copyStockToClipboard() {
+    const stockString = props.chosenTrain.stockList.join(';');
+
+    if (!stockString) {
+        alert(i18n.t('trains.stock-clipboard-failure'));
+        return;
+    }
+
+    navigator.clipboard
+        .writeText(stockString)
+        .then(() => {
+            prompt(i18n.t('trains.stock-clipboard-success'), stockString);
+        })
+        .catch(() => {
+            alert(i18n.t('trains.stock-clipboard-failure'));
+        });
+}
+
+function showNumberPropositions() {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.driver-train-card {
+    padding: 1em;
+    background-color: var(--clr-view-bg);
+    border-radius: 0 0 0.5em 0.5em;
+}
+
+.train-stock-actions {
+    display: flex;
+    gap: 0.5em;
+}
+</style>