60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
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" 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 DoorPlacer from "./door_map/DoorPlacer.vue";
|
|
import DoorChooser from "./door_map/DoorChooser.vue";
|
|
|
|
type Step = {
|
|
label: string;
|
|
icon: string;
|
|
};
|
|
|
|
@Options({
|
|
components: {
|
|
DoorPlacer,
|
|
DoorChooser,
|
|
},
|
|
})
|
|
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 rectangles: Rectangle[] = [];
|
|
|
|
private change_step(next_step: number) {
|
|
this.current_step = next_step;
|
|
}
|
|
}
|
|
</script>
|