add: coarse routing

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "maplibre-gl": "^2.1.9",
         "vue": "^3.2.13",
+        "vue-router": "^4.1.5",
         "vuestic-ui": "^1.4.7"
       },
       "devDependencies": {
@@ -1209,6 +1210,11 @@
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
       "dev": true
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.2.33",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.33.tgz",
@@ -7544,6 +7550,20 @@
         "node": ">=8.9.0"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",
+      "integrity": "sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -9102,6 +9122,11 @@
         }
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
+    },
     "@vue/reactivity": {
       "version": "3.2.33",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.33.tgz",
@@ -13881,6 +13906,14 @@
         }
       }
     },
+    "vue-router": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",
+      "integrity": "sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.1.4"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

frontend/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "maplibre-gl": "^2.1.9",
     "vue": "^3.2.13",
+    "vue-router": "^4.1.5",
     "vuestic-ui": "^1.4.7"
   },
   "devDependencies": {
@@ -16,4 +17,4 @@
     "nodemon": "^2.0.19",
     "vue-cli-plugin-vuestic-ui": "~1.0.8"
   }
-}
+}

frontend/src/App.vue

@@ -1,18 +1,13 @@
 <template>
     <div class="app">
-        <front-view />
+        <router-view></router-view>
-        <!-- <admin-view /> -->
     </div>
 </template>
 
 
 <script>
-
-
-import AdminView from '@/views/AdminView.vue'
-import FrontView from './views/FrontView.vue'
 export default {
-    components: { AdminView, FrontView }
+
 }
 </script>
 

frontend/src/components/FilterPanel.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <h3>Category</h3>
+        <category-filter @filter="$emit('filter', $event)" />
+        <h3>GIS Category</h3>
+        <gis-category-filter @filter="$emit('filter', $event)" />
+        <h3>Scanner</h3>
+        <scanner-filter @filter="$emit('filter', $event)" />
+        <h3>Organiztion</h3>
+        <org-filter @filter="$emit('filter', $event)" />
+        <h3>Stratum</h3>
+        <stratum-filter @filter="$emit('filter', $event)" />
+    </div>
+</template>
+
+
+<script>
+import CategoryFilter from "@/components/filters/CategoryFilter.vue";
+import GisCategoryFilter from "@/components/filters/GisCategoryFilter.vue";
+import ScannerFilter from "@/components/filters/ScannerFilter.vue";
+import OrgFilter from "@/components/filters/OrgFilter.vue";
+import StratumFilter from "@/components/filters/StratumFilter.vue";
+export default {
+    name: "filter-panel",
+    components: { CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter, StratumFilter },
+    methods: {},
+    data() {
+        return {}
+    },
+}
+</script>
+
+
+<style lang="css" scoped>
+.sidebar-item {
+    height: 4rem;
+    display: flex;
+    padding: 1rem 0.5rem;
+    position: relative;
+    align-items: center;
+    justify-content: flex-start;
+    font-size: 1.2rem;
+}
+
+.sidebar-icon {
+    margin: 1rem;
+}
+</style>

frontend/src/components/Navbar.vue

@@ -3,12 +3,17 @@
         <va-navbar shape class="navbar">
             <template #left>
                 <va-navbar-item class="top-icon">
-                    <va-icon size="3rem" color="gray" name="public" />
+                    <va-icon size="3rem" color="gray" name="public" @click="$router.push('/')" />
                 </va-navbar-item>
             </template>
             <template #right>
                 <va-navbar-item class="top-icon">
-                    <va-icon size="3rem" color="gray" name="account_box" />
+                    <va-icon
+                        size="3rem"
+                        color="gray"
+                        name="account_box"
+                        @click="$router.push('/admin')"
+                    />
                 </va-navbar-item>
             </template>
         </va-navbar>

frontend/src/components/Sidebar.vue

@@ -1,69 +1,21 @@
 <template>
     <div>
         <va-sidebar color="primary" text-color="white" gradient class="sidebar-proper">
-            <h3>Category</h3>
+            <slot></slot>
-            <category-filter @filter="$emit('filter', $event)" />
-            <h3>GIS Category</h3>
-            <gis-category-filter @filter="$emit('filter', $event)" />
-            <h3>Scanner</h3>
-            <scanner-filter @filter="$emit('filter', $event)" />
-            <h3>Organiztion</h3>
-            <org-filter @filter="$emit('filter', $event)" />
-            <h3>Stratum</h3>
-            <stratum-filter @filter="$emit('filter', $event)" />
-
-            <!-- <template v-for="item in sidebarItems" :key="item.title">
-                <va-sidebar-item :active="item.active">
-                    <va-sidebar-item-content class="sidebar-item">
-                        <va-icon class="sidebar-icon" size="2rem" :name="item.icon" />
-                        <va-sidebar-item-title class="sidebar-title">{{ item.title }}</va-sidebar-item-title>
-                    </va-sidebar-item-content>
-                </va-sidebar-item>
-            </template>-->
         </va-sidebar>
     </div>
 </template>
 
 
 <script>
-import CategoryFilter from "@/components/filters/CategoryFilter.vue";
-import GisCategoryFilter from "@/components/filters/GisCategoryFilter.vue";
-import ScannerFilter from "@/components/filters/ScannerFilter.vue";
-import OrgFilter from "@/components/filters/OrgFilter.vue";
-import StratumFilter from "@/components/filters/StratumFilter.vue";
 export default {
-    name: "sidebar",
+
-    props: {
-        // sidebarItems: {
-        //     type: Array,
-        //     required: true,
-        // }
-    },
-    components: { CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter, StratumFilter },
-    methods: {},
-    data() {
-        return {}
-    },
 }
 </script>
 
 
