[PR] Merge pull request #47 from LS-KR/main

[+] dock backend: switch entry

src/components.d.ts

@@ -37,5 +37,6 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SubmitPrompt: typeof import('./components/SubmitPrompt.vue')['default']
+    SwitchButton: typeof import('./components/SwitchButton.vue')['default']
   }
 }

src/components/ProfileCard.vue

@@ -46,14 +46,18 @@
             </div>
         </div>
 
+        <a class="switchButton" v-if="canSwitch()" v-bind:href="getTarget()" draggable="false">
+            <SwitchButton />
+        </a>
+
         <img class="watermark" draggable="false" src="/favicon-large.png" alt="" />
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-facing-decorator';
-import { backendHost, replaceUrlVars, t } from "@/logic/config";
-import { abbreviateNumber, getTodayDate } from "@/logic/helper";
+import { backendHost, dataHost, replaceUrlVars, t } from "@/logic/config";
+import { abbreviateNumber, getTodayDate, getResponseSync } from "@/logic/helper";
 import { Person } from "@/logic/data";
 import { info } from '@/logic/utils';
 import Swal from 'sweetalert2';
@@ -127,6 +131,24 @@ export default class ProfileCard extends Vue {
     get profileUrl(): string {
         return replaceUrlVars(this.p.profileUrl, this.userid)
     }
+
+    canSwitch(): boolean {
+        const pairs = JSON.parse(getResponseSync(dataHost + '/switch-pair.json')) as [string, string][];
+        for (const v of pairs) {
+            if (v[0] == this.userid)
+                return true;
+        }
+        return false;
+    }
+
+    getTarget() {
+        const pairs = JSON.parse(getResponseSync(dataHost + '/switch-pair.json')) as [string, string][];
+        for (const v of pairs) {
+            if (v[0] == this.userid) {
+                return `/profile/${v[1]}`;
+            }
+        }
+    }
 }
 </script>
 
@@ -152,6 +174,17 @@ export default class ProfileCard extends Vue {
     img.watermark
         height: 250px
 
+.switchButton
+    position: absolute
+    width: 24px
+    height: 24px
+    bottom: 20px
+    right: 20px
+
+.switchButton:hover
+    transform: translate(-1px -1px)
+    filter: drop-shadow(2px 2px 0.75px rgba(166, 134, 89, 0.32))
+
 #info
     width: 100%
     background-color: $color-bg-6

src/components/SwitchButton.vue

@@ -0,0 +1,23 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+        <g
+            fill="none"
+            stroke="rgba(166, 134, 89, 0.84)"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+        >
+            <path d="m18 2l3 3l-3 3M6 22l-3-3l3-3" />
+            <path d="M21 5H10a7 7 0 0 0-7 7m0 7h11a7 7 0 0 0 7-7" />
+        </g>
+    </svg>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-facing-decorator';
+
+@Component({ components: {} })
+export default class SwitchButton extends Vue {}
+</script>
+
+<style lang="scss"></style>

src/logic/helper.ts

@@ -124,6 +124,13 @@ export async function fetchText(url: string, init?: RequestInitWithParams): Prom
     return text
 }
 
+export function getResponseSync(url: string): string {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url, false);
+    xhr.send();
+    return xhr.responseText;
+}
+
 export function handleIconFromString(html: string): string {
     if (!html.includes('[!')) return html;
     return html.replace(/\[!(\w+)\](?::\s*(.*))?/g, (match, icon) => (Icon[icon as string]));