BulmaDrawer failed property

ui/src/components/CalendarAssistant.vue

@@ -4,6 +4,7 @@
   <BulmaDrawer
     header="Kalender-Assistent"
     :ready="is_loaded"
+    :failed="is_failed"
     @open="on_open"
     refreshable
   >
@@ -64,6 +65,8 @@ import MultiModal from "./calendar/MultiModal.vue";
 })
 export default class extends Vue {
   public is_loaded = false;
+  public is_failed = false;
+
   public day_parts: DayStrModel[] = [];
   public day_image_names: DayStrModel[] = [];
 
@@ -73,6 +76,7 @@ export default class extends Vue {
 
   public on_open(): void {
     this.is_loaded = false;
+    this.is_failed = false;
 
     Promise.all([
       this.$advent22.api_get<DayStrModel[]>("admin/day_parts"),
@@ -83,7 +87,7 @@ export default class extends Vue {
         this.day_image_names = day_image_names;
         this.is_loaded = true;
       })
-      .catch(console.error);
+      .catch(() => (this.is_failed = true));
   }
 
   public door_click(day: number) {

ui/src/components/ConfigView.vue

@@ -2,6 +2,7 @@
   <BulmaDrawer
     header="Konfiguration"
     :ready="is_loaded"
+    :failed="is_failed"
     @open="on_open"
     refreshable
   >
@@ -144,6 +145,8 @@ interface Credentials {
 })
 export default class extends Vue {
   public is_loaded = false;
+  public is_failed = true;
+
   public config_model: ConfigModel = {
     puzzle: {
       title: "Advent22",
@@ -175,6 +178,7 @@ export default class extends Vue {
 
   public on_open(): void {
     this.is_loaded = false;
+    this.is_failed = false;
 
     Promise.all([
       this.$advent22.api_get<ConfigModel>("admin/config_model"),
@@ -188,7 +192,7 @@ export default class extends Vue {
 
         this.is_loaded = true;
       })
-      .catch(console.error);
+      .catch(() => (this.is_failed = true));
   }
 
   public load_dav_credentials(): void {
@@ -200,7 +204,7 @@ export default class extends Vue {
           password: password,
         };
       })
-      .catch(console.error);
+      .catch(() => {});
   }
 
   public load_ui_credentials(): void {
@@ -212,7 +216,7 @@ export default class extends Vue {
           password: password,
         };
       })
-      .catch(console.error);
+      .catch(() => {});
   }
 }
 </script>

ui/src/components/DoorMapEditor.vue

@@ -1,5 +1,10 @@
 <template>
-  <BulmaDrawer header="Türchen bearbeiten" :ready="is_loaded" @open="on_open">
+  <BulmaDrawer
+    header="Türchen bearbeiten"
+    :ready="is_loaded"
+    :failed="is_failed"
+    @open="on_open"
+  >
     <div class="is-flex is-align-items-center is-justify-content-space-between">
       <BulmaButton
         :disabled="current_step === 0"
@@ -71,6 +76,7 @@ import DoorPlacer from "./editor/DoorPlacer.vue";
 })
 export default class extends Vue {
   public is_loaded = false;
+  public is_failed = false;
 
   public readonly steps: Step[] = [
     { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
@@ -97,8 +103,8 @@ export default class extends Vue {
           this.is_loaded = true;
           resolve(data);
         })
-        .catch(([reason, endpoint]) => {
-          alert(`Fehler: ${reason} in ${endpoint}`);
+        .catch((error) => {
+          alert(this.$advent22.format_user_error(error));
           reject();
         });
     });
@@ -115,8 +121,8 @@ export default class extends Vue {
       this.$advent22
         .api_put("admin/doors", data)
         .then(resolve)
-        .catch(([reason, endpoint]) => {
-          alert(`Fehler: ${reason} in ${endpoint}`);
+        .catch((error) => {
+          alert(this.$advent22.format_user_error(error));
           reject();
         });
     });
@@ -124,7 +130,9 @@ export default class extends Vue {
 
   public on_open(): void {
     this.is_loaded = false;
-    this.load_doors().catch(() => {});
+    this.is_failed = false;
+
+    this.load_doors().catch(() => (this.is_failed = true));
   }
 
   public on_download() {

ui/src/components/bulma/Drawer.vue

@@ -2,14 +2,16 @@
   <div class="card">
     <header class="card-header has-background-grey-lighter is-unselectable">
       <p class="card-header-title" @click="toggle">{{ header }}</p>
+
       <p v-if="refreshable" class="card-header-icon px-0">
         <button class="tag button icon is-info" @click="refresh">
           <font-awesome-icon
             icon="fa-solid fa-arrows-rotate"
-            :spin="is_open && !ready"
+            :spin="is_open && !ready && !failed"
           />
         </button>
       </p>
+
       <button class="card-header-icon" @click="toggle">
         <span class="icon">
           <font-awesome-icon
@@ -20,10 +22,15 @@
     </header>
 
     <template v-if="is_open">
-      <slot v-if="ready" name="default" />
-      <div v-else class="card-content">
+      <div v-if="failed" class="card-content has-text-danger has-text-centered">
+        <span class="icon is-large">
+          <font-awesome-icon icon="fa-solid fa-ban" size="3x" />
+        </span>
+      </div>
+      <div v-else-if="!ready" class="card-content">
         <progress class="progress is-info" max="100" />
       </div>
+      <slot v-else name="default" />
     </template>
   </div>
 </template>
@@ -39,6 +46,11 @@ import { Options, Vue } from "vue-class-component";
       default: "",
     },
     ready: Boolean,
+    failed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     refreshable: {
       type: Boolean,
       required: false,
@@ -50,6 +62,7 @@ import { Options, Vue } from "vue-class-component";
 export default class extends Vue {
   public header!: string;
   public ready!: boolean;
+  public failed!: boolean;
   public refreshable!: boolean;
 
   public is_open = false;