Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-11-23 00:03:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

cleanup some $refs

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-14 14:20:21 +00:00
parent 1b42cba9fa
commit 597f01b545
5 changed files with 31 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<MultiModal ref="multi_modal" /> <MultiModal @handle="modal_handle" />
<figure> <figure>
<div class="image is-unselectable"> <div class="image is-unselectable">
@ -46,11 +46,13 @@ import ThouCanvas from "./calendar/ThouCanvas.vue";
export default class extends Vue { export default class extends Vue {
public readonly doors!: Door[]; public readonly doors!: Door[];
private readonly idle_caption = "Finde die Türchen auf dem Adventskalender!"; private readonly idle_caption = "Finde die Türchen auf dem Adventskalender!";
private multi_modal?: MultiModal;
public figure_caption = this.idle_caption; public figure_caption = this.idle_caption;
declare $refs: { public modal_handle(modal: MultiModal) {
multi_modal: MultiModal; this.multi_modal = modal;
}; }
public door_hover(day: number) { public door_hover(day: number) {
this.figure_caption = this.$advent22.name_door(day); this.figure_caption = this.$advent22.name_door(day);
@ -61,16 +63,19 @@ export default class extends Vue {
} }
public door_click() { public door_click() {
this.$refs.multi_modal.show_progress(); if (this.multi_modal === undefined) return;
this.multi_modal.show_progress();
} }
public door_success(day: number, image_src: string) { public door_success(day: number, image_src: string) {
this.$refs.multi_modal.show_image(image_src, this.$advent22.name_door(day)); if (this.multi_modal === undefined) return;
this.multi_modal.show_image(image_src, this.$advent22.name_door(day));
} }
public door_failure(msg: string) { public door_failure(msg: string) {
this.$refs.multi_modal.set_active(false);
alert(msg); alert(msg);
if (this.multi_modal === undefined) return;
this.multi_modal.set_active(false);
} }
} }
</script> </script>

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

@ -66,7 +66,7 @@ export default class extends Vue {
public password = ""; public password = "";
declare $refs: { declare $refs: {
username_input: HTMLInputElement | null | undefined; username_input: HTMLInputElement | unknown;
}; };
private on_keydown(e: KeyboardEvent) { private on_keydown(e: KeyboardEvent) {

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

@ -21,8 +21,11 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
@Options({
emits: ["handle"],
})
export default class extends Vue { export default class extends Vue {
public active = false; public active = false;
public progress = false; public progress = false;
@ -33,6 +36,10 @@ export default class extends Vue {
if (e.key == "Escape") this.set_active(false); if (e.key == "Escape") this.set_active(false);
} }
public created(): void {
this.$emit("handle", this);
}
public mounted(): void { public mounted(): void {
window.addEventListener("keydown", this.on_keydown); window.addEventListener("keydown", this.on_keydown);
} }

16
ui/src/components/admin/CalendarAssistant.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MultiModal ref="multi_modal" /> <MultiModal @handle="modal_handle" />
<BulmaDrawer header="Kalender-Assistent" @open="on_open" refreshable> <BulmaDrawer header="Kalender-Assistent" @open="on_open" refreshable>
<div class="card-content"> <div class="card-content">
@ -60,10 +60,11 @@ import BulmaDrawer from "../bulma/Drawer.vue";
export default class extends Vue { export default class extends Vue {
public day_parts: DayStrModel[] = []; public day_parts: DayStrModel[] = [];
public day_image_names: DayStrModel[] = []; public day_image_names: DayStrModel[] = [];
private multi_modal?: MultiModal;
declare $refs: { public modal_handle(modal: MultiModal) {
multi_modal: MultiModal; this.multi_modal = modal;
}; }
public on_open(ready: () => void, fail: () => void): void { public on_open(ready: () => void, fail: () => void): void {
Promise.all([ Promise.all([
@ -80,14 +81,15 @@ export default class extends Vue {
} }
public door_click(day: number) { public door_click(day: number) {
this.$refs.multi_modal.show_progress(); if (this.multi_modal === undefined) return;
this.multi_modal.show_progress();
this.$advent22 this.$advent22
.api_get_blob(`user/image_${day}`) .api_get_blob(`user/image_${day}`)
.then((data) => .then((data) =>
this.$refs.multi_modal.show_image(data, this.$advent22.name_door(day)), this.multi_modal!.show_image(data, this.$advent22.name_door(day)),
) )
.catch(() => this.$refs.multi_modal.set_active(false)); .catch(() => this.multi_modal!.set_active(false));
} }
} }
</script> </script>

2
ui/src/components/editor/PreviewDoor.vue
View file

@ -53,7 +53,7 @@ export default class extends Vue {
private refreshKey = 0; private refreshKey = 0;
declare $refs: { declare $refs: {
day_input: HTMLInputElement | null | undefined; day_input: HTMLInputElement | unknown;
}; };
private refresh() { private refresh() {