advent22/ui/src/components/CalendarAssistant.vue

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

  <BulmaDrawer header="Kalender-Assistent">
    <div class="card-content">
      <div class="content">
        <h4>Alle Türchen</h4>
        <div class="tags are-medium">
          <span
            v-for="index in 24"
            :key="index"
            class="tag button is-primary"
            @click.left="door_click(index - 1)"
          >
            <span class="icon">
              <font-awesome-icon icon="fa-solid fa-door-open" />
            </span>
            <span>{{ index }}</span>
          </span>
        </div>

        <h4>Buchstaben-Zuordnung</h4>
        <div class="tags are-medium">
          <span class="tag is-info">1: A</span>
          <span class="tag is-info">2: G</span>
          <span class="tag is-info">3: F</span>
          <span class="tag is-info">4: C</span>
          <span class="tag is-info">5: I</span>
          <span class="tag is-info">6: N</span>
          <span class="tag is-info">7: B</span>
          <span class="tag is-info">…</span>
        </div>

        <h4>Bilder-Zuordnung</h4>
        <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 { 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 {
  declare $refs: {
    multi_modal: MultiModal;
  };

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

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