raven-client/ayanova/src/views/About.vue

<template>
  <!-- <div class="about">
     
  <h1>About AyaNova</h1>-->
  <v-layout row>
    <v-flex xs12 sm6 offset-sm3>
      <v-card>
        <v-toolbar>
          <v-avatar size="64px" tile>
            <img :src="require('../assets/bw-logo.svg')" alt="AyaNova">
          </v-avatar>
          <v-toolbar-title>{{ lt("HelpAboutAyaNova")}}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn large icon to="/log">
            <v-icon>fa-glasses</v-icon>
          </v-btn>
        </v-toolbar>
        <v-list two-line subheader>
          <v-subheader>{{ lt("ClientApp")}}</v-subheader>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{ lt("Version")}}</v-list-tile-title>
              <v-list-tile-sub-title>{{ clientInfo.version }}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
        <v-divider></v-divider>
        <v-list two-line subheader>
          <v-subheader>{{ lt("Server")}}</v-subheader>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{ lt("ServerAddress")}}</v-list-tile-title>
              <v-list-tile-sub-title>{{ serverUrl() }}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{ lt("Version")}}</v-list-tile-title>
              <v-list-tile-sub-title>{{ serverInfo.serverVersion }}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{ lt("SchemaVersion")}}</v-list-tile-title>
              <v-list-tile-sub-title>{{ serverInfo.dbSchemaVersion }}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{ lt("ServerTime")}}</v-list-tile-title>
              <v-list-tile-sub-title>{{ serverInfo.serverLocalTime }}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{ lt("TimeZone")}}</v-list-tile-title>
              <v-list-tile-sub-title>{{ serverInfo.serverTimeZone }}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
        <v-divider></v-divider>
        <v-list two-line subheader>
          <v-subheader>{{ lt("HelpLicense")}}</v-subheader>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{ lt("RegisteredUser")}}</v-list-tile-title>
              <v-list-tile-sub-title>{{ serverInfo.license.license.licensedTo }}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{ lt("DatabaseID")}}</v-list-tile-title>
              <v-list-tile-sub-title>{{ serverInfo.license.license.dbId }}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{ lt("LicenseSerial")}}</v-list-tile-title>
              <v-list-tile-sub-title>{{ serverInfo.license.license.keySerial }}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{ lt("LicenseExpiration")}}</v-list-tile-title>
              <v-list-tile-sub-title>{{ serverInfo.license.license.licenseExpiration }}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{ lt("SupportedUntil")}}</v-list-tile-title>
              <v-list-tile-sub-title>{{ serverInfo.license.license.maintenanceExpiration }}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{ lt("LicensedOptions")}}</v-list-tile-title>
              <v-list-tile-sub-title
                v-for="item in serverInfo.license.license.features"
                :key="item.Feature"
              >{{item.Feature}} {{item.Count ? item.Count : ""}}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-card>
    </v-flex>
  </v-layout>
  <!-- </div> -->
</template>

<script>
/* xeslint-disable */
import api from "../api/apiutil";
import aboutInfo from "../api/aboutinfo";
import lt from "../api/locale";
import store from "../store";
export default {
  data() {
    return {
      serverInfo: { license: { license: {} } },
      clientInfo: {}
    };
  },
  beforeRouteEnter(to, from, next) {
    lt.fetch([
      "HelpAboutAyaNova",
      "ClientApp",
      "Server",
      "Version",
      "SchemaVersion",
      "ServerTime",
      "ServerAddress",
      "TimeZone",
      "HelpLicense",
      "RegisteredUser",
      "DatabaseID",
      "LicenseSerial",
      "LicenseExpiration",
      "SupportedUntil",
      "LicensedOptions"
    ]).then(() => {
      next();
    });
  },
  mounted() {
    this.clientInfo.version = aboutInfo.version;
    api
      .get("ServerInfo")
      .then(response => {
        this.serverInfo = response.data;
      })
      .catch(function(error) {
        /* xeslint-disable-next-line */
        //console.log(error);
        //TODO: turn this into a general error handling method for every form
        //probablyo an error component with error message slot to fill in
        alert(error);
      });
  },
  methods: {
    lt: function(key) {
      return lt.get(key);
    },
    serverUrl() {
      return store.state.apiUrl;
    }
  }
};
</script>

<style>
</style>