mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-09 00:00:59 +00:00
131 lines
3.2 KiB
Vue
131 lines
3.2 KiB
Vue
<template>
|
|
<section class="info-icons-section">
|
|
<div class="icons-box">
|
|
<span v-if="!station || !station.generalInfo">
|
|
<img
|
|
class="icon-info"
|
|
src="/images/icon-unknown.svg"
|
|
alt="icon-unknown"
|
|
:title="$t('sceneries.info.unknown')"
|
|
/>
|
|
</span>
|
|
|
|
<span
|
|
v-if="station?.generalInfo && station?.generalInfo.reqLevel >= 0"
|
|
class="scenery-icon icon-info level"
|
|
:style="calculateExpStyles(station?.generalInfo.reqLevel)"
|
|
>
|
|
{{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
|
|
</span>
|
|
|
|
<img
|
|
v-if="station?.generalInfo?.availability == 'nonPublic'"
|
|
class="icon-info"
|
|
src="/images/icon-lock.svg"
|
|
alt="Non-public scenery"
|
|
:title="$t('sceneries.info.non-public')"
|
|
/>
|
|
|
|
<img
|
|
v-if="station?.generalInfo?.availability == 'unavailable'"
|
|
class="icon-info"
|
|
src="/images/icon-unavailable.svg"
|
|
alt="Unavailable scenery"
|
|
:title="$t('sceneries.info.unavailable')"
|
|
/>
|
|
|
|
<img
|
|
v-if="station?.generalInfo?.availability == 'abandoned'"
|
|
class="icon-info"
|
|
src="/images/icon-abandoned.svg"
|
|
alt="Abandoned scenery"
|
|
:title="$t('sceneries.info.abandoned')"
|
|
/>
|
|
|
|
<span
|
|
v-if="station?.generalInfo"
|
|
class="scenery-icon icon-info"
|
|
:class="station?.generalInfo.controlType.replace('+', '-')"
|
|
:title="
|
|
$t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
|
|
"
|
|
>
|
|
{{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
|
|
</span>
|
|
|
|
<img
|
|
v-if="station?.generalInfo?.signalType"
|
|
class="icon-info"
|
|
:src="`/images/icon-${station.generalInfo.signalType}.svg`"
|
|
:alt="station.generalInfo.signalType"
|
|
:title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
|
|
/>
|
|
|
|
<img
|
|
v-if="station?.generalInfo?.lines"
|
|
class="icon-info"
|
|
src="/images/icon-real.svg"
|
|
alt="real scenery"
|
|
:title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
|
|
/>
|
|
|
|
<img
|
|
v-if="station?.generalInfo?.SUP"
|
|
class="icon-info"
|
|
src="/images/icon-SUP.svg"
|
|
alt="SUP (RASP-UZK)"
|
|
:title="$t('sceneries.info.SUP')"
|
|
/>
|
|
|
|
<img
|
|
v-if="station?.generalInfo?.ASDEK"
|
|
class="icon-info"
|
|
src="/images/icon-ASDEK.svg"
|
|
alt="dSAT ASDEK"
|
|
:title="$t('sceneries.info.ASDEK')"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { PropType } from 'vue';
|
|
import { Station } from '../../../typings/common';
|
|
import { calculateExpStyles } from '../../../composables/badge';
|
|
|
|
defineProps({
|
|
station: {
|
|
type: Object as PropType<Station>
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use '../../../styles/icons';
|
|
|
|
.icons-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
|
|
margin: 0.5em;
|
|
}
|
|
|
|
.icon-info {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
width: 3em;
|
|
height: 3em;
|
|
margin: 0.25em;
|
|
|
|
border: 2px solid #4e4e4e;
|
|
border-radius: 0.5em;
|
|
|
|
&.level {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
</style>
|