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

<template>
  <div class="card-content">
    <div class="content is-small">
      <h3>Steuerung</h3>
      <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 is-unselectable">
      <img :src="_ensure_loaded(store.background_image).data_url" />
      <ThouCanvas>
        <PreviewDoor
          v-for="(door, index) in doors"
          :key="`door-${index}`"
          :door="door"
        />
      </ThouCanvas>
    </figure>
  </div>
</template>

<script lang="ts">
import { ensure_loaded, Loading } from "@/lib/helpers";
import { Door } from "@/lib/rects/door";
import { advent22Store } from "@/lib/store";
import { Options, Vue } from "vue-class-component";

import ThouCanvas from "../calendar/ThouCanvas.vue";
import PreviewDoor from "./PreviewDoor.vue";

@Options({
  components: {
    ThouCanvas,
    PreviewDoor,
  },
  props: {
    doors: Array,
  },
})
export default class extends Vue {
  public doors!: Door[];
  public readonly store = advent22Store();

  public _ensure_loaded<T>(o: Loading<T>): T {
    return ensure_loaded(o);
  }
}
</script>