Add export/import

src/pages/StatsView.vue

@@ -5,9 +5,82 @@ 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 { VaCard, VaCardContent, VaCardTitle } from 'vuestic-ui';
+import {
+  useModal,
+  useToast,
+  VaButton,
+  VaCard,
+  VaCardContent,
+  VaCardTitle,
+  type VaFile,
+  VaFileUpload
+} from 'vuestic-ui';
+import { z } from 'zod';
 
+const { init } = useToast();
+const { confirm } = useModal();
 const tramStore = useTramStore();
+
+function download() {
+  const fileType = 'application/json';
+  const blob = new Blob([tramStore.exportData()], { type: fileType });
+
+  const a = document.createElement('a');
+  a.download = `tramtrack-export-${Date.now()}.json`;
+  a.href = URL.createObjectURL(blob);
+  a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
+  a.style.display = 'none';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(a.href), 1500);
+
+  init({
+    title: 'Export erfolgreich',
+    message: 'Datenbestand wurde erfolgreich exportiert!',
+    color: 'success'
+  });
+}
+
+async function upload(file: VaFile) {
+  const data = (await file?.text?.()?.catch(() => '')) || '';
+
+  const error = tramStore.importData(data);
+  if (error) {
+    console.error(error);
+    console.warn(z.prettifyError(error));
+    init({
+      title: 'Import fehlgeschlagen',
+      message: `Die hochgeladene Datei ist im falschen Format!`,
+      color: 'danger'
+    });
+    return;
+  }
+  init({
+    title: 'Import erfolgreich',
+    message: 'Datenbestand wurde erfolgreich importiert!',
+    color: 'success'
+  });
+}
+
+async function reset() {
+  const yes = await confirm({
+    title: 'Bist du dir sicher?',
+    message:
+      'Willst du wirklich deinen Fortschritt zurücksetzen? Dies ist nicht rückgängig zu machen!',
+    okText: 'Ja zurücksetzen!',
+    cancelText: 'Abbrechen',
+    'child:okButton': {
+      color: 'danger'
+    }
+  });
+
+  if (!yes) {
+    return;
+  }
+
+  tramStore.$reset();
+}
 </script>
 
 <template>
@@ -79,6 +152,25 @@ const tramStore = useTramStore();
           <QuickStats />
         </VaCardContent>
       </VaCard>
+      <VaCard stripe-color="warning" stripe>
+        <VaCardTitle>Export/Import</VaCardTitle>
+        <VaCardContent>
+          <div class="flex flex-row items-center justify-center gap-2 md:justify-start">
+            <VaButton color="success" icon="file_upload" @click="download">Export</VaButton>
+            <VaFileUpload
+              color="warning"
+              fileTypes="json"
+              type="single"
+              file-incorrect-message="Falscher Datentyp, .json erforderlich!"
+              upload-button-text="Import"
+              hideFileList
+              @update:model-value="upload"
+              ><VaButton color="warning" icon="file_download">Import</VaButton></VaFileUpload
+            >
+            <VaButton color="danger" icon="delete_forever" @click="reset">Reset</VaButton>
+          </div>
+        </VaCardContent>
+      </VaCard>
     </div>
   </article>
 </template>