Pascal/tramtrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add input

Browse Source
This commit is contained in:
Pascal
2025-09-07 00:41:39 +02:00
parent 1be0affff3
commit 0b90be10f7
8 changed files with 275 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bun.lock
+9
View File
@@ -7,6 +7,7 @@
"@tailwindcss/vite": "^4.1.13",
"@vuestic/tailwind": "^0.1.5",
"pinia": "^3.0.3",
"pinia-plugin-persistedstate": "^4.5.0",
"tailwind": "^4.0.0",
"vue": "^3.5.18",
"vue-router": "^4.5.1",
@@ -524,6 +525,8 @@
"deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
"deep-pick-omit": ["deep-pick-omit@1.2.1", "", {}, "sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw=="],
"default-browser": ["default-browser@5.2.1", "", { "dependencies": { "bundle-name": "^4.1.0", "default-browser-id": "^5.0.0" } }, "sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg=="],
"default-browser-id": ["default-browser-id@5.0.0", "", {}, "sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA=="],
@@ -534,8 +537,12 @@
"define-properties": ["define-properties@1.2.1", "", { "dependencies": { "define-data-property": "^1.0.1", "has-property-descriptors": "^1.0.0", "object-keys": "^1.1.1" } }, "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg=="],
"defu": ["defu@6.1.4", "", {}, "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="],
"depd": ["depd@1.1.2", "", {}, "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ=="],
"destr": ["destr@2.0.5", "", {}, "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA=="],
"destroy": ["destroy@1.0.4", "", {}, "sha512-3NdhDuEXnfun/z7x9GOElY49LoqVHoGScmOKwmxhsS8N5Y+Z8KyPPDnaSzqWgYt/ji4mqwfTS34Htrk0zPIXVg=="],
"detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
@@ -1028,6 +1035,8 @@
"pinia": ["pinia@3.0.3", "", { "dependencies": { "@vue/devtools-api": "^7.7.2" }, "peerDependencies": { "typescript": ">=4.4.4", "vue": "^2.7.0 || ^3.5.11" }, "optionalPeers": ["typescript"] }, "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA=="],
"pinia-plugin-persistedstate": ["pinia-plugin-persistedstate@4.5.0", "", { "dependencies": { "deep-pick-omit": "^1.2.1", "defu": "^6.1.4", "destr": "^2.0.5" }, "peerDependencies": { "@nuxt/kit": ">=3.0.0", "@pinia/nuxt": ">=0.10.0", "pinia": ">=3.0.0" }, "optionalPeers": ["@nuxt/kit", "@pinia/nuxt", "pinia"] }, "sha512-QTkP1xJVyCdr2I2p3AKUZM84/e+IS+HktRxKGAIuDzkyaKKV48mQcYkJFVVDuvTxlI5j6X3oZObpqoVB8JnWpw=="],
"pirates": ["pirates@4.0.7", "", {}, "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="],
"possible-typed-array-names": ["possible-typed-array-names@1.1.0", "", {}, "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg=="],
package.json
+1
View File
@@ -20,6 +20,7 @@
"@tailwindcss/vite": "^4.1.13",
"@vuestic/tailwind": "^0.1.5",
"pinia": "^3.0.3",
"pinia-plugin-persistedstate": "^4.5.0",
"tailwind": "^4.0.0",
"vue": "^3.5.18",
"vue-router": "^4.5.1",
src/App.vue
+21 -7
View File
@@ -1,12 +1,26 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { VaButton, VaLayout, VaNavbar } from 'vuestic-ui';
</script>
<template>
<h1>You did it!</h1>
<p>
Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
documentation
</p>
<RouterView />
<VaLayout :top="{ fixed: true, order: 2 }">
<template #top>
<VaNavbar shadowed>
<template #center>
<RouterLink to="/" class="text-2xl font-bold hover:underline">TramTrack</RouterLink>
</template>
<template #right>
<VaButton to="/stats" icon="leaderboard" title="Statistiken" />
</template>
</VaNavbar>
</template>
<template #content>
<main>
<RouterView />
</main>
</template>
</VaLayout>
</template>
<style scoped></style>
src/components/StatsBlock.vue
+33
View File
@@ -0,0 +1,33 @@
<script setup lang="ts">
import { VaIcon, VaProgressCircle } from 'vuestic-ui';
defineProps<{
total: number;
found: number;
name: string;
color: string;
icon: string;
}>();
</script>
<template>
<div class="flex w-fit flex-row gap-2">
<VaProgressCircle
:model-value="(found / total) * 100"
size="large"
:thickness="0.3"
:color="color"
>
<VaIcon :name="icon" />
</VaProgressCircle>
<div class="flex flex-col justify-center">
<p class="text-lg">
{{ found }}
<span class="text-sm">/ {{ total }}</span>
</p>
<p class="text-sm">{{ name }}</p>
</div>
</div>
</template>
<style scoped></style>
src/main.ts
+2 -1
View File
@@ -1,4 +1,5 @@
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import { createApp } from 'vue';
import { createVuestic } from 'vuestic-ui';
@@ -10,7 +11,7 @@ import router from './router';
const app = createApp(App);
app.use(createPinia());
app.use(createPinia().use(piniaPluginPersistedstate));
app.use(router);
app.use(createVuestic());
src/pages/HomeView.vue
+120 -3
View File
@@ -1,10 +1,127 @@
<script setup lang="ts">
import { VaButton } from 'vuestic-ui';
import StatsBlock from '@/components/StatsBlock.vue';
import { getType, useTramStore } from '@/stores/tram.ts';
import { computed, ref } from 'vue';
import {
useForm,
useToast,
VaButton,
VaCard,
VaCardActions,
VaCardContent,
VaCardTitle,
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();
}
</script>
<template>
<h1 class="text-3xl text-red-500">home</h1>
<VaButton icon="home" />
<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="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>
</VaCardContent>
</VaCard>
<VaCard class="md:col-2" stripe-color="success" stripe>
<VaCardTitle>Quick stats</VaCardTitle>
<VaCardContent>
<div class="flex flex-col justify-around sm:flex-row">
<StatsBlock
:total="tramStore.shortStats.totalCount"
:found="tramStore.shortStats.found"
name="Fahrzeuge"
color="success"
icon="train"
/>
<StatsBlock
:total="tramStore.shortStats.tramCount"
:found="tramStore.shortStats.trams"
name="Trams"
color="danger"
icon="tram"
/>
<StatsBlock
:total="tramStore.shortStats.busCount"
:found="tramStore.shortStats.busses"
name="Busse"
color="warning"
icon="directions_bus"
/>
</div>
</VaCardContent>
<VaCardActions>
<VaButton to="/stats" icon="arrow_outward">Mehr Statistiken</VaButton>
</VaCardActions>
</VaCard>
</article>
</template>
<style scoped></style>
src/stores/counter.ts
-12
View File
@@ -1,12 +0,0 @@
import { defineStore } from 'pinia';
import { computed, ref } from 'vue';
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() {
count.value++;
}
return { count, doubleCount, increment };
});
src/stores/tram.ts
+89
View File
@@ -0,0 +1,89 @@
import { defineStore } from 'pinia';
import { computed, reactive } from 'vue';
export const type: [number, number, boolean, string][] = [
[3101, 3143, true, 'GT8N-1 - Bombardier Flexity Classic'],
[3201, 3249, true, 'GT8N-2 - Siemens Avenio'],
[3401, 3435, true, 'GT8N-2 - Siemens Avenio'],
[4001, 4005, false, 'Solobus Mercedes eCitaro O 530 C2'],
[4006, 4020, false, 'Solobus Mercedes eCitaro O 530 C2'],
[4061, 4075, false, 'Solobus Mercedes Citaro O 530 C2'],
[4076, 4090, false, 'Solobus Mercedes Citaro O 530 C2 hybrid'],
[4150, 4151, false, 'Solobus MAN Lion´s City A21 NL 280'],
[4152, 4152, false, 'Solobus Mercedes Citaro O 530 LE C2'],
[4161, 4176, false, 'Solobus Solaris Urbino 12'],
[4487, 4487, false, 'Midibus Solaris Urbino 8.9 LE'],
[4488, 4489, false, 'Midibus Solaris Alpino 8.6'],
[4501, 4515, false, 'Gelenkbus Irizar ieBus 18'],
[4575, 4598, false, "Gelenkbus MAN Lion's City GL A23 NG 320"],
[4601, 4624, false, 'Gelenkbus Mercedes Citaro O 530 G C2 hybrid'],
[4631, 4660, false, "Gelenkbus MAN Lion's City GL A23 NG 320"],
[4661, 4693, false, 'Gelenkbus Mercedes Citaro O 530 G C2'],
[4694, 4695, false, 'Gelenkbus Mercedes Citaro O 530 G C2'],
[4730, 4750, false, "Gelenkbus MAN Lion's City GL A23 NG 320"],
[4771, 4798, false, 'Gelenkbus Mercedes Citaro O 530 G C2 hybrid'],
[4801, 4835, false, 'Gelenkbus Mercedes eCitaro O 530 G C2'],
[4881, 4900, false, 'Gelenkbus Mercedes Citaro O 530 G C2'],
[4901, 4922, false, 'Gelenkbus Mercedes Citaro O 530 G C2 hybrid']
] as const;
const busCount = type.filter((t) => !t[2]).reduce((acc, t) => acc + (t[1] - t[0]) + 1, 0);
const tramCount = type.filter((t) => t[2]).reduce((acc, t) => acc + (t[1] - t[0]) + 1, 0);
const totalCount = busCount + tramCount;
export function getType(id: number | string): null | { id: number; isTram: boolean; type: string } {
const number = Number(id);
const foundType = type.find((t) => number >= t[0] && number <= t[1]);
if (!foundType) {
return null;
}
return {
id: number,
isTram: foundType[2],
type: foundType[3]
};
}
export const useTramStore = defineStore(
'tram',
() => {
const trams = reactive<{
bsag: number[];
}>({
bsag: []
});
function addNumber(id: number | string) {
const foundType = getType(id);
if (!foundType) {
return false;
}
if (!trams.bsag.includes(foundType.id)) {
trams.bsag.push(foundType.id);
}
return true;
}
const shortStats = computed(() => {
const busses = trams.bsag.filter((id) => id > 4000).length;
const found = trams.bsag.length;
return {
totalCount,
busCount,
tramCount,
found,
busses,
trams: found - busses
};
});
return { trams, addNumber, shortStats };
},
{
persist: true
}
);