DoorMapEditor fully usable

ui/src/components/BulmaDrawer.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="panel">
+    <p class="panel-heading is-unselectable" @click="is_open = !is_open">
+      <span class="icon-text">
+        <span class="icon has-text-link">
+          <font-awesome-icon
+            :icon="'fa-solid fa-caret-' + (is_open ? 'down' : 'right')"
+          />
+        </span>
+        <span><slot name="heading" /></span>
+      </span>
+    </p>
+    <slot v-if="is_open" name="default" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component";
+
+export default class extends Vue {
+  public is_open = false;
+}
+</script>
+
+<style scoped>
+div.panel > .panel-heading {
+  cursor: pointer;
+}
+</style>

ui/src/components/DoorMapEditor.vue

@@ -1,18 +1,51 @@
 <template>
-  <div class="panel">
-    <p class="panel-heading" @click="is_open = !is_open">
-      <span class="icon-text">
-        <span class="icon has-text-link">
-          <font-awesome-icon v-if="is_open" icon="fa-solid fa-caret-down" />
-          <font-awesome-icon v-else icon="fa-solid fa-caret-right" />
-        </span>
-        <span>Türchen bearbeiten</span>
-      </span>
-    </p>
+  <BulmaDrawer>
+    <template v-slot:heading>Türchen bearbeiten</template>
 
-    <template v-if="is_open">
+    <template v-slot:default>
       <div class="panel-tabs">
-        <BulmaBreadcrumbs :steps="steps" v-model="current_step" />
+        <BulmaBreadcrumbs :steps="steps" v-model="current_step" class="mb-0" />
+      </div>
+
+      <div class="panel-block is-flex is-justify-content-space-between">
+        <BulmaButton
+          :disabled="current_step === 0"
+          class="is-success"
+          icon="fa-solid fa-backward"
+          @click="current_step--"
+        >
+          Zurück
+        </BulmaButton>
+        <BulmaButton
+          class="is-danger"
+          icon="fa-solid fa-trash"
+          @click="on_discard"
+        >
+          Löschen
+        </BulmaButton>
+        <BulmaButton
+          class="is-danger"
+          icon="fa-solid fa-cloud-arrow-down"
+          @click="on_download"
+        >
+          Laden
+        </BulmaButton>
+        <BulmaButton
+          v-if="current_step !== 2"
+          class="is-success"
+          icon="fa-solid fa-forward"
+          @click="current_step++"
+        >
+          Weiter
+        </BulmaButton>
+        <BulmaButton
+          v-else
+          class="is-success"
+          icon="fa-solid fa-cloud-arrow-up"
+          @click="on_upload"
+        >
+          Speichern
+        </BulmaButton>
       </div>
 
       <div class="panel-block">
@@ -20,22 +53,15 @@
         <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
         <Calendar v-if="current_step === 2" :doors="doors" />
       </div>
+    </template>
+  </BulmaDrawer>
+</template>
 
-      <div v-if="current_step === 2" class="panel-block">
-        <BulmaButton class="is-success is-fullwidth" @click.left="load_doors">
-          Laden
-        </BulmaButton>
-        <BulmaButton
-          class="is-success is-fullwidth"
-          icon="fa-solid fa-crosshairs"
-          @click.left="save_doors"
-        >
-          Speichern
-        </BulmaButton>
-      </div>
-    </template>
-  </div>
-</template>
+<style scoped>
+div.panel-block.is-flex button {
+  min-width: 150px;
+}
+</style>
 
 <script lang="ts">
 import { Door, DoorsSaved } from "@/lib/door";
@@ -43,6 +69,7 @@ import { Options, Vue } from "vue-class-component";
 
 import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
 import BulmaButton from "./BulmaButton.vue";
+import BulmaDrawer from "./BulmaDrawer.vue";
 import Calendar from "./Calendar.vue";
 import DoorChooser from "./calendar/editor/DoorChooser.vue";
 import DoorPlacer from "./calendar/editor/DoorPlacer.vue";
@@ -51,6 +78,7 @@ import DoorPlacer from "./calendar/editor/DoorPlacer.vue";
   components: {
     BulmaBreadcrumbs,
     BulmaButton,
+    BulmaDrawer,
     DoorPlacer,
     DoorChooser,
     Calendar,
@@ -62,12 +90,11 @@ export default class extends Vue {
     { label: "Ordnen", icon: "fa-solid fa-list-ol" },
     { label: "Überprüfen", icon: "fa-solid fa-check" },
   ];
-  public is_open = false;
   public current_step = 0;
   public doors: Door[] = [];
 
-  public load_doors() {
-    this.$advent22.api_get<DoorsSaved>("/general/doors").then((data) => {
+  private load_doors(): Promise<void | DoorsSaved> {
+    return this.$advent22.api_get<DoorsSaved>("/general/doors").then((data) => {
       this.doors.length = 0;
 
       for (const value of data) {
@@ -76,7 +103,7 @@ export default class extends Vue {
     });
   }
 
-  public save_doors() {
+  private save_doors(): Promise<void> {
     const data: DoorsSaved = [];
 
     for (const door of this.doors) {
@@ -87,14 +114,34 @@ export default class extends Vue {
       data.push(door.save());
     }
 
-    this.$advent22.api_put("/general/doors", data);
+    return this.$advent22.api_put("/general/doors", data);
+  }
+
+  public mounted(): void {
+    this.load_doors().catch((reason) => alert(`Fehler: ${reason}`));
+  }
+
+  public on_download() {
+    if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
+      this.load_doors()
+        .then(() => alert("Erfolgeich!"))
+        .catch((reason) => alert(`Fehler: ${reason}`));
+    }
+  }
+
+  public on_discard() {
+    if (confirm("Alle Türchen löschen? (nur lokal)")) {
+      // empty `doors` array
+      this.doors.length = 0;
+    }
+  }
+
+  public on_upload() {
+    if (confirm("Aktuelle Änderungen an den Server schicken?")) {
+      this.save_doors()
+        .then(() => alert("Erfolgeich!"))
+        .catch((reason) => alert(`Fehler: ${reason}`));
+    }
   }
 }
 </script>
-
-<style scoped>
-div.panel > .panel-heading {
-  cursor: pointer;
-  user-select: none;
-}
-</style>