From 3f878b4737f269c27833a578c7d208acdfd2326a Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Fri, 14 Jun 2024 12:34:22 -0700
Subject: [PATCH] add port for lab and machine translation

---
 frontend/src/mixins/navigator.js            |  3 ++
 frontend/src/pages/lab/Home.vue             | 53 +++++++++++++++++++++
 frontend/src/pages/lab/translation/Home.vue | 31 ++++++++++++
 frontend/src/plugins/router/router.js       | 19 +++++++-
 4 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/lab/Home.vue
 create mode 100644 frontend/src/pages/lab/translation/Home.vue

diff --git a/frontend/src/mixins/navigator.js b/frontend/src/mixins/navigator.js
index 9a879e4..70a1035 100644
--- a/frontend/src/mixins/navigator.js
+++ b/frontend/src/mixins/navigator.js
@@ -122,6 +122,9 @@ export default {
     },
 
     //common
+    mnx_navToLink(path) {
+      this.$router.push('/' + path.replace(/^(\/)+/, ''))
+    },
     mnx_navAfterSignedin() {
       if (this.mnx_isUserAuthenticated()) {
         switch (this.mnx_getUserRole()) {
diff --git a/frontend/src/pages/lab/Home.vue b/frontend/src/pages/lab/Home.vue
new file mode 100644
index 0000000..b89cebe
--- /dev/null
+++ b/frontend/src/pages/lab/Home.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="directories_containter">
+        <div class="directory_container" v-for="(directory, index) in directories" :key="index"
+            @click="view_link(directory)">
+            <p>{{ directory.title_text }}</p>
+            <img class="directory_cover_image" :src="directory.cover_picture" />
+            <p>{{ directory.summary_text }}</p>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'LabHome',
+    components: {},
+    computed: {},
+    mounted() {
+    },
+    methods: {
+        view_link(directory) {
+            this.mnx_navToLink(directory.path)
+        }
+    },
+    data() {
+        return {
+            directories: [
+                {
+                    "path":"machine-translation",
+                    "title_text": "Machine Translation",
+                    "summary_text": "Translate lanuages leverage AI power",
+                    "icon_picture":"",
+                    "cover_picture":""
+                }
+            ]
+        }
+    }
+}
+</script>
+  
+<style scoped lang="scss">
+.directories_containter {
+    @extend .container;
+}
+
+.directory_container {
+    @extend .container;
+    cursor: pointer;
+}
+
+.directory_cover_image {
+    height: 20vh;
+}
+</style>
+  
\ No newline at end of file
diff --git a/frontend/src/pages/lab/translation/Home.vue b/frontend/src/pages/lab/translation/Home.vue
new file mode 100644
index 0000000..a8248e1
--- /dev/null
+++ b/frontend/src/pages/lab/translation/Home.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="input_containter">
+        <input type="text" v-model="input_text">
+    </div>
+</template>
+<script>
+export default {
+    name: 'TranslationHome',
+    components: {},
+    computed: {},
+    mounted() {
+    },
+    methods: {
+        translate(text) {
+            this.mnx_navToLink((directory.path))
+        }
+    },
+    data() {
+        return {
+            input_text: null
+        }
+    }
+}
+</script>
+  
+<style scoped lang="scss">
+.input_containter {
+    @extend .container;
+}
+</style>
+  
\ No newline at end of file
diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index 5a2f43c..bea3f9b 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -62,6 +62,10 @@ import FooterGuest from '../../footers/FooterGuest.vue'
 import HeaderGuest from '../../headers/HeaderGuest.vue'
 import HeaderUser from '../../headers/HeaderUser.vue'
 
+//Lab
+import LabHome from '../../pages/lab/Home.vue'
+import TranslationHome from '../../pages/lab/translation/Home.vue'
+
 const router = createRouter({
   history: createWebHistory(),
   routes: [
@@ -372,8 +376,21 @@ const router = createRouter({
       path: '/work-space',
       meta: { requiredRoles: [userRoleEnum.PERSONAL], activePath: 'Workspace' },
       components: { default: Workspace, footer: FooterGuest, header: HeaderUser }
+    },
+    {
+      name: 'lab-home',
+      path: '/lab-home',
+      meta: { requiredRoles: [userRoleEnum.PERSONAL] },
+      components: { default: LabHome, footer: FooterGuest, header: HeaderUser }
     }
-  ],
+    ,
+    {
+      name: 'machine-translation',
+      path: '/machine-translation',
+      meta: { requiredRoles: [userRoleEnum.PERSONAL] },
+      components: { default: TranslationHome, footer: FooterGuest, header: HeaderUser }
+    }
+    ],
 
   linkActiveClass: 'active'
   /*    scrollBehavior(_, _2, savedPosition) {