ConfigView.next_door

ui/src/components/CountDown.vue

@@ -0,0 +1,58 @@
+<template>
+  {{ string_repr }}
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  props: {
+    millis: Number,
+    tick_time: {
+      type: Number,
+      default: 200,
+    },
+  },
+})
+export default class extends Vue {
+  private millis!: number;
+  private tick_time!: number;
+
+  private interval_id: number | null = null;
+  public string_repr = "";
+
+  private get target_time(): number {
+    const now_time = new Date().getTime();
+    return new Date(now_time + this.millis).getTime();
+  }
+
+  private tick(): void {
+    const now = new Date().getTime();
+    const distance = new Date(this.target_time - now).getTime();
+
+    if (distance <= 0) {
+      this.string_repr = "Jetzt!";
+      return;
+    }
+
+    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+    const hours = Math.floor(
+      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
+    );
+    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+    this.string_repr = `${days} Tage, ${hours}:${minutes}:${seconds}`;
+  }
+
+  public mounted(): void {
+    this.tick();
+    this.interval_id = window.setInterval(this.tick, this.tick_time);
+  }
+
+  public beforeUnmount(): void {
+    if (this.interval_id === null) return;
+    window.clearInterval(this.interval_id);
+  }
+}
+</script>

ui/src/components/admin/ConfigView.vue

@@ -16,9 +16,8 @@
               <dt>Offene Türchen</dt>
               <dd>{{ num_user_doors }}</dd>
 
-              <dt>Nächstes Türchen in</dt>
-              <!-- TODO -->
-              <dd>dd-hh-mm-ss</dd>
+              <dt>Zeit zum nächsten Türchen</dt>
+              <dd><CountDown :millis="next_door" /></dd>
 
               <dt>Erstes Türchen</dt>
               <dd>{{ config_model.puzzle.first }}</dd>
@@ -126,6 +125,7 @@ import { Options, Vue } from "vue-class-component";
 
 import BulmaDrawer from "../bulma/Drawer.vue";
 import BulmaSecret from "../bulma/Secret.vue";
+import CountDown from "../CountDown.vue";
 
 interface Credentials {
   username: string;
@@ -136,6 +136,7 @@ interface Credentials {
   components: {
     BulmaDrawer,
     BulmaSecret,
+    CountDown,
   },
 })
 export default class extends Vue {
@@ -164,6 +165,7 @@ export default class extends Vue {
   };
   public day_parts: DayStrModel[] = [];
   public num_user_doors = 0;
+  public next_door: number | null = null;
   public dav_credentials: Credentials = { username: "", password: "" };
   public ui_credentials: Credentials = { username: "", password: "" };
 
@@ -172,11 +174,13 @@ export default class extends Vue {
       this.$advent22.api_get<ConfigModel>("admin/config_model"),
       this.$advent22.api_get<DayStrModel[]>("admin/day_parts"),
       this.$advent22.api_get<DoorsSaved>("user/doors"),
+      this.$advent22.api_get<number | null>("user/next_door"),
     ])
-      .then(([config_model, day_parts, user_doors]) => {
+      .then(([config_model, day_parts, user_doors, next_door]) => {
         this.config_model = config_model;
         this.day_parts = day_parts;
         this.num_user_doors = user_doors.length;
+        this.next_door = next_door;
 
         ready();
       })