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">
        <p>Hervorgehobenen Tagen wurde kein Buchstabe zugewiesen.</p>

        <h3>Zuordnung Buchstaben</h3>
        <div class="tags are-medium">
          <template v-for="(data, day) in day_data" :key="`part-${day}`">
            <span v-if="data.part === ''" class="tag is-warning">
              {{ day }}
            </span>
            <span v-else class="tag is-info">
              {{ day }}: {{ data.part.split("").join(", ") }}
            </span>
          </template>
        </div>

        <h3>Zuordnung Bilder</h3>
        <div class="tags are-medium">
          <span
            v-for="(data, day) in day_data"
            :key="`image-${day}`"
            :class="'tag is-' + (data.part === '' ? 'warning' : 'primary')"
          >
            {{ day }}: {{ data.image_name }}
          </span>
        </div>

        <h3>Alle Türchen</h3>
        <div class="tags are-medium">
          <BulmaButton
            v-for="(data, day) in day_data"
            :key="`btn-${day}`"
            :class="'tag is-' + (data.part === '' ? 'warning' : 'info')"
            icon="fa-solid fa-door-open"
            :text="day"
            @click.left="door_click(day)"
          />
        </div>
      </div>
    </div>
  </BulmaDrawer>
</template>

<script lang="ts">
import { API } from "@/lib/api";
import { name_door, objForEach } from "@/lib/helpers";
import { ImageData, NumStrDict } from "@/lib/model";
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_data: {
    [day: number]: {
      part: string;
      image_name: string;
    };
  } = {};

  private multi_modal?: MultiModal;

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

  public on_open(ready: () => void, fail: () => void): void {
    Promise.all([
      API.request<NumStrDict>("admin/day_parts"),
      API.request<NumStrDict>("admin/day_image_names"),
    ])
      .then(([day_parts, day_image_names]) => {
        const _ensure_day_in_data = (day: number) => {
          if (!(day in this.day_data)) {
            this.day_data[day] = { part: "", image_name: "" };
          }
        };

        objForEach(day_parts, (day, part) => {
          _ensure_day_in_data(day);
          this.day_data[day].part = part;
        });

        objForEach(day_image_names, (day, image_name) => {
          _ensure_day_in_data(day);
          this.day_data[day].image_name = image_name;
        });

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

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

    try {
      const day_image = await API.request<ImageData>(`user/image_${day}`);
      this.multi_modal!.show_image(day_image.data_url, name_door(day));
    } catch (error) {
      this.multi_modal!.hide();
    }
  }
}
</script>