update Ideendokument

- start Calendar.toast_timeout when initialized

Ideen.md

@@ -1,14 +1,15 @@
 # MUSS
 
-- Nach einigen Sekunden: Meldung "Türchen anzeigen?"
+- api: admin Login case sensitivity (username "admin" == "AdMiN")
-- Extra-Türchen (kein Buchstabe, nur manuelles Bild)
+- api: Config-Liste von Extra-Türchen (kein Buchstabe, nur manuelles Bild)
-- Option "Überspringe leere Türchen" (standard ja)
+- api: Config-Option "Überspringe leere Türchen" (standard ja)
 
 # KANN
 
-- `alert` bzw. `confirm` durch bulma Komponente(n) ersetzen
+- api/ui: Türchen mit Tag "0" einem zufälligen Tag zuweisen
-- Türchen mit Tag "0" einem zufälligen Tag zuweisen
+- api/?: Option "custom Zuordnung Buchstaben" (standard leer)
-- Option "custom Zuordnung Buchstaben" (standard leer)
+- api: `config.solution` - whitespace="IGNORE"->"REMOVE" umbenennen, +Sonderzeichen
+- ui: `confirm` durch bulma Komponente(n) ersetzen
 
 # Erledigt
 
@@ -17,3 +18,5 @@
 - Türchen sichtbar machen (besser für touch, standard nein)
 - Option "Nur Groß-/Kleinbuchstaben" (standard nur groß)
 - Option "Leerzeichen ignorieren" (standard ja)
+- Nach einigen Sekunden: Meldung "Türchen anzeigen?"
+- `alert` durch bulma Komponente(n) ersetzen

ui/src/components/Calendar.vue

@@ -29,7 +29,7 @@
 
   <figure>
     <div class="image is-unselectable">
-      <img :src="$advent22.api_url('user/background_image')" />
+      <img :src="store.calendar_background_image" />
       <ThouCanvas>
         <CalendarDoor
           v-for="(door, index) in doors"
@@ -85,11 +85,13 @@ export default class extends Vue {
 
     if (this.store.is_touch_device) return;
 
-    this.toast_timeout = setTimeout(() => {
+    this.store.when_initialized(() => {
-      if (this.store.user_doors.length === 0) return;
+      this.toast_timeout = setTimeout(() => {
+        if (this.store.user_doors.length === 0) return;
 
-      this.toast!.show({ duration: 600000, type: "is-warning" });
+        this.toast!.show({ duration: 600000, type: "is-warning" });
-    }, 10000);
+      }, 10000);
+    });
   }
 
   public door_click(day: number) {
@@ -105,9 +107,13 @@ export default class extends Vue {
         this.multi_modal!.show_image(image_src, this.$advent22.name_door(day));
       })
       .catch((error) => {
-        alert(error);
+        this.$advent22.alert_user_error(error);
         this.multi_modal!.hide();
       });
   }
+
+  public beforeUnmount(): void {
+    this.toast?.hide();
+  }
 }
 </script>

ui/src/components/admin/DoorMapEditor.vue

@@ -73,6 +73,7 @@ import { DoorSaved } from "@/lib/api";
 import { Door } from "@/lib/door";
 import { Options, Vue } from "vue-class-component";
 
+import { toast } from "bulma-toast";
 import Calendar from "../Calendar.vue";
 import BulmaBreadcrumbs, { Step } from "../bulma/Breadcrumbs.vue";
 import BulmaButton from "../bulma/Button.vue";
@@ -149,7 +150,7 @@ export default class extends Vue {
       this.loading_doors = true;
 
       this.load_doors()
-        .then(() => alert("Erfolgreich!"))
+        .then(() => toast({ message: "Erfolgreich!", type: "is-success" }))
         .catch(() => {})
         .finally(() => (this.loading_doors = false));
     }
@@ -169,7 +170,7 @@ export default class extends Vue {
       this.save_doors()
         .then(() => {
           this.load_doors()
-            .then(() => alert("Erfolgreich!"))
+            .then(() => toast({ message: "Erfolgreich!", type: "is-success" }))
             .catch(() => {})
             .finally(() => (this.saving_doors = false));
         })

ui/src/components/editor/DoorChooser.vue

@@ -11,7 +11,7 @@
       </ul>
     </div>
     <figure class="image is-unselectable">
-      <img :src="$advent22.api_url('user/background_image')" />
+      <img :src="store.calendar_background_image" />
       <ThouCanvas>
         <PreviewDoor
           v-for="(door, index) in doors"
@@ -25,6 +25,7 @@
 
 <script lang="ts">
 import { Door } from "@/lib/door";
+import { advent22Store } from "@/plugins/store";
 import { Options, Vue } from "vue-class-component";
 
 import ThouCanvas from "../calendar/ThouCanvas.vue";
@@ -41,5 +42,6 @@ import PreviewDoor from "./PreviewDoor.vue";
 })
 export default class extends Vue {
   public doors!: Door[];
+  public readonly store = advent22Store();
 }
 </script>

