Add About view

Author: JanisV

frontend/.env

@@ -0,0 +1 @@
+VITE_APP_VERSION=$npm_package_version

frontend/package-lock.json

@@ -15,6 +15,7 @@
     "@mdi/font": "^7.4.47",
     "sql.js": "^1.13.0",
     "vue": "^3.5.25",
+    "vue-router": "^4.6.4",
     "vuetify": "^3.11.4"
   },
   "devDependencies": {

frontend/package.json

@@ -12,6 +12,18 @@ const status = ref('');
 
 let SQL = null;
 
+import { useRoute, useRouter } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+const drawer = ref(false)
+
+const goToHome = () => {
+  router.push('/')
+  drawer.value = false
+}
+
 onMounted(async () => {
   try {
     SQL = await initSqlJs({
@@ -62,32 +74,41 @@ const handleFileUpload = async (file) => {
 
   reader.readAsArrayBuffer(file);
 };
-
-const items = [
-  {
-    title: 'About',
-    value: 'about',
-  },
-];
-const drawer = ref(false);
 </script>
 
 <template>
   <v-layout>
-    <v-app-bar color="primary">
+    <v-app-bar color="primary" v-if="route.path === '/'">
       <v-app-bar-nav-icon
-        variant="text"
         @click.stop="drawer = !drawer"
       ></v-app-bar-nav-icon>
 
       <v-toolbar-title>OpenNumismat</v-toolbar-title>
     </v-app-bar>
+    <v-app-bar color="primary" v-else>
+      <v-app-bar-nav-icon
+        icon="mdi-chevron-left"
+        @click.stop="goToHome()"
+      ></v-app-bar-nav-icon>
+
+      <v-toolbar-title>About</v-toolbar-title>
+    </v-app-bar>
 
     <v-navigation-drawer v-model="drawer" temporary>
-      <v-list :items="items"></v-list>
+      <v-list>
+        <v-list-item
+          prepend-icon="mdi-information"
+          title="About"
+          value="about"
+          @click="router.push('/about')"
+          :active="route.path === '/about'"
+        ></v-list-item>
+      </v-list>
     </v-navigation-drawer>
 
-    <v-main>
+    <router-view></router-view>
+
+    <v-main v-if="route.path !== '/about'">
       <div v-if="!selectedFile" class="select-view">
         <FileUploader :handleFile="handleFileUpload" />
         <p>Your file not will be uploaded to the internet. You can disable internet connection.</p>

frontend/src/App.vue

@@ -0,0 +1,20 @@
+<script setup>
+const appVersion = import.meta.env.VITE_APP_VERSION;
+</script>
+
+<template>
+  <v-container>
+    <v-card>
+      <v-card-title>OpenNumismat Web {{ appVersion }}</v-card-title>
+      <v-card-text>
+        <p>Copyright (C) 2025 Vitaly Ignatov</p>
+        <p>OpenNumismat Web is freeware licensed under a GPLv3</p>
+        <p>Homepage: https://opennumismat.github.io</p>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/components/AboutView.vue

@@ -1,6 +1,8 @@
 import './assets/main.css'
 import '@mdi/font/css/materialdesignicons.css'
 
+import router from './router'
+
 import { createApp } from 'vue'
 
 // Vuetify
@@ -17,4 +19,4 @@ const vuetify = createVuetify({
   directives,
 })
 
-createApp(App).use(vuetify).mount('#app')
+createApp(App).use(router).use(vuetify).mount('#app')

frontend/src/main.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+//import HomePage from '../components/HomeView.vue'
+import AboutPage from '../components/AboutView.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+//    component: HomePage
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: AboutPage
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router