From 2db63db8dbe58e37bbd617dbe892e9dd8aa246f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 19 Jan 2023 17:54:46 +0000
Subject: [PATCH] tabs function

---
 ui/src/components/DoorMapEditor.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue
index bccf2f4..54c613b 100644
--- a/ui/src/components/DoorMapEditor.vue
+++ b/ui/src/components/DoorMapEditor.vue
@@ -4,13 +4,18 @@
 
     <div class="tabs is-centered">
       <ul>
-        <li class="is-active"><a>Platzieren</a></li>
-        <li><a>Ordnen</a></li>
-        <li><a>Überprüfen</a></li>
+        <li
+          v-for="(step, index) in steps"
+          :key="'step-' + index"
+          :class="current_step === index ? 'is-active' : ''"
+          @click="current_step = index"
+        >
+          <a>{{ step }}</a>
+        </li>
       </ul>
     </div>
 
-    <section v-if="step === 0">
+    <section v-if="current_step === 0">
       <div class="content">
         <ul>
           <li>Linksklick + Ziehen: Neues Türchen erstellen</li>
@@ -36,7 +41,8 @@ import RectPad from "./rects/RectPad.vue";
   },
 })
 export default class CalendarImage extends Vue {
-  private step = 0;
+  private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"];
+  private current_step = 0;
 }
 </script>