advent22/ui/src/components/Calendar.vue

<template>
  <MultiModal @handle="modal_handle" />

  <figure>
    <div class="level">
      <div class="level-left">
        <figcaption class="level-item has-text-primary-dark">
          {{ figure_caption }}
          <template v-if="next_door !== null">
            <br />
            Zeit zum nächsten Türchen: <CountDown :millis="next_door" />
          </template>
        </figcaption>
      </div>
      <div class="level-right">
        <div class="level-item">
          <BulmaButton
            class="tag is-warning is-outlined"
            text="Türchen anzeigen"
            :icon="'fa-solid fa-toggle-' + (show_doors ? 'on' : 'off')"
            @click.left="show_doors = !show_doors"
          />
        </div>
      </div>
    </div>
    <div class="image is-unselectable">
      <img :src="$advent22.api_url('user/background_image')" />
      <ThouCanvas>
        <CalendarDoor
          v-for="(door, index) in doors"
          :key="`door-${index}`"
          :door="door"
          :visible="show_doors"
          @click="door_click(door.day)"
          @touch="door_hover(door.day)"
          @mouseover="door_hover(door.day)"
          @touchend="door_unhover"
          @mouseout="door_unhover"
        />
      </ThouCanvas>
    </div>
  </figure>
</template>

<script lang="ts">
import { Door } from "@/lib/door";
import { Options, Vue } from "vue-class-component";

import CountDown from "./CountDown.vue";
import MultiModal from "./MultiModal.vue";
import BulmaButton from "./bulma/Button.vue";
import CalendarDoor from "./calendar/CalendarDoor.vue";
import ThouCanvas from "./calendar/ThouCanvas.vue";

@Options({
  components: {
    CountDown,
    MultiModal,
    BulmaButton,
    ThouCanvas,
    CalendarDoor,
  },
  props: {
    doors: Array,
  },
})
export default class extends Vue {
  public readonly doors!: Door[];
  private readonly idle_caption = "Finde die Türchen auf dem Adventskalender!";

  public show_doors = false;
  private multi_modal?: MultiModal;
  public figure_caption = this.idle_caption;
  public next_door: number | null = null;

  public mounted(): void {
    this.$advent22
      .api_get<number | null>("user/next_door")
      .then((next_door) => (this.next_door = next_door))
      .catch((error) => alert(this.$advent22.format_user_error(error)));
  }

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

  public door_hover(day: number) {
    this.figure_caption = this.$advent22.name_door(day);
  }

  public door_unhover() {
    this.figure_caption = this.idle_caption;
  }

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

    this.$advent22
      .api_get_blob(`user/image_${day}`)
      .then((image_src) => {
        this.multi_modal!.show_image(image_src, this.$advent22.name_door(day));
      })
      .catch((error) => {
        alert(error);
        this.multi_modal!.set_active(false);
      });
  }
}
</script>