advent22/ui/src/components/DoorMapEditor.vue

<template>
  <BulmaDrawer header="Türchen bearbeiten">
    <div class="panel-tabs is-justify-content-space-between">
      <BulmaButton
        :disabled="current_step === 0"
        class="is-link"
        @click="current_step--"
        icon="fa-solid fa-backward"
      />
      <BulmaBreadcrumbs :steps="steps" v-model="current_step" class="mb-0" />
      <BulmaButton
        :disabled="current_step === 2"
        class="is-link"
        @click="current_step++"
        icon="fa-solid fa-forward"
      />
    </div>

    <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
    <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
    <div v-if="current_step === 2" class="panel-block">
      <Calendar :doors="doors" />
    </div>

    <div class="panel-block is-flex is-justify-content-space-around">
      <BulmaButton
        class="is-danger"
        @click="on_download"
        icon="fa-solid fa-cloud-arrow-down"
        text="Laden"
      />
      <BulmaButton
        class="is-warning"
        @click="on_discard"
        icon="fa-solid fa-trash"
        text="Löschen"
      />
      <BulmaButton
        class="is-success"
        @click="on_upload"
        icon="fa-solid fa-cloud-arrow-up"
        text="Speichern"
      />
    </div>
  </BulmaDrawer>
</template>

<style scoped>
div.panel-block.is-flex button {
  min-width: 150px;
}
</style>

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

import BulmaBreadcrumbs, { Step } from "./bulma/Breadcrumbs.vue";
import BulmaButton from "./bulma/Button.vue";
import BulmaDrawer from "./bulma/Drawer.vue";
import Calendar from "./Calendar.vue";
import DoorChooser from "./calendar/editor/DoorChooser.vue";
import DoorPlacer from "./calendar/editor/DoorPlacer.vue";

@Options({
  components: {
    BulmaBreadcrumbs,
    BulmaButton,
    BulmaDrawer,
    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: "Vorschau", icon: "fa-solid fa-magnifying-glass" },
  ];
  public current_step = 0;
  public doors: Door[] = [];

  private load_doors(): Promise<void | DoorsSaved> {
    return this.$advent22.api_get<DoorsSaved>("/general/doors").then((data) => {
      this.doors.length = 0;

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

  private save_doors(): Promise<void> {
    const data: DoorsSaved = [];

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

      data.push(door.save());
    }

    return this.$advent22.api_put("/general/doors", data);
  }

  public mounted(): void {
    this.load_doors().catch((reason) => alert(`Fehler: ${reason}`));
  }

  public on_download() {
    if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
      this.load_doors()
        .then(() => alert("Erfolgeich!"))
        .catch((reason) => alert(`Fehler: ${reason}`));
    }
  }

  public on_discard() {
    if (confirm("Alle Türchen löschen? (nur lokal)")) {
      // empty `doors` array
      this.doors.length = 0;
    }
  }

  public on_upload() {
    if (confirm("Aktuelle Änderungen an den Server schicken?")) {
      this.save_doors()
        .then(() => alert("Erfolgeich!"))
        .catch((reason) => alert(`Fehler: ${reason}`));
    }
  }
}
</script>