Add input

2025-09-07 00:41:39 +02:00
parent 1be0affff3
commit 0b90be10f7
8 changed files with 275 additions and 23 deletions
@@ -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>
@@ -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>
@@ -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());

@@ -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>
@@ -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 };
-});
@@ -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
+  }
+);