From c0bc9aee5df36857dad75b3f5380b7443ed98d8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Fri, 20 Jan 2023 00:42:47 +0000
Subject: [PATCH] steps with icons

---
 ui/src/components/DoorMapEditor.vue | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue
index 612301a..abf2ecd 100644
--- a/ui/src/components/DoorMapEditor.vue
+++ b/ui/src/components/DoorMapEditor.vue
@@ -10,13 +10,19 @@
           :class="current_step === index ? 'is-active' : ''"
           @click="current_step = index"
         >
-          <a>{{ step }}</a>
+          <a>
+            <span class="icon is-small">
+              <font-awesome-icon :icon="step.icon" />
+            </span>
+            <span>{{ step.label }}</span>
+          </a>
         </li>
       </ul>
     </nav>
 
     <DoorPlacer v-if="current_step === 0" />
-    <p v-if="current_step === 1">Narf!</p>
+    <p v-if="current_step === 1">Foo</p>
+    <p v-if="current_step === 2">Bar</p>
   </div>
 </template>
 
@@ -24,13 +30,26 @@
 import { Vue, Options } from "vue-class-component";
 import DoorPlacer from "./door_map/DoorPlacer.vue";
 
+type Step = {
+  label: string;
+  icon: string;
+};
+
 @Options({
   components: {
     DoorPlacer,
   },
 })
 export default class DoorMapEditor extends Vue {
-  private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"];
+  private readonly steps: Step[] = [
+    { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
+    { label: "Ordnen", icon: "fa-solid fa-list-ol" },
+    { label: "Überprüfen", icon: "fa-solid fa-check" },
+  ];
   private current_step = 0;
+
+  private change_step(next_step: number) {
+    this.current_step = next_step;
+  }
 }
 </script>