Show time to next door in Calendar component

This commit is contained in:
Jörn-Michael Miehe 2023-11-01 01:29:37 +00:00
parent 59cf7202f4
commit e4f9ded5c8

View file

@ -6,6 +6,10 @@
<div class="level-left"> <div class="level-left">
<figcaption class="level-item has-text-primary-dark"> <figcaption class="level-item has-text-primary-dark">
{{ figure_caption }} {{ figure_caption }}
<template v-if="next_door !== null">
<br />
Zeit zum nächsten Türchen: <CountDown :millis="next_door" />
</template>
</figcaption> </figcaption>
</div> </div>
<div class="level-right"> <div class="level-right">
@ -42,6 +46,7 @@
import { Door } from "@/lib/door"; import { Door } from "@/lib/door";
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
import CountDown from "./CountDown.vue";
import MultiModal from "./MultiModal.vue"; import MultiModal from "./MultiModal.vue";
import BulmaButton from "./bulma/Button.vue"; import BulmaButton from "./bulma/Button.vue";
import CalendarDoor from "./calendar/CalendarDoor.vue"; import CalendarDoor from "./calendar/CalendarDoor.vue";
@ -49,6 +54,7 @@ import ThouCanvas from "./calendar/ThouCanvas.vue";
@Options({ @Options({
components: { components: {
CountDown,
MultiModal, MultiModal,
BulmaButton, BulmaButton,
ThouCanvas, ThouCanvas,
@ -65,6 +71,14 @@ export default class extends Vue {
public show_doors = false; public show_doors = false;
private multi_modal?: MultiModal; private multi_modal?: MultiModal;
public figure_caption = this.idle_caption; public figure_caption = this.idle_caption;
public next_door: number | null = null;
public mounted(): void {
this.$advent22
.api_get<number | null>("user/next_door")
.then((next_door) => (this.next_door = next_door))
.catch((error) => alert(this.$advent22.format_user_error(error)));
}
public modal_handle(modal: MultiModal) { public modal_handle(modal: MultiModal) {
this.multi_modal = modal; this.multi_modal = modal;