open/close DoorMapEditor

This commit is contained in:
Jörn-Michael Miehe 2023-09-07 20:54:11 +00:00
parent 83098d3dc4
commit 90c3643bf1

View file

@ -1,29 +1,39 @@
<template>
<div class="panel">
<p class="panel-heading">Türchen bearbeiten</p>
<p class="panel-heading" @click="is_open = !is_open">
<span class="icon-text">
<span class="icon has-text-link">
<font-awesome-icon v-if="is_open" icon="fa-solid fa-caret-down" />
<font-awesome-icon v-else icon="fa-solid fa-caret-right" />
</span>
<span>Türchen bearbeiten</span>
</span>
</p>
<div class="panel-tabs">
<BulmaBreadcrumbs :steps="steps" v-model="current_step" />
</div>
<template v-if="is_open">
<div class="panel-tabs">
<BulmaBreadcrumbs :steps="steps" v-model="current_step" />
</div>
<div class="panel-block">
<DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
<DoorChooser v-if="current_step === 1" v-model:doors="doors" />
<Calendar v-if="current_step === 2" :doors="doors" />
</div>
<div class="panel-block">
<DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
<DoorChooser v-if="current_step === 1" v-model:doors="doors" />
<Calendar v-if="current_step === 2" :doors="doors" />
</div>
<div v-if="current_step === 2" class="panel-block">
<BulmaButton class="is-success is-fullwidth" @click.left="load_doors">
Laden
</BulmaButton>
<BulmaButton
class="is-success is-fullwidth"
icon="fa-solid fa-crosshairs"
@click.left="save_doors"
>
Speichern
</BulmaButton>
</div>
<div v-if="current_step === 2" class="panel-block">
<BulmaButton class="is-success is-fullwidth" @click.left="load_doors">
Laden
</BulmaButton>
<BulmaButton
class="is-success is-fullwidth"
icon="fa-solid fa-crosshairs"
@click.left="save_doors"
>
Speichern
</BulmaButton>
</div>
</template>
</div>
</template>
@ -52,6 +62,7 @@ export default class extends Vue {
{ label: "Ordnen", icon: "fa-solid fa-list-ol" },
{ label: "Überprüfen", icon: "fa-solid fa-check" },
];
public is_open = false;
public current_step = 0;
public doors: Door[] = [];
@ -80,3 +91,10 @@ export default class extends Vue {
}
}
</script>
<style scoped>
div.panel > .panel-heading {
cursor: pointer;
user-select: none;
}
</style>