steps with icons

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>