From e4f9ded5c8c26f6ccaf94cf509a994d0bc72f73c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Wed, 1 Nov 2023 01:29:37 +0000
Subject: [PATCH] Show time to next door in Calendar component

---
 ui/src/components/Calendar.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/ui/src/components/Calendar.vue b/ui/src/components/Calendar.vue
index 3ed0948..f7fe58d 100644
--- a/ui/src/components/Calendar.vue
+++ b/ui/src/components/Calendar.vue
@@ -6,6 +6,10 @@
       <div class="level-left">
         <figcaption class="level-item has-text-primary-dark">
           {{ figure_caption }}
+          <template v-if="next_door !== null">
+            <br />
+            Zeit zum nächsten Türchen: <CountDown :millis="next_door" />
+          </template>
         </figcaption>
       </div>
       <div class="level-right">
@@ -42,6 +46,7 @@
 import { Door } from "@/lib/door";
 import { Options, Vue } from "vue-class-component";
 
+import CountDown from "./CountDown.vue";
 import MultiModal from "./MultiModal.vue";
 import BulmaButton from "./bulma/Button.vue";
 import CalendarDoor from "./calendar/CalendarDoor.vue";
@@ -49,6 +54,7 @@ import ThouCanvas from "./calendar/ThouCanvas.vue";
 
 @Options({
   components: {
+    CountDown,
     MultiModal,
     BulmaButton,
     ThouCanvas,
@@ -65,6 +71,14 @@ export default class extends Vue {
   public show_doors = false;
   private multi_modal?: MultiModal;
   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) {
     this.multi_modal = modal;