raven-client/ayanova/src/App.vue

<template>
  <v-app id="AYANOVA">
    <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>&nbsp;
        <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"
            right            
            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 dark 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";
import gzmenu from "./api/gzmenu";

export default {
  //name: "App",
  data() {
    return {
      drawer: null,
      appBar: {
        isMain: true,
        icon: "",
        title: "",
        helpUrl: "index.html",
        menuItems: []
      },
      testcolor: "pink"
    };
  },
  created() {
    //////////////////////////////////
    // MENU EVENT HANDLERS
    //
    //
    var that = this;
    this.$gzevent.$on("menu-change", function(ctx) {
      gzmenu.handleMenuChange(that, ctx);
    });

    this.$gzevent.$on("menu-replace-item", function(newItem) {
      gzmenu.handleReplaceMenuItem(that, newItem);
    });

    this.$gzevent.$on("menu-click", function(menuitem) {
      gzmenu.handleClick(that, menuitem);
    });
  },
  beforeDestroy() {
    this.$gzevent.$off();
  },
  mounted() {
    //redirect to login if not authenticated
    if (!this.$store.state.authenticated) {
      this.$router.replace({ name: "login" });
    }
  },
  methods: {
    setAuthenticated(status) {
      this.$store.state.authenticated = status;
    },
    logout() {
      this.$store.state.authenticated = false;
    }
  },
  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>