MultiModal.figure_caption

ui/src/components/Calendar.vue

@@ -62,8 +62,8 @@ export default class extends Vue {
     this.$refs.multi_modal.show_progress();
   }
 
-  public door_success(image_src: string) {
-    this.$refs.multi_modal.show_image(image_src);
+  public door_success(day: number, image_src: string) {
+    this.$refs.multi_modal.show_image(image_src, `Türchen ${day}`);
   }
 
   public door_failure(msg: string) {

ui/src/components/CalendarAssistant.vue

@@ -91,7 +91,7 @@ export default class extends Vue {
 
     this.$advent22
       .api_get_blob(`images/${day}`)
-      .then((data) => this.$refs.multi_modal.show_image(data))
+      .then((data) => this.$refs.multi_modal.show_image(data, `Türchen ${day}`))
       .catch(() => this.$refs.multi_modal.set_active(false));
   }
 }

ui/src/components/calendar/CalendarDoor.vue

@@ -26,7 +26,7 @@ export default class extends Vue {
 
     this.$advent22
       .api_get_blob(`images/${this.door.day}`)
-      .then((data) => this.$emit("doorSuccess", data))
+      .then((data) => this.$emit("doorSuccess", this.door.day, data))
       .catch(([reason]) => {
         let msg = "Unbekannter Fehler, bitte wiederholen!";
 

ui/src/components/calendar/MultiModal.vue

@@ -7,9 +7,14 @@
         <progress class="progress is-primary" max="100" />
       </template>
       <template v-else>
-        <div class="image is-square">
-          <img :src="image_src" alt="Kalender-Bild" />
-        </div>
+        <figure>
+          <div class="image is-square">
+            <img :src="image_src" alt="Kalender-Bild" />
+          </div>
+          <figcaption class="has-text-grey-lighter">
+            {{ figure_caption }}
+          </figcaption>
+        </figure>
       </template>
     </div>
   </div>
@@ -22,6 +27,7 @@ export default class extends Vue {
   public active = false;
   public progress = false;
   public image_src = "";
+  public figure_caption = "";
 
   private on_keydown(e: KeyboardEvent) {
     if (e.key == "Escape") this.set_active(false);
@@ -39,9 +45,10 @@ export default class extends Vue {
     this.active = state;
   }
 
-  public show_image(src: string) {
+  public show_image(src: string, caption: string = "") {
     this.progress = false;
     this.image_src = src;
+    this.figure_caption = caption;
     this.set_active(true);
   }