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

    <div class="section">
      <ConfigView />
      <DoorMapEditor />
      <AdminButton />
    </div>
  </div>
</template>

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

import AdminButton from "./components/AdminButton.vue";
import ConfigView from "./components/ConfigView.vue";
import DoorMapEditor from "./components/DoorMapEditor.vue";

@Options({
  components: {
    ConfigView,
    DoorMapEditor,
    AdminButton,
  },
})
export default class extends Vue {
  private visible_days = 0;
  date = "";

  public mounted() {
    this.$advent22
      .api_get<string>("days/date")
      .then((date: string) => (this.date = date));

    this.$advent22
      .api_get<number>("days/visible_days")
      .then((visible_days: number) => (this.visible_days = visible_days));
  }
}
</script>

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