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>

        <h4>Zuordnung Buchstaben</h4>
        <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>

        <h4>Zuordnung Bilder</h4>
        <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>

        <h4>Alle Türchen</h4>
        <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 { Dictionary } 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_data: {
    [day: string]: {
      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([
      this.$advent22.api_get<Dictionary>("admin/day_parts"),
      this.$advent22.api_get<Dictionary>("admin/day_image_names"),
    ])
      .then(([day_parts, day_image_names]) => {
        const _ensure_day = (day: string) => {
          if (!(day in this.day_data)) {
            this.day_data[day] = { part: "", image_name: "" };
          }
        };

        for (const day in day_parts) {
          _ensure_day(day);
          this.day_data[day].part = day_parts[day];
        }

        for (const day in day_image_names) {
          _ensure_day(day);
          this.day_data[day].image_name = day_image_names[day];
        }

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

  public door_click(day: unknown) {
    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>