[+] warning for switching to triggering entry

src/components/ProfileCard.vue

@@ -47,7 +47,7 @@
             </div>
         </div>
 
-        <a class="switchButton" v-if="canSwitch" v-bind:href="target" draggable="false">
+        <a class="switchButton" v-if="canSwitch" v-bind:href="target" v-on:click="switchWarn()" draggable="false">
             <SwitchButton />
         </a>
 
@@ -58,7 +58,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-facing-decorator';
 import { backendHost, dataHost, replaceUrlVars, t } from "@/logic/config";
-import { abbreviateNumber, getTodayDate } from "@/logic/helper";
+import { abbreviateNumber, getResponseSync, getTodayDate } from "@/logic/helper";
 import { Person } from "@/logic/data";
 import { info } from '@/logic/utils';
 import { Icon } from '@iconify/vue';
@@ -78,6 +78,8 @@ export default class ProfileCard extends Vue {
     isBirthday = false
     canSwitch = false
     target = '.'
+    sourceTarget = '.'
+    inWarning = false
 
     loading = new Set<string>()
 
@@ -117,6 +119,13 @@ export default class ProfileCard extends Vue {
                     if (v[0] == this.userid) {
                         this.canSwitch = true
                         this.target = `/profile/${v[1]}`
+                        this.sourceTarget = this.target
+                        const r = getResponseSync(urljoin(dataHost, 'trigger-list.json'));
+                        const l = JSON.parse(r) as string[];
+                        if (l.includes(v[1])) {
+                            this.target = null;
+                            this.inWarning = true;
+                        }
                     }
                 }
             })
@@ -146,6 +155,29 @@ export default class ProfileCard extends Vue {
         return abbreviateNumber(this.flowers)
     }
 
+    switchWarn() {
+        if (!this.inWarning) return;
+        Swal.fire({
+            title: this.t.switch_warning.title,
+            text: this.t.switch_warning.text,
+            icon: 'warning',
+            showCancelButton: false,
+            showCloseButton: false,
+            showConfirmButton: true,
+            allowOutsideClick() { return false },
+            timer: 300000,
+            timerProgressBar: true,
+            iconColor: '#d20f39',
+            allowEscapeKey() { return false; },
+            allowEnterKey() { return false; }
+        }).then((result) => {
+            if (result.isConfirmed) {
+                this.target = this.sourceTarget;
+                this.inWarning = false;
+            }
+        })
+    }
+
     edit(): void {
         Swal.fire({
             title: t.nav_what_to_edit,

src/logic/config.ts

@@ -129,6 +129,10 @@ export const i18n = {
         birthday: {
             birthday: "Today is {0}'s birthday!",
             happy: "Happy Birthday!"
+        },
+        switch_warning: {
+            title: "Trigger Warning",
+            text: "The entry to be switched has a strong trauma triggering factor. Please prioritize your mental state."
         }
     },
     "zh_hans": {
@@ -187,6 +191,10 @@ export const i18n = {
         birthday: {
             birthday: "今天是{0}的生日",
             happy: "生日快乐"
+        },
+        switch_warning: {
+            title: "创伤触发要素警告",
+            text: "将要切换的条目有极强的创伤触发要素. 请优先保证自己精神状态. "
         }
     },
     "zh_hant": {
@@ -245,6 +253,10 @@ export const i18n = {
         birthday: {
             birthday: "今日是{0}的誕生日",
             happy: "誕生日快樂!"
+        },
+        switch_warning: {
+            title: "創傷觸發要素警告",
+            text: "將要切換的條目具有極強的創傷觸發性. 請優先保證自己的精神狀態"
         }
     }
 }

src/views/Profile.vue

@@ -133,7 +133,9 @@ export default class Profile extends Vue
                 icon: 'error',
                 showConfirmButton: false,
                 allowOutsideClick() { return false },
-                customClass: 'view-limit-alert'
+                customClass: 'view-limit-alert',
+                allowEscapeKey() { return false; },
+                allowEnterKey() { return false; }
             })
 
             // Easter egg: Watch when the user removes the DOM element in devtools