ui/src/components/Calendar.vue

@@ -30,7 +30,7 @@
 
   <figure>
     <div class="image is-unselectable">
-      <img :src="unwrap_loading(store.background_image).data_url" />
+      <img :src="ensure_loaded(store.background_image).data_url" />
       <ThouCanvas>
         <CalendarDoor
           v-for="(door, index) in doors"
@@ -49,7 +49,7 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { APIError } from "@/lib/api_error";
-import { VueLike, name_door, unwrap_loading } from "@/lib/helpers";
+import { ensure_loaded, Like, name_door } from "@/lib/helpers";
 import { ImageData } from "@/lib/model";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
@@ -62,7 +62,7 @@ import CalendarDoor from "./calendar/CalendarDoor.vue";
 import ThouCanvas from "./calendar/ThouCanvas.vue";
 
 defineProps<{
-  doors: VueLike<Door>[];
+  doors: Like<Door>[];
 }>();
 
 const store = advent22Store();

ui/src/components/admin/AdminView.vue

@@ -2,7 +2,7 @@
   <ConfigView />
   <CalendarAssistant />
   <DoorMapEditor />
-  <BulmaDrawer header="Vorschau">
+  <BulmaDrawer header="Vorschau" @open="(ready) => ready()">
     <UserView />
   </BulmaDrawer>
 </template>

ui/src/components/admin/CalendarAssistant.vue

@@ -1,7 +1,7 @@
 <template>
   <MultiModal @handle="on_modal_handle" />
 
-  <BulmaDrawer header="Kalender-Assistent" :opening="on_open" refreshable>
+  <BulmaDrawer header="Kalender-Assistent" @open="on_open" refreshable>
     <div class="card-content">
       <div class="content">
         <p>Hervorgehobenen Tagen wurde kein Buchstabe zugewiesen.</p>
@@ -37,7 +37,7 @@
             :class="'tag is-' + (data.part === '' ? 'warning' : 'info')"
             icon="fa-solid fa-door-open"
             :text="day.toString()"
-            @click.left="door_click(Number(day))"
+            @click.left="door_click(day)"
           />
         </div>
       </div>
@@ -55,7 +55,12 @@ import MultiModal, { HMultiModal } from "../MultiModal.vue";
 import BulmaButton from "../bulma/Button.vue";
 import BulmaDrawer from "../bulma/Drawer.vue";
 
-const day_data = ref<Record<number, { part: string; image_name: string }>>({});
+const day_data = ref<{
+  [day: number]: {
+    part: string;
+    image_name: string;
+  };
+}>({});
 
 let modal: HMultiModal | undefined;
 
@@ -63,12 +68,12 @@ function on_modal_handle(handle: HMultiModal) {
   modal = handle;
 }
 
