summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-04-14 17:01:47 +0200
committerUdo Walter2019-04-14 17:01:47 +0200
commitee93758a36be8791d069c2cf6ddadd4276e53f3a (patch)
tree9fa3852abc3549ca55d269f5e038b6282c130e49 /webapp
parent[webapp/systemlog] add copy button to table (diff)
downloadbas-ee93758a36be8791d069c2cf6ddadd4276e53f3a.tar.gz
bas-ee93758a36be8791d069c2cf6ddadd4276e53f3a.tar.xz
bas-ee93758a36be8791d069c2cf6ddadd4276e53f3a.zip
[webapp/dashboard] add categories
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/DashboardPage.vue93
-rw-r--r--webapp/src/components/IprangeModule.vue2
-rw-r--r--webapp/src/config/dashboard.js36
-rw-r--r--webapp/src/config/i18n.js12
-rw-r--r--webapp/src/main.js3
-rw-r--r--webapp/src/router.js7
6 files changed, 58 insertions, 95 deletions
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 83fda1a..19d8f44 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -17,16 +17,8 @@
<template>
<v-app :dark="settings.dark" :class="{ 'no-animation': settings.noAnimations }">
- <v-touch
- @panstart="drawerDragStart"
- @panmove="drawerDragMove"
- @panend="drawerDragEnd"
- @pancancel="drawerDragEnd"
- :pan-options="{ direction: 'horizontal', threshold: 0 }"
- class="drawer-handle-closed"
- ></v-touch>
+
<v-navigation-drawer
- style="z-index: 11;"
class="drawer non-selectable"
:style="drawerDraggingStyle"
persistent
@@ -36,19 +28,12 @@
fixed
width="250"
app
- touchless
>
- <v-touch
- @panstart="drawerDragStart"
- @panmove="drawerDragMove"
- @panend="drawerDragEnd"
- @pancancel="drawerDragEnd"
- :pan-options="{ direction: 'horizontal', threshold: 0 }"
- class="drawer-handle-open"
- >
- <div class="drawer-header grey darken-4 hidden-lg-and-up"><img src="@/assets/logo.svg" /></div>
+ <div class="drawer-header grey darken-4 hidden-lg-and-up"><img src="@/assets/logo.svg" /></div>
+ <div v-for="category in categories" :key="category.name">
+ <div class="dashboard-category text--secondary">{{ desktop && drawerMini ? '' : $t('$dashboardCategories.' + category.name) }}</div>
<v-list>
- <v-list-tile ripple v-for="module in modules" :key="module.name" :to="{ name: module.name }">
+ <v-list-tile ripple v-for="module in category.modules" :key="module.name" :to="{ name: module.name }">
<v-list-tile-action>
<v-icon v-html="module.icon"></v-icon>
</v-list-tile-action>
@@ -57,7 +42,8 @@
</v-list-tile-content>
</v-list-tile>
</v-list>
- </v-touch>
+ <v-divider></v-divider>
+ </div>
</v-navigation-drawer>
<v-toolbar :height="$vuetify.breakpoint.smAndDown ? 56 : 64" dark app :clipped-left="settings.clipped" class="non-selectable" style="z-index: 10;" id="topbar">
@@ -110,7 +96,7 @@ import NotificationsAlerts from '@/components/NotificationsAlerts'
import NotificationsSnackbars from '@/components/NotificationsSnackbars'
import AccountModule from '@/components/AccountModule'
import SettingsModule from '@/components/SettingsModule'
-import dashboardModules from '@/config/dashboard'
+import dashboardCategories from '@/config/dashboard'
export default {
name: 'DashboardPage',
@@ -127,13 +113,10 @@ export default {
},
data () {
return {
- modules: dashboardModules,
+ categories: dashboardCategories,
dragging: false,
- drawerWidth: 250,
- drawerTranslateX: 0,
drawerMini: localStorage.getItem('drawerMini') === 'true',
- drawerOpen: localStorage.getItem('drawerOpen') !== 'false',
- clientCount: 0
+ drawerOpen: localStorage.getItem('drawerOpen') !== 'false'
}
},
computed: {
@@ -141,15 +124,6 @@ export default {
...mapGetters(['user']),
mini () { return this.settings.mini },
desktop () { return this.$vuetify.breakpoint.lgAndUp },
- drawerDraggingStyle () {
- var style = {}
- if (this.dragging) {
- style.transition = 'none'
- if (this.settings.mini && this.desktop) style.width = this.drawerWidth + 'px'
- else style.transform = 'translateX(' + this.drawerTranslateX + 'px)'
- }
- return style
- },
devMode () { return localStorage.getItem('dev') === 'true' }
},
watch: {
@@ -171,30 +145,6 @@ export default {
if (this.settings.mini && this.desktop) this.drawerMini = !this.drawerMini
else this.drawerOpen = !this.drawerOpen
},
- drawerDragStart (event) {
- if (this.settings.mini && this.desktop) this.drawerWidth = this.drawerStartWidth = this.drawerMini ? 80 : 250
- else this.drawerTranslateStartX = this.drawerTranslateX = this.drawerOpen ? 0 : -250
- this.dragging = true
- },
- drawerDragMove (event) {
- if (this.settings.mini && this.desktop) {
- let newX = this.drawerStartWidth + event.deltaX
- if (newX >= 80 && newX <= 250) this.drawerWidth = newX
- } else {
- let newX = this.drawerTranslateStartX + event.deltaX
- if (newX <= 0 && newX >= -250) this.drawerTranslateX = newX
- }
- },
- drawerDragEnd (event) {
- this.dragging = false
- if (this.settings.mini && this.desktop) {
- if ((this.drawerWidth < 100 && event.velocityX <= 0) || event.velocityX < -0.4) this.drawerMini = true
- else this.drawerMini = false
- } else {
- if ((this.drawerTranslateX < -100 && event.velocityX <= 0) || event.velocityX < -0.4) this.drawerOpen = false
- else this.drawerOpen = true
- }
- },
logout () {
this.$http.post('/api/authentication/logout').then(response => {
this.setLoginRedirect(this.$route.fullPath)
@@ -212,6 +162,10 @@ export default {
<style scoped>
+.dashboard-category {
+ padding: 16px 0 0 32px;
+}
+
.logo {
height: 100%;
overflow: hidden;
@@ -224,24 +178,7 @@ export default {
}
.drawer {
- height: 100vh !important;
-}
-
-.drawer-handle-closed {
- position: fixed;
- height: 100vh;
- top: 0;
- left: 0;
- width: 15px;
- z-index: 1000;
- /* border: 2px red solid; */
-}
-
-.drawer-handle-open {
- position: absolute;
- height: 100%;
- width: 100%;
- /* border: 2px red solid; */
+ z-index: 11;
}
.drawer-header {
diff --git a/webapp/src/components/IprangeModule.vue b/webapp/src/components/IprangeModule.vue
index 5c37f60..bc137e7 100644
--- a/webapp/src/components/IprangeModule.vue
+++ b/webapp/src/components/IprangeModule.vue
@@ -147,7 +147,7 @@ export default {
{ key: 'id', text: this.$t('id'), width: '50px' },
{ key: 'startIp', text: this.$t('startIp'), width: '120px' },
{ key: 'endIp', text: this.$t('endIp'), width: '140px' },
- { key: 'group', text: this.$t('group'), copyKey: 'groupId', sortKey: 'groupName' },
+ { key: 'group', text: this.$t('group'), copyKey: 'groupName', sortKey: 'groupName' },
{ key: 'actions', width: '60px' }
]
},
diff --git a/webapp/src/config/dashboard.js b/webapp/src/config/dashboard.js
index 95b59fb..a56aa22 100644
--- a/webapp/src/config/dashboard.js
+++ b/webapp/src/config/dashboard.js
@@ -10,14 +10,30 @@ import LogModule from '@/components/LogModule'
import EventModule from '@/components/EventModule'
export default [
- { path: 'groups', component: GroupModule, icon: 'category' },
- { path: 'ipranges', component: IprangeModule, icon: 'settings_ethernet' },
- { path: 'configurator', component: ConfiguratorModule, icon: 'list' },
- { path: 'events', component: EventModule, icon: 'event' },
- { path: 'registration', component: RegistrationModule, icon: 'assignment' },
- { path: 'backends', component: BackendModule, icon: 'cloud' },
- { path: 'permissions', component: PermissionModule, icon: 'lock_open' },
- { path: 'ipxe', component: IpxeBuilderModule, icon: 'merge_type' },
- { path: 'users', component: UserModule, icon: 'contacts' },
- { path: 'log', component: LogModule, icon: 'error_outline' }
+ { name: 'general',
+ modules: [
+ { path: 'groups', component: GroupModule, icon: 'category' },
+ { path: 'ipranges', component: IprangeModule, icon: 'settings_ethernet' },
+ { path: 'configurator', component: ConfiguratorModule, icon: 'list' },
+ { path: 'events', component: EventModule, icon: 'event' }
+ ]
+ },
+ { name: 'advanced',
+ modules: [
+ { path: 'registration', component: RegistrationModule, icon: 'assignment' },
+ { path: 'backends', component: BackendModule, icon: 'cloud' },
+ { path: 'ipxe', component: IpxeBuilderModule, icon: 'merge_type' }
+ ]
+ },
+ { name: 'users',
+ modules: [
+ { path: 'users', component: UserModule, icon: 'contacts' },
+ { path: 'permissions', component: PermissionModule, icon: 'lock_open' }
+ ]
+ },
+ { name: 'monitoring',
+ modules: [
+ { path: 'log', component: LogModule, icon: 'error_outline' }
+ ]
+ }
]
diff --git a/webapp/src/config/i18n.js b/webapp/src/config/i18n.js
index a92541f..b127ca5 100644
--- a/webapp/src/config/i18n.js
+++ b/webapp/src/config/i18n.js
@@ -22,6 +22,12 @@ export default {
},
'noDataText': 'No data available'
},
+ '$dashboardCategories': {
+ 'general': 'General',
+ 'advanced': 'Advanced',
+ 'users': 'Users',
+ 'monitoring': 'Monitoring'
+ },
'$dashboardModules': {
'GroupModule': 'Groups / Clients',
'ConfiguratorModule': 'iPXE Configurator',
@@ -58,6 +64,12 @@ export default {
},
'noDataText': 'Keine Daten verfügbar'
},
+ '$dashboardCategories': {
+ 'general': 'Allgemein',
+ 'advanced': 'Erweitert',
+ 'users': 'Benutzer',
+ 'monitoring': 'Monitoring'
+ },
'$dashboardModules': {
'GroupModule': 'Gruppen / Clients',
'ConfiguratorModule': 'iPXE Konfigurator',
diff --git a/webapp/src/main.js b/webapp/src/main.js
index e62029f..0ace2fc 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -7,7 +7,6 @@ import VueCodemirror from 'vue-codemirror'
import 'codemirror/mode/shell/shell.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
-import VueTouch from 'vue-touch'
import Vuex from 'vuex'
import globalStore from '@/store/global'
import storeModules from '@/config/store'
@@ -57,8 +56,6 @@ Vue.use(VueCodemirror, {
}
})
-Vue.use(VueTouch)
-
axios.interceptors.response.use(null, error => {
if (error && error.response.status === 401) {
axios.post('/api/authentication/logout').then(response => {
diff --git a/webapp/src/router.js b/webapp/src/router.js
index 65c3949..470ffec 100644
--- a/webapp/src/router.js
+++ b/webapp/src/router.js
@@ -1,7 +1,7 @@
import Vue from 'vue'
import Router from 'vue-router'
import DashboardPage from '@/components/DashboardPage'
-import dashboardModules from '@/config/dashboard'
+import dashboardCategories from '@/config/dashboard'
import StartPage from '@/components/StartPage'
function setChildren (routes, parentName) {
@@ -29,12 +29,13 @@ var router = new Router({
{
path: '/dashboard',
name: 'dashboard',
+ redirect: '/dashboard/groups',
component: DashboardPage,
- children: setChildren(dashboardModules.concat(DashboardPage.routes()))
+ children: setChildren(DashboardPage.routes().concat(...dashboardCategories.map(c => c.modules)))
},
{
path: '*',
- redirect: '/dashboard'
+ redirect: '/dashboard/groups'
}
]
})