🔧 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<{
+const day_data = ref<Record<number, { part: string; image_name: string }>>({});
-  [day: number]: {
-    part: string;
-    image_name: string;
-  };
-}>({});
 
 let modal: HMultiModal | undefined;
 
@@ -68,12 +63,13 @@ function on_modal_handle(handle: HMultiModal) {
   modal = handle;
 }
 
-function on_open(ready: () => void, fail: () => void) {
+async function on_open(ready: () => void, fail: () => void) {
-  Promise.all([
+  try {
+    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: "" };
@@ -91,8 +87,9 @@ function on_open(ready: () => void, fail: () => void) {
     });
 
     ready();
-    })
+  } catch {
-    .catch(fail);
+    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 {
+async function on_open(ready: () => void, fail: () => void) {
-  Promise.all([
+  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"),
-  ])
+      ],
-    .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 {
-    .catch(fail);
+    fail();
+  }
 }
 
-function load_dav_credentials(): void {
+async function load_dav_credentials() {
-  API.request<Credentials>("admin/dav_credentials")
+  try {
-    .then((creds) => (dav_credentials.value = creds))
+    dav_credentials.value = await API.request<Credentials>(
-    .catch(() => {});
+      "admin/dav_credentials",
+    );
+  } catch {}
 }
 
-function load_ui_credentials(): void {
+async function load_ui_credentials() {
-  API.request<Credentials>("admin/ui_credentials")
+  try {
-    .then((creds) => (ui_credentials.value = creds))
+    ui_credentials.value = await API.request<Credentials>(
-    .catch(() => {});
+      "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> {
+async function load_doors() {
-  return new Promise<void>((resolve, reject) => {
+  try {
-    API.request<DoorSaved[]>("admin/doors")
+    const data = await API.request<DoorSaved[]>("admin/doors");
-      .then((data) => {
-        doors.value.length = 0;
 
+    doors.value.length = 0;
     for (const value of data) {
       doors.value.push(Door.load(value));
     }
-
+  } catch (error) {
-        resolve();
-      })
-      .catch((error) => {
     APIError.alert(error);
-        reject();
+    throw null;
-      });
+  }
-  });
 }
 
-function save_doors(): Promise<void> {
+async function save_doors() {
-  return new Promise<void>((resolve, reject) => {
+  try {
     const data: DoorSaved[] = [];
 
     for (const door of doors.value) {
       data.push(door.save());
     }
 
-    API.request<void>({ endpoint: "admin/doors", method: "PUT", data: data })
+    await API.request<void>({
-      .then(resolve)
+      endpoint: "admin/doors",
-      .catch((error) => {
+      method: "PUT",
+      data: data,
+    });
+  } catch (error) {
     APIError.alert(error);
-        reject();
+    throw null;
-      });
+  }
-  });
 }
 
-function on_open(ready: () => void, fail: () => void): void {
+async function on_open(ready: () => void, fail: () => void) {
-  load_doors().then(ready).catch(fail);
+  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()
+    try {
-      .then(() =>
+      load_doors();
+
       toast({
         message: "Erfolgreich!",
         type: "is-success",
         duration: 2e3,
-        }),
+      });
-      )
+    } finally {
-      .catch(() => {})
+      loading_doors.value = false;
-      .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()
+    try {
-      .then(() => {
+      save_doors();
-        load_doors()
+      load_doors();
-          .then(() =>
+
       toast({
         message: "Erfolgreich!",
         type: "is-success",
         duration: 2e3,
-            }),
+      });
-          )
+    } finally {
-          .catch(() => {})
+      saving_doors.value = false;
-          .finally(() => (saving_doors.value = false));
+    }
-      })
-      .catch(() => (saving_doors.value = false));
   }
 }
 </script>