create Calendar component

ui/src/App.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="container">
     <LoginModal ref="login_modal" />
-    <MultiModal ref="multi_modal" />
 
     <div class="section">
       <h1 class="title has-text-centered is-uppercase">
@@ -10,9 +9,6 @@
       <h2 class="subtitle has-text-centered">Der Gelöt</h2>
 
       <DoorMapEditor />
-
-      <CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" @click="click_calendar_door"
-        @openDoor="open_calendar_door" @abortDoor="abort_calendar_door" />
     </div>
 
     <div class="section">
@@ -24,17 +20,14 @@
 </template>
 
 <script lang="ts">
-import { AxiosError } from "axios";
 import { Options, Vue } from "vue-class-component";
 
-import CalendarDoor from "./components/CalendarDoor.vue";
 import DoorMapEditor from "./components/DoorMapEditor.vue";
 import LoginModal from "./components/LoginModal.vue";
 import MultiModal from "./components/MultiModal.vue";
 
 @Options({
   components: {
-    CalendarDoor,
     DoorMapEditor,
     LoginModal,
     MultiModal,
@@ -61,26 +54,6 @@ export default class extends Vue {
       }
     );
   }
-
-  public click_calendar_door() {
-    this.$refs.multi_modal.show_progress();
-  }
-
-  public open_calendar_door(image_src: string) {
-    this.$refs.multi_modal.show_image(image_src);
-  }
-
-  public abort_calendar_door(name: string, reason: unknown) {
-    this.$refs.multi_modal.set_active(false);
-
-    if (
-      (reason instanceof AxiosError)
-      && (reason.response !== undefined)
-      && (reason.response.status === 401)
-    ) {
-      alert("Netter Versuch!")
-    }
-  }
 }
 </script>
 

ui/src/components/Calendar.vue

@@ -0,0 +1,59 @@
+<template>
+  <MultiModal ref="multi_modal" />
+
+  <section>
+    <figure class="image">
+      <img :src="$advent22.api_url('general/background')" />
+      <ThouCanvas>
+        <CalendarDoor v-for="(_, index) in doors" :key="`door-${index}`" :door="doors[index]" @doorClick="door_click"
+          @doorSuccess="door_success" @doorFailure="door_failure" />
+      </ThouCanvas>
+    </figure>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import { Door } from "./door_map/calendar";
+
+import CalendarDoor from "./CalendarDoor.vue";
+import MultiModal from "./MultiModal.vue";
+import ThouCanvas from "./rects/ThouCanvas.vue";
+
+@Options({
+  components: {
+    MultiModal,
+    ThouCanvas,
+    CalendarDoor,
+  },
+  props: {
+    doors: Array,
+  },
+})
+export default class extends Vue {
+  public readonly doors!: Door[];
+
+  declare $refs: {
+    multi_modal: MultiModal;
+  };
+
+  public door_click() {
+    this.$refs.multi_modal.show_progress();
+  }
+
+  public door_success(image_src: string) {
+    this.$refs.multi_modal.show_image(image_src);
+  }
+
+  public door_failure(msg: string) {
+    this.$refs.multi_modal.set_active(false);
+    alert(msg);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+section>figure {
+  user-select: none;
+}
+</style>

ui/src/components/CalendarDoor.vue

@@ -1,31 +1,56 @@
 <template>
-  <button class="button" @click="on_click">Türken {{ day + 1 }}</button>
+  <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: {
-    day: Number,
+    door: Door,
   },
   emits: [
-    "click",
+    "doorClick",
-    "openDoor",
+    "doorSuccess",
-    "abortDoor",
+    "doorFailure",
   ],
 })
 export default class extends Vue {
-  day!: number;
+  public door!: Door;
 
   public on_click() {
-    this.$emit("click");
+    this.$emit("doorClick");
 
     this.$advent22.api_get_blob(
-      `days/image/${this.day}`,
+      `days/image/${this.door.day}`,
-      (data) => this.$emit("openDoor", data),
+      (data) => this.$emit("doorSuccess", data),
-      (name, reason) => this.$emit("abortDoor", name, reason),
+      (_, 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>

ui/src/components/DoorMapEditor.vue

@@ -6,7 +6,7 @@
 
     <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
     <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
-    <p v-if="current_step === 2">Bar</p>
+    <Calendar v-if="current_step === 2" :doors="doors" />
   </div>
 </template>
 
@@ -15,6 +15,7 @@ import { Options, Vue } from "vue-class-component";
 import { Door } from "./door_map/calendar";
 
 import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
+import Calendar from "./Calendar.vue";
 import DoorChooser from "./door_map/DoorChooser.vue";
 import DoorPlacer from "./door_map/DoorPlacer.vue";
 
@@ -23,6 +24,7 @@ import DoorPlacer from "./door_map/DoorPlacer.vue";
     BulmaBreadcrumbs,
     DoorPlacer,
     DoorChooser,
+    Calendar,
   },
 })
 export default class extends Vue {