172 lines
4.6 KiB
Vue
172 lines
4.6 KiB
Vue
<template>
|
|
<v-app>
|
|
<v-navigation-drawer v-if="isAuthenticated" fixed v-model="drawer" app>
|
|
<v-list dense>
|
|
<v-list-tile
|
|
v-for="item in navItems"
|
|
:key="item.route"
|
|
:to="item.route"
|
|
>
|
|
<v-list-tile-action>
|
|
<v-icon>{{ "fa-" + item.icon }}</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
<v-toolbar
|
|
v-if="isAuthenticated"
|
|
:color="appBar.isMain ? 'primary' : 'secondary'"
|
|
dark
|
|
fixed
|
|
app
|
|
>
|
|
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
|
|
<v-toolbar-title style="width: 300px" class="ml-0 pl-3">
|
|
<v-icon>{{ appBar.icon }}</v-icon
|
|
>
|
|
<span>{{ appBar.title }}</span>
|
|
</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-toolbar-items>
|
|
<template v-for="item in appBar.menuItems">
|
|
<v-btn
|
|
class="hidden-xs-only"
|
|
icon
|
|
v-if="item.surface"
|
|
:key="item.key"
|
|
:disabled="item.disabled"
|
|
@click="$gzevent.$emit('menu-click', item)"
|
|
>
|
|
<v-icon :color="item.color ? item.color : ''">
|
|
{{ "fa-" + item.icon }}
|
|
</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-spacer></v-spacer>
|
|
<v-menu bottom left>
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn flat icon v-on="on">
|
|
<v-icon>fa-ellipsis-v</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-list>
|
|
<template v-for="(item, index) in appBar.menuItems">
|
|
<v-subheader v-if="item.header" :key="index">
|
|
{{ item.header }}
|
|
</v-subheader>
|
|
<v-divider
|
|
v-else-if="item.divider"
|
|
:key="index"
|
|
:inset="item.inset"
|
|
></v-divider>
|
|
<v-list-tile
|
|
v-else
|
|
:key="item.key"
|
|
:disabled="item.disabled"
|
|
@click="$gzevent.$emit('menu-click', item)"
|
|
v-bind:class="{ 'hidden-sm-and-up': item.surface }"
|
|
>
|
|
<v-list-tile-action>
|
|
<v-icon
|
|
v-if="item.icon"
|
|
:color="item.color ? item.color : ''"
|
|
>{{ "fa-" + item.icon }}</v-icon
|
|
>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>
|
|
<span>{{ item.title }}</span>
|
|
</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
</template>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-toolbar-items>
|
|
</v-toolbar>
|
|
<v-content>
|
|
<v-container fluid fill-height>
|
|
<v-layout justify-center>
|
|
<router-view></router-view>
|
|
</v-layout>
|
|
</v-container>
|
|
</v-content>
|
|
<v-footer v-if="!isAuthenticated">
|
|
<v-layout>
|
|
<v-flex primary py-2 text-xs-center white--text xs12>
|
|
<div>
|
|
<a href="https://ayanova.com" target="_blank">
|
|
<span class="white--text caption"
|
|
>AyaNova ({{ version }}) {{ copyright }}</span
|
|
>
|
|
</a>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-footer>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
/* xeslint-disable */
|
|
import aboutInfo from "./api/aboutinfo";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
drawer: null,
|
|
appBar: {
|
|
isMain: true,
|
|
icon: "",
|
|
title: "",
|
|
helpUrl: "index.html",
|
|
menuItems: []
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
//////////////////////////////////
|
|
// WIRE UP
|
|
// MENU and DIALOG EVENT HANDLERS
|
|
// ON GZEVENTBUS
|
|
//
|
|
//
|
|
this.$gzmenu.wireUpEventHandlers(this);
|
|
this.$gzdialog.wireUpEventHandlers(this);
|
|
},
|
|
beforeDestroy() {
|
|
//UNWIRE ALL EVENT HANDLERS FROM GZEVENTBUS
|
|
this.$gzevent.$off();
|
|
},
|
|
mounted() {
|
|
//redirect to login if not authenticated
|
|
if (!this.$store.state.authenticated) {
|
|
this.$router.push({ name: "login" });
|
|
}
|
|
},
|
|
computed: {
|
|
isAuthenticated() {
|
|
return this.$store.state.authenticated === true;
|
|
},
|
|
navItems() {
|
|
return this.$store.state.navItems;
|
|
},
|
|
copyright() {
|
|
return aboutInfo.copyright;
|
|
},
|
|
version() {
|
|
return aboutInfo.version;
|
|
},
|
|
helpUrl() {
|
|
return this.$store.state.helpUrl;
|
|
}
|
|
},
|
|
props: {
|
|
source: String
|
|
}
|
|
};
|
|
</script>
|