-async function on_open() {
-  const [day_parts, day_image_names] = await Promise.all([
+function on_open(ready: () => void, fail: () => void) {
+  Promise.all([
     API.request<NumStrDict>("admin/day_parts"),
     API.request<NumStrDict>("admin/day_image_names"),
-  ]);
-
+  ])
+    .then(([day_parts, day_image_names]) => {
       const _ensure_day_in_data = (day: number) => {
         if (!(day in day_data.value)) {
           day_data.value[day] = { part: "", image_name: "" };
@@ -84,6 +89,10 @@ async function on_open() {
         _ensure_day_in_data(day);
         day_data.value[day].image_name = image_name;
       });
+
+      ready();
+    })
+    .catch(fail);
 }
 
 async function door_click(day: number) {
@@ -93,7 +102,7 @@ async function door_click(day: number) {
   try {
     const day_image = await API.request<ImageData>(`user/image_${day}`);
     modal.show_image(day_image.data_url, name_door(day));
-  } catch {
+  } catch (error) {
     modal.hide();
   }
 }

ui/src/components/admin/ConfigView.vue

@@ -1,5 +1,5 @@
 <template>
-  <BulmaDrawer header="Konfiguration" :opening="on_open" refreshable>
+  <BulmaDrawer header="Konfiguration" @open="on_open" refreshable>
     <div class="card-content">
       <div class="columns">
         <div class="column is-one-third">
@@ -247,32 +247,33 @@ function fmt_puzzle_date(name: keyof AdminConfigModel["puzzle"]): string {
   return DateTime.fromISO(iso_date).toLocaleString(DateTime.DATE_SHORT);
 }
 
-async function on_open() {
-  const [store_update, new_admin_config_model, new_doors] = await Promise.all([
+function on_open(ready: () => void, fail: () => void): void {
+  Promise.all([
     store.update(),
     API.request<AdminConfigModel>("admin/config_model"),
     API.request<DoorSaved[]>("admin/doors"),
-  ]);
+  ])
+    .then(([store_update, new_admin_config_model, new_doors]) => {
+      store_update; // discard value
 
-  void store_update;
       admin_config_model.value = new_admin_config_model;
       doors.value = new_doors;
+
+      ready();
+    })
+    .catch(fail);
 }
 
-async function load_dav_credentials() {
-  try {
-    dav_credentials.value = await API.request<Credentials>(
-      "admin/dav_credentials",
-    );
-  } catch {}
+function load_dav_credentials(): void {
+  API.request<Credentials>("admin/dav_credentials")
+    .then((creds) => (dav_credentials.value = creds))
+    .catch(() => {});
 }
 
-async function load_ui_credentials() {
-  try {
-    ui_credentials.value = await API.request<Credentials>(
-      "admin/ui_credentials",
-    );
-  } catch {}
+function load_ui_credentials(): void {
+  API.request<Credentials>("admin/ui_credentials")
+    .then((creds) => (ui_credentials.value = creds))
+    .catch(() => {});
 }
 </script>
 

ui/src/components/admin/DoorMapEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <BulmaDrawer header="Türchen bearbeiten" :opening="load_doors">
+  <BulmaDrawer header="Türchen bearbeiten" @open="on_open">
     <nav class="level is-mobile mb-0" style="overflow-x: auto">
       <BulmaButton
         :disabled="current_step === 0"
@@ -95,54 +95,60 @@ const current_step = ref(0);
 const loading_doors = ref(false);
 const saving_doors = ref(false);
 
-async function load_doors() {
-  try {
-    const data = await API.request<DoorSaved[]>("admin/doors");
-
+function load_doors(): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    API.request<DoorSaved[]>("admin/doors")
+      .then((data) => {
         doors.value.length = 0;
+
         for (const value of data) {
           doors.value.push(Door.load(value));
         }
-  } catch (error) {
+
+        resolve();
+      })
+      .catch((error) => {
         APIError.alert(error);
-    throw null;
-  }
+        reject();
+      });
+  });
 }
 
-async function save_doors() {
-  try {
+function save_doors(): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
     const data: DoorSaved[] = [];
 
     for (const door of doors.value) {
       data.push(door.save());
     }
 
-    await API.request<void>({
-      endpoint: "admin/doors",
-      method: "PUT",
-      data: data,
-    });
-  } catch (error) {
+    API.request<void>({ endpoint: "admin/doors", method: "PUT", data: data })
+      .then(resolve)
+      .catch((error) => {
         APIError.alert(error);
-    throw null;
-  }
+        reject();
+      });
+  });
 }
 
-async function on_download() {
+function on_open(ready: () => void, fail: () => void): void {
+  load_doors().then(ready).catch(fail);
+}
+
+function on_download() {
   if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
     loading_doors.value = true;
 
-    try {
-      load_doors();
-
+    load_doors()
+      .then(() =>
         toast({
           message: "Erfolgreich!",
           type: "is-success",
           duration: 2e3,
-      });
-    } finally {
-      loading_doors.value = false;
-    }
+        }),
+      )
+      .catch(() => {})
+      .finally(() => (loading_doors.value = false));
   }
 }
 
@@ -153,22 +159,24 @@ function on_discard() {
   }
 }
 
-async function on_upload() {
+function on_upload() {
   if (confirm("Aktuelle Änderungen an den Server schicken?")) {
     saving_doors.value = true;
 
-    try {
-      save_doors();
-      load_doors();
-
+    save_doors()
+      .then(() => {
+        load_doors()
+          .then(() =>
             toast({
               message: "Erfolgreich!",
               type: "is-success",
               duration: 2e3,
-      });
-    } finally {
-      saving_doors.value = false;
-    }
+            }),
+          )
+          .catch(() => {})
+          .finally(() => (saving_doors.value = false));
+      })
+      .catch(() => (saving_doors.value = false));
   }
 }
 </script>

ui/src/components/bulma/Drawer.vue

@@ -4,11 +4,11 @@
     <header class="card-header is-unselectable" style="cursor: pointer">
       <p class="card-header-title" @click="toggle">{{ header }}</p>
 
-      <p v-if="refreshable && is_open" class="card-header-icon px-0">
-        <BulmaButton class="is-small is-primary" @click="load">
+      <p v-if="refreshable" class="card-header-icon px-0">
+        <BulmaButton class="is-small is-primary" @click="refresh">
           <FontAwesomeIcon
             :icon="['fas', 'arrows-rotate']"