-<style lang="css" scoped>
+<style lang="css">
 .sidebar-proper {
     height: max(100vh, 100%);
 }
-
-.sidebar-item {
-    height: 4rem;
-    display: flex;
-    padding: 1rem 0.5rem;
-    position: relative;
-    align-items: center;
-    justify-content: flex-start;
-    font-size: 1.2rem;
-}
-
-.sidebar-icon {
-    margin: 1rem;
-}
 </style>

frontend/src/components/filters/SidebarMenu.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <template v-for="item in sidebarItems" :key="item.title">
+            <va-sidebar-item :active="item.active" @click="$router.push({ name: `${item.route}` })">
+                <va-sidebar-item-content class="sidebar-item">
+                    <va-icon class="sidebar-icon" size="2rem" :name="item.icon" />
+                    <va-sidebar-item-title class="sidebar-title">{{ item.title }}</va-sidebar-item-title>
+                </va-sidebar-item-content>
+            </va-sidebar-item>
+        </template>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: 'sidebar-menu',
+    props: {
+        sidebarItems: {
+            type: Array,
+            required: true,
+        }
+    },
+}
+</script>
+
+
+<style lang="css">
+</style>

frontend/src/main.js

@@ -30,6 +30,8 @@ import 'vuestic-ui/dist/vuestic-ui.css'
 import maplibregl from "maplibre-gl";
 import 'maplibre-gl/dist/maplibre-gl.css'
 
+import router from "@/router";
+
 
 const app = createApp(App);
 app.use(createVuesticEssential({
@@ -59,4 +61,6 @@ app.use(createVuesticEssential({
 
 app.component(maplibregl);
 
+app.use(router);
+
 app.mount('#app');

frontend/src/router/index.js

@@ -0,0 +1,30 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import FrontView from "@/views/FrontView";
+import AdminView from "@/views/AdminView";
+import ActiveSchemaScreen from "@/components/ActiveSchemaScreen";
+import UploadScreen from "@/components/UploadScreen";
+
+
+
+const routes = [
+    {
+        path: '/',
+        component: FrontView
+    },
+    {
+        path: '/admin',
+        component: AdminView,
+        children: [
+            { path: '', component: ActiveSchemaScreen, name: "active-schema" },
+            { path: '', component: UploadScreen, name: "upload" }
+        ]
+    },
+
+]
+
+const router = createRouter({
+    routes,
+    history: createWebHistory(process.env.BASE_URL)
+});
+
+export default router;

frontend/src/views/AdminView.vue

@@ -3,11 +3,12 @@
         <navbar />
 
         <div class="central-view">
-            <sidebar :sidebarItems="sidebarItems" />
+            <sidebar>
+                <sidebar-menu :sidebarItems="sidebarItems" />
+            </sidebar>
 
             <div class="main-view">
-                <!-- <upload-screen /> -->
+                <router-view></router-view>
-                <active-schema-screen />
             </div>
         </div>
     </div>
@@ -19,16 +20,18 @@ import UploadScreen from '@/components/UploadScreen.vue'
 import ActiveSchemaScreen from '@/components/ActiveSchemaScreen.vue'
 import Navbar from '@/components/Navbar.vue'
 import Sidebar from '@/components/Sidebar.vue'
+import SidebarMenu from '@/components/filters/SidebarMenu.vue'
 export default {
     name: "admin-view",
-    components: { UploadScreen, ActiveSchemaScreen, Navbar, Sidebar },
+    components: { UploadScreen, ActiveSchemaScreen, Navbar, Sidebar, SidebarMenu },
     data() {
         return {
             sidebarItems: [
                 {
                     title: "Active Schema",
                     icon: "fact_check",
-                    active: true
+                    active: true,
+                    route: "active-schema",
                 },
                 {
                     title: "Review Data",
@@ -37,6 +40,7 @@ export default {
                 {
                     title: "Upload",
                     icon: "file_upload",
+                    route: "upload",
                 },
 
             ]

frontend/src/views/FrontView.vue

@@ -1,11 +1,11 @@
 <template>
-    <div>
+    <navbar />
-        <navbar />
+    <div class="central-view">
-        <div class="central-view">
+        <sidebar>
-            <sidebar @filter="applyFilters" />
+            <filter-panel @filter="applyFilters" />
-            <div class="main-view">
+        </sidebar>
-                <overview-screen :items="items" @mapClick="applyFilters" />
+        <div class="main-view">
-            </div>
+            <overview-screen :items="items" @mapClick="applyFilters" />
         </div>
     </div>
 </template>
@@ -15,9 +15,10 @@
 import Navbar from "@/components/Navbar.vue";
 import Sidebar from "@/components/Sidebar.vue";
 import OverviewScreen from "@/components/OverviewScreen.vue";
+import FilterPanel from "@/components/FilterPanel.vue";
 export default {
     name: "front-view",
-    components: { Navbar, Sidebar, OverviewScreen },
+    components: { Navbar, Sidebar, OverviewScreen, FilterPanel },
     data() {
         return {
             items: [],
@@ -73,10 +74,11 @@ export default {
 
 <style lang="css">
 .central-view {
-    height: max(100vh, 100%);
+    /* height: max(100vh, 100%); */
+    flex: 1 0 80vh;
     margin: 0;
     display: flex;
-    flex-direction: row;
+    /* flex-direction: row; */
 }
 
 .main-view {