Ideen.md

@@ -1,15 +1,14 @@
 # MUSS
 
-- api: admin Login case sensitivity (username "admin" == "AdMiN")
-- api: Config-Liste von Extra-Türchen (kein Buchstabe, nur manuelles Bild)
-- api: Config-Option "Überspringe leere Türchen" (standard ja)
+- Nach einigen Sekunden: Meldung "Türchen anzeigen?"
+- Extra-Türchen (kein Buchstabe, nur manuelles Bild)
+- Option "Überspringe leere Türchen" (standard ja)
 
 # KANN
 
-- api/ui: Türchen mit Tag "0" einem zufälligen Tag zuweisen
-- api/?: Option "custom Zuordnung Buchstaben" (standard leer)
-- api: `config.solution` - whitespace="IGNORE"->"REMOVE" umbenennen, +Sonderzeichen
-- ui: `confirm` durch bulma Komponente(n) ersetzen
+- `alert` bzw. `confirm` durch bulma Komponente(n) ersetzen
+- Türchen mit Tag "0" einem zufälligen Tag zuweisen
+- Option "custom Zuordnung Buchstaben" (standard leer)
 
 # Erledigt
 
@@ -18,5 +17,3 @@
 - 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="store.calendar_background_image" />
+      <img :src="$advent22.api_url('user/background_image')" />
       <ThouCanvas>
         <CalendarDoor
           v-for="(door, index) in doors"
@@ -85,13 +85,11 @@ export default class extends Vue {
 
     if (this.store.is_touch_device) return;
 
-    this.store.when_initialized(() => {
-      this.toast_timeout = setTimeout(() => {
-        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" });
-      }, 10000);
-    });
+      this.toast!.show({ duration: 600000, type: "is-warning" });
+    }, 10000);
   }
 
   public door_click(day: number) {
@@ -107,13 +105,9 @@ export default class extends Vue {
         this.multi_modal!.show_image(image_src, this.$advent22.name_door(day));
       })
       .catch((error) => {
-        this.$advent22.alert_user_error(error);
+        alert(error);
         this.multi_modal!.hide();
       });
   }
-
-  public beforeUnmount(): void {
-    this.toast?.hide();
-  }
 }
 </script>

ui/src/components/admin/DoorMapEditor.vue

@@ -73,7 +73,6 @@ 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";
@@ -150,7 +149,7 @@ export default class extends Vue {
       this.loading_doors = true;
 
       this.load_doors()
-        .then(() => toast({ message: "Erfolgreich!", type: "is-success" }))
+        .then(() => alert("Erfolgreich!"))
         .catch(() => {})
         .finally(() => (this.loading_doors = false));
     }
@@ -170,7 +169,7 @@ export default class extends Vue {
       this.save_doors()
         .then(() => {
           this.load_doors()
-            .then(() => toast({ message: "Erfolgreich!", type: "is-success" }))
+            .then(() => alert("Erfolgreich!"))
             .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="store.calendar_background_image" />
+      <img :src="$advent22.api_url('user/background_image')" />
       <ThouCanvas>
         <PreviewDoor
           v-for="(door, index) in doors"
@@ -25,7 +25,6 @@
 
 <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";
@@ -42,6 +41,5 @@ 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="store.calendar_background_image" />
+      <img :src="$advent22.api_url('user/background_image')" />
       <DoorCanvas :doors="doors" />
     </figure>
   </div>
@@ -17,7 +17,6 @@
 
 <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";
@@ -32,6 +31,5 @@ import DoorCanvas from "./DoorCanvas.vue";
 })
 export default class extends Vue {
   public doors!: Door[];
-  public readonly store = advent22Store();
 }
 </script>

ui/src/plugins/advent22.ts

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

ui/src/plugins/store.ts

@@ -14,12 +14,9 @@ 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;
@@ -31,8 +28,6 @@ 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 ||
@@ -45,7 +40,6 @@ export const advent22Store = defineStore({
       content: "",
       footer: "",
     },
-    calendar_background_image: undefined,
     calendar_aspect_ratio: 1,
     user_doors: [],
     next_door_target: null,
@@ -79,11 +73,10 @@ 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, background_image, user_doors, next_door]) => {
+        .then(([site_config, user_doors, next_door]) => {
           document.title = site_config.title;
 
           if (site_config.subtitle !== "")
@@ -91,8 +84,6 @@ 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));
@@ -100,21 +91,10 @@ 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