Add special cars

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>