🔧 ui: more use of async functions and try-catch-blocks

🚧 WIP

ui/src/components/admin/CalendarAssistant.vue

@@ -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,31 +63,33 @@ function on_modal_handle(handle: HMultiModal) {
   modal = handle;
 }
 
-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: "" };
-        }
-      };
+async function on_open(ready: () => void, fail: () => void) {
+  try {
+    const [day_parts, day_image_names] = await Promise.all([
+      API.request<NumStrDict>("admin/day_parts"),
+      API.request<NumStrDict>("admin/day_image_names"),
+    ]);
 
-      objForEach(day_parts, (day, part) => {
-        _ensure_day_in_data(day);
-        day_data.value[day].part = part;
-      });
+    const _ensure_day_in_data = (day: number) => {
+      if (!(day in day_data.value)) {
+        day_data.value[day] = { part: "", image_name: "" };
+      }
+    };
 
-      objForEach(day_image_names, (day, image_name) => {
-        _ensure_day_in_data(day);
-        day_data.value[day].image_name = image_name;
-      });
+    objForEach(day_parts, (day, part) => {
+      _ensure_day_in_data(day);
+      day_data.value[day].part = part;
+    });
 
-      ready();
-    })
-    .catch(fail);
+    objForEach(day_image_names, (day, image_name) => {
+      _ensure_day_in_data(day);
+      day_data.value[day].image_name = image_name;
+    });
+
+    ready();
+  } catch {
+    fail();
+  }
 }
 
 async function door_click(day: number) {
@@ -102,7 +99,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

@@ -247,33 +247,40 @@ 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([
-    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
+async function on_open(ready: () => void, fail: () => void) {
+  try {
+    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"),
+      ],
+    );
 
-      admin_config_model.value = new_admin_config_model;
-      doors.value = new_doors;
+    void store_update;
+    admin_config_model.value = new_admin_config_model;
+    doors.value = new_doors;
 
-      ready();
-    })
-    .catch(fail);
+    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

@@ -95,60 +95,63 @@ 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");
 
-        for (const value of data) {
-          doors.value.push(Door.load(value));
-        }
-
-        resolve();
-      })
-      .catch((error) => {
-        APIError.alert(error);
-        reject();
-      });
-  });
+    doors.value.length = 0;
+    for (const value of data) {
+      doors.value.push(Door.load(value));
+    }
+  } catch (error) {
+    APIError.alert(error);
+    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) => {
-        APIError.alert(error);
-        reject();
-      });
-  });
+    await API.request<void>({
+      endpoint: "admin/doors",
+      method: "PUT",
+      data: data,
+    });
+  } catch (error) {
+    APIError.alert(error);
+    throw null;
+  }
 }
 
-function on_open(ready: () => void, fail: () => void): void {
-  load_doors().then(ready).catch(fail);
+async function on_open(ready: () => void, fail: () => void) {
+  try {
+    load_doors();
+    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(() =>
-        toast({
-          message: "Erfolgreich!",
-          type: "is-success",
-          duration: 2e3,
-        }),
-      )
-      .catch(() => {})
-      .finally(() => (loading_doors.value = false));
+    try {
+      load_doors();
+
+      toast({
+        message: "Erfolgreich!",
+        type: "is-success",
+        duration: 2e3,
+      });
+    } finally {
+      loading_doors.value = false;
+    }
   }
 }
 
@@ -159,24 +162,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(() =>
-            toast({
-              message: "Erfolgreich!",
-              type: "is-success",
-              duration: 2e3,
-            }),
-          )
-          .catch(() => {})
-          .finally(() => (saving_doors.value = false));
-      })
-      .catch(() => (saving_doors.value = false));
+    try {
+      save_doors();
+      load_doors();
+
+      toast({
+        message: "Erfolgreich!",
+        type: "is-success",
+        duration: 2e3,
+      });
+    } finally {
+      saving_doors.value = false;
+    }
   }
 }
 </script>