From 9ebf50218c6776318aa931a4a3bb0439876af4e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Wed, 13 Sep 2023 14:07:09 +0000
Subject: [PATCH] DoorMapEditor "busy" state + error handling

---
 ui/src/components/DoorMapEditor.vue | 69 +++++++++++++++--------------
 1 file changed, 35 insertions(+), 34 deletions(-)

diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue
index 01c55ae..ce278c2 100644
--- a/ui/src/components/DoorMapEditor.vue
+++ b/ui/src/components/DoorMapEditor.vue
@@ -27,6 +27,7 @@
         class="card-footer-item is-danger"
         @click="on_download"
         icon="fa-solid fa-cloud-arrow-down"
+        :busy="loading_doors"
         text="Laden"
       />
       <BulmaButton
@@ -39,6 +40,7 @@
         class="card-footer-item is-success"
         @click="on_upload"
         icon="fa-solid fa-cloud-arrow-up"
+        :busy="saving_doors"
         text="Speichern"
       />
     </footer>
@@ -78,14 +80,22 @@ export default class extends Vue {
   public current_step = 0;
   public doors: Door[] = [];
 
-  private load_doors(): Promise<void | DoorsSaved> {
-    return this.$advent22.api_get<DoorsSaved>("admin/doors").then((data) => {
-      this.doors.length = 0;
+  public loading_doors = false;
+  public saving_doors = false;
 
-      for (const value of data) {
-        this.doors.push(Door.load(value));
-      }
-    });
+  private load_doors(): Promise<void | DoorsSaved> {
+    return this.$advent22
+      .api_get<DoorsSaved>("admin/doors")
+      .then((data) => {
+        this.doors.length = 0;
+
+        for (const value of data) {
+          this.doors.push(Door.load(value));
+        }
+
+        this.is_loaded = true;
+      })
+      .catch(([reason, endpoint]) => alert(`Fehler: ${reason} in ${endpoint}`));
   }
 
   private save_doors(): Promise<void> {
@@ -95,32 +105,24 @@ export default class extends Vue {
       data.push(door.save());
     }
 
-    return this.$advent22.api_put("admin/doors", data);
+    return this.$advent22
+      .api_put("admin/doors", data)
+      .catch((reason) => alert(`Fehler: ${reason} in admin/doors`));
   }
 
   public on_open(): void {
     this.is_loaded = false;
-
-    this.load_doors()
-      .then(() => (this.is_loaded = true))
-      .catch(([reason, endpoint]) => {
-        alert(`Fehler: ${reason} in ${endpoint}`);
-      });
-  }
-
-  public mounted(): void {
-    this.load_doors().catch(([reason, endpoint]) => {
-      alert(`Fehler: ${reason} in ${endpoint}`);
-    });
+    this.load_doors();
   }
 
   public on_download() {
     if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
-      this.load_doors()
-        .then(() => alert("Erfolgeich!"))
-        .catch(([reason, endpoint]) => {
-          alert(`Fehler: ${reason} in ${endpoint}`);
-        });
+      this.loading_doors = true;
+
+      this.load_doors().then(() => {
+        alert("Erfolgeich!");
+        this.loading_doors = false;
+      });
     }
   }
 
@@ -133,15 +135,14 @@ export default class extends Vue {
 
   public on_upload() {
     if (confirm("Aktuelle Änderungen an den Server schicken?")) {
-      this.save_doors()
-        .then(() => {
-          this.load_doors()
-            .then(() => alert("Erfolgeich!"))
-            .catch(([reason, endpoint]) =>
-              alert(`Fehler: ${reason} in ${endpoint}`),
-            );
-        })
-        .catch((reason) => alert(`Fehler: ${reason}`));
+      this.saving_doors = true;
+
+      this.save_doors().then(() => {
+        this.load_doors().then(() => {
+          alert("Erfolgeich!");
+          this.saving_doors = false;
+        });
+      });
     }
   }
 }