add port for lab and machine translation

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()) {

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>
+  

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>
+  

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,6 +376,19 @@ 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 }
     }
     ],