mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
108 lines
2.8 KiB
Vue
108 lines
2.8 KiB
Vue
<template>
|
|
<section class="info-icons">
|
|
<img
|
|
v-if="station.generalInfo?.controlType"
|
|
:src="require(`@/assets/icon-${station.generalInfo.controlType}.svg`)"
|
|
:alt="station.generalInfo.controlType"
|
|
:title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
|
|
/>
|
|
|
|
<img
|
|
v-if="station.generalInfo?.SUP"
|
|
:src="require(`@/assets/icon-SUP.svg`)"
|
|
alt="SUP (RASP-UZK)"
|
|
:title="$t('desc.SUP')"
|
|
/>
|
|
|
|
<img
|
|
v-if="station.generalInfo?.signalType"
|
|
:src="require(`@/assets/icon-${station.generalInfo.signalType}.svg`)"
|
|
:alt="station.generalInfo.signalType"
|
|
:title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
|
|
/>
|
|
|
|
<img
|
|
v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
|
|
:src="icons.SBL"
|
|
alt="sbl icon"
|
|
:title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(', ')}`"
|
|
/>
|
|
|
|
<img
|
|
v-if="station.generalInfo && station.generalInfo.routes.twoWay.some(route => route.TWB)"
|
|
:src="icons.TWB"
|
|
alt="TWB icon"
|
|
:title="
|
|
$t('desc.TWB-routes') + station.generalInfo.routes.twoWay.filter(route => route.TWB).map(route => route.name).join(', ')
|
|
"
|
|
/>
|
|
|
|
<img v-if="station.generalInfo?.default" :src="icons.td2" alt="default scenery" :title="$t('desc.default')" />
|
|
|
|
<img
|
|
v-if="station.generalInfo?.nonPublic"
|
|
:src="icons.lock"
|
|
alt="non public scenery"
|
|
:title="$t('desc.non-public')"
|
|
/>
|
|
|
|
<img
|
|
v-if="station.generalInfo?.unavailable"
|
|
:src="icons.unavailable"
|
|
alt="icon unavailable"
|
|
:title="$t('desc.unavailable')"
|
|
/>
|
|
|
|
<img
|
|
v-if="station.generalInfo && station.generalInfo.lines != ''"
|
|
:src="icons.real"
|
|
alt="real scenery"
|
|
:title="`${$t('desc.real')} ${station.generalInfo.lines}`"
|
|
/>
|
|
|
|
<img v-if="!station.generalInfo" :src="icons.unknown" alt="icon-unknown" :title="$t('desc.unknown')" />
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
import Station from '@/scripts/interfaces/Station';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
station: {
|
|
type: Object as () => Station,
|
|
default: {},
|
|
},
|
|
},
|
|
|
|
data: () => ({
|
|
icons: {
|
|
SBL: require('@/assets/icon-SBL.svg'),
|
|
TWB: require('@/assets/icon-2way-block.svg'),
|
|
td2: require('@/assets/icon-td2.svg'),
|
|
lock: require('@/assets/icon-lock.svg'),
|
|
unavailable: require('@/assets/icon-unavailable.svg'),
|
|
unknown: require('@/assets/icon-unknown.svg'),
|
|
|
|
real: require('@/assets/icon-real.svg'),
|
|
},
|
|
}),
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.info-icons {
|
|
padding: 1em 0;
|
|
|
|
img {
|
|
width: 3.5em;
|
|
margin: 0 0.5em;
|
|
|
|
border: 2px solid #4e4e4e;
|
|
border-radius: 0.5em;
|
|
}
|
|
}
|
|
</style>
|