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> <template>
<div class="panel"> <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"> <template v-if="is_open">
<BulmaBreadcrumbs :steps="steps" v-model="current_step" /> <div class="panel-tabs">
</div> <BulmaBreadcrumbs :steps="steps" v-model="current_step" />
</div>
<div class="panel-block"> <div class="panel-block">
<DoorPlacer v-if="current_step === 0" v-model:doors="doors" /> <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
<DoorChooser v-if="current_step === 1" v-model:doors="doors" /> <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
<Calendar v-if="current_step === 2" :doors="doors" /> <Calendar v-if="current_step === 2" :doors="doors" />
</div> </div>
<div v-if="current_step === 2" class="panel-block"> <div v-if="current_step === 2" class="panel-block">
<BulmaButton class="is-success is-fullwidth" @click.left="load_doors"> <BulmaButton class="is-success is-fullwidth" @click.left="load_doors">
Laden Laden
</BulmaButton> </BulmaButton>
<BulmaButton <BulmaButton
class="is-success is-fullwidth" class="is-success is-fullwidth"
icon="fa-solid fa-crosshairs" icon="fa-solid fa-crosshairs"
@click.left="save_doors" @click.left="save_doors"
> >
Speichern Speichern
</BulmaButton> </BulmaButton>
</div> </div>
</template>
</div> </div>
</template> </template>
@ -52,6 +62,7 @@ export default class extends Vue {
{ label: "Ordnen", icon: "fa-solid fa-list-ol" }, { label: "Ordnen", icon: "fa-solid fa-list-ol" },
{ label: "Überprüfen", icon: "fa-solid fa-check" }, { label: "Überprüfen", icon: "fa-solid fa-check" },
]; ];
public is_open = false;
public current_step = 0; public current_step = 0;
public doors: Door[] = []; public doors: Door[] = [];
@ -80,3 +91,10 @@ export default class extends Vue {
} }
} }
</script> </script>
<style scoped>
div.panel > .panel-heading {
cursor: pointer;
user-select: none;
}
</style>