advent22/ui/src/components/calendar/MultiModal.vue

<template>
  <div class="modal is-active" v-if="active" @click="set_active(false)">
    <div class="modal-background" />

    <div class="modal-content">
      <template v-if="progress">
        <progress class="progress is-primary" max="100" />
      </template>
      <template v-else>
        <div class="image is-square">
          <img :src="image_src" alt="Kalender-Bild" />
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";

export default class extends Vue {
  public active = false;
  public progress = false;
  public image_src = "";

  public created() {
    window.addEventListener("keydown", (e) => {
      if (e.key == "Escape") this.set_active(false);
    });
  }

  public set_active(state: boolean) {
    this.active = state;
  }

  public show_image(src: string) {
    this.progress = false;
    this.image_src = src;
    this.set_active(true);
  }

  public show_progress() {
    this.progress = true;
    this.set_active(true);
  }
}
</script>