MRC
/
geodata-catalog
2
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

add: coarse routing

Browse Source
v0.3
rrr-marble 4 years ago
parent 3e348d3d8d
commit 418a402a44
11 changed files with 179 additions and 76 deletions
Show Stats Download Patch File Download Diff File

33
frontend/package-lock.json generated
Unescape View File

@ -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",

3
frontend/package.json
Unescape View File

@ -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"
}
}
}

9
frontend/src/App.vue
Unescape View File

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

48
frontend/src/components/FilterPanel.vue
Unescape View File

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

9
frontend/src/components/Navbar.vue
Unescape View File

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

54
frontend/src/components/Sidebar.vue
Unescape View File

@ -1,69 +1,21 @@
<template>
<div>
<va-sidebar color="primary" text-color="white" gradient class="sidebar-proper">
<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)" />
<!-- <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>-->
<slot></slot>
</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>

29
frontend/src/components/filters/SidebarMenu.vue
Unescape View File

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

4
frontend/src/main.js
Unescape View File

@ -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');

30
frontend/src/router/index.js
Unescape View File

@ -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;

14
frontend/src/views/AdminView.vue
Unescape View File

@ -3,11 +3,12 @@
<navbar />
<div class="central-view">
<sidebar :sidebarItems="sidebarItems" />
<sidebar>
<sidebar-menu :sidebarItems="sidebarItems" />
</sidebar>
<div class="main-view">
<!-- <upload-screen /> -->
<active-schema-screen />
<router-view></router-view>
</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",
},
]

22
frontend/src/views/FrontView.vue
Unescape View File

@ -1,11 +1,11 @@
<template>
<div>
<navbar />
<div class="central-view">
<sidebar @filter="applyFilters" />
<div class="main-view">
<overview-screen :items="items" @mapClick="applyFilters" />
</div>
<navbar />
<div class="central-view">
<sidebar>
<filter-panel @filter="applyFilters" />
</sidebar>
<div class="main-view">
<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 {

Write Preview
Loading…
Cancel
Save