advent22/ui/src/components/CalendarDoor.vue

<template>
  <SVGRect :rectangle="door.position" :focused="false" @click="on_click" />
</template>

<script lang="ts">
import { AxiosError } from "axios";
import { Options, Vue } from "vue-class-component";
import { Door } from "./door_map/calendar";

import SVGRect from "./rects/SVGRect.vue";

@Options({
  components: {
    SVGRect,
  },
  props: {
    door: Door,
  },
  emits: [
    "doorClick",
    "doorSuccess",
    "doorFailure",
  ],
})
export default class extends Vue {
  public door!: Door;

  public on_click() {
    this.$emit("doorClick");

    this.$advent22.api_get_blob(
      `days/image/${this.door.day}`,
      (data) => this.$emit("doorSuccess", data),
      (_, reason) => {
        let msg = "Unbekannter Fehler, bitte wiederholen!";

        if (
          (reason instanceof AxiosError)
          && (reason.response !== undefined)
          && (reason.response.status === 401)
        ) {
          msg = "Netter Versuch :)";
        }

        this.$emit("doorFailure", msg);
      },
    );
  }
}
</script>

<style lang="scss" scoped>
rect {
  cursor: pointer;
}
</style>