move user/next_door call to "store"

ui/src/components/Calendar.vue

@@ -4,10 +4,6 @@
   <figure>
     <figcaption class="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 class="image is-unselectable">
       <img :src="$advent22.api_url('user/background_image')" />
@@ -33,7 +29,6 @@ import { Door } from "@/lib/door";
 import { advent22Store } from "@/plugins/store";
 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";
@@ -41,7 +36,6 @@ import ThouCanvas from "./calendar/ThouCanvas.vue";
 
 @Options({
   components: {
-    CountDown,
     MultiModal,
     BulmaButton,
     ThouCanvas,
@@ -58,14 +52,6 @@ export default class extends Vue {
 
   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(this.$advent22.alert_user_error);
-  }
 
   public modal_handle(modal: MultiModal) {
     this.multi_modal = modal;

ui/src/components/CountDown.vue

@@ -8,7 +8,7 @@ import { Options, Vue } from "vue-class-component";
 
 @Options({
   props: {
-    millis: Number,
+    until: Number,
     tick_time: {
       type: Number,
       default: 200,
@@ -16,18 +16,14 @@ import { Options, Vue } from "vue-class-component";
   },
 })
 export default class extends Vue {
-  private millis!: number;
+  private until!: number;
   private tick_time!: number;
 
   private interval_id: number | null = null;
   public string_repr = "";
 
-  private get target_date_ms(): number {
-    return Date.now() + this.millis;
-  }
-
   private tick(): void {
-    const distance_ms = this.target_date_ms - Date.now();
+    const distance_ms = this.until - Date.now();
 
     if (distance_ms <= 0) {
       this.string_repr = "Jetzt!";

ui/src/components/UserView.vue

@@ -1,34 +1,32 @@
 <template>
   <Calendar :doors="doors" />
   <hr />
-  <div class="content">
+  <div class="content" v-html="store.site_config.content" />
-    <h3>Anleitung</h3>
+  <template v-if="store.next_door_target !== null">
-    <p>
+    <hr />
-      Hier findest Du für jedes Türchen des Adventskalenders ein kleines
+    <div class="content has-text-primary">
-      farbiges Bildchen. Diese werden automatisch am jeweiligen Tag anklickbar
+      Zeit zum nächsten Türchen: <CountDown :until="store.next_door_target" />
-      und zeigen Dir das neue jeweilige dahinter versteckte Bild.
+    </div>
-    </p>
+  </template>
-    <p>
-      Welches Bildchen zu welchem Tag gehört, erfährst Du, indem Du Deine Maus
-      darüber bewegst: Bei den bereits freigeschalteten Bildern wird angezeigt,
-      um welchen Tag es sich handelt.
-    </p>
-  </div>
 </template>
 
 <script lang="ts">
 import { DoorsSaved } from "@/lib/api";
 import { Door } from "@/lib/door";
+import { advent22Store } from "@/plugins/store";
 import { Options, Vue } from "vue-class-component";
 
 import Calendar from "./Calendar.vue";
+import CountDown from "./CountDown.vue";
 
 @Options({
   components: {
     Calendar,
+    CountDown,
   },
 })
 export default class extends Vue {
+  public readonly store = advent22Store();
   public doors: Door[] = [];
 
   public mounted(): void {

ui/src/components/admin/ConfigView.vue

@@ -41,8 +41,10 @@
               <dd>{{ num_user_doors }}</dd>
 
               <dt>Zeit zum nächsten Türchen</dt>
-              <dd v-if="next_door === null">Kein nächstes Türchen</dd>
+              <dd v-if="store.next_door_target === null">
-              <dd v-else><CountDown :millis="next_door" /></dd>
+                Kein nächstes Türchen
+              </dd>
+              <dd v-else><CountDown :until="store.next_door_target" /></dd>
 
               <dt>Erstes Türchen</dt>
               <dd>{{ fmt_puzzle_date("first") }}</dd>
@@ -160,6 +162,7 @@
 
 <script lang="ts">
 import { AdminConfigModel, Credentials, DoorsSaved } from "@/lib/api";
+import { advent22Store } from "@/plugins/store";
 import { DateTime } from "luxon";
 import { Options, Vue } from "vue-class-component";
 
@@ -175,6 +178,8 @@ import CountDown from "../CountDown.vue";
   },
 })
 export default class extends Vue {
+  public readonly store = advent22Store();
+
   public admin_config_model: AdminConfigModel = {
     solution: {
       value: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
@@ -213,7 +218,6 @@ export default class extends Vue {
   };
   public doors: DoorsSaved = [];
   public num_user_doors = 0;
-  public next_door: number | null = null;
   public dav_credentials: Credentials = ["", ""];
   public ui_credentials: Credentials = ["", ""];
 
@@ -229,13 +233,11 @@ export default class extends Vue {
       this.$advent22.api_get<AdminConfigModel>("admin/config_model"),
       this.$advent22.api_get<DoorsSaved>("admin/doors"),
       this.$advent22.api_get<DoorsSaved>("user/doors"),
-      this.$advent22.api_get<number | null>("user/next_door"),
     ])
-      .then(([admin_config_model, doors, user_doors, next_door]) => {
+      .then(([admin_config_model, doors, user_doors]) => {
         this.admin_config_model = admin_config_model;
         this.doors = doors;
         this.num_user_doors = user_doors.length;
-        this.next_door = next_door;
 
         ready();
       })

ui/src/plugins/store.ts

@@ -11,6 +11,7 @@ export const advent22Store = defineStore({
 
   state: () => ({
     api_creds: empty_creds(),
+    is_touch_device: check_touch_device(),
     is_admin: false,
     site_config: {
       title: "Adventskalender",
@@ -18,7 +19,7 @@ export const advent22Store = defineStore({
       content: "",
       footer: "",
     } as SiteConfigModel,
-    is_touch_device: check_touch_device(),
+    next_door_target: null as number | null,
   }),
 
   getters: {
@@ -44,10 +45,19 @@ export const advent22Store = defineStore({
         })
         .catch(() => {});
 
-      ADVENT22.api_get<SiteConfigModel>("user/site_config")
+      Promise.all([
-        .then((site_config) => {
+        ADVENT22.api_get<SiteConfigModel>("user/site_config"),
-          document.title = `${site_config.title} – ${site_config.subtitle}`;
+        ADVENT22.api_get<number | null>("user/next_door"),
+      ])
+        .then(([site_config, next_door]) => {
+          document.title = site_config.title;
+
+          if (site_config.subtitle !== "")
+            document.title += " – " + site_config.subtitle;
+
           this.site_config = site_config;
+          if (next_door !== null)
+            this.next_door_target = Date.now() + next_door;
         })
         .catch(ADVENT22.alert_user_error);
     },