328 lines
8.6 KiB
Vue
328 lines
8.6 KiB
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="ayaNovaVersioncard">
|
|
<v-subheader>{{ t("ClientApp") }}</v-subheader>
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("Version") }}: </span>
|
|
<span class="body-2">{{ clientInfo.version }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("User") }}: </span>
|
|
<span class="body-2">{{ this.$store.state.userName }}</span>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="ml-6 body-1">12h: </span>
|
|
<span class="body-2">
|
|
{{ locale().getHour12() }}
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("TimeZone") }}: </span>
|
|
<span class="body-2">
|
|
{{ locale().getBrowserTimeZoneName() }}
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("LanguageCode") }}: </span>
|
|
<span class="body-2">{{ locale().getBrowserFirstLanguage() }}</span>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("CurrencyCode") }}: </span>
|
|
<span class="body-2">{{ locale().getCurrencyName() }}</span>
|
|
</div>
|
|
|
|
<v-divider class="mt-6"></v-divider>
|
|
<v-subheader>{{ t("Browser") }}</v-subheader>
|
|
<div v-for="(value, name) in 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>{{ t("Server") }}</v-subheader>
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("ServerAddress") }}: </span>
|
|
<span class="body-2">{{ this.$store.state.apiUrl }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("Version") }}: </span>
|
|
<span class="body-2">{{ serverInfo.serverVersion }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("SchemaVersion") }}: </span>
|
|
<span class="body-2">{{ serverInfo.dbSchemaVersion }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("ServerTime") }}: </span>
|
|
<span class="body-2">{{ serverInfo.serverLocalTime }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("TimeZone") }}: </span>
|
|
<span class="body-2">{{ serverInfo.serverTimeZone }}</span>
|
|
</div>
|
|
|
|
<v-divider class="mt-6"></v-divider>
|
|
<v-subheader>{{ t("HelpLicense") }}</v-subheader>
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("RegisteredUser") }}: </span>
|
|
<span class="body-2">{{
|
|
serverInfo.license.license.licensedTo
|
|
}}</span>
|
|
</div>
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("DatabaseID") }}: </span>
|
|
<span class="body-2">{{ serverInfo.license.license.dbId }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("LicenseSerial") }}: </span>
|
|
<span class="body-2">{{ serverInfo.license.license.keySerial }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("LicenseExpiration") }}: </span>
|
|
<span class="body-2">{{
|
|
serverInfo.license.license.licenseExpiration
|
|
}}</span>
|
|
</div>
|
|
<div>
|
|
<span class="ml-6 body-1">{{ t("SupportedUntil") }}: </span>
|
|
<span class="body-2">{{
|
|
serverInfo.license.license.maintenanceExpiration
|
|
}}</span>
|
|
</div>
|
|
|
|
<v-divider class="mt-6"></v-divider>
|
|
<v-subheader>{{ t("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 ayaNovaVersion from "../api/ayanova-version";
|
|
|
|
export default {
|
|
created() {
|
|
var vm = this;
|
|
|
|
initForm(vm)
|
|
.then(() => {
|
|
vm.formState.ready = true;
|
|
window.$gz.eventBus.$on("menu-click", clickHandler);
|
|
generateMenu(vm);
|
|
vm.formState.loading = false;
|
|
})
|
|
.catch(err => {
|
|
vm.formState.ready = true;
|
|
window.$gz.errorHandler.handleFormError(err, vm);
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
window.$gz.eventBus.$off("menu-click", clickHandler);
|
|
},
|
|
mounted() {
|
|
this.clientInfo = {};
|
|
this.clientInfo = ayaNovaVersion;
|
|
},
|
|
data() {
|
|
return {
|
|
serverInfo: { license: { license: {} } },
|
|
clientInfo: {},
|
|
browser: {},
|
|
formState: {
|
|
ready: false,
|
|
loading: true,
|
|
errorBoxMessage: null,
|
|
appError: null,
|
|
serverError: {}
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
t(tKey) {
|
|
return window.$gz.translation.get(tKey);
|
|
},
|
|
translation() {
|
|
return window.$gz.translation;
|
|
},
|
|
locale() {
|
|
return window.$gz.locale;
|
|
}
|
|
}
|
|
};
|
|
|
|
//////////////////////
|
|
//
|
|
//
|
|
function generateMenu(vm) {
|
|
var menuOptions = {
|
|
isMain: false,
|
|
icon: "fa-info-circle",
|
|
title: window.$gz.translation.get("HelpAboutAyaNova"),
|
|
helpUrl: "form-ay-about",
|
|
menuItems: [
|
|
{
|
|
title: window.$gz.translation.get("Copy"),
|
|
icon: "copy",
|
|
surface: true,
|
|
key: "about:copysupportinfo",
|
|
vm: vm
|
|
},
|
|
{
|
|
title: window.$gz.translation.get("Log"),
|
|
icon: "glasses",
|
|
surface: true,
|
|
key: "app:nav:log",
|
|
data: "ay-log"
|
|
}
|
|
]
|
|
};
|
|
|
|
window.$gz.eventBus.$emit("menu-change", menuOptions);
|
|
}
|
|
|
|
/////////////////////////////
|
|
//
|
|
//
|
|
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("ayaNovaVersioncard");
|
|
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 + "]"
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
/////////////////////////////////
|
|
//
|
|
//
|
|
function initForm(vm) {
|
|
return new Promise(function(resolve, reject) {
|
|
(async function() {
|
|
try {
|
|
await fetchTranslatedText(vm);
|
|
await getServerInfo(vm);
|
|
await getBrowserInfo(vm);
|
|
} catch (err) {
|
|
reject(err);
|
|
}
|
|
resolve();
|
|
})();
|
|
});
|
|
}
|
|
|
|
//////////////////////////////////////////////////////////
|
|
//
|
|
// Ensures UI translated text is available
|
|
//
|
|
function fetchTranslatedText(vm) {
|
|
var ltKeysRequired = [
|
|
"HelpAboutAyaNova",
|
|
"ClientApp",
|
|
"Server",
|
|
"Version",
|
|
"SchemaVersion",
|
|
"ServerTime",
|
|
"ServerAddress",
|
|
"TimeZone",
|
|
"HelpLicense",
|
|
"RegisteredUser",
|
|
"DatabaseID",
|
|
"LicenseSerial",
|
|
"LicenseExpiration",
|
|
"SupportedUntil",
|
|
"LicensedOptions",
|
|
"Log",
|
|
"User",
|
|
"Browser",
|
|
"LanguageCode",
|
|
"TimeZone",
|
|
"CurrencyCode"
|
|
];
|
|
|
|
return window.$gz.translation.fetch(ltKeysRequired);
|
|
}
|
|
|
|
////////////////////
|
|
//
|
|
function getServerInfo(vm) {
|
|
return window.$gz.api.get("ServerInfo").then(res => {
|
|
if (res.error != undefined) {
|
|
throw res.error;
|
|
} else {
|
|
vm.serverInfo = res.data;
|
|
}
|
|
});
|
|
}
|
|
|
|
////////////////////
|
|
//
|
|
function getBrowserInfo(vm) {
|
|
vm.browser = {
|
|
platform: window.navigator.platform,
|
|
userAgent: window.navigator.userAgent,
|
|
languages: window.navigator.languages,
|
|
tz: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
oscpu: window.navigator.oscpu,
|
|
maxTouchPoints: window.navigator.maxTouchPoints,
|
|
webdriver: window.navigator.webdriver,
|
|
vendor: window.navigator.vendor,
|
|
availWidth: window.screen.availWidth,
|
|
availHeight: window.screen.availHeight,
|
|
width: window.screen.width,
|
|
height: window.screen.height,
|
|
devicePixelRatio: window.devicePixelRatio,
|
|
pixelDepth: window.screen.pixelDepth
|
|
};
|
|
}
|
|
|
|
//eoc
|
|
</script>
|