From e98570274b027870b0d1a7040e3f1f4a9d2cc4b2 Mon Sep 17 00:00:00 2001
From: Christoffer Lybekk <christoffer@lybekk.tech>
Date: Tue, 21 Jul 2020 19:18:47 +0200
Subject: [PATCH] Compaction now blocks user interaction

---
 src/components/app/DatabaseCompaction.vue  | 77 +++++++++++++---------
 src/components/app/OverlayDisruptive.vue   | 56 ++++++++++++++++
 src/components/settings/LocalDatabase.vue  | 32 +++------
 src/components/settings/RemoteDatabase.vue |  2 +-
 4 files changed, 110 insertions(+), 57 deletions(-)
 create mode 100644 src/components/app/OverlayDisruptive.vue

diff --git a/src/components/app/DatabaseCompaction.vue b/src/components/app/DatabaseCompaction.vue
index a534c69..06023eb 100644
--- a/src/components/app/DatabaseCompaction.vue
+++ b/src/components/app/DatabaseCompaction.vue
@@ -1,36 +1,48 @@
 <template>
-  <v-list-item
-    :disabled="compactingDone || compactInProgress"
-    @click="compactDB"
-  >
-    <v-list-item-icon>
-      <v-icon>mdi-database-refresh</v-icon>
-    </v-list-item-icon>
-    <v-list-item-content>
-      <v-list-item-title>
-        Compact database
-        <v-progress-linear
-          v-if="compactInProgress"
-          color="info"
-          buffer-value="0"
-          stream
-        />
-      </v-list-item-title>
-    </v-list-item-content>
-    <v-list-item-icon>
-      <v-icon
-        v-if="compactingDone"
-        color="success"
-      >
-        mdi-check
-      </v-icon>
-    </v-list-item-icon>
-  </v-list-item>
+  <div>
+    <OverlayDisruptive
+      :title="'Compaction in progress'"
+      :message="'Keep the browser open while compaction is in progress to avoid damage to the database. Compaction may take a while on large databases'"
+      :show-overlay="compactInProgress"
+    />
+    <v-list-item
+      :disabled="compactingDone || compactInProgress"
+      @click="compactDB"
+    >
+      <v-list-item-icon>
+        <v-icon>mdi-database-refresh</v-icon>
+      </v-list-item-icon>
+      <v-list-item-content>
+        <v-list-item-title>
+          Compact database
+          <v-progress-linear
+            v-if="compactInProgress"
+            color="info"
+            buffer-value="0"
+            stream
+          />
+        </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-icon>
+        <v-icon
+          v-if="compactingDone"
+          color="success"
+        >
+          mdi-check
+        </v-icon>
+      </v-list-item-icon>
+    </v-list-item>
+  </div>
 </template>
 
 <script>
+import OverlayDisruptive from "@/components/app/OverlayDisruptive.vue";
+
 export default {
   name: "DatabaseCompaction",
+  components: {
+    OverlayDisruptive
+  },
   props: {
     whatdb: {
       type: String,
@@ -50,15 +62,16 @@ export default {
         if (this.whatdb == "remoteDB") {
           result = await window.remoteDB.compact();
         } else {
-          this.$store.dispatch("infoBridge", {
-            color: "info",
-            text:
-              "Local compaction may take a while. Feel free to get things done. Just don't close the browser."
-          });
           result = await window.db.compact();
         }
         if (result.ok) {
           this.compactingDone = true;
+        } else {
+          this.$store.dispatch("infoBridge", {
+            color: "error",
+            text:
+              JSON.stringify(result)
+          });
         }
         this.compactInProgress = false;
       } catch (error) {
diff --git a/src/components/app/OverlayDisruptive.vue b/src/components/app/OverlayDisruptive.vue
new file mode 100644
index 0000000..f6543bb
--- /dev/null
+++ b/src/components/app/OverlayDisruptive.vue
@@ -0,0 +1,56 @@
+<template>
+  <v-overlay
+    :value="showOverlay"
+    color="warning"
+    :z-index="9000"
+    :opacity="0.2"
+  >
+    <v-alert
+      color="primary"
+      dark
+      :icon="false"
+      border="left"
+      elevation="2"
+      prominent
+    >
+      <template v-slot:prepend>
+        <v-avatar
+          class="ma-3"
+          size="125"
+          tile
+        >
+          <v-progress-circular
+            color="warning"
+            indeterminate
+            size="64"
+          />
+        </v-avatar>
+      </template>
+      <h3
+        class="headline"
+        v-text="title"
+      />
+      <div v-text="message" />
+    </v-alert>
+  </v-overlay>
+</template>
+
+<script>
+export default {
+    name: 'OverlayDisruptive',
+    props: {
+        showOverlay: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        message: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/settings/LocalDatabase.vue b/src/components/settings/LocalDatabase.vue
index 5e1edcf..c39a8d1 100644
--- a/src/components/settings/LocalDatabase.vue
+++ b/src/components/settings/LocalDatabase.vue
@@ -1,28 +1,10 @@
 <template>
   <v-card-text>
-    <v-overlay
-      :value="destroyInProgress"
-      color="warning"
-    >
-      <v-card>
-        <v-card-text>
-          <v-row>
-            <v-col>Destroying local database. This may take a while if it's a large database.</v-col>
-          </v-row>
-          <v-row>
-            <v-col>
-              <div class="text-center">
-                <v-progress-circular
-                  color="error"
-                  indeterminate
-                  size="64"
-                />
-              </div>
-            </v-col>
-          </v-row>
-        </v-card-text>
-      </v-card>
-    </v-overlay>
+    <OverlayDisruptive
+      :title="'Destroying local database'"
+      :message="'This may take a while on a large database.'"
+      :show-overlay="destroyInProgress"
+    />
     <v-list>
       <v-dialog max-width="500">
         <template v-slot:activator="{ on }">
@@ -107,12 +89,14 @@
 <script>
 import DatabaseCompaction from "@/components/app/DatabaseCompaction.vue";
 import LocalDatabaseImport from "@/components/settings/LocalDatabaseImport.vue";
+import OverlayDisruptive from "@/components/app/OverlayDisruptive.vue";
 
 export default {
   name: "Settingslocaldb",
   components: {
     DatabaseCompaction,
-    LocalDatabaseImport
+    LocalDatabaseImport,
+    OverlayDisruptive
   },
   data: () => ({
     backupPreparing: false,
diff --git a/src/components/settings/RemoteDatabase.vue b/src/components/settings/RemoteDatabase.vue
index b98eeca..4e979dd 100644
--- a/src/components/settings/RemoteDatabase.vue
+++ b/src/components/settings/RemoteDatabase.vue
@@ -13,7 +13,7 @@
             <p
               v-for="(tip,i) in remoteTips"
               :key="i"
-              ,v-html="tip"
+              v-html="tip"
             />
           </v-card-text>
         </v-card>