🔧 ui: minor changes to helpers

- rename `Like` -> `VueLike` (also `unwrap_like` -> `unwrap_vuelike`)
- rename `ensure_loaded` -> `unwrap_loading`
- make `unwrap_loading` throw `null` on error instead of `""`

ui/src/components/Calendar.vue

@@ -30,7 +30,7 @@
 
   <figure>
     <div class="image is-unselectable">
-      <img :src="ensure_loaded(store.background_image).data_url" />
+      <img :src="unwrap_loading(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 { ensure_loaded, Like, name_door } from "@/lib/helpers";
+import { VueLike, name_door, unwrap_loading } 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: Like<Door>[];
+  doors: VueLike<Door>[];
 }>();
 
 const store = advent22Store();

ui/src/components/admin/AdminView.vue

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

ui/src/components/admin/CalendarAssistant.vue

@@ -1,7 +1,7 @@
 <template>
   <MultiModal @handle="on_modal_handle" />
 
-  <BulmaDrawer header="Kalender-Assistent" @open="on_open" refreshable>
+  <BulmaDrawer header="Kalender-Assistent" :opening="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(day)"
+            @click.left="door_click(Number(day))"
           />
         </div>
       </div>
@@ -55,12 +55,7 @@ import MultiModal, { HMultiModal } from "../MultiModal.vue";
 import BulmaButton from "../bulma/Button.vue";
 import BulmaDrawer from "../bulma/Drawer.vue";
 
-const day_data = ref<{
-  [day: number]: {
-    part: string;
-    image_name: string;
-  };
-}>({});
+const day_data = ref<Record<number, { part: string; image_name: string }>>({});
 
 let modal: HMultiModal | undefined;
 
@@ -68,12 +63,12 @@ function on_modal_handle(handle: HMultiModal) {
   modal = handle;
 }
 
-function on_open(ready: () => void, fail: () => void) {
-  Promise.all([
+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"),
-  ])
-    .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: "" };
@@ -89,10 +84,6 @@ function on_open(ready: () => void, fail: () => void) {
     _ensure_day_in_data(day);
     day_data.value[day].image_name = image_name;
   });
-
-      ready();
-    })
-    .catch(fail);
 }
 
 async function door_click(day: number) {
@@ -102,7 +93,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 (error) {
+  } catch {
     modal.hide();
   }
 }

ui/src/components/admin/ConfigView.vue

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

ui/src/components/admin/DoorMapEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <BulmaDrawer header="Türchen bearbeiten" @open="on_open">
+  <BulmaDrawer header="Türchen bearbeiten" :opening="load_doors">
     <nav class="level is-mobile mb-0" style="overflow-x: auto">
       <BulmaButton
         :disabled="current_step === 0"
@@ -95,60 +95,54 @@ const current_step = ref(0);
 const loading_doors = ref(false);
 const saving_doors = ref(false);
 
-function load_doors(): Promise<void> {
-  return new Promise<void>((resolve, reject) => {
-    API.request<DoorSaved[]>("admin/doors")
-      .then((data) => {
-        doors.value.length = 0;
+async function load_doors() {
+  try {
+    const data = await API.request<DoorSaved[]>("admin/doors");
 
+    doors.value.length = 0;
     for (const value of data) {
       doors.value.push(Door.load(value));
     }
-
-        resolve();
-      })
-      .catch((error) => {
+  } catch (error) {
     APIError.alert(error);
-        reject();
-      });
-  });
+    throw null;
+  }
 }
 
-function save_doors(): Promise<void> {
-  return new Promise<void>((resolve, reject) => {
+async function save_doors() {
+  try {
     const data: DoorSaved[] = [];
 
     for (const door of doors.value) {
       data.push(door.save());
     }
 
-    API.request<void>({ endpoint: "admin/doors", method: "PUT", data: data })
-      .then(resolve)
-      .catch((error) => {
+    await API.request<void>({
+      endpoint: "admin/doors",
+      method: "PUT",
+      data: data,
+    });
+  } catch (error) {
     APIError.alert(error);
-        reject();
-      });
-  });
+    throw null;
+  }
 }
 
-function on_open(ready: () => void, fail: () => void): void {
-  load_doors().then(ready).catch(fail);
-}
-
-function on_download() {
+async function on_download() {
   if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
     loading_doors.value = true;
 
-    load_doors()
-      .then(() =>
+    try {
+      load_doors();
+
       toast({
         message: "Erfolgreich!",
         type: "is-success",
         duration: 2e3,
-        }),
-      )
-      .catch(() => {})
-      .finally(() => (loading_doors.value = false));
+      });
+    } finally {
+      loading_doors.value = false;
+    }
   }
 }
 
@@ -159,24 +153,22 @@ function on_discard() {
   }
 }
 
