Show missing trams

src/pages/StatsView.vue

@@ -4,7 +4,8 @@ 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';
+import { idsOf, missingOf } from '@/utils/typeGroup.ts';
+import { ref } from 'vue';
 import {
   useModal,
   useToast,
@@ -12,6 +13,7 @@ import {
   VaCard,
   VaCardContent,
   VaCardTitle,
+  VaCheckbox,
   type VaFile,
   VaFileUpload
 } from 'vuestic-ui';
@@ -21,6 +23,8 @@ const { init } = useToast();
 const { confirm } = useModal();
 const tramStore = useTramStore();
 
+const showMissing = ref(false);
+
 function download() {
   const fileType = 'application/json';
   const blob = new Blob([tramStore.exportData()], { type: fileType });
@@ -85,7 +89,10 @@ async function reset() {
 
 <template>
   <article class="p-4">
-    <h1 class="mb-4 text-3xl">Statistiken</h1>
+    <div class="mb-4 flex flex-row items-center">
+      <h1 class="text-3xl">Statistiken</h1>
+      <VaCheckbox v-model="showMissing" label="Fehlende anzeigen?" left-label class="ml-auto" />
+    </div>
 
     <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
       <VaCard stripe-color="success" stripe>
@@ -93,7 +100,13 @@ async function reset() {
         <VaCardContent>
           <div class="flex flex-col justify-around gap-4">
             <div v-for="(group, i) in groupBy(type, (t) => t[3])" :key="i">
-              <p>{{ idsOf(group.elements) }}:</p>
+              <p>
+                {{
+                  showMissing
+                    ? missingOf(group.elements, tramStore.trams.bsag)
+                    : idsOf(group.elements)
+                }}:
+              </p>
               <StatsBlock
                 :total="group.elements.reduce((acc, t) => acc + (t[1] - t[0]) + 1, 0)"
                 :found="