From 90c3643bf1a1681c0e4cc6369eb045da5b7327c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 7 Sep 2023 20:54:11 +0000
Subject: [PATCH] open/close DoorMapEditor

---
 ui/src/components/DoorMapEditor.vue | 60 +++++++++++++++++++----------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue
index 845c394..24f3a52 100644
--- a/ui/src/components/DoorMapEditor.vue
+++ b/ui/src/components/DoorMapEditor.vue
@@ -1,29 +1,39 @@
 <template>
   <div class="panel">
-    <p class="panel-heading">Türchen bearbeiten</p>
+    <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>
 
-    <div class="panel-tabs">
-      <BulmaBreadcrumbs :steps="steps" v-model="current_step" />
-    </div>
+    <template v-if="is_open">
+      <div class="panel-tabs">
+        <BulmaBreadcrumbs :steps="steps" v-model="current_step" />
+      </div>
 
-    <div class="panel-block">
-      <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
-      <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
-      <Calendar v-if="current_step === 2" :doors="doors" />
-    </div>
+      <div class="panel-block">
+        <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
+        <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
+        <Calendar v-if="current_step === 2" :doors="doors" />
+      </div>
 
-    <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>
+      <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>
 
@@ -52,6 +62,7 @@ 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[] = [];
 
@@ -80,3 +91,10 @@ export default class extends Vue {
   }
 }
 </script>
+
+<style scoped>
+div.panel > .panel-heading {
+  cursor: pointer;
+  user-select: none;
+}
+</style>