raven-client/ayanova/src/views/ay-about.vue

<template>
  <v-row row v-if="this.formState.ready">
    <v-col cols="12" mt-1 mb-2 v-if="formState.errorBoxMessage">
      <v-alert
        ref="errorbox"
        v-show="formState.errorBoxMessage"
        color="error"
        icon="fa-exclamation-circle "
        transition="scale-transition"
        class="multi-line"
        outlined
        >{{ formState.errorBoxMessage }}</v-alert
      >
    </v-col>
    <v-col>
      <v-card id="aboutinfocard">
        <v-subheader>{{ lt("ClientApp") }}</v-subheader>
        <div>
          <span class="ml-6 body-1">{{ lt("Version") }}:</span>
          <span class="body-2">{{ clientInfo.version }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("User") }}:</span>
          <span class="body-2">{{ this.$store.state.userName }}</span>
        </div>

        <div>
          <span class="ml-6 body-1">{{ lt("UserTimeZoneOffset") }}:</span>
          <span class="body-2">
            {{ ltFormat().timeZoneOffset }}
          </span>
        </div>

        <div>
          <span class="ml-6 body-1">{{ lt("DecimalSeparator") }}:</span>
          <span class="body-2">{{ ltFormat().decimalSeparator }}</span>
        </div>

        <div>
          <span class="ml-6 body-1">{{ lt("CurrencySymbol") }}:</span>
          <span class="body-2">{{ ltFormat().currencySymbol }}</span>
        </div>

        <div>
          <span class="ml-6 body-1">{{ lt("ShortDateFormat") }}:</span>
          <span class="body-2">{{ ltFormat().shortDate }}</span>
        </div>

        <div>
          <span class="ml-6 body-1">{{ lt("ShortTimeFormat") }}:</span>
          <span class="body-2">{{ ltFormat().shortTime }}</span>
        </div>

        <div>
          <span class="ml-6 body-1">{{ lt("ShortDateAndTimeFormat") }}: </span>
          <span class="body-2">{{ ltFormat().shortDateAndTime }}</span>
        </div>

        <v-divider class="mt-6"></v-divider>
        <v-subheader>{{ lt("Browser") }}</v-subheader>
        <div v-for="(value, name) in clientInfo.browser" :key="name">
          <span class="ml-6 body-1">{{ name }}:</span>
          <span class="body-2">{{ value }}</span>
        </div>

        <v-divider class="mt-6"></v-divider>
        <v-subheader>{{ lt("Server") }}</v-subheader>
        <div>
          <span class="ml-6 body-1">{{ lt("ServerAddress") }}:</span>
          <span class="body-2">{{ this.$store.state.apiUrl }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("Version") }}:</span>
          <span class="body-2">{{ serverInfo.serverVersion }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("SchemaVersion") }}:</span>
          <span class="body-2">{{ serverInfo.dbSchemaVersion }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("ServerTime") }}:</span>
          <span class="body-2">{{ serverInfo.serverLocalTime }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("TimeZone") }}:</span>
          <span class="body-2">{{ serverInfo.serverTimeZone }}</span>
        </div>

        <v-divider class="mt-6"></v-divider>
        <v-subheader>{{ lt("HelpLicense") }}</v-subheader>
        <div>
          <span class="ml-6 body-1">{{ lt("RegisteredUser") }}:</span>
          <span class="body-2">{{
            serverInfo.license.license.licensedTo
          }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("DatabaseID") }}:</span>
          <span class="body-2">{{ serverInfo.license.license.dbId }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("LicenseSerial") }}:</span>
          <span class="body-2">{{ serverInfo.license.license.keySerial }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("LicenseExpiration") }}:</span>
          <span class="body-2">{{
            serverInfo.license.license.licenseExpiration
          }}</span>
        </div>
        <div>
          <span class="ml-6 body-1">{{ lt("SupportedUntil") }}:</span>
          <span class="body-2">{{
            serverInfo.license.license.maintenanceExpiration
          }}</span>
        </div>

        <v-divider class="mt-6"></v-divider>
        <v-subheader>{{ lt("LicensedOptions") }}</v-subheader>

        <div
          v-for="item in serverInfo.license.license.features"
          :key="item.Feature"
        >
          <span class="ml-6 body-1">{{ item.Feature }}</span>
          <span class="body-2">{{ item.Count ? ": " + item.Count : "" }}</span>
        </div>

        <v-divider class="mt-6"></v-divider>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
/* xeslint-disable */
import aboutInfo from "../api/aboutinfo";

/////////////////////////////
//
//
function clickHandler(menuItem) {
  if (!menuItem) {
    return;
  }
  var m = window.$gz.menu.parseMenuItem(menuItem);
  if (m.owner == "about" && !m.disabled) {
    switch (m.key) {
      case "copysupportinfo":
        //put the support info on the clipboard:
        var element = document.getElementById("aboutinfocard");
        var text = element.innerText || element.textContent;

        var logText = "";
        window.$gz._.forEach(m.vm.$store.state.logArray, function appendLogItem(
          value
        ) {
          logText += value + "\n";
        });
        window.$gz.util.copyToClipboard(text + "\nCLIENT LOG\n" + logText);
        break;
      default:
        window.$gz.eventBus.$emit(
          "notify-warning",
          "About.vue::context click: [" + m.key + "]"
        );
    }
  }
}

export default {
  beforeCreate() {
    var vm = this;
    window.$gz.locale
      .fetch([
        "HelpAboutAyaNova",
        "ClientApp",
        "Server",
        "Version",
        "SchemaVersion",
        "ServerTime",
        "ServerAddress",
        "TimeZone",
        "HelpLicense",
        "RegisteredUser",
        "DatabaseID",
        "LicenseSerial",
        "LicenseExpiration",
        "SupportedUntil",
        "LicensedOptions",
        "Log",
        "User",
        "Browser",
        "UserTimeZoneOffset",
        "DecimalSeparator",
        "CurrencySymbol",
        "ShortDateFormat",
        "ShortTimeFormat",
        "ShortDateAndTimeFormat"
      ])
      .then(function() {
        vm.formState.ready = true;

        window.$gz.eventBus.$emit("menu-change", {
          isMain: false,
          icon: "fa-info-circle",
          title: window.$gz.locale.get("HelpAboutAyaNova"),
          helpUrl: "form-ay-about",
          menuItems: [
            {
              title: window.$gz.locale.get("Copy"),
              icon: "copy",
              surface: true,
              key: "about:copysupportinfo",
              vm: vm
            },
            {
              title: window.$gz.locale.get("Log"),
              icon: "glasses",
              surface: true,
              key: "app:nav:log",
              data: "log"
            }
          ]
        });
        window.$gz.eventBus.$on("menu-click", clickHandler);
      })
      .catch(err => {
        vm.formState.ready = true;
        window.$gz.errorHandler.handleFormError(err);
      });
  },
  created() {
    window.$gz.api
      .get("ServerInfo")
      .then(response => {
        this.serverInfo = response.data;
      })
      .catch(function handleGetServerInfoError(error) {
        throw error;
      });
  },
  beforeDestroy() {},
  mounted() {
    this.clientInfo = {};
    this.clientInfo = aboutInfo;
  },
  data() {
    return {
      serverInfo: { license: { license: {} } },
      clientInfo: {},
      formState: {
        ready: false,
        loading: true,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      }
    };
  },
  methods: {
    lt(ltKey) {
      return window.$gz.locale.get(ltKey);
    },
    ltFormat() {
      return window.$gz.locale.format();
    }
  }
};
</script>