advent22/ui/src/components/admin/CalendarAssistant.vue

<template>
  <MultiModal @handle="modal_handle" />

  <BulmaDrawer header="Kalender-Assistent" @open="on_open" refreshable>
    <div class="card-content">
      <div class="content">
        <h4>Zuordnung Buchstaben</h4>
        <div class="tags are-medium">
          <span
            v-for="(day_part, index) in day_parts"
            :key="`part-${index}`"
            class="tag is-info"
          >
            {{ day_part.day }}: {{ day_part.value.split("").join(", ") }}
          </span>
        </div>

        <h4>Zuordnung Bilder</h4>
        <div class="tags are-medium">
          <span
            v-for="(day_part, index) in day_image_names"
            :key="`part-${index}`"
            class="tag is-primary"
          >
            {{ day_part.day }}: {{ day_part.value }}
          </span>
        </div>

        <h4>Alle Türchen</h4>
        <div class="tags are-medium">
          <BulmaButton
            v-for="(day_part, index) in day_parts"
            :key="`btn-${index}`"
            class="tag button is-info"
            icon="fa-solid fa-door-open"
            :text="`${day_part.day}`"
            @click.left="door_click(day_part.day)"
          />
        </div>
      </div>
    </div>
  </BulmaDrawer>
</template>

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

import MultiModal from "../MultiModal.vue";
import BulmaButton from "../bulma/Button.vue";
import BulmaDrawer from "../bulma/Drawer.vue";

@Options({
  components: {
    BulmaButton,
    BulmaDrawer,
    MultiModal,
  },
})
export default class extends Vue {
  public day_parts: DayStrModel[] = [];
  public day_image_names: DayStrModel[] = [];
  private multi_modal?: MultiModal;

  public modal_handle(modal: MultiModal) {
    this.multi_modal = modal;
  }

  public on_open(ready: () => void, fail: () => void): void {
    Promise.all([
      this.$advent22.api_get<DayStrModel[]>("admin/day_parts"),
      this.$advent22.api_get<DayStrModel[]>("admin/day_image_names"),
    ])
      .then(([day_parts, day_image_names]) => {
        this.day_parts = day_parts;
        this.day_image_names = day_image_names;

        ready();
      })
      .catch(fail);
  }

  public door_click(day: number) {
    if (this.multi_modal === undefined) return;
    this.multi_modal.show_progress();

    this.$advent22
      .api_get_blob(`user/image_${day}`)
      .then((data) =>
        this.multi_modal!.show_image(data, this.$advent22.name_door(day)),
      )
      .catch(() => this.multi_modal!.set_active(false));
  }
}
</script>