summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/DashboardPage.vue
diff options
context:
space:
mode:
authorUdo Walter2018-11-24 20:00:29 +0100
committerUdo Walter2018-11-24 20:00:29 +0100
commit8a15b67a06fb3cdd7ba5f644475f07f5cf5ef96e (patch)
tree1d3e31971b57af585efa08b72dc606be2a2cf197 /webapp/src/components/DashboardPage.vue
parentmerge (diff)
downloadbas-8a15b67a06fb3cdd7ba5f644475f07f5cf5ef96e.tar.gz
bas-8a15b67a06fb3cdd7ba5f644475f07f5cf5ef96e.tar.xz
bas-8a15b67a06fb3cdd7ba5f644475f07f5cf5ef96e.zip
[webapp] Add notification system
Components can call this. and this. to display notifications
Diffstat (limited to 'webapp/src/components/DashboardPage.vue')
-rw-r--r--webapp/src/components/DashboardPage.vue68
1 files changed, 18 insertions, 50 deletions
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 87c630a..89c8c0c 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -45,7 +45,7 @@
: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>
+ <div class="drawer-header grey darken-4 hidden-lg-and-up"><img src="@/assets/logo.svg" /></div>
<v-list>
<v-list-tile ripple v-for="module in modules" :key="module.name" :to="{ name: module.name }">
<v-list-tile-action>
@@ -59,12 +59,13 @@
</v-touch>
</v-navigation-drawer>
- <v-toolbar dark class="topbar" app :clipped-left="settings.clipped">
+ <v-toolbar dark app :clipped-left="settings.clipped">
<v-toolbar-side-icon class="drawer-icon" @click.stop="toggleDrawer"></v-toolbar-side-icon>
- <img class="logo non-draggable hidden-md-and-down" src="@/assets/logo.svg" />
+ <div class="logo"><img class="non-draggable hidden-md-and-down" src="@/assets/logo.svg" /></div>
<v-spacer></v-spacer>
<v-btn v-if="devMode" icon @click="$store.commit('saveSetting', { name: 'locale', value: settings.locale === 'en' ? 'de' : 'en' })"><v-icon>language</v-icon></v-btn>
<v-btn v-if="devMode" icon @click="$store.commit('saveSetting', { name: 'dark', value: !settings.dark })"><v-icon>invert_colors</v-icon></v-btn>
+ <notifications-alerts></notifications-alerts>
<v-toolbar-items>
<v-menu offset-y>
<v-btn class="user-button" flat slot="activator">
@@ -92,27 +93,14 @@
<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>
-
+ <notifications-snackbars></notifications-snackbars>
</v-app>
</template>
<script>
-import { mapState, mapGetters, mapMutations } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
+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'
@@ -125,12 +113,13 @@ export default {
{ path: 'settings', component: SettingsModule }
]
},
+ components: {
+ NotificationsAlerts,
+ NotificationsSnackbars
+ },
data () {
return {
modules: dashboardModules,
- snackbarsInQueue: false,
- showSnackbar: false,
- snackbarText: 'MESSAGE',
dragging: false,
drawerWidth: 250,
drawerTranslateX: 0,
@@ -140,9 +129,8 @@ export default {
}
},
computed: {
- ...mapState(['settings', 'snackbars']),
+ ...mapState(['settings']),
mini () { return this.settings.mini },
- ...mapGetters(['nextSnackbar']),
desktop () { return this.$vuetify.breakpoint.lgAndUp },
drawerDraggingStyle () {
var style = {}
@@ -156,28 +144,6 @@ export default {
devMode () { return localStorage.getItem('dev') === 'true' }
},
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
@@ -191,7 +157,7 @@ export default {
drawerOpen (value) { localStorage.setItem('drawerOpen', value) }
},
methods: {
- ...mapMutations(['shiftSnackbars', 'setLoginRedirect']),
+ ...mapMutations(['setLoginRedirect']),
toggleDrawer () {
if (this.settings.mini && this.desktop) this.drawerMini = !this.drawerMini
else this.drawerOpen = !this.drawerOpen
@@ -238,11 +204,13 @@ export default {
<style scoped>
-.topbar {
+.logo {
+ height: 100%;
overflow: hidden;
}
-.logo {
+.logo > img {
+ margin-top: -160px;
margin-left: 20px;
height: 400px;
}