Add special cars

src/pages/HomeView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import CarDetail from '@/components/CarDetail.vue';
-import StatsBlock from '@/components/StatsBlock.vue';
+import QuickStats from '@/components/QuickStats.vue';
 import { getType, useTramStore } from '@/stores/tram.ts';
 import { computed, ref } from 'vue';
 import {
@@ -97,29 +97,7 @@ function add() {
     <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>
+        <QuickStats />
       </VaCardContent>
       <VaCardActions>
         <VaButton to="/stats" icon="arrow_outward">Mehr Statistiken</VaButton>

src/pages/SpecialView.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import SpecialCar from '@/components/SpecialCar.vue';
+import SpecialCarHead from '@/components/SpecialCarHead.vue';
+import { specialCars } from '@/data/specials.ts';
+import { VaCard, VaCardContent, VaCardTitle } from 'vuestic-ui';
+</script>
+
+<template>
+  <article>
+    <h1 class="m-4 mb-6 text-3xl">Besondere Fahrzeuge</h1>
+
+    <div class="grid grid-cols-1 gap-4 p-4 pt-0 md:grid-cols-2">
+      <VaCard>
+        <VaCardTitle>Betriebsaufsicht/Unfallhilfe</VaCardTitle>
+        <VaCardContent>
+          <div class="flex flex-col gap-2">
+            <SpecialCarHead />
+            <SpecialCar v-for="car in specialCars.crash" :key="car[0]" :car="car" />
+          </div>
+        </VaCardContent>
+      </VaCard>
+      <VaCard>
+        <VaCardTitle>Fahrzeuge Instandhaltung Bahn-Infrastruktur</VaCardTitle>
+        <VaCardContent>
+          <div class="flex flex-col gap-2">
+            <SpecialCarHead />
+            <SpecialCar v-for="car in specialCars.work" :key="car[0]" :car="car" />
+          </div>
+        </VaCardContent>
+      </VaCard>
+      <VaCard>
+        <VaCardTitle>Hilfsfahrzeuge in und für Werkstätten</VaCardTitle>
+        <VaCardContent>
+          <div class="flex flex-col gap-2">
+            <SpecialCarHead />
+            <SpecialCar v-for="car in specialCars.help" :key="car[0]" :car="car" />
+          </div>
+        </VaCardContent>
+      </VaCard>
+    </div>
+  </article>
+</template>
+
+<style scoped></style>

src/pages/StatsView.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import QuickStats from '@/components/QuickStats.vue';
 import StatsBlock from '@/components/StatsBlock.vue';
+import { specialCars } from '@/data/specials.ts';
 import { type, useTramStore } from '@/stores/tram.ts';
 import { groupBy } from '@/utils/array.ts';
 import { idsOf } from '@/utils/typeGroup.ts';
@@ -34,32 +36,47 @@ const tramStore = useTramStore();
           </div>
         </VaCardContent>
       </VaCard>
+      <VaCard stripe-color="success" stripe>
+        <VaCardTitle>Besondere Fahrzeuge</VaCardTitle>
+        <VaCardContent>
+          <div class="flex flex-col justify-around gap-4">
+            <StatsBlock
+              :total="specialCars.crash.length"
+              :found="
+                tramStore.specials.bsag.filter((id) => specialCars.crash.some((t) => id === t[0]))
+                  .length
+              "
+              icon="car_crash"
+              color="info"
+              name="Betriebsaufsicht/Unfallhilfe"
+            />
+            <StatsBlock
+              :total="specialCars.work.length"
+              :found="
+                tramStore.specials.bsag.filter((id) => specialCars.work.some((t) => id === t[0]))
+                  .length
+              "
+              icon="edit_road"
+              color="info"
+              name="Fahrzeuge Instandhaltung Bahn-Infrastruktur"
+            />
+            <StatsBlock
+              :total="specialCars.help.length"
+              :found="
+                tramStore.specials.bsag.filter((id) => specialCars.help.some((t) => id === t[0]))
+                  .length
+              "
+              icon="handyman"
+              color="info"
+              name="Hilfsfahrzeuge in und für Werkstätten"
+            />
+          </div>
+        </VaCardContent>
+      </VaCard>
       <VaCard class="mb-auto" 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>
+          <QuickStats />
         </VaCardContent>
       </VaCard>
     </div>