advent22/ui/src/components/DoorMapEditor.vue

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

    <BulmaBreadcrumb :steps="steps" v-model:current="current_step" />

    <DoorPlacer v-if="current_step === 0" v-model:rectangles="rectangles" />
    <DoorChooser v-if="current_step === 1" v-model:rectangles="rectangles" />
    <p v-if="current_step === 2">Bar</p>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { Rectangle } from "./rects/rectangles";

import BulmaBreadcrumb from "./BulmaBreadcrumb.vue";
import DoorPlacer from "./door_map/DoorPlacer.vue";
import DoorChooser from "./door_map/DoorChooser.vue";

type Step = {
  label: string;
  icon: string;
};

@Options({
  components: {
    BulmaBreadcrumb,
    DoorPlacer,
    DoorChooser,
  },
})
export default class 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 rectangles: Rectangle[] = [];
}
</script>