Add input

bun.lock

@@ -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

@@ -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

@@ -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>
+  <VaLayout :top="{ fixed: true, order: 2 }">
-  <p>
+    <template #top>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
+      <VaNavbar shadowed>
-    documentation
+        <template #center>
-  </p>
+          <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

@@ -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

@@ -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

@@ -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>
+  <article class="grid grid-cols-1 gap-4 p-4 md:grid-cols-3">
-  <VaButton icon="home" />
+    <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

@@ -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

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