Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

MultiModal.figure_caption

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-12 17:42:02 +00:00
parent d4f8469a7a
commit db5b056866
4 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/src/components/Calendar.vue
View file

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

2
ui/src/components/CalendarAssistant.vue
View file

@ -91,7 +91,7 @@ export default class extends Vue {
this.$advent22 this.$advent22
.api_get_blob(`images/${day}`) .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)); .catch(() => this.$refs.multi_modal.set_active(false));
} }
} }

2
ui/src/components/calendar/CalendarDoor.vue
View file

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

9
ui/src/components/calendar/MultiModal.vue
View file

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