Calendar: Use BulmaToast

ui/src/components/Calendar.vue

@@ -1,6 +1,32 @@
 <template>
   <MultiModal @handle="modal_handle" />
 
+  <BulmaToast @handle="toast_handle" class="content">
+    <p>
+      Du hast noch keine Türchen geöffnet, vielleicht gibt es ein Anzeigeproblem
+      in Deinem Webbrowser?
+    </p>
+    <div class="level">
+      <div class="level-item">
+        <BulmaButton
+          class="is-success"
+          text="Türchen anzeigen"
+          @click.left="
+            store.is_touch_device = true;
+            toast?.hide();
+          "
+        />
+      </div>
+      <div class="level-item">
+        <BulmaButton
+          class="is-danger"
+          text="Ich möchte selbst suchen"
+          @click.left="toast?.hide()"
+        />
+      </div>
+    </div>
+  </BulmaToast>
+
   <figure>
     <div class="image is-unselectable">
       <img :src="$advent22.api_url('user/background_image')" />
@@ -25,6 +51,7 @@ import { Options, Vue } from "vue-class-component";
 
 import MultiModal from "./MultiModal.vue";
 import BulmaButton from "./bulma/Button.vue";
+import BulmaToast from "./bulma/Toast.vue";
 import CalendarDoor from "./calendar/CalendarDoor.vue";
 import ThouCanvas from "./calendar/ThouCanvas.vue";
 
@@ -32,6 +59,7 @@ import ThouCanvas from "./calendar/ThouCanvas.vue";
   components: {
     MultiModal,
     BulmaButton,
+    BulmaToast,
     ThouCanvas,
     CalendarDoor,
   },
@@ -45,11 +73,29 @@ export default class extends Vue {
 
   private multi_modal?: MultiModal;
 
+  public toast?: BulmaToast;
+  private toast_timeout?: number;
+
   public modal_handle(modal: MultiModal) {
     this.multi_modal = modal;
   }
 
+  public toast_handle(toast: BulmaToast) {
+    this.toast = toast;
+
+    if (this.store.is_touch_device) return;
+
+    this.toast_timeout = setTimeout(() => {
+      if (this.store.user_doors.length === 0) return;
+
+      this.toast!.show({ duration: 600000, type: "is-warning" });
+    }, 10000);
+  }
+
   public door_click(day: number) {
+    if (this.toast_timeout !== undefined) clearTimeout(this.toast_timeout);
+    this.toast?.hide();
+
     if (this.multi_modal === undefined) return;
     this.multi_modal.show_progress();