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="

src/utils/typeGroup.ts

@@ -7,3 +7,23 @@ export function idsOf(elements: CarType[]): string {
 
   return elements.map((t) => (t[0] === t[1] ? t[0] : `${t[0]}-${t[1]}`)).join(', ');
 }
+
+export function missingOf(elements: CarType[], found: number[]): string {
+  if (elements.length <= 0) {
+    return '';
+  }
+  const cars = elements.flatMap((t) =>
+    t[0] === t[1] ? t[0] : new Array(t[1] - t[0] + 1).fill(t[0]).map((o, i) => Number(o + i))
+  );
+  const missingElements = cars.filter((e) => !found.includes(e));
+
+  if (missingElements.length > 8) {
+    return 'Es fehlen mehr als 8';
+  }
+
+  if (missingElements.length <= 0) {
+    return 'Alle gefunden';
+  }
+
+  return missingElements.join(', ');
+}