Add image downloading in the UI

src/assets/scss/app.scss

@@ -15,4 +15,27 @@ html {
 
 body {
     color: $white;
+}
+
+.modal-background {
+    background: rgba($black, 0.6);
+}
+
+.modal-content {
+    border: 1px solid rgba($primary, 0.4);
+    box-shadow: 0 0 30px rgba($black, 0.3);
+}
+
+.modal-card-body {
+    background: rgba($black, 0.7);
+}
+
+.modal-card-head,
+.modal-card-foot {
+    background: rgba($black, 0.9);
+}
+
+
+progress.progress {
+    filter: invert(90%);
 }

src/mlpccg/images.ts

@@ -1,5 +1,15 @@
+import { Database } from "./database";
+
 const imgBaseURL = "https://mcg.zyg.ovh/images/cards/";
 
 export function cardImageURL(cardid: string): string {
   return `${imgBaseURL}${cardid}.webp`;
 }
+
+export async function cardImageSource() {
+  if (!Database) {
+    return "remote";
+  }
+  const count = await Database.images.count();
+  return count > 1900 ? "local" : "remote";
+}

src/views/Settings.vue

@@ -1,36 +1,192 @@
 <template>
   <section class="settings">
-    <TopNav />
+    <TopNav class="top" />
+    <section class="settings-box download">
+      <header>
+        <h1>Storage settings</h1>
+      </header>
+      <div class="rows">
+        <article>
+          <div class="name">
+            Card image source
+          </div>
+          <div class="value">
+            {{ imageSource }}
+          </div>
+          <div class="actions">
+            <b-button
+              class="is-primary"
+              @click="downloadImages"
+              :disabled="cardImageSource == 'local'"
+              >Download images</b-button
+            >
+          </div>
+        </article>
+      </div>
+    </section>
+    <b-modal :active.sync="isDownloading" :can-cancel="false">
+      <div class="modal-card" style="width: auto">
+        <header class="modal-card-head">
+          <p class="modal-card-title">
+            {{ downloadStatus }}
+          </p>
+        </header>
+        <section class="modal-card-body">
+          <b-progress
+            size="is-large"
+            type="is-danger"
+            v-if="downloadProgress"
+            :max="downloadProgress.total"
+            :value="downloadProgress.progress"
+            show-value
+          >
+            {{ downloadProgressString }}
+          </b-progress>
+        </section>
+      </div>
+    </b-modal>
   </section>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import "@/assets/scss/_variables.scss";
+
+.settings {
+  display: grid;
+}
+
+.top {
+  grid-column: 1 / end;
+}
+
+.settings-box {
+  margin: 20px;
+  padding: 20px;
+  background: rgba($white, 0.1);
+  border-radius: 6px;
+
+  header {
+    h1 {
+      font-family: $fantasy;
+      font-size: 17pt;
+    }
+  }
+
+  .rows {
+    display: flex;
+    flex-direction: column;
+    article {
+      margin: 10px 0;
+      font-size: 12pt;
+      display: flex;
+      align-items: center;
+      & > div {
+        margin: 5px;
+      }
+
+      .value {
+        border: 1px solid rgba($black, 0.4);
+        border-radius: 3px;
+        padding: 5px 10px;
+      }
+    }
+  }
+}
+</style>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import TopNav from "@/components/Navigation/TopNav.vue";
 import { TaskRunner } from "@/workers";
+import { cardImageSource } from "@/mlpccg";
 
 @Component({
   components: { TopNav }
 })
 export default class SettingsView extends Vue {
-  private downloadSets() {
+  private cardImageSource!: "local" | "remote";
+  private downloadState!: "starting" | "download" | "extract" | null;
+  private downloadProgress!: { progress: number; total: number } | null;
+
+  private downloadImages() {
+    this.downloadState = "starting";
     const worker = new TaskRunner("downloadCardImages");
     worker.on("dl-progress", progress => {
-      console.log(
+      if (this.downloadState != "download") {
-        `Download progress: ${progress.progress}/${
+        this.downloadState = "download";
-          progress.total
+      }
-        }b (${Math.round((progress.progress * 100) / progress.total)}%)`
+      this.downloadProgress = progress;
-      );
     });
     worker.on("ex-progress", progress => {
-      console.log(
+      if (this.downloadState != "extract") {
-        `Extraction progress: ${progress.progress}/${
+        this.downloadState = "extract";
-          progress.total
+      }
-        }b (${Math.round((progress.progress * 100) / progress.total)}%)`
+      this.downloadProgress = progress;
-      );
     });
+    worker.on("finish", async _ => {
+      this.downloadState = null;
+      this.cardImageSource = await cardImageSource();
+    });
+  }
+
+  private data() {
+    return {
+      cardImageSource: "remote",
+      downloadState: null,
+      downloadProgress: null
+    };
+  }
+
+  private async mounted() {
+    this.cardImageSource = await cardImageSource();
+  }
+
+  private get imageSource() {
+    switch (this.cardImageSource) {
+      case "local":
+        return "Local saved copy";
+      case "remote":
+        return "Remote server";
+    }
+    return "Unknown";
+  }
+
+  private get isDownloading(): boolean {
+    return this.downloadState !== null;
+  }
+
+  private get downloadStatus(): string {
+    switch (this.downloadState) {
+      case "starting":
+        return "Starting download...";
+      case "download":
+        return `Downloading image archive (${Math.round(
+          this.downloadProgress!.total / 10485.76
+        ) / 100} MB)`;
+      case "extract":
+        return `Extracting images`;
+    }
+    return "";
+  }
+
+  private get downloadProgressString(): string {
+    if (!this.downloadProgress) {
+      return "";
+    }
+    let current = "";
+    let total = "";
+    if (this.downloadState == "extract") {
+      current = `${(this.downloadProgress.progress / 2) | 0}`;
+      total = `${(this.downloadProgress.total / 2) | 0}`;
+    } else {
+      current = `${Math.round(this.downloadProgress.progress / 10485.76) /
+        100}`;
+      total = `${Math.round(this.downloadProgress.total / 10485.76) / 100} MB`;
+    }
+    const percent = Math.round(
+      (this.downloadProgress.progress / this.downloadProgress.total) * 100
+    );
+    return `${percent}% (${current}/${total})`;
   }
 }
 </script>