From 23820bc9dc4b4223b5799cd56fa3b20a38489744 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Wed, 6 Sep 2023 18:44:19 +0000
Subject: [PATCH] open door progress + fail

---
 ui/src/App.vue                                | 26 ++++++++++++++-----
 ui/src/components/CalendarDoor.vue            | 15 ++++++++---
 .../{ImageModal.vue => MultiModal.vue}        | 21 ++++++++++++---
 ui/src/plugins/advent22.ts                    | 20 +++++++++-----
 4 files changed, 62 insertions(+), 20 deletions(-)
 rename ui/src/components/{ImageModal.vue => MultiModal.vue} (56%)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index c5410ca..9c1efab 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <LoginModal ref="login_modal" />
-    <ImageModal ref="image_modal" />
+    <MultiModal ref="multi_modal" />
 
     <div class="section">
       <h1 class="title has-text-centered is-uppercase">
@@ -11,7 +11,8 @@
 
       <DoorMapEditor />
 
-      <CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" @openDoor="open_calendar_door" />
+      <CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" @click="click_calendar_door"
+        @openDoor="open_calendar_door" @abortDoor="abort_calendar_door" />
     </div>
 
     <div class="section">
@@ -23,19 +24,20 @@
 </template>
 
 <script lang="ts">
+import { AxiosError } from "axios";
 import { Options, Vue } from "vue-class-component";
 
 import CalendarDoor from "./components/CalendarDoor.vue";
 import DoorMapEditor from "./components/DoorMapEditor.vue";
-import ImageModal from "./components/ImageModal.vue";
 import LoginModal from "./components/LoginModal.vue";
+import MultiModal from "./components/MultiModal.vue";
 
 @Options({
   components: {
     CalendarDoor,
     DoorMapEditor,
-    ImageModal,
     LoginModal,
+    MultiModal,
   },
 })
 export default class extends Vue {
@@ -44,7 +46,7 @@ export default class extends Vue {
 
   declare $refs: {
     login_modal: LoginModal;
-    image_modal: ImageModal;
+    multi_modal: MultiModal;
   };
 
   public mounted() {
@@ -60,8 +62,20 @@ export default class extends Vue {
     );
   }
 
+  public click_calendar_door() {
+    this.$refs.multi_modal.show_progress();
+  }
+
   public open_calendar_door(image_src: string) {
-    this.$refs.image_modal.show_src(image_src);
+    this.$refs.multi_modal.show_image(image_src);
+  }
+
+  public abort_calendar_door(name: string, reason: unknown) {
+    this.$refs.multi_modal.set_active(false);
+
+    if ((reason as AxiosError).response?.status == 401) {
+      alert("Nice try!")
+    }
   }
 }
 </script>
diff --git a/ui/src/components/CalendarDoor.vue b/ui/src/components/CalendarDoor.vue
index 5fe8992..7a41b23 100644
--- a/ui/src/components/CalendarDoor.vue
+++ b/ui/src/components/CalendarDoor.vue
@@ -9,14 +9,23 @@ import { Options, Vue } from "vue-class-component";
   props: {
     day: Number,
   },
+  emits: [
+    "click",
+    "openDoor",
+    "abortDoor",
+  ],
 })
 export default class extends Vue {
   day!: number;
 
   public on_click() {
-    this.$advent22.api_get_blob(`days/image/${this.day}`, (data) => {
-      this.$emit("openDoor", data);
-    });
+    this.$emit("click");
+
+    this.$advent22.api_get_blob(
+      `days/image/${this.day}`,
+      (data) => this.$emit("openDoor", data),
+      (name, reason) => this.$emit("abortDoor", name, reason),
+    );
   }
 }
 </script>
diff --git a/ui/src/components/ImageModal.vue b/ui/src/components/MultiModal.vue
similarity index 56%
rename from ui/src/components/ImageModal.vue
rename to ui/src/components/MultiModal.vue
index 959129e..d78a87a 100644
--- a/ui/src/components/ImageModal.vue
+++ b/ui/src/components/MultiModal.vue
@@ -3,9 +3,14 @@
     <div class="modal-background" />
 
     <div class="modal-content">
-      <div class="image is-square">
-        <img :src="image_src" alt="Kalender-Bild" />
-      </div>
+      <template v-if="progress">
+        <progress class="progress is-primary" max="100" />
+      </template>
+      <template v-else>
+        <div class="image is-square">
+          <img :src="image_src" alt="Kalender-Bild" />
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -15,6 +20,7 @@ import { Vue } from "vue-class-component";
 
 export default class extends Vue {
   public active = false;
+  public progress = false;
   public image_src = "";
 
   public created() {
@@ -27,9 +33,16 @@ export default class extends Vue {
     this.active = state;
   }
 
-  public show_src(src: string) {
+  public show_image(src: string) {
+    this.progress = false;
     this.image_src = src;
     this.set_active(true);
   }
+
+  public show_progress() {
+    this.progress = true;
+    this.image_src = "";
+    this.set_active(true);
+  }
 }
 </script>
diff --git a/ui/src/plugins/advent22.ts b/ui/src/plugins/advent22.ts
index ab678d3..38570a1 100644
--- a/ui/src/plugins/advent22.ts
+++ b/ui/src/plugins/advent22.ts
@@ -37,14 +37,14 @@ export class Advent22 {
     this.api_auth = { username: username, password: password };
   }
 
-  private fail(name: string): (reason: unknown) => void {
-    return (reason: unknown) =>
-      console.warn("Failed to query", name, "-", reason);
+  private fail(name: string, reason: unknown): void {
+    console.warn("Failed to query", name, "-", reason);
   }
 
   private api_get<T>(
     endpoint: string,
     on_success: (data: T) => void,
+    on_failure: (name: string, reason: unknown) => void,
     responseType: ResponseType = "json",
   ) {
     const req_data = {
@@ -54,12 +54,13 @@ export class Advent22 {
 
     this.axios.get<T>(this.api_url(endpoint), req_data)
       .then((response) => on_success(response.data))
-      .catch(this.fail(endpoint));
+      .catch((reason) => on_failure(endpoint, reason));
   }
 
   public api_get_blob(
     endpoint: string,
     on_success: (data: string) => void,
+    on_failure: (name: string, reason: unknown) => void = this.fail,
   ) {
     this.api_get<Blob>(
       endpoint,
@@ -71,9 +72,10 @@ export class Advent22 {
             on_success(reader.result);
 
           else
-            this.fail(endpoint);
+            on_failure(endpoint, "failed data url");
         }
       },
+      on_failure,
       "blob",
     );
   }
@@ -81,24 +83,28 @@ export class Advent22 {
   public api_get_string(
     endpoint: string,
     on_success: (data: string) => void,
+    on_failure: (name: string, reason: unknown) => void = this.fail,
   ) {
     this.api_get<string>(
       endpoint,
       (data: string) => {
         on_success(data);
-      }
+      },
+      on_failure,
     );
   }
 
   public api_get_number(
     endpoint: string,
     on_success: (data: number) => void,
+    on_failure: (name: string, reason: unknown) => void = this.fail,
   ) {
     this.api_get<number>(
       endpoint,
       (data: number) => {
         on_success(data);
-      }
+      },
+      on_failure,
     );
   }
 }