advent22/ui/src/components/DoorMapEditor.vue

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

    <BulmaBreadcrumbs :steps="steps" v-model="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 { Door } from "./door_map/calendar";
import { Rectangle } from "./rects/rectangles";

import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
import DoorPlacer from "./door_map/DoorPlacer.vue";
import DoorChooser from "./door_map/DoorChooser.vue";

@Options({
  components: {
    BulmaBreadcrumbs,
    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 doors: Door[] = [];
  private rectangles: Rectangle[] = [];
}
</script>