From c657b36292410f176b3781d37fdbe4bd6d93018f Mon Sep 17 00:00:00 2001
From: Anton Schegg <anton@schegg.de>
Date: Fri, 18 Oct 2024 09:37:31 +0200
Subject: [PATCH] Import started

---
 src/stores/admin/database.ts          |  4 +-
 src/views/admin/settings/Database.vue | 61 ++++++++++++++++++++-------
 2 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/stores/admin/database.ts b/src/stores/admin/database.ts
index 6f84045..c6a5d54 100644
--- a/src/stores/admin/database.ts
+++ b/src/stores/admin/database.ts
@@ -20,7 +20,7 @@ export const useDatabaseStore = defineStore("database", {
           this.data = result.data;
           this.status = "success";
         })
-        .catch((err) => {
+        .catch(() => {
           this.status = "failed";
         });
     },
@@ -29,7 +29,7 @@ export const useDatabaseStore = defineStore("database", {
         this.status = "working";
         const postData = {secret: secret};
         const response: AxiosResponse = await http.post("/admin/database", postData);
-        this.data = response.data;
+        this.data = response.data.data;
         this.status = "success";
       } catch (ex) {
         this.status = "failed";
diff --git a/src/views/admin/settings/Database.vue b/src/views/admin/settings/Database.vue
index 220f244..3933984 100644
--- a/src/views/admin/settings/Database.vue
+++ b/src/views/admin/settings/Database.vue
@@ -8,19 +8,24 @@
     <template #main>
       <Spinner v-if="status == 'working'" class="mx-auto" />
       <p v-else-if="status == 'failed'">Fehler</p>
-      <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto">
-        <div>
-          <label for="encKey">Encryption Key</label>
-          <input type="password" id="encKey" required v-model="secret" />
-        </div>
-        <div class="flex flex-row justify-end gap-2">
-          <button :disabled="disabled" primary class="!w-fit" @click="exportDatabase">Datenbank exportieren</button>
-<!--          <button :disabled="status == 'working' || encryptionKey == ''" class="!w-fit" @click="importDatabase">Datenbank importieren</button>-->
-          <Spinner v-if="status == 'working'" class="my-auto" />
-          <SuccessCheckmark v-else-if="status == 'success'" />
-          <FailureXMark v-else-if="status == 'failed'" />
-        </div>
-      </form>
+      <div class="flex flex-row justify-start items-center gap-2">
+        <label for="file" class="w-1/4">Zum Importieren Datei auswählen</label>
+        <input type="file" class="grow" id="file" @change="addFile"/>
+      </div>
+      <div class="flex flex-row justify-start items-center gap-2">
+        <label for="encKey" class="w-1/4 text-nowrap">Encryption Key</label>
+        <input type="password" id="encKey" required v-model="secret" />
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <button primary :disabled="uploadDisabled" class="!w-fit" @click="importDatabase">Import</button>
+        <button :disabled="disabled" primary class="!w-fit" @click="exportDatabase">Exportieren</button>
+      </div>
+      <div class="flex flex-row justify-start gap-2">
+        <a class="download-link" v-if="dataUrl !== ''" :href="dataUrl" :download="downloadFilename">Download {{data.length}} Bytes</a>
+        <Spinner v-if="status == 'working'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status == 'success'" />
+        <FailureXMark v-else-if="status == 'failed'" />
+      </div>
     </template>
   </MainTemplate>
 </template>
@@ -40,6 +45,10 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 export default defineComponent({
   data() {
     return {
+      dataUrl: '' as string,
+      dataImport: '' as string,
+      file: null,
+      downloadFilename: '' as string,
       secret: '' as string,
     };
   },
@@ -47,23 +56,43 @@ export default defineComponent({
     ...mapState(useDatabaseStore, ["data", "status", "failureReason"]),
     disabled() : boolean {
       return this.status === 'working' || this.secret === '';
+    },
+    uploadDisabled() : boolean {
+      return this.status === 'working' || this.secret === '' || this.file === null;
     }
   },
   mounted() {
     this.secret = '' as string;
   },
   methods: {
-    ...mapActions(useDatabaseStore, ["export"]),
+    ...mapActions(useDatabaseStore, ["export", "import"]),
+    addFile(e) {
+      this.file = e.target.files[0];
+      console.log(this.file);
+    },
     async exportDatabase() {
       try {
-        const data = await this.export(this.secret);
+        if (this.dataUrl) {
+          this.dataUrl = '';
+        }
+        await this.export(this.secret);
+        this.dataUrl = 'data:application/octet-stream,' + this.data;
+        this.downloadFilename = `${new Date().toISOString().replace(/:/g, '-')}_database_export.enc`;
       }
       catch(ex) {
         console.log(ex);
       }
     },
-    importDatabase() {
+    onChangeFileUpload() {
 
+    },
+    async importDatabase() {
+      try {
+        await this.import(this.secret, this.dataImport);
+      }
+      catch(ex) {
+        console.log(ex);
+      }
     }
   },
 });