summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/DashboardPage.vue
diff options
context:
space:
mode:
authorUdo Walter2018-07-17 03:02:27 +0200
committerUdo Walter2018-07-17 03:02:27 +0200
commitfda9d4012b33bbae10678b2e7447b9fd4f7887ca (patch)
tree6aa24fb4ee1bbdceb12136e18d1d55dc86450a8d /webapp/src/components/DashboardPage.vue
parent[webapp/dashboard] drawer bugfix (diff)
downloadbas-fda9d4012b33bbae10678b2e7447b9fd4f7887ca.tar.gz
bas-fda9d4012b33bbae10678b2e7447b9fd4f7887ca.tar.xz
bas-fda9d4012b33bbae10678b2e7447b9fd4f7887ca.zip
[webapp/dashboard] added first implementation of global snackbars
Diffstat (limited to 'webapp/src/components/DashboardPage.vue')
-rw-r--r--webapp/src/components/DashboardPage.vue114
1 files changed, 77 insertions, 37 deletions
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 61a871f..c2c075a 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -1,8 +1,7 @@
<i18n>
{
"en": {
- "mymodule": "My Module",
- "yourmodule": "Your Module",
+ "group": "Locations / Groups",
"backend": "External Backends",
"permission": "Permissions",
"title": "Boot Selection Server",
@@ -11,8 +10,7 @@
"logout": "Logout"
},
"de": {
- "mymodule": "Mein Modul",
- "yourmodule": "Dein Module",
+ "group": "Orte / Gruppen",
"backend": "Externe Backends",
"permission": "Rechteverwaltung",
"title": "Boot Auswahl Server",
@@ -44,26 +42,27 @@
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 class="logo" src="@/assets/logo.svg" /></div>
- <v-list>
- <v-list-tile ripple v-for="child in $options.dashboardModules" :key="child.path" :to="child.path">
- <v-list-tile-action>
- <v-icon v-html="child.dashboardIcon"></v-icon>
- </v-list-tile-action>
- <v-list-tile-content>
- <v-list-tile-title v-text="$t(child.path)"></v-list-tile-title>
- </v-list-tile-content>
- </v-list-tile>
- </v-list>
- </v-touch>
+ >
+ <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 class="logo" src="@/assets/logo.svg" /></div>
+ <v-list>
+ <v-list-tile ripple v-for="child in $options.dashboardModules" :key="child.path" :to="'/dashboard/' + child.path">
+ <v-list-tile-action>
+ <v-icon v-html="child.dashboardIcon"></v-icon>
+ </v-list-tile-action>
+ <v-list-tile-content>
+ <v-list-tile-title v-text="$t(child.path)"></v-list-tile-title>
+ </v-list-tile-content>
+ </v-list-tile>
+ </v-list>
+ </v-touch>
</v-navigation-drawer>
<v-toolbar dark class="topbar" app :clipped-left="clipped">
@@ -96,23 +95,38 @@
<v-content>
<router-view />
</v-content>
+
+ <v-snackbar
+ color="primary"
+ v-model="showSnackbar"
+ bottom
+ right
+ :timeout="2000"
+ >
+ {{ snackbarText }}
+ <v-btn
+ flat
+ @click="showSnackbar = false"
+ >
+ Close
+ </v-btn>
+ </v-snackbar>
+
</v-app>
</template>
<script>
-import { mapState } from 'vuex'
-import AccountModule from '@/components/AccountModule'
-import SettingsModule from '@/components/SettingsModule'
+import { mapState, mapGetters, mapMutations } from 'vuex'
+import GroupModule from '@/components/GroupModule'
import BackendModule from '@/components/BackendModule'
import PermissionModule from '@/components/PermissionModule'
-import MyModule from '@/components/MyModule'
-import YourModule from '@/components/YourModule'
+import AccountModule from '@/components/AccountModule'
+import SettingsModule from '@/components/SettingsModule'
export default {
name: 'DashboardPage',
dashboardModules: [
- { path: 'yourmodule', component: YourModule, dashboardIcon: 'build' },
- { path: 'mymodule', component: MyModule, dashboardIcon: 'build' },
+ { path: 'group', component: GroupModule, dashboardIcon: 'category' },
{ path: 'backend', component: BackendModule, dashboardIcon: 'cloud' },
{ path: 'permission', component: PermissionModule, dashboardIcon: 'lock_open' }
],
@@ -122,6 +136,9 @@ export default {
],
data () {
return {
+ snackbarsInQueue: false,
+ showSnackbar: false,
+ snackbarText: 'MESSAGE',
dragging: false,
drawerWidth: 250,
drawerTranslateX: 0,
@@ -131,7 +148,8 @@ export default {
}
},
computed: {
- ...mapState(['dark', 'clipped', 'mini']),
+ ...mapState(['dark', 'clipped', 'mini', 'snackbars']),
+ ...mapGetters(['nextSnackbar']),
desktop () { return this.$vuetify.breakpoint.lgAndUp },
drawerDraggingStyle () {
var style = {}
@@ -144,6 +162,28 @@ export default {
}
},
watch: {
+ showSnackbar (value) {
+ if (!value) {
+ var text = this.nextSnackbar
+ if (text) {
+ this.shiftSnackbars()
+ setTimeout(() => {
+ this.snackbarText = text
+ this.showSnackbar = true
+ }, 500)
+ } else {
+ this.snackbarsInQueue = false
+ }
+ }
+ },
+ snackbars (value) {
+ if (!this.snackbarsInQueue) {
+ this.snackbarsInQueue = true
+ this.snackbarText = this.nextSnackbar
+ this.shiftSnackbars()
+ this.showSnackbar = true
+ }
+ },
mini (value) {
if (value) {
this.drawerMini = !this.drawerOpen
@@ -157,6 +197,7 @@ export default {
drawerOpen (value) { localStorage.setItem('drawerOpen', value) }
},
methods: {
+ ...mapMutations(['shiftSnackbars']),
toggleDrawer () {
if (this.mini && this.desktop) this.drawerMini = !this.drawerMini
else this.drawerOpen = !this.drawerOpen
@@ -168,11 +209,11 @@ export default {
},
drawerDragMove (event) {
if (this.mini && this.desktop) {
- var newX = this.drawerStartWidth + event.deltaX
- if (newX >= 80 && newX <= 250) this.drawerWidth = newX
+ let newX = this.drawerStartWidth + event.deltaX
+ if (newX >= 80 && newX <= 250) this.drawerWidth = newX
} else {
- var newX = this.drawerTranslateStartX + event.deltaX
- if (newX <= 0 && newX >= -250) this.drawerTranslateX = newX
+ let newX = this.drawerTranslateStartX + event.deltaX
+ if (newX <= 0 && newX >= -250) this.drawerTranslateX = newX
}
},
drawerDragEnd (event) {
@@ -184,7 +225,6 @@ export default {
if ((this.drawerTranslateX < -100 && event.velocityX <= 0) || event.velocityX < -0.4) this.drawerOpen = false
else this.drawerOpen = true
}
-
},
logout () {
this.$http.post('/api/logout').then(response => {