MultiModal visibility

ui/src/components/Calendar.vue

@@ -103,7 +103,7 @@ export default class extends Vue {
       })
       .catch((error) => {
         alert(error);
-        this.multi_modal!.set_active(false);
+        this.multi_modal!.hide();
       });
   }
 }

ui/src/components/MultiModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="modal is-active" v-if="active" @click="set_active(false)">
+  <div class="modal is-active" v-if="active" @click="dismiss()">
     <div class="modal-background" />
 
     <div class="modal-content">
@@ -33,7 +33,7 @@ export default class extends Vue {
   public caption = "";
 
   private on_keydown(e: KeyboardEvent) {
-    if (e.key == "Escape") this.set_active(false);
+    if (e.key == "Escape") this.dismiss();
   }
 
   public created(): void {
@@ -48,23 +48,31 @@ export default class extends Vue {
     window.removeEventListener("keydown", this.on_keydown);
   }
 
-  public set_active(state: boolean) {
+  public show() {
+    this.active = true;
+  }
+
+  public hide() {
+    this.active = false;
+  }
+
+  public dismiss() {
     // Cannot dismiss the "loading" screen
     if (this.active && this.progress) return;
 
-    this.active = state;
+    this.active = false;
   }
 
   public show_image(src: string, caption: string = "") {
     this.progress = false;
     this.image_src = src;
     this.caption = caption;
-    this.set_active(true);
+    this.show();
   }
 
   public show_progress() {
     this.progress = true;
-    this.set_active(true);
+    this.show();
   }
 }
 </script>

ui/src/components/admin/CalendarAssistant.vue

@@ -110,7 +110,7 @@ export default class extends Vue {
       .then((data) =>
         this.multi_modal!.show_image(data, this.$advent22.name_door(day)),
       )
-      .catch(() => this.multi_modal!.set_active(false));
+      .catch(() => this.multi_modal!.hide());
   }
 }
 </script>