advent22/ui/src/components/DoorMapEditor.vue

<template>
  <div class="box">
    <p class="title is-4">Türchen bearbeiten</p>

    <BulmaBreadcrumbs :steps="steps" v-model="current_step" />

    <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
    <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
    <template v-if="current_step === 2">
      <Calendar :doors="doors" />
      <BulmaButton class="is-success" @click.left="load_doors">
        Laden
      </BulmaButton>
      <BulmaButton
        class="is-success"
        icon="fa-solid fa-crosshairs"
        @click.left="save_doors"
      >
        Speichern
      </BulmaButton>
    </template>
  </div>
</template>

<script lang="ts">
import { Door, DoorSerialized } from "@/lib/door";
import { Options, Vue } from "vue-class-component";

import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
import BulmaButton from "./BulmaButton.vue";
import Calendar from "./Calendar.vue";
import DoorChooser from "./calendar/editor/DoorChooser.vue";
import DoorPlacer from "./calendar/editor/DoorPlacer.vue";

@Options({
  components: {
    BulmaBreadcrumbs,
    BulmaButton,
    DoorPlacer,
    DoorChooser,
    Calendar,
  },
})
export default class extends Vue {
  public 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" },
  ];
  public current_step = 0;
  public doors: Door[] = [];

  public load_doors() {
    this.$advent22.api_get<DoorSerialized[]>("/general/doors").then((data) => {
      this.doors.length = 0;

      for (const value of data) {
        this.doors.push(Door.deserialize(value));
      }
    });
  }

  public save_doors() {
    const data: DoorSerialized[] = [];

    for (const door of this.doors) {
      if (door.day === -1) {
        continue;
      }

      data.push(door.serialized);
    }

    this.$advent22.api_put("/general/doors", data);
  }
}
</script>