Merge pull request #110 from SkywardAI/info-page

Added information page for display frontend and backend version

.env

@@ -0,0 +1 @@
+FRONTEND_APP_VERSION = '0.1.3'

components/Layout/sidebar/sidebarItems.ts

@@ -6,7 +6,8 @@ import {
   AdjustmentsHorizontalIcon,
   LayoutDashboardIcon,
   MessageCircleIcon,
-  SettingsIcon
+  SettingsIcon,
+  InfoCircleIcon
 
 } from 'vue-tabler-icons';
 
@@ -60,6 +61,11 @@ const sidebarItem: menu[] = [
     title: 'Analytics',
     icon: MessageCircleIcon,
     to: '/ui-components/analytics'
+  },
+  {
+    title: 'Information',
+    icon: InfoCircleIcon,
+    to: '/ui-components/information'
   }
 ];
 

nuxt.config.ts

@@ -9,6 +9,11 @@ export default defineNuxtConfig({
     //   })
     // }
   ],
+  runtimeConfig: {
+    public: {
+      FRONTEND_APP_VERSION: process.env.FRONTEND_APP_VERSION
+    }
+  },
   css: [
     '@/assets/css/unit.css'
   ],

pages/ui-components/Information.vue

@@ -0,0 +1,15 @@
+<script setup>
+import getVersions from '~/tools/getVersions';
+
+    const frontendVersion = ref('Loading');
+    const backendVersion = ref('Loading');
+
+    getVersions('frontend').then(version=>frontendVersion.value = version);
+    getVersions('backend').then(version=>backendVersion.value = version);
+</script>
+<template>
+    <div class="p-10 pb-5">
+        <p class="mb-5">Frontend Version: v{{ frontendVersion }}</p>
+        <p class="mb-5">Backend Version: v{{ backendVersion }}</p>
+    </div>
+</template>

tools/getVersions.ts

@@ -0,0 +1,11 @@
+import request from "./request";
+
+async function getVersions(ofEnd:'frontend'|'backend') {
+    if(ofEnd === 'frontend') {
+        return useRuntimeConfig().public.FRONTEND_APP_VERSION
+    } else if(ofEnd === 'backend') {
+        return (await request('/version')).version
+    }
+}
+
+export default getVersions;