open door progress + fail

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>

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>

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>

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,
     );
   }
 }