advent22/ui/src/App.vue

<template>
  <div class="container">
    <div class="section">
      <h1 class="title has-text-centered is-uppercase">
        Adventskalender {{ date }}
      </h1>
      <h2 class="subtitle has-text-centered">Der Gelöt</h2>

      <ImageModal v-model="modal_visible" :imageUrl="image_url" />
      <CalendarDoor
        v-for="(_, index) in 24"
        :key="index"
        :day="index"
        @openDoor="paula"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import CalendarDoor from "./components/CalendarDoor.vue";
import ImageModal from "./components/ImageModal.vue";

@Options({
  components: {
    CalendarDoor,
    ImageModal,
  },
})
export default class App extends Vue {
  image_url = "";
  modal_visible = false;
  date = "";

  public mounted(): void {
    this.$advent22.api_get_string("days/date", (date: string) => {
      this.date = date;
    });
  }

  private paula(url: string): void {
    this.image_url = url;
    this.modal_visible = true;
  }
}
</script>

<style>
body {
  min-height: 100vh;
}
</style>