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>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>

        <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.part.split("").join(", ") }}
          </span>
        </div>

        <h4>Bilder-Zuordnung</h4>
        <!-- TODO -->
        <div class="tags are-medium">
          <span class="tag is-primary">1: images_auto/1.jpg</span>
          <span class="tag is-primary">2: images_manual/1.jpg</span>
          <span class="tag is-primary">3: images_auto/penelope.png</span>
          <span class="tag is-primary">4: images_auto/hand.png</span>
          <span class="tag is-primary">5: images_auto/hand.jpg</span>
          <span class="tag is-primary">6: images_auto/Zaphod.jpg</span>
          <span class="tag is-primary">7: images_auto/Zaphod.jpg</span>
          <span class="tag is-primary">…</span>
        </div>
      </div>
    </div>
  </BulmaDrawer>
</template>

<script lang="ts">
import { DayPartModel } 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: DayPartModel[] = [];

  declare $refs: {
    multi_modal: MultiModal;
  };

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

    Promise.all([this.$advent22.api_get<DayPartModel[]>("admin/day_parts")])
      .then(([day_parts]) => {
        this.day_parts = day_parts;
        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>