advent22/ui/src/components/UserView.vue

<template>
  <Calendar :doors="doors" />
  <hr />
  <div class="content">
    <h3>Anleitung</h3>
    <p>
      Hier findest Du für jedes Türchen des Adventskalenders ein kleines
      farbiges Bildchen. Diese werden automatisch am jeweiligen Tag anklickbar
      und zeigen Dir das neue jeweilige dahinter versteckte Bild.
    </p>
    <p>
      Welches Bildchen zu welchem Tag gehört, erfährst Du, indem Du Deine Maus
      darüber bewegst: Bei den bereits freigeschalteten Bildern wird angezeigt,
      um welchen Tag es sich handelt.
    </p>
  </div>
</template>

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

import Calendar from "./Calendar.vue";

@Options({
  components: {
    Calendar,
  },
})
export default class extends Vue {
  public doors: Door[] = [];

  public mounted(): void {
    this.$advent22
      .api_get<DoorsSaved>("user/doors")
      .then((data) => {
        this.doors.length = 0;

        for (const value of data) {
          this.doors.push(Door.load(value));
        }
      })
      .catch(this.$advent22.alert_user_error);
  }
}
</script>