Add input

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