advent22/ui/src/components/door_map/DoorChooser.vue

52 lines
No EOL
1.1 KiB
Vue

<template>
<section>
<div class="content">
<p class="title is-5">Steuerung</p>
<ul>
<li>Linksklick: Türchen bearbeiten</li>
<li>Tastatur: Tag eingeben</li>
<li>[Enter]: Tag speichern</li>
<li>[Esc]: Eingabe Abbrechen</li>
<li>[Entf]: Tag entfernen</li>
</ul>
</div>
<figure class="image">
<img :src="$advent22.api_url('general/background')" />
<ThouCanvas>
<PreviewDoor v-for="(_, index) in doors" :key="`door-${index}`" v-model:door="doors[index]" />
</ThouCanvas>
</figure>
</section>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Door } from "./calendar";
import ThouCanvas from "../rects/ThouCanvas.vue";
import PreviewDoor from "./PreviewDoor.vue";
@Options({
components: {
ThouCanvas,
PreviewDoor,
},
props: {
doors: Array,
},
emits: ["update:doors"],
})
export default class extends Vue {
public doors!: Door[];
public beforeUnmount() {
this.$emit("update:doors", this.doors);
}
}
</script>
<style lang="scss" scoped>
section>figure {
user-select: none;
}
</style>