stacjownik/src/components/DriverView/DriverNotFound.vue

<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>