This repository has been archived on 2024-07-27. You can view files and clone it, but cannot push or open issues or pull requests.
keksAccountGUI/src/components/Menu2.vue

195 lines
5.9 KiB
Vue
Raw Normal View History

2019-08-11 18:48:02 +00:00
<template>
<v-app-bar
:color="bgcolor"
2019-11-22 11:06:33 +00:00
style="z-index: 1;"
2019-08-11 18:48:02 +00:00
v-scroll="handleScroll"
:flat="flat"
fixed
>
2019-11-22 11:06:33 +00:00
<v-app-bar-nav-icon class="d-flex d-md-none" @click="toggleMenu()"></v-app-bar-nav-icon>
2019-08-11 18:48:02 +00:00
<v-toolbar-title><b>{{nameBig}}</b>{{nameSmall}}</v-toolbar-title>
2019-11-22 11:06:33 +00:00
2019-08-11 18:48:02 +00:00
<v-spacer></v-spacer>
<!-- User not Logged in !-->
<v-btn
2019-11-22 11:06:33 +00:00
class="d-none d-md-flex"
2019-08-11 18:48:02 +00:00
v-if="!this.$store.state.loggedIn"
:to="{path: '/login'}"
tile
text
height="100%"
>Login</v-btn>
<v-btn
2019-11-22 11:06:33 +00:00
class="d-none d-md-flex"
2019-08-11 18:48:02 +00:00
v-if="!this.$store.state.loggedIn && this.$store.getters.getSettingValue('invites')"
:to="{path: '/invited'}"
tile
text
height="100%"
>Invited</v-btn>
<v-btn
2019-11-22 11:06:33 +00:00
class="d-none d-md-flex"
2019-08-11 18:48:02 +00:00
v-if="!this.$store.state.loggedIn && this.$store.getters.getSettingValue('registration_possible')"
:to="{path: '/register'}"
tile text height="100%"
>Register</v-btn>
<!-- User logged in !-->
<v-btn
2019-11-22 11:06:33 +00:00
class="d-none d-md-flex"
2019-08-11 18:48:02 +00:00
v-if="this.$store.state.loggedIn"
:to="{path: '/dashboard'}"
tile
text
height="100%"
>Dashboard</v-btn>
<v-btn
2019-11-22 11:06:33 +00:00
class="d-none d-md-flex"
2019-08-11 18:48:02 +00:00
v-if="this.$store.state.loggedIn && this.$store.getters.getMe.developer"
:to="{path: '/apps'}"
tile
text
height="100%"
>Developer</v-btn>
2019-11-22 15:13:51 +00:00
<v-menu
left
bottom
offset-y
v-if="this.$store.state.loggedIn"
>
<template v-slot:activator="{ on }">
<v-btn v-on="on" class="d-none d-md-flex" tile text height="100%">
Admin
</v-btn>
</template>
<v-list>
<v-list-item to="/admin/settings">
<v-list-item-title>Settings</v-list-item-title>
</v-list-item>
<v-list-item to="/access">
<v-list-item-title>User</v-list-item-title>
</v-list-item>
<v-list-item to="/access">
<v-list-item-title>Apps</v-list-item-title>
</v-list-item>
<v-list-item to="/access">
<v-list-item-title>Invites</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
2019-08-11 18:48:02 +00:00
<v-menu
2019-11-22 11:06:33 +00:00
2019-08-11 18:48:02 +00:00
left
bottom
offset-y
v-if="this.$store.state.loggedIn"
>
<template v-slot:activator="{ on }">
2019-11-22 11:06:33 +00:00
<v-btn v-on="on" class="d-none d-md-flex" tile text height="100%">
2019-08-11 18:48:02 +00:00
{{$store.getters.getMe["username"]}}
</v-btn>
</template>
<v-list>
2019-11-22 11:06:33 +00:00
<v-list-item to="/profile">
<v-list-item-title>Profile</v-list-item-title>
</v-list-item>
2019-09-25 09:00:55 +00:00
<v-list-item to="/access">
<v-list-item-title>App Access</v-list-item-title>
</v-list-item>
2019-08-11 18:48:02 +00:00
<v-list-item>
<v-list-item-title @click="clickLoogut()">Logout</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<!-- APP MENU !-->
<v-menu offset-y v-if="this.$store.state.loggedIn">
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
text
tile
height="100%"
>
<v-icon>apps</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item>
<v-list-item-title>KeksAccount</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Mein Verein</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Webmail</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
</template>
<script>
import UserServie from '../services/User'
export default {
name: 'Menu',
components: {
},
data () {
return {
big: true,
bgcolor: "transparent",
flat: true,
nameBig: '',
nameSmall: '',
}
},
computed: {
setting: (name) => {
//this.$store.getters.getSettingValue(this.$store.state, name);
}
},
methods: {
handleScroll: function (evt, el) {
2019-09-24 14:46:02 +00:00
let scrollPos = document.documentElement.scrollTop;
if(scrollPos> 0) {
2019-08-11 18:48:02 +00:00
this.big = false;
this.bgcolor = "#fff";
this.flat = false;
} else {
this.big = true;
this.bgcolor = "rgba(255,255,255,0)";
this.flat = true;
}
},
clickLoogut: function () {
UserServie.logout();
this.$store.dispatch('checkAccount')
this.$router.push({"path": "login"})
2019-11-22 11:06:33 +00:00
},
toggleMenu: function () {
this.$store.state.sideMenu = !this.$store.state.sideMenu ;
2019-08-11 18:48:02 +00:00
}
},
mounted: function () {
this.nameBig = this.$store.getters.getSettingValue("name_big");
this.nameSmall = this.$store.getters.getSettingValue("name_small");
}
}
</script>