-function on_upload() {
+async function on_upload() {
   if (confirm("Aktuelle Änderungen an den Server schicken?")) {
     saving_doors.value = true;
 
-    save_doors()
-      .then(() => {
-        load_doors()
-          .then(() =>
+    try {
+      save_doors();
+      load_doors();
+
       toast({
         message: "Erfolgreich!",
         type: "is-success",
         duration: 2e3,
-            }),
-          )
-          .catch(() => {})
-          .finally(() => (saving_doors.value = false));
-      })
-      .catch(() => (saving_doors.value = false));
+      });
+    } finally {
+      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" class="card-header-icon px-0">
-        <BulmaButton class="is-small is-primary" @click="refresh">
+      <p v-if="refreshable && is_open" class="card-header-icon px-0">
+        <BulmaButton class="is-small is-primary" @click="load">
           <FontAwesomeIcon
             :icon="['fas', 'arrows-rotate']"
-            :spin="is_open && state === 'loading'"
+            :spin="state === 'loading'"
           />
         </BulmaButton>
       </p>
@@ -27,7 +27,7 @@
         <progress class="progress is-primary" />
       </div>
       <div
-        v-else-if="state === 'failed'"
+        v-else-if="state === 'err'"
         class="card-content has-text-danger has-text-centered"
       >
         <span class="icon is-large">
@@ -40,42 +40,39 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import BulmaButton from "./Button.vue";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     header: string;
+    opening?: () => Promise<void>;
     refreshable?: boolean;
   }>(),
-  { refreshable: false },
+  { opening: async () => {}, refreshable: false },
 );
 
-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;
+const state = ref<"closed" | "loading" | "ok" | "err">("closed");
+const is_open = computed(() => state.value !== "closed");
 
+async function toggle() {
   if (is_open.value) {
-    state.value = "loading";
-
-    emit(
-      "open",
-      () => (state.value = "ready"),
-      () => (state.value = "failed"),
-    );
+    state.value = "closed";
+  } else {
+    await load();
   }
 }
 
-function refresh() {
-  is_open.value = false;
-  toggle();
+async function load() {
+  state.value = "loading";
+
+  try {
+    await props.opening();
+    state.value = "ok";
+  } catch {
+    state.value = "err";
+  }
 }
 </script>
 

ui/src/components/calendar/CalendarDoor.vue

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

ui/src/components/calendar/SVGRect.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { Like, loading_success } from "@/lib/helpers";
+import { VueLike, 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: Like<Rectangle>;
+    rectangle: VueLike<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 { Like } from "@/lib/helpers";
+import { VueLike } 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: Like<Door>; origin: Vector2D };
+  | { kind: "dragging"; door: VueLike<Door>; origin: Vector2D };
 
-const model = defineModel<Like<Door>[]>({ required: true });
+const model = defineModel<VueLike<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): Like<Door> | undefined {
+function pop_door(point: Vector2D): VueLike<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="ensure_loaded(store.background_image).data_url" />
+      <img :src="unwrap_loading(store.background_image).data_url" />
       <ThouCanvas>
         <PreviewDoor
           v-for="(_, index) in model"
@@ -24,13 +24,13 @@
 </template>
 
 <script setup lang="ts">
-import { ensure_loaded, Like } from "@/lib/helpers";
+import { VueLike, unwrap_loading } 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<Like<Door>[]>({ required: true });
+const model = defineModel<VueLike<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="ensure_loaded(store.background_image).data_url" />
+      <img :src="unwrap_loading(store.background_image).data_url" />
       <DoorCanvas v-model="model" />
     </figure>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ensure_loaded, Like } from "@/lib/helpers";
+import { VueLike, unwrap_loading } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
 import DoorCanvas from "./DoorCanvas.vue";
 
-const model = defineModel<Like<Door>[]>({ required: true });
+const model = defineModel<VueLike<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 { Like, unwrap_like, wait_for } from "@/lib/helpers";
+import { VueLike, unwrap_vuelike, wait_for } from "@/lib/helpers";
 import SVGRect from "../calendar/SVGRect.vue";
 
-const model = defineModel<Like<Door>>({ required: true });
+const model = defineModel<VueLike<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_like(model.value).day = day_str.value;
+    unwrap_vuelike(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_like(model.value).day = day_str.value;
+    unwrap_vuelike(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 Like<T> = T | UnwrapRef<T>;
+export type VueLike<T> = T | UnwrapRef<T>;
 
-export function unwrap_like<T>(value: Like<T>): T {
+export function unwrap_vuelike<T>(value: VueLike<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 ensure_loaded<T>(o: Loading<T>): T {
-  if (!loading_success(o)) throw "";
+export function unwrap_loading<T>(o: Loading<T>): T {
+  if (!loading_success(o)) throw null;
 
   return o;
 }

ui/src/lib/rects/door.ts

@@ -1,4 +1,4 @@
-import { Like, unwrap_like } from "../helpers";
+import { VueLike, unwrap_vuelike } 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: Like<Rectangle>);
-  constructor(position: Like<Rectangle>, day: number);
-  constructor(position: Like<Rectangle>, day = Door.MIN_DAY) {
+  constructor(position: VueLike<Rectangle>);
+  constructor(position: VueLike<Rectangle>, day: number);
+  constructor(position: VueLike<Rectangle>, day = Door.MIN_DAY) {
     this.day = day;
-    this.position = unwrap_like(position);
+    this.position = unwrap_vuelike(position);
   }
 
   public get day(): number {