CalendarAssistant component

ui/src/App.vue

@@ -9,6 +9,7 @@
 
     <div class="section">
       <ConfigView />
+      <CalendarAssistant />
       <DoorMapEditor />
       <AdminButton />
     </div>
@@ -19,12 +20,14 @@
 import { Options, Vue } from "vue-class-component";
 
 import AdminButton from "./components/AdminButton.vue";
+import CalendarAssistant from "./components/CalendarAssistant.vue";
 import ConfigView from "./components/ConfigView.vue";
 import DoorMapEditor from "./components/DoorMapEditor.vue";
 
 @Options({
   components: {
     ConfigView,
+    CalendarAssistant,
     DoorMapEditor,
     AdminButton,
   },

ui/src/components/CalendarAssistant.vue

@@ -0,0 +1,78 @@
+<template>
+  <MultiModal ref="multi_modal" />
+
+  <BulmaDrawer header="Kalender-Assistent">
+    <div class="card-content">
+      <div class="content">
+        <h4>Alle Türchen</h4>
+        <div class="tags are-medium">
+          <span
+            v-for="index in 24"
+            :key="index"
+            class="tag button is-primary"
+            @click.left="door_click(index - 1)"
+          >
+            <span class="icon">
+              <font-awesome-icon icon="fa-solid fa-door-open" />
+            </span>
+            <span>{{ index }}</span>
+          </span>
+        </div>
+
+        <h4>Lösungsbuchstaben</h4>
+        <div class="tags are-medium">
+          <span class="tag is-info">1: A</span>
+          <span class="tag is-info">2: G</span>
+          <span class="tag is-info">3: F</span>
+          <span class="tag is-info">4: C</span>
+          <span class="tag is-info">5: I</span>
+          <span class="tag is-info">6: N</span>
+          <span class="tag is-info">7: B</span>
+          <span class="tag is-info">…</span>
+        </div>
+
+        <h4>Bilderzuordnung</h4>
+        <div class="tags are-medium">
+          <span class="tag is-primary">1: images_auto/1.jpg</span>
+          <span class="tag is-primary">2: images_manual/1.jpg</span>
+          <span class="tag is-primary">3: images_auto/penelope.png</span>
+          <span class="tag is-primary">4: images_auto/hand.png</span>
+          <span class="tag is-primary">5: images_auto/hand.jpg</span>
+          <span class="tag is-primary">6: images_auto/Zaphod.jpg</span>
+          <span class="tag is-primary">7: images_auto/Zaphod.jpg</span>
+          <span class="tag is-primary">…</span>
+        </div>
+      </div>
+    </div>
+  </BulmaDrawer>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+import BulmaButton from "./bulma/Button.vue";
+import BulmaDrawer from "./bulma/Drawer.vue";
+import MultiModal from "./calendar/MultiModal.vue";
+
+@Options({
+  components: {
+    BulmaButton,
+    BulmaDrawer,
+    MultiModal,
+  },
+})
+export default class extends Vue {
+  declare $refs: {
+    multi_modal: MultiModal;
+  };
+
+  public door_click(day: number) {
+    this.$refs.multi_modal.show_progress();
+
+    this.$advent22
+      .api_get_blob(`days/image/${day}`)
+      .then((data) => this.$refs.multi_modal.show_image(data))
+      .catch(() => this.$refs.multi_modal.set_active(false));
+  }
+}
+</script>