🐛 rebuild previous logic, now with explanation

ui/src/components/AdminButton.vue

@@ -3,7 +3,7 @@
 
   <BulmaButton
     v-bind="$attrs"
-    :icon="'fa-solid fa-toggle-' + (store.is_admin ? 'on' : 'off')"
+    :icon="['fas', store.is_admin ? 'fa-toggle-on' : 'fa-toggle-off']"
     :busy="is_busy"
     text="Admin"
     @click.left="on_click"
@@ -23,7 +23,7 @@ const modal_visible = ref(false);
 const is_busy = ref(false);
 const store = advent22Store();
 
-function on_click() {
+function on_click(): void {
   if (store.is_admin) {
     store.logout();
   } else {
@@ -33,16 +33,19 @@ function on_click() {
   }
 }
 
-function on_submit(creds: Credentials) {
+async function on_submit(creds: Credentials): Promise<void> {
   modal_visible.value = false;
 
-  store
-    .login(creds)
-    .catch((error) => APIError.alert(error))
-    .finally(() => (is_busy.value = false));
+  try {
+    await store.login(creds);
+  } catch (error) {
+    APIError.alert(error);
+  } finally {
+    is_busy.value = false;
+  }
 }
 
-function on_cancel() {
+function on_cancel(): void {
   modal_visible.value = false;
   is_busy.value = false;
 }

ui/src/components/Calendar.vue

@@ -71,11 +71,11 @@ let modal: HMultiModal | undefined;
 let toast: HBulmaToast | undefined;
 let toast_timeout: number | undefined;
 
-function on_modal_handle(handle: HMultiModal) {
+function on_modal_handle(handle: HMultiModal): void {
   modal = handle;
 }
 
-function on_toast_handle(handle: HBulmaToast) {
+function on_toast_handle(handle: HBulmaToast): void {
   toast = handle;
 
   if (store.is_touch_device) return;
@@ -90,7 +90,7 @@ function on_toast_handle(handle: HBulmaToast) {
   });
 }
 
-async function door_click(day: number) {
+async function door_click(day: number): Promise<void> {
   window.clearTimeout(toast_timeout);
   toast?.hide();
 

ui/src/components/LoginModal.vue

@@ -16,7 +16,7 @@
               ref="username_input"
               class="input"
               type="text"
-              v-model="username"
+              v-model="creds[0]"
             />
           </div>
         </div>
@@ -24,7 +24,7 @@
         <div class="field">
           <label class="label">Passwort</label>
           <div class="control">
-            <input class="input" type="password" v-model="password" />
+            <input class="input" type="password" v-model="creds[1]" />
           </div>
         </div>
       </section>
@@ -33,13 +33,13 @@
         <BulmaButton
           class="is-success"
           @click.left="submit"
-          icon="fa-solid fa-unlock"
+          :icon="['fas', 'fa-unlock']"
           text="Login"
         />
         <BulmaButton
           class="is-danger"
           @click.left="cancel"
-          icon="fa-solid fa-circle-xmark"
+          :icon="['fas', 'fa-circle-xmark']"
           text="Abbrechen"
         />
       </footer>
@@ -60,11 +60,10 @@ const emit = defineEmits<{
   (event: "cancel"): void;
 }>();
 
-const username = ref("");
-const password = ref("");
+const creds = ref<Credentials>(["", ""]);
 
 function submit(): void {
-  emit("submit", [username.value, password.value]);
+  emit("submit", creds.value);
 }
 
 function cancel(): void {

ui/src/components/MultiModal.vue

@@ -39,18 +39,17 @@ export type HMultiModal = {
   show_image(src: string, caption: string): void;
   show_loading(): void;
   hide(): void;
-  dismiss(): void;
 };
 
 const emit = defineEmits<{
   (event: "handle", handle: HMultiModal): void;
 }>();
 
-function hide() {
+function hide(): void {
   state.value = { show: "none" };
 }
 
-function dismiss() {
+function dismiss(): void {
   if (state.value.show !== "loading") {
     hide();
   }
@@ -58,14 +57,13 @@ function dismiss() {
 
 onMounted(() => {
   emit("handle", {
-    show_image(src: string, caption: string = "") {
+    show_image(src: string, caption: string = ""): void {
       state.value = { show: "image", src: src, caption: caption };
     },
-    show_loading() {
+    show_loading(): void {
       state.value = { show: "loading" };
     },
     hide,
-    dismiss,
   });
 
   const on_keydown = (e: KeyboardEvent) => {

ui/src/components/TouchButton.vue

@@ -2,10 +2,7 @@
   <span>Eingabemodus:&nbsp;</span>
   <BulmaButton
     v-bind="$attrs"
-    :icon="
-      'fa-solid fa-' +
-      (store.is_touch_device ? 'hand-pointer' : 'arrow-pointer')
-    "
+    :icon="['fas', store.is_touch_device ? 'hand-pointer' : 'arrow-pointer']"
     :text="store.is_touch_device ? 'Touch' : 'Desktop'"
     @click.left="store.toggle_touch_device"
   />

ui/src/components/admin/CalendarAssistant.vue

@@ -35,7 +35,7 @@
             v-for="(data, day) in day_data"
             :key="`btn-${day}`"
             :class="'tag is-' + (data.part === '' ? 'warning' : 'info')"
-            icon="fa-solid fa-door-open"
+            :icon="['fas', 'fa-door-open']"
             :text="day.toString()"
             @click.left="door_click(Number(day))"
           />
@@ -59,11 +59,11 @@ const day_data = ref<Record<number, { part: string; image_name: string }>>({});
 
 let modal: HMultiModal | undefined;
 
-function on_modal_handle(handle: HMultiModal) {
+function on_modal_handle(handle: HMultiModal): void {
   modal = handle;
 }
 
-async function on_open() {
+async function on_open(): Promise<void> {
   const [day_parts, day_image_names] = await Promise.all([
     API.request<NumStrDict>("admin/day_parts"),
     API.request<NumStrDict>("admin/day_image_names"),
@@ -86,7 +86,7 @@ async function on_open() {
   });
 }
 
-async function door_click(day: number) {
+async function door_click(day: number): Promise<void> {
   if (modal === undefined) return;
   modal.show_loading();
 

ui/src/components/admin/ConfigView.vue

@@ -247,19 +247,19 @@ function fmt_puzzle_date(name: keyof AdminConfigModel["puzzle"]): string {
   return DateTime.fromISO(iso_date).toLocaleString(DateTime.DATE_SHORT);
 }
 
-async function on_open() {
+async function on_open(): Promise<void> {
   const [store_update, new_admin_config_model, new_doors] = await Promise.all([
     store.update(),
     API.request<AdminConfigModel>("admin/config_model"),
     API.request<DoorSaved[]>("admin/doors"),
   ]);
 
-  void store_update;
+  void store_update; // discard value
   admin_config_model.value = new_admin_config_model;
   doors.value = new_doors;
 }
 
-async function load_dav_credentials() {
+async function load_dav_credentials(): Promise<void> {
   try {
     dav_credentials.value = await API.request<Credentials>(
       "admin/dav_credentials",
@@ -267,7 +267,7 @@ async function load_dav_credentials() {
   } catch {}
 }
 
-async function load_ui_credentials() {
+async function load_ui_credentials(): Promise<void> {
   try {
     ui_credentials.value = await API.request<Credentials>(
       "admin/ui_credentials",

ui/src/components/admin/DoorMapEditor.vue

@@ -5,7 +5,7 @@
         :disabled="current_step === 0"
         class="level-item is-link"
         @click="current_step--"
-        icon="fa-solid fa-backward"
+        :icon="['fas', 'fa-backward']"
       />
 
       <BulmaBreadcrumbs
@@ -18,7 +18,7 @@
         :disabled="current_step === 2"
         class="level-item is-link"
         @click="current_step++"
-        icon="fa-solid fa-forward"
+        :icon="['fas', 'fa-forward']"
       />
     </nav>
 
@@ -47,20 +47,20 @@
       <BulmaButton
         class="card-footer-item is-danger"
         @click="on_download"
-        icon="fa-solid fa-cloud-arrow-down"
+        :icon="['fas', 'fa-cloud-arrow-down']"
         :busy="loading_doors"
         text="Laden"
       />
       <BulmaButton
         class="card-footer-item is-warning"
         @click="on_discard"
-        icon="fa-solid fa-trash"
+        :icon="['fas', 'fa-trash']"
         text="Löschen"
       />
       <BulmaButton
         class="card-footer-item is-success"
         @click="on_upload"
-        icon="fa-solid fa-cloud-arrow-up"
+        :icon="['fas', 'fa-cloud-arrow-up']"
         :busy="saving_doors"
         text="Speichern"
       />
@@ -85,9 +85,9 @@ import DoorChooser from "../editor/DoorChooser.vue";
 import DoorPlacer from "../editor/DoorPlacer.vue";
 
 const steps: BCStep[] = [
-  { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
-  { label: "Ordnen", icon: "fa-solid fa-list-ol" },
-  { label: "Vorschau", icon: "fa-solid fa-magnifying-glass" },
+  { label: "Platzieren", icon: ["fas", "fa-crosshairs"] },
+  { label: "Ordnen", icon: ["fas", "fa-list-ol"] },
+  { label: "Vorschau", icon: ["fas", "fa-magnifying-glass"] },
 ];
 
 const doors = ref<Door[]>([]);
@@ -95,7 +95,7 @@ const current_step = ref(0);
 const loading_doors = ref(false);
 const saving_doors = ref(false);
 
-async function load_doors() {
+async function load_doors(): Promise<void> {
   try {
     const data = await API.request<DoorSaved[]>("admin/doors");
 
@@ -109,7 +109,7 @@ async function load_doors() {
   }
 }
 
-async function save_doors() {
+async function save_doors(): Promise<void> {
   try {
     const data: DoorSaved[] = [];
 
@@ -128,7 +128,7 @@ async function save_doors() {
   }
 }
 
-async function on_download() {
+async function on_download(): Promise<void> {
   if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
     loading_doors.value = true;
 
@@ -146,14 +146,14 @@ async function on_download() {
   }
 }
 
-function on_discard() {
+function on_discard(): void {
   if (confirm("Alle Türchen löschen? (nur lokal)")) {
     // empty `doors` array
     doors.value.length = 0;
   }
 }
 
-async function on_upload() {
+async function on_upload(): Promise<void> {
   if (confirm("Aktuelle Änderungen an den Server schicken?")) {
     saving_doors.value = true;
 

ui/src/components/bulma/Drawer.vue

@@ -22,20 +22,21 @@
       </button>
     </header>
 
-    <template v-if="is_open">
-      <div v-if="state === 'loading'" class="card-content">
+    <slot v-if="state === 'loading'" name="loading">
+      <div class="card-content">
         <progress class="progress is-primary" />
       </div>
-      <div
-        v-else-if="state === 'err'"
-        class="card-content has-text-danger has-text-centered"
-      >
+    </slot>
+
+    <slot v-else-if="state === 'err'" name="error">
+      <div class="card-content has-text-danger has-text-centered">
         <span class="icon is-large">
           <FontAwesomeIcon :icon="['fas', 'ban']" size="3x" />
         </span>
       </div>
-      <slot v-else name="default" />
-    </template>
+    </slot>
+
+    <slot v-else-if="state === 'ok'" name="default" />
   </div>
 </template>
 
@@ -56,7 +57,7 @@ const props = withDefaults(
 const state = ref<"closed" | "loading" | "ok" | "err">("closed");
 const is_open = computed(() => state.value !== "closed");
 
-async function toggle() {
+async function toggle(): Promise<void> {
   if (is_open.value) {
     state.value = "closed";
   } else {
@@ -64,7 +65,7 @@ async function toggle() {
   }
 }
 
-async function load() {
+async function load(): Promise<void> {
   state.value = "loading";
 
   try {

ui/src/components/bulma/Toast.vue

@@ -20,29 +20,27 @@ const emit = defineEmits<{
   (event: "handle", handle: HBulmaToast): void;
 }>();
 
-const message = useTemplateRef("message");
+const message_div = useTemplateRef("message");
 
 onMounted(() =>
   emit("handle", {
-    show(options: ToastOptions = {}) {
-      if (message.value === null) return;
+    show(options: ToastOptions = {}): void {
+      if (message_div.value === null) return;
 
       toast({
         ...options,
         single: true,
-        message: message.value,
+        message: message_div.value,
       });
     },
-    hide() {
-      if (message.value === null) return;
+    hide(): void {
+      // using "toast" detaches "message" from the invisible "div"
+      // => toast_div is not part of this component!
+      const toast_div = message_div.value?.parentElement;
+      const delete_button = toast_div?.querySelector("button.delete");
+      if (!(delete_button instanceof HTMLButtonElement)) return;
 
-      const toast_div = message.value.parentElement;
-      if (toast_div === null) return;
-
-      const dbutton = toast_div.querySelector("button.delete");
-      if (!(dbutton instanceof HTMLButtonElement)) return;
-
-      dbutton.click();
+      delete_button.click();
     },
   }),
 );

ui/src/components/calendar/ThouCanvas.vue

@@ -42,7 +42,7 @@ const emit = defineEmits<{
   (event: TCEventType, e: MouseEvent, point: Vector2D): void;
 }>();
 
-function transform_mouse_event(event: MouseEvent) {
+function transform_mouse_event(event: MouseEvent): void {
   if (!is_tceventtype(event.type)) return;
 
   emit(event.type, event, get_event_thous(event));

ui/src/components/editor/DoorCanvas.vue

@@ -50,26 +50,20 @@ const preview_visible = computed(() => state.value.kind !== "idle");
 function pop_door(point: Vector2D): VueLike<Door> | undefined {
   const idx = model.value.findIndex((rect) => rect.position.contains(point));
 
-  if (idx === -1) {
-    return;
-  }
+  if (idx === -1) return;
 
   return model.value.splice(idx, 1)[0];
 }
 
-function draw_start(event: MouseEvent, point: Vector2D) {
-  if (preview_visible.value) {
-    return;
-  }
+function draw_start(event: MouseEvent, point: Vector2D): void {
+  if (preview_visible.value) return;
 
   preview.value = new Rectangle(point, point);
   state.value = { kind: "drawing" };
 }
 
-function draw_finish() {
-  if (state.value.kind !== "drawing") {
-    return;
-  }
+function draw_finish(): void {
+  if (state.value.kind !== "drawing") return;
 
   if (preview.value.area >= MIN_RECT_AREA) {
     model.value.push(new Door(preview.value));
@@ -78,33 +72,27 @@ function draw_finish() {
   state.value = { kind: "idle" };
 }
 
-function drag_start(event: MouseEvent, point: Vector2D) {
-  if (preview_visible.value) {
-    return;
-  }
+function drag_start(event: MouseEvent, point: Vector2D): void {
+  if (preview_visible.value) return;
 
   const drag_door = pop_door(point);
 
-  if (drag_door === undefined) {
-    return;
-  }
+  if (drag_door === undefined) return;
 
   preview.value = drag_door.position;
 
   state.value = { kind: "dragging", door: drag_door, origin: point };
 }
 
-function drag_finish() {
-  if (state.value.kind !== "dragging") {
-    return;
-  }
+function drag_finish(): void {
+  if (state.value.kind !== "dragging") return;
 
   model.value.push(new Door(preview.value, state.value.door.day));
 
   state.value = { kind: "idle" };
 }
 
-function on_mousemove(event: MouseEvent, point: Vector2D) {
+function on_mousemove(event: MouseEvent, point: Vector2D): void {
   if (state.value.kind === "drawing") {
     preview.value = preview.value.update(undefined, point);
   } else if (state.value.kind === "dragging") {
@@ -113,10 +101,8 @@ function on_mousemove(event: MouseEvent, point: Vector2D) {
   }
 }
 
-function remove_rect(event: MouseEvent, point: Vector2D) {
-  if (preview_visible.value) {
-    return;
-  }
+function remove_rect(event: MouseEvent, point: Vector2D): void {
+  if (preview_visible.value) return;
 
   pop_door(point);
 }

ui/src/components/editor/PreviewDoor.vue

@@ -35,15 +35,13 @@ const day_input = useTemplateRef("day_input");
 const day_str = ref("");
 const editing = ref(false);
 
-function toggle_editing() {
+function toggle_editing(): void {
   day_str.value = String(model.value.day);
   editing.value = !editing.value;
 }
 
-function on_click(event: MouseEvent) {
-  if (!(event.target instanceof HTMLDivElement)) {
-    return;
-  }
+function on_click(event: MouseEvent): void {
+  if (!(event.target instanceof HTMLDivElement)) return;
 
   if (editing.value) {
     unwrap_vuelike(model.value).day = day_str.value;
@@ -57,10 +55,8 @@ function on_click(event: MouseEvent) {
   toggle_editing();
 }
 
-function on_keydown(event: KeyboardEvent) {
-  if (!editing.value) {
-    return;
-  }
+function on_keydown(event: KeyboardEvent): void {
+  if (!editing.value) return;
 
   if (event.key === "Enter") {
     unwrap_vuelike(model.value).day = day_str.value;

ui/src/lib/api_error.ts

@@ -62,14 +62,14 @@ export class APIError extends Error {
     return result();
   }
 
-  public alert() {
+  public alert(): void {
     toast({
       message: this.format(),
       type: "is-danger",
     });
   }
 
-  public static alert(error: unknown) {
+  public static alert(error: unknown): void {
     new APIError(error, "").alert();
   }
 }

ui/src/lib/helpers.ts

@@ -26,7 +26,7 @@ export function unwrap_loading<T>(o: Loading<T>): T {
   return o;
 }
 
-export function wait_for(condition: () => boolean, action: () => void) {
+export function wait_for(condition: () => boolean, action: () => void): void {
   const enqueue_action = () => {
     if (!condition()) {
       nextTick(enqueue_action);
@@ -38,7 +38,7 @@ export function wait_for(condition: () => boolean, action: () => void) {
   enqueue_action();
 }
 
-export function handle_error(error: unknown) {
+export function handle_error(error: unknown): void {
   if (error instanceof APIError) {
     error.alert();
   } else {

ui/src/lib/store.ts

@@ -76,7 +76,7 @@ export const advent22Store = defineStore({
             API.request<DoorSaved[]>("user/doors"),
             API.request<number | null>("user/next_door"),
           ]);
-        is_admin; // discard value
+        void is_admin; // discard value
 
         document.title = site_config.title;
 
@@ -110,13 +110,14 @@ export const advent22Store = defineStore({
       return this.is_admin;
     },
 
-    login(creds: Credentials): Promise<boolean> {
+    async login(creds: Credentials): Promise<boolean> {
       API.creds = { username: creds[0], password: creds[1] };
-      return this.update_is_admin();
+      return await this.update_is_admin();
     },
 
-    logout(): Promise<boolean> {
-      return this.login(["", ""]);
+    logout() {
+      API.creds = { username: "", password: "" };
+      this.is_admin = false;
     },
 
     toggle_touch_device(): void {

ui/tests/unit/rectangle.spec.ts

@@ -16,7 +16,7 @@ describe("Rectangle Tests", () => {
     top: number,
     width: number,
     height: number,
-  ) {
+  ): void {
     expect(r.left).to.equal(left);
     expect(r.top).to.equal(top);