40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { trams } from '@/data/trams.ts';
|
|
import { getType } from '@/stores/tram.ts';
|
|
import { computed } from 'vue';
|
|
import { VaChip } from 'vuestic-ui';
|
|
|
|
const props = defineProps<{ car: ReturnType<typeof getType> }>();
|
|
|
|
const details = computed(() => (props.car ? trams.find((t) => t.id === props.car!.id) : undefined));
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<p>Lackierung</p>
|
|
<img
|
|
v-if="details?.img"
|
|
class="h-[30px]"
|
|
:src="`${import.meta.env.BASE || '/'}${details?.img}`"
|
|
:alt="car?.type"
|
|
/>
|
|
<span v-else class="h-[30px]"></span>
|
|
<p>Fahrzeug-Nr.</p>
|
|
<p>{{ car?.id }}</p>
|
|
<p>Werbung</p>
|
|
<div v-if="details">
|
|
<p v-for="(ad, i) in details.ads" :key="i">
|
|
{{ ad }}
|
|
<VaChip v-if="details.types && details.types[i]" size="small" to="/abbreviations">{{
|
|
details.types[i]
|
|
}}</VaChip>
|
|
</p>
|
|
</div>
|
|
<p v-else>-</p>
|
|
<p>Baujahr</p>
|
|
<p>{{ details?.year ?? '-' }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|