128 lines
3.8 KiB
Vue
128 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import CarDetail from '@/components/CarDetail.vue';
|
|
import QuickStats from '@/components/QuickStats.vue';
|
|
import { getType, useTramStore } from '@/stores/tram.ts';
|
|
import { computed, ref } from 'vue';
|
|
import {
|
|
useForm,
|
|
useToast,
|
|
VaButton,
|
|
VaCard,
|
|
VaCardActions,
|
|
VaCardContent,
|
|
VaCardTitle,
|
|
VaDivider,
|
|
VaForm,
|
|
VaIcon,
|
|
VaInput
|
|
} from 'vuestic-ui';
|
|
|
|
const { init } = useToast();
|
|
const tramStore = useTramStore();
|
|
|
|
const number = ref<number>();
|
|
const { isValid, validate, resetValidation } = useForm('form');
|
|
|
|
const enteredType = computed(() => (number.value ? getType(number.value) : null));
|
|
const alreadySeen = computed(() =>
|
|
number.value ? tramStore.trams.bsag.includes(number.value) : false
|
|
);
|
|
|
|
function add() {
|
|
validate();
|
|
if (!isValid.value || !number.value) {
|
|
return;
|
|
}
|
|
|
|
const success = tramStore.addNumber(number.value);
|
|
|
|
if (success) {
|
|
init({
|
|
title: 'Hinzufügen erfolgreich!',
|
|
message: 'Das Fahrzeug wurde zu deiner Historie hinzugefügt!',
|
|
color: 'success'
|
|
});
|
|
} else {
|
|
init({
|
|
title: 'Hinzufügen fehlgeschlagen',
|
|
message: 'Der Fahrzeugtyp konnte nicht gefunden werden!',
|
|
color: 'danger'
|
|
});
|
|
}
|
|
|
|
number.value = undefined;
|
|
resetValidation();
|
|
}
|
|
|
|
async function share() {
|
|
const text = `Ich habe bei TramTrack schon ${tramStore.shortStats.found} BSAG Fahrzeuge gesehen, davon ${tramStore.shortStats.trams} Trams und ${tramStore.shortStats.busses} Busse!${tramStore.shortStats.specials > 0 ? ` Besondere Fahrzeuge habe ich schon ${tramStore.shortStats.specials} gesehen!` : ''}
|
|
|
|
Sammle auch du Fahrzeuge auf ${window.location.href}`;
|
|
const clipboardItem = new ClipboardItem({
|
|
'text/plain': text
|
|
});
|
|
await navigator.clipboard.write([clipboardItem]);
|
|
|
|
init({
|
|
title: 'Statistik teilen',
|
|
message: 'Der Text wurde in deine Zwischenablage kopiert!',
|
|
color: 'success',
|
|
duration: 2000
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<article class="grid grid-cols-1 gap-4 p-4 md:grid-cols-3">
|
|
<VaCard class="md:col-2">
|
|
<VaCardTitle>Neues Fahrzeug gefunden?</VaCardTitle>
|
|
<VaCardContent>
|
|
<VaForm ref="form" class="mb-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
|
<VaInput
|
|
v-model="number"
|
|
class="text-xl"
|
|
type="number"
|
|
inputmode="numeric"
|
|
size="large"
|
|
label="Fahrzeugnummer"
|
|
placeholder="1234"
|
|
max-length="4"
|
|
:messages="enteredType ? enteredType.type : 'Tippe die Fahrzeugnummer ein...'"
|
|
:rules="[
|
|
(val: string | number) =>
|
|
!val ||
|
|
(val && Number.isInteger(val) && (val as number) <= 9999) ||
|
|
'Fahrzeugnummern sind nur 4 Ziffern lang!',
|
|
() => !!enteredType || 'Diese Fahrzeugnummer ist nicht bekannt.',
|
|
() => !alreadySeen || 'Dieses Fahrzeug hast du bereits gesehen!'
|
|
]"
|
|
><template #prependInner>
|
|
<VaIcon
|
|
:name="enteredType ? (enteredType.isTram ? 'tram' : 'directions_bus') : 'train'"
|
|
color="secondary" /></template
|
|
></VaInput>
|
|
|
|
<VaButton class="my-auto" :disabled="!isValid" color="success" @click="add"
|
|
>Gesehen</VaButton
|
|
>
|
|
</VaForm>
|
|
<VaDivider />
|
|
<CarDetail :car="enteredType" />
|
|
</VaCardContent>
|
|
</VaCard>
|
|
|
|
<VaCard class="md:col-2" stripe-color="success" stripe>
|
|
<VaCardTitle>Quick stats</VaCardTitle>
|
|
<VaCardContent>
|
|
<QuickStats />
|
|
</VaCardContent>
|
|
<VaCardActions>
|
|
<VaButton to="/stats" icon="arrow_outward">Mehr Statistiken</VaButton>
|
|
<VaButton color="info" icon="share" @click="share">Statistiken teilen</VaButton>
|
|
</VaCardActions>
|
|
</VaCard>
|
|
</article>
|
|
</template>
|
|
|
|
<style scoped></style>
|