ui/src/components/AdminButton.vue

@@ -3,7 +3,7 @@
 
   <BulmaButton
     v-bind="$attrs"
-    :icon="['fas', store.is_admin ? 'fa-toggle-on' : 'fa-toggle-off']"
+    :icon="'fa-solid fa-toggle-' + (store.is_admin ? 'on' : '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(): void {
+function on_click() {
   if (store.is_admin) {
     store.logout();
   } else {
@@ -33,19 +33,16 @@ function on_click(): void {
   }
 }
 
-async function on_submit(creds: Credentials): Promise<void> {
+function on_submit(creds: Credentials) {
   modal_visible.value = false;
 
-  try {
+  store
-    await store.login(creds);
+    .login(creds)
-  } catch (error) {
+    .catch((error) => APIError.alert(error))
-    APIError.alert(error);
+    .finally(() => (is_busy.value = false));
-  } finally {
-    is_busy.value = false;
-  }
 }
 
-function on_cancel(): void {
+function on_cancel() {
   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): void {
+function on_modal_handle(handle: HMultiModal) {
   modal = handle;
 }
 
-function on_toast_handle(handle: HBulmaToast): void {
+function on_toast_handle(handle: HBulmaToast) {
   toast = handle;
 
   if (store.is_touch_device) return;
@@ -90,7 +90,7 @@ function on_toast_handle(handle: HBulmaToast): void {
   });
 }
 
-async function door_click(day: number): Promise<void> {
+async function door_click(day: number) {
   window.clearTimeout(toast_timeout);
   toast?.hide();
 

ui/src/components/LoginModal.vue

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

ui/src/components/MultiModal.vue

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

ui/src/components/TouchButton.vue

@@ -2,7 +2,10 @@
   <span>Eingabemodus:&nbsp;</span>
   <BulmaButton
     v-bind="$attrs"
-    :icon="['fas', store.is_touch_device ? 'hand-pointer' : 'arrow-pointer']"
+    :icon="
+      'fa-solid fa-' +
+      (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="['fas', 'fa-door-open']"
+            icon="fa-solid 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): void {
+function on_modal_handle(handle: HMultiModal) {
   modal = handle;
 }
 
-async function on_open(): Promise<void> {
+async function on_open() {
   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(): Promise<void> {
   });
 }
 
-async function door_click(day: number): Promise<void> {
+async function door_click(day: number) {
   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(): Promise<void> {
+async function on_open() {
   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; // discard value
+  void store_update;
   admin_config_model.value = new_admin_config_model;
   doors.value = new_doors;
 }
 
-async function load_dav_credentials(): Promise<void> {
+async function load_dav_credentials() {
   try {
     dav_credentials.value = await API.request<Credentials>(
       "admin/dav_credentials",
@@ -267,7 +267,7 @@ async function load_dav_credentials(): Promise<void> {
   } catch {}
 }
 
-async function load_ui_credentials(): Promise<void> {
+async function load_ui_credentials() {
   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="['fas', 'fa-backward']"
+        icon="fa-solid fa-backward"
       />
 
       <BulmaBreadcrumbs
@@ -18,7 +18,7 @@
         :disabled="current_step === 2"
         class="level-item is-link"
         @click="current_step++"
-        :icon="['fas', 'fa-forward']"
+        icon="fa-solid fa-forward"
       />
     </nav>
 
@@ -47,20 +47,20 @@
       <BulmaButton
         class="card-footer-item is-danger"
         @click="on_download"
-        :icon="['fas', 'fa-cloud-arrow-down']"
+        icon="fa-solid fa-cloud-arrow-down"
         :busy="loading_doors"
         text="Laden"
       />
       <BulmaButton
         class="card-footer-item is-warning"
         @click="on_discard"
-        :icon="['fas', 'fa-trash']"
+        icon="fa-solid fa-trash"
         text="Löschen"
       />
       <BulmaButton
         class="card-footer-item is-success"
         @click="on_upload"
-        :icon="['fas', 'fa-cloud-arrow-up']"
+        icon="fa-solid 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: ["fas", "fa-crosshairs"] },
+  { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
-  { label: "Ordnen", icon: ["fas", "fa-list-ol"] },
+  { label: "Ordnen", icon: "fa-solid fa-list-ol" },
-  { label: "Vorschau", icon: ["fas", "fa-magnifying-glass"] },
+  { label: "Vorschau", icon: "fa-solid 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(): Promise<void> {
+async function load_doors() {
   try {
     const data = await API.request<DoorSaved[]>("admin/doors");
 
@@ -109,7 +109,7 @@ async function load_doors(): Promise<void> {
   }
 }
 
-async function save_doors(): Promise<void> {
+async function save_doors() {
   try {
     const data: DoorSaved[] = [];
 
@@ -128,7 +128,7 @@ async function save_doors(): Promise<void> {
   }
 }
 
-async function on_download(): Promise<void> {
+async function on_download() {
   if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
     loading_doors.value = true;
 
@@ -146,14 +146,14 @@ async function on_download(): Promise<void> {
   }
 }
 
-function on_discard(): void {
+function on_discard() {
   if (confirm("Alle Türchen löschen? (nur lokal)")) {
     // empty `doors` array
     doors.value.length = 0;
   }
 }
 
-async function on_upload(): Promise<void> {
+async function on_upload() {
   if (confirm("Aktuelle Änderungen an den Server schicken?")) {
     saving_doors.value = true;
 

ui/src/components/bulma/Drawer.vue

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

ui/src/components/bulma/Toast.vue

@@ -20,27 +20,29 @@ const emit = defineEmits<{
   (event: "handle", handle: HBulmaToast): void;
 }>();
 
-const message_div = useTemplateRef("message");
+const message = useTemplateRef("message");
 
 onMounted(() =>
   emit("handle", {
-    show(options: ToastOptions = {}): void {
+    show(options: ToastOptions = {}) {
-      if (message_div.value === null) return;
+      if (message.value === null) return;
 
       toast({
         ...options,
         single: true,
-        message: message_div.value,
+        message: message.value,
       });
     },
-    hide(): void {
+    hide() {
-      // using "toast" detaches "message" from the invisible "div"
+      if (message.value === null) return;
-      // => 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;
 
-      delete_button.click();
+      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();
     },
   }),
 );

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): void {
+function transform_mouse_event(event: MouseEvent) {
   if (!is_tceventtype(event.type)) return;
 
   emit(event.type, event, get_event_thous(event));

ui/src/components/editor/DoorCanvas.vue

@@ -50,20 +50,26 @@ 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): void {
+function draw_start(event: MouseEvent, point: Vector2D) {
-  if (preview_visible.value) return;
+  if (preview_visible.value) {
+    return;
+  }
 
   preview.value = new Rectangle(point, point);
   state.value = { kind: "drawing" };
 }
 
-function draw_finish(): void {
+function draw_finish() {
-  if (state.value.kind !== "drawing") return;
+  if (state.value.kind !== "drawing") {
+    return;
+  }
 
   if (preview.value.area >= MIN_RECT_AREA) {
     model.value.push(new Door(preview.value));
@@ -72,27 +78,33 @@ function draw_finish(): void {
   state.value = { kind: "idle" };
 }
 
-function drag_start(event: MouseEvent, point: Vector2D): void {
+function drag_start(event: MouseEvent, point: Vector2D) {
-  if (preview_visible.value) return;
+  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(): void {
+function drag_finish() {
-  if (state.value.kind !== "dragging") return;
+  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): void {
+function on_mousemove(event: MouseEvent, point: Vector2D) {
   if (state.value.kind === "drawing") {
     preview.value = preview.value.update(undefined, point);
   } else if (state.value.kind === "dragging") {
@@ -101,8 +113,10 @@ function on_mousemove(event: MouseEvent, point: Vector2D): void {
   }
 }
 
-function remove_rect(event: MouseEvent, point: Vector2D): void {
+function remove_rect(event: MouseEvent, point: Vector2D) {
-  if (preview_visible.value) return;
+  if (preview_visible.value) {
+    return;
+  }
 
   pop_door(point);
 }

ui/src/components/editor/PreviewDoor.vue

@@ -35,13 +35,15 @@ const day_input = useTemplateRef("day_input");
 const day_str = ref("");
 const editing = ref(false);
 
-function toggle_editing(): void {
+function toggle_editing() {
   day_str.value = String(model.value.day);
   editing.value = !editing.value;
 }
 
-function on_click(event: MouseEvent): void {
+function on_click(event: MouseEvent) {
-  if (!(event.target instanceof HTMLDivElement)) return;
+  if (!(event.target instanceof HTMLDivElement)) {
+    return;
+  }
 
   if (editing.value) {
     unwrap_vuelike(model.value).day = day_str.value;
@@ -55,8 +57,10 @@ function on_click(event: MouseEvent): void {
   toggle_editing();
 }
 
-function on_keydown(event: KeyboardEvent): void {
+function on_keydown(event: KeyboardEvent) {
-  if (!editing.value) return;
+  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(): void {
+  public alert() {
     toast({
       message: this.format(),
       type: "is-danger",
     });
   }
 
-  public static alert(error: unknown): void {
+  public static alert(error: unknown) {
     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): void {
+export function wait_for(condition: () => boolean, action: () => void) {
   const enqueue_action = () => {
     if (!condition()) {
       nextTick(enqueue_action);
@@ -38,7 +38,7 @@ export function wait_for(condition: () => boolean, action: () => void): void {
   enqueue_action();
 }
 
-export function handle_error(error: unknown): void {
+export function handle_error(error: unknown) {
   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"),
           ]);
-        void is_admin; // discard value
+        is_admin; // discard value
 
         document.title = site_config.title;
 
@@ -110,14 +110,13 @@ export const advent22Store = defineStore({
       return this.is_admin;
     },
 
-    async login(creds: Credentials): Promise<boolean> {
+    login(creds: Credentials): Promise<boolean> {
       API.creds = { username: creds[0], password: creds[1] };
-      return await this.update_is_admin();
+      return this.update_is_admin();
     },
 
-    logout() {
+    logout(): Promise<boolean> {
-      API.creds = { username: "", password: "" };
+      return this.login(["", ""]);
-      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);