ui/src/components/editor/DoorPlacer.vue

@@ -9,7 +9,7 @@
       </ul>
     </div>
     <figure class="image is-unselectable">
-      <img :src="$advent22.api_url('user/background_image')" />
+      <img :src="store.calendar_background_image" />
       <DoorCanvas :doors="doors" />
     </figure>
   </div>
@@ -17,6 +17,7 @@
 
 <script lang="ts">
 import { Door } from "@/lib/door";
+import { advent22Store } from "@/plugins/store";
 import { Options, Vue } from "vue-class-component";
 
 import DoorCanvas from "./DoorCanvas.vue";
@@ -31,5 +32,6 @@ import DoorCanvas from "./DoorCanvas.vue";
 })
 export default class extends Vue {
   public doors!: Door[];
+  public readonly store = advent22Store();
 }
 </script>

ui/src/plugins/advent22.ts

@@ -1,4 +1,5 @@
 import axios, { AxiosError, AxiosInstance, ResponseType } from "axios";
+import { toast } from "bulma-toast";
 import { App, Plugin } from "vue";
 import { advent22Store } from "./store";
 
@@ -78,7 +79,10 @@ export class Advent22 {
   }
 
   public alert_user_error(param: [unknown, string]): void {
-    alert(this.format_user_error(param));
+    toast({
+      message: this.format_user_error(param),
+      type: "is-danger",
+    });
   }
 
   public api_url(): string;

ui/src/plugins/store.ts

@@ -14,9 +14,12 @@ declare global {
 type State = {
   advent22: Advent22;
   api_creds: RemovableRef<Credentials>;
+  is_initialized: boolean;
+  on_initialized: (() => void)[];
   is_touch_device: boolean;
   is_admin: boolean;
   site_config: SiteConfigModel;
+  calendar_background_image: string | undefined;
   calendar_aspect_ratio: number;
   user_doors: Door[];
   next_door_target: number | null;
@@ -28,6 +31,8 @@ export const advent22Store = defineStore({
   state: (): State => ({
     advent22: new Advent22(),
     api_creds: useLocalStorage("advent22/auth", ["", ""]),
+    is_initialized: false,
+    on_initialized: [],
     is_touch_device:
       window.matchMedia("(any-hover: none)").matches ||
       "ontouchstart" in window ||
@@ -40,6 +45,7 @@ export const advent22Store = defineStore({
       content: "",
       footer: "",
     },
+    calendar_background_image: undefined,
     calendar_aspect_ratio: 1,
     user_doors: [],
     next_door_target: null,
@@ -73,10 +79,11 @@ export const advent22Store = defineStore({
 
       Promise.all([
         this.advent22.api_get<SiteConfigModel>("user/site_config"),
+        this.advent22.api_get_blob("user/background_image"),
         this.advent22.api_get<DoorSaved[]>("user/doors"),
         this.advent22.api_get<number | null>("user/next_door"),
       ])
-        .then(([site_config, user_doors, next_door]) => {
+        .then(([site_config, background_image, user_doors, next_door]) => {
           document.title = site_config.title;
 
           if (site_config.subtitle !== "")
@@ -84,6 +91,8 @@ export const advent22Store = defineStore({
 
           this.site_config = site_config;
 
+          this.calendar_background_image = background_image;
+
           this.user_doors.length = 0;
           for (const door_saved of user_doors) {
             this.user_doors.push(Door.load(door_saved));
@@ -91,10 +100,21 @@ export const advent22Store = defineStore({
 
           if (next_door !== null)
             this.next_door_target = Date.now() + next_door;
+
+          this.is_initialized = true;
+          for (const callback of this.on_initialized) callback();
         })
         .catch(this.advent22.alert_user_error);
     },
 
+    when_initialized(callback: () => void): void {
+      if (this.is_initialized) {
+        callback();
+      } else {
+        this.on_initialized.push(callback);
+      }
+    },
+
     update_is_admin(): Promise<boolean> {
       return new Promise((resolve, reject) => {
         this.advent22