advent22/ui/src/components/CalendarAssistant.vue

<template>
  <MultiModal ref="multi_modal" />

  <BulmaDrawer
    header="Kalender-Assistent"
    :ready="is_loaded"
    @open="on_open"
    refreshable
  >
    <div class="card-content">
      <div class="content">
        <h4>Buchstaben-Zuordnung</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>Bilder-Zuordnung</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-primary"
            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 BulmaButton from "./bulma/Button.vue";
import BulmaDrawer from "./bulma/Drawer.vue";
import MultiModal from "./calendar/MultiModal.vue";

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

  declare $refs: {
    multi_modal: MultiModal;
  };

  public on_open(): void {
    this.is_loaded = false;

    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;
        this.is_loaded = true;
      })
      .catch(console.log);
  }

  public door_click(day: number) {
    this.$refs.multi_modal.show_progress();

    this.$advent22
      .api_get_blob(`images/${day}`)
      .then((data) => this.$refs.multi_modal.show_image(data))
      .catch(() => this.$refs.multi_modal.set_active(false));
  }
}
</script>