feat: show notification to install miniplan as app

2026-07-21 16:38:05 +02:00
parent 1104280c0c
commit 87812d02d3
5 changed files with 181 additions and 75 deletions
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+
+import {ref} from "vue";
+import Dialog from "@/components/dialog/Dialog.vue";
+import type {DialogControls} from "@/components/dialog/dialog";
+
+interface InstallPWADialogProps extends DialogControls {
+}
+
+defineProps<InstallPWADialogProps>()
+
+const dontShowAgain = ref<boolean>(false)
+
+</script>
+
+<template>
+
+    <Dialog class="dialog">
+        <h3 style="margin-bottom: 10px; display: flex; gap: 1rem; align-items: center">
+            Zum Startbildschirm hinzufügen
+        </h3>
+        <p style="line-height: 1.7rem">
+            Dein Miniplan kann jetzt auf Ihrem Gerät installiert werden, um schnell und einfach darauf zuzugreifen.
+        </p>
+        <label class="checkbox">
+            <input type="checkbox" v-model="dontShowAgain" />
+            Nicht mehr anzeigen
+        </label>
+        <div class="buttons">
+            <button @click="onNegative(dontShowAgain)" class="dismiss">Später</button>
+            <button @click="onPositive(dontShowAgain)" ><i>browser_updated</i>Jetzt hinzufügen</button>
+        </div>
+    </Dialog>
+
+</template>
+
+<style scoped lang="less">
+
+.dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 500px
+}
+
+.checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 16px;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.buttons {
+    display: flex;
+    justify-content: end;
+    margin-top: 20px;
+
+    .dismiss {
+        background: transparent;
+    }
+}
+
+</style>