-            :spin="state === 'loading'"
+            :spin="is_open && state === 'loading'"
           />
         </BulmaButton>
       </p>
@@ -27,7 +27,7 @@
         <progress class="progress is-primary" />
       </div>
       <div
-        v-else-if="state === 'err'"
+        v-else-if="state === 'failed'"
         class="card-content has-text-danger has-text-centered"
       >
         <span class="icon is-large">
@@ -40,40 +40,43 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { ref } from "vue";
 
 import BulmaButton from "./Button.vue";
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     header: string;
-    opening?: () => Promise<void>;
     refreshable?: boolean;
   }>(),
-  { opening: async () => {}, refreshable: false },
+  { refreshable: false },
 );
 
-const state = ref<"closed" | "loading" | "ok" | "err">("closed");
-const is_open = computed(() => state.value !== "closed");
+const emit = defineEmits<{
+  (event: "open", ready: () => void, fail: () => void): void;
+}>();
+
+const is_open = ref(false);
+const state = ref<"loading" | "ready" | "failed">("loading");
+
+function toggle() {
+  is_open.value = !is_open.value;
 
-async function toggle() {
   if (is_open.value) {
-    state.value = "closed";
-  } else {
-    await load();
-  }
-}
-
-async function load() {
     state.value = "loading";
 
-  try {
-    await props.opening();
-    state.value = "ok";
-  } catch {
-    state.value = "err";
+    emit(
+      "open",
+      () => (state.value = "ready"),
+      () => (state.value = "failed"),
+    );
   }
 }
+
+function refresh() {
+  is_open.value = false;
+  toggle();
+}
 </script>
 
 <style scoped>

ui/src/components/calendar/CalendarDoor.vue

@@ -17,14 +17,14 @@
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
-import { VueLike } from "@/lib/helpers";
+import { Like } from "@/lib/helpers";
 import SVGRect from "./SVGRect.vue";
 
 const store = advent22Store();
 
 withDefaults(
   defineProps<{
-    door: VueLike<Door>;
+    door: Like<Door>;
     force_visible?: boolean;
   }>(),
   {

ui/src/components/calendar/SVGRect.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { VueLike, loading_success } from "@/lib/helpers";
+import { Like, loading_success } from "@/lib/helpers";
 import { Rectangle } from "@/lib/rects/rectangle";
 import { advent22Store } from "@/lib/store";
 import { computed } from "vue";
@@ -39,7 +39,7 @@ withDefaults(
   defineProps<{
     variant: BulmaVariant;
     visible?: boolean;
-    rectangle: VueLike<Rectangle>;
+    rectangle: Like<Rectangle>;
   }>(),
   {
     visible: true,

ui/src/components/editor/DoorCanvas.vue

@@ -29,7 +29,7 @@ import { Rectangle } from "@/lib/rects/rectangle";
 import { Vector2D } from "@/lib/rects/vector2d";
 import { computed, ref } from "vue";
 
-import { VueLike } from "@/lib/helpers";
+import { Like } from "@/lib/helpers";
 import CalendarDoor from "../calendar/CalendarDoor.vue";
 import SVGRect from "../calendar/SVGRect.vue";
 import ThouCanvas from "../calendar/ThouCanvas.vue";
@@ -37,9 +37,9 @@ import ThouCanvas from "../calendar/ThouCanvas.vue";
 type CanvasState =
   | { kind: "idle" }
   | { kind: "drawing" }
-  | { kind: "dragging"; door: VueLike<Door>; origin: Vector2D };
+  | { kind: "dragging"; door: Like<Door>; origin: Vector2D };
 
-const model = defineModel<VueLike<Door>[]>({ required: true });
+const model = defineModel<Like<Door>[]>({ required: true });
 
 const MIN_RECT_AREA = 300;
 const state = ref<CanvasState>({ kind: "idle" });
@@ -47,7 +47,7 @@ const preview = ref(new Rectangle());
 
 const preview_visible = computed(() => state.value.kind !== "idle");
 
-function pop_door(point: Vector2D): VueLike<Door> | undefined {
+function pop_door(point: Vector2D): Like<Door> | undefined {
   const idx = model.value.findIndex((rect) => rect.position.contains(point));
 
   if (idx === -1) {

ui/src/components/editor/DoorChooser.vue

@@ -11,7 +11,7 @@
       </ul>
     </div>
     <figure class="image is-unselectable">
-      <img :src="unwrap_loading(store.background_image).data_url" />
+      <img :src="ensure_loaded(store.background_image).data_url" />
       <ThouCanvas>
         <PreviewDoor
           v-for="(_, index) in model"
@@ -24,13 +24,13 @@
 </template>
 
 <script setup lang="ts">
-import { VueLike, unwrap_loading } from "@/lib/helpers";
+import { ensure_loaded, Like } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
 import ThouCanvas from "../calendar/ThouCanvas.vue";
 import PreviewDoor from "./PreviewDoor.vue";
 
-const model = defineModel<VueLike<Door>[]>({ required: true });
+const model = defineModel<Like<Door>[]>({ required: true });
 const store = advent22Store();
 </script>

ui/src/components/editor/DoorPlacer.vue

@@ -9,19 +9,19 @@
       </ul>
     </div>
     <figure class="image is-unselectable">
-      <img :src="unwrap_loading(store.background_image).data_url" />
+      <img :src="ensure_loaded(store.background_image).data_url" />
       <DoorCanvas v-model="model" />
     </figure>
   </div>
 </template>
 
 <script setup lang="ts">
-import { VueLike, unwrap_loading } from "@/lib/helpers";
+import { ensure_loaded, Like } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
 import DoorCanvas from "./DoorCanvas.vue";
 
-const model = defineModel<VueLike<Door>[]>({ required: true });
+const model = defineModel<Like<Door>[]>({ required: true });
 const store = advent22Store();
 </script>

ui/src/components/editor/PreviewDoor.vue

@@ -26,10 +26,10 @@
 import { Door } from "@/lib/rects/door";
 import { ref, useTemplateRef } from "vue";
 
-import { VueLike, unwrap_vuelike, wait_for } from "@/lib/helpers";
+import { Like, unwrap_like, wait_for } from "@/lib/helpers";
 import SVGRect from "../calendar/SVGRect.vue";
 
-const model = defineModel<VueLike<Door>>({ required: true });
+const model = defineModel<Like<Door>>({ required: true });
 const day_input = useTemplateRef("day_input");
 
 const day_str = ref("");
@@ -46,7 +46,7 @@ function on_click(event: MouseEvent) {
   }
 
   if (editing.value) {
-    unwrap_vuelike(model.value).day = day_str.value;
+    unwrap_like(model.value).day = day_str.value;
   } else {
     wait_for(
       () => day_input.value !== null,
@@ -63,7 +63,7 @@ function on_keydown(event: KeyboardEvent) {
   }
 
   if (event.key === "Enter") {
-    unwrap_vuelike(model.value).day = day_str.value;
+    unwrap_like(model.value).day = day_str.value;
     toggle_editing();
   } else if (event.key === "Delete") {
     model.value.day = -1;

ui/src/lib/helpers.ts

@@ -12,9 +12,9 @@ export function objForEach<T>(
   }
 }
 
-export type VueLike<T> = T | UnwrapRef<T>;
+export type Like<T> = T | UnwrapRef<T>;
 
-export function unwrap_vuelike<T>(value: VueLike<T>): T {
+export function unwrap_like<T>(value: Like<T>): T {
   return value as T;
 }
 
@@ -27,8 +27,8 @@ export function loading_success<T>(o: Loading<T>): o is T {
   return true;
 }
 
-export function unwrap_loading<T>(o: Loading<T>): T {
-  if (!loading_success(o)) throw null;
+export function ensure_loaded<T>(o: Loading<T>): T {
+  if (!loading_success(o)) throw "";
 
   return o;
 }

ui/src/lib/rects/door.ts

@@ -1,4 +1,4 @@
-import { VueLike, unwrap_vuelike } from "../helpers";
+import { Like, unwrap_like } from "../helpers";
 import { DoorSaved } from "../model";
 import { Rectangle } from "./rectangle";
 import { Vector2D } from "./vector2d";
@@ -9,11 +9,11 @@ export class Door {
   private _day = Door.MIN_DAY;
   public position: Rectangle;
 
-  constructor(position: VueLike<Rectangle>);
-  constructor(position: VueLike<Rectangle>, day: number);
-  constructor(position: VueLike<Rectangle>, day = Door.MIN_DAY) {
+  constructor(position: Like<Rectangle>);
+  constructor(position: Like<Rectangle>, day: number);
+  constructor(position: Like<Rectangle>, day = Door.MIN_DAY) {
     this.day = day;
-    this.position = unwrap_vuelike(position);
+    this.position = unwrap_like(position);
   }
 
   public get day(): number {