advent22/ui/src/components/DoorMapEditor.vue

<template>
  <div class="box">
    <p class="title is-4">Türchen bearbeiten</p>

    <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
      <ul>
        <li
          v-for="(step, index) in steps"
          :key="'step-' + index"
          :class="current_step === index ? 'is-active' : ''"
          @click="change_step(index)"
        >
          <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">Foo</p>
    <p v-if="current_step === 2">Bar</p>
  </div>
</template>

<script lang="ts">
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: 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>