[Major] Refactored webapp to use behaviors for re-usable code
This commit is contained in:
parent
1cf28eaa15
commit
458d778210
|
@ -8,9 +8,15 @@
|
||||||
return CustomWeb.baseRestPath;
|
return CustomWeb.baseRestPath;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
baseWsPath: {
|
||||||
|
type: String,
|
||||||
|
value: function () {
|
||||||
|
return CustomWeb.baseWsPath;
|
||||||
|
}
|
||||||
|
},
|
||||||
localesPath: {
|
localesPath: {
|
||||||
type: String,
|
type: String,
|
||||||
value: '../../locales.json'
|
value: '../../../locales.json'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -432,7 +438,8 @@
|
||||||
this.fire("cx-show-confirmation", {
|
this.fire("cx-show-confirmation", {
|
||||||
title: title,
|
title: title,
|
||||||
text: text,
|
text: text,
|
||||||
callback: callback
|
callback: callback,
|
||||||
|
bind: this
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -447,7 +454,8 @@
|
||||||
action2: action2,
|
action2: action2,
|
||||||
callback2: callback2,
|
callback2: callback2,
|
||||||
action3: action3,
|
action3: action3,
|
||||||
callback3: callback3
|
callback3: callback3,
|
||||||
|
bind: this
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
clearNotification: function (id) {
|
clearNotification: function (id) {
|
|
@ -0,0 +1,235 @@
|
||||||
|
<script>
|
||||||
|
CustomAppBehavior = {
|
||||||
|
|
||||||
|
/* Lifecycle */
|
||||||
|
attached: function () {
|
||||||
|
var that = this;
|
||||||
|
setTimeout(function () {
|
||||||
|
that.checkForNewVersion();
|
||||||
|
}, 3000);
|
||||||
|
this.checkForNewVersionInterval = setInterval(function () {
|
||||||
|
that.checkForNewVersion();
|
||||||
|
}, 10000);
|
||||||
|
},
|
||||||
|
|
||||||
|
reloadPage: function (pageName) {
|
||||||
|
this.debounce('page-reload', function () {
|
||||||
|
this.selectedPage = pageName;
|
||||||
|
var page = this.$$('#' + pageName);
|
||||||
|
if (page && page.reload) {
|
||||||
|
console.log('Reloading ' + pageName);
|
||||||
|
page.reload();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleDrawer: function () {
|
||||||
|
this.$$("#drawer").toggle();
|
||||||
|
},
|
||||||
|
closeDrawer: function () {
|
||||||
|
this.$$("#drawer").close();
|
||||||
|
},
|
||||||
|
|
||||||
|
onShowToast: function (e) {
|
||||||
|
if (this.$.toast.opened) {
|
||||||
|
// purge if we have too many
|
||||||
|
if (this.queuedToasts.length > 5)
|
||||||
|
this.queuedToasts = [];
|
||||||
|
this.queuedToasts.push(e.detail.text);
|
||||||
|
} else {
|
||||||
|
this.toastText = e.detail.text;
|
||||||
|
this.$.toast.open();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onToastClosed: function (e) {
|
||||||
|
if (this.queuedToasts.length > 0) {
|
||||||
|
this.toastText = this.queuedToasts.splice(0, 1)[0];
|
||||||
|
this.$.toast.open();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onShowStrolchDialog: function (event) {
|
||||||
|
var dlgTitle;
|
||||||
|
if (event.detail.title != null)
|
||||||
|
dlgTitle = event.detail.title;
|
||||||
|
else
|
||||||
|
dlgTitle = event.detail.isError ? 'errorOccurred' : 'info';
|
||||||
|
var dlgText = event.detail.text;
|
||||||
|
this._showDialog(dlgTitle, dlgText);
|
||||||
|
},
|
||||||
|
onShowDialog: function (event) {
|
||||||
|
var dlgTitle;
|
||||||
|
if (event.detail.title != null)
|
||||||
|
dlgTitle = event.detail.title;
|
||||||
|
else
|
||||||
|
dlgTitle = event.detail.isError ? 'errorOccurred' : 'info';
|
||||||
|
var dlgText = event.detail.message;
|
||||||
|
this._showDialog(dlgTitle, dlgText);
|
||||||
|
},
|
||||||
|
onShowConfirmation: function (event) {
|
||||||
|
var dlgTitle = event.detail.title;
|
||||||
|
var dlgText = event.detail.text;
|
||||||
|
var dlgCallback = event.detail.callback;
|
||||||
|
var bind = event.detail.bind;
|
||||||
|
this._showConfirmation(dlgTitle, dlgText, dlgCallback, bind);
|
||||||
|
},
|
||||||
|
onShowNotification: function (event) {
|
||||||
|
this.$.toolBar.showNotification(event.detail);
|
||||||
|
},
|
||||||
|
onClearNotification: function (event) {
|
||||||
|
this.$.toolBar.clearNotification(event.detail);
|
||||||
|
},
|
||||||
|
onLogOut: function (event) {
|
||||||
|
this.$.login.logout();
|
||||||
|
this.set("authTokenValid", false);
|
||||||
|
},
|
||||||
|
onServerNotAvailable: function (event) {
|
||||||
|
clearInterval(this.checkForNewVersionInterval);
|
||||||
|
this.$.dlg.close();
|
||||||
|
this.$.confirmationDlg.close();
|
||||||
|
this.$.serverNotConnectedDlg.open();
|
||||||
|
},
|
||||||
|
onSessionInvalid: function (event) {
|
||||||
|
var that = this;
|
||||||
|
console.log(this.routeTail);
|
||||||
|
if (this.routeTail.prefix != '/login') {
|
||||||
|
this._showConfirmation('sessionInvalid', 'sessionInvalidConfirmNavToLogin', function () {
|
||||||
|
that.deleteCookie('strolch.authorization');
|
||||||
|
that.set("authTokenValid", false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onPrivilegeDenied: function (event) {
|
||||||
|
if (this.authTokenValid) {
|
||||||
|
this._showDialog('privilegeDenied', 'privilegeDeniedText', this.requestEventToUrl(event));
|
||||||
|
} else {
|
||||||
|
console.warn("Privilege denied to URL " + this.requestEventToUrl(event), this.requestErrorToMsg(event));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
userLocaleChanged: function (newValue, oldValue) {
|
||||||
|
if (newValue && oldValue) {
|
||||||
|
console.log('User locale changed to ' + newValue);
|
||||||
|
this.$.ajaxPutLocale.generateRequest();
|
||||||
|
Strolch.setUserLocale(newValue);
|
||||||
|
window.location.reload();
|
||||||
|
} else if (this.userConfig == null && Strolch.getUserConfig() != null && Strolch.getUserConfig().locale != newValue) {
|
||||||
|
this.userConfig = Strolch.getUserConfig();
|
||||||
|
this.userConfig.locale = newValue;
|
||||||
|
Strolch.setUserConfig(this.userConfig);
|
||||||
|
this.$.ajaxPutLocale.generateRequest();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
sessionValidated: function () {
|
||||||
|
console.log("Session validated.");
|
||||||
|
var userLocale = Strolch.getUserLocale();
|
||||||
|
var userConfig = Strolch.getUserConfig();
|
||||||
|
if (userLocale !== userConfig.locale) {
|
||||||
|
console.log("Updating server side locale for user " + userConfig.username + " to " + userLocale);
|
||||||
|
userConfig.locale = userLocale;
|
||||||
|
Strolch.setUserConfig(userConfig);
|
||||||
|
this.$.ajaxPutLocale.url = this.baseRestPath + "/strolch/sessions/" + userConfig.sessionId + "/locale/" + userLocale;
|
||||||
|
this.$.ajaxPutLocale.generateRequest();
|
||||||
|
}
|
||||||
|
this.set("authToken", Strolch.getAuthToken());
|
||||||
|
this.set("authTokenValid", true);
|
||||||
|
this.set("userConfig", userConfig);
|
||||||
|
},
|
||||||
|
logout: function () {
|
||||||
|
sessionStorage.clear();
|
||||||
|
Polymer.dom(this.root).querySelectorAll('#auth')[0].logout();
|
||||||
|
Strolch.clearStorageData();
|
||||||
|
this.deleteCookie("strolch.authorization");
|
||||||
|
},
|
||||||
|
|
||||||
|
_showDialog: function (dlgTitle, dlgText, dlgReason) {
|
||||||
|
if (this.localize) {
|
||||||
|
this.dlgTitle = this.localize(dlgTitle);
|
||||||
|
dlgText = this.localize(dlgText);
|
||||||
|
if (dlgReason)
|
||||||
|
dlgText += ": " + dlgReason;
|
||||||
|
console.log("Message: " + this.dlgTitle + ': ' + dlgText);
|
||||||
|
this.$.dlgText.innerHTML = this.localize(dlgText);
|
||||||
|
this.$.dlg.open();
|
||||||
|
} else {
|
||||||
|
this.debounce('show-dlg', function () {
|
||||||
|
this.dlgTitle = this.localize(dlgTitle);
|
||||||
|
dlgText = this.localize(dlgText);
|
||||||
|
if (dlgReason)
|
||||||
|
dlgText += ": " + dlgReason;
|
||||||
|
console.log("Message: " + this.dlgTitle + ': ' + dlgText);
|
||||||
|
this.$.dlgText.innerHTML = this.localize(dlgText);
|
||||||
|
this.$.dlg.open();
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_showConfirmation: function (dlgTitle, dlgText, dlgCallback, bind) {
|
||||||
|
|
||||||
|
function onClose(event) {
|
||||||
|
dlg.removeEventListener("iron-overlay-closed", onClose);
|
||||||
|
var bound = dlgCallback.bind(bind);
|
||||||
|
bound(event.detail.confirmed);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.localize) {
|
||||||
|
this.dlgTitle = this.localize(dlgTitle);
|
||||||
|
dlgText = this.localize(dlgText);
|
||||||
|
console.log("Message: " + this.dlgTitle + ': ' + dlgText);
|
||||||
|
this.$.confirmationDlgText.innerHTML = this.localize(dlgText);
|
||||||
|
var dlg = this.$.confirmationDlg;
|
||||||
|
dlg.addEventListener("iron-overlay-closed", onClose);
|
||||||
|
dlg.open();
|
||||||
|
} else {
|
||||||
|
this.debounce('show-dlg', function () {
|
||||||
|
this.dlgTitle = this.localize(dlgTitle);
|
||||||
|
dlgText = this.localize(dlgText);
|
||||||
|
console.log("Message: " + this.dlgTitle + ': ' + dlgText);
|
||||||
|
this.$.confirmationDlgText.innerHTML = this.localize(dlgText);
|
||||||
|
var dlg = this.$.confirmationDlg;
|
||||||
|
dlg.addEventListener("iron-overlay-closed", onClose);
|
||||||
|
dlg.open();
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
checkForNewVersion: function () {
|
||||||
|
this.$.ajaxGetVersion.generateRequest();
|
||||||
|
},
|
||||||
|
reconnect: function () {
|
||||||
|
this.$.serverNotConnectedDlg.close();
|
||||||
|
this.onGetVersionResponse = function (event) {
|
||||||
|
var version = event.detail.response;
|
||||||
|
this.scmRevision = version.appVersion.scmRevision;
|
||||||
|
localStorage['appScmRevision'] = this.scmRevision;
|
||||||
|
document.location.reload();
|
||||||
|
};
|
||||||
|
this.$.ajaxGetVersion.generateRequest();
|
||||||
|
},
|
||||||
|
|
||||||
|
onGetVersionResponse: function (event) {
|
||||||
|
var version = event.detail.response;
|
||||||
|
Strolch.setAppVersion(version);
|
||||||
|
this.scmRevision = version.appVersion.scmRevision;
|
||||||
|
|
||||||
|
if (localStorage['appScmRevision'] == null) {
|
||||||
|
localStorage['appScmRevision'] = this.scmRevision;
|
||||||
|
} else if (this.scmRevision !== localStorage['appScmRevision']) {
|
||||||
|
console.log("App SCM Revision has changed from " + localStorage['appScmRevision'] + " to " + this.scmRevision + ". Need to refresh browser...");
|
||||||
|
this.$.newVersionAvailableToast.open();
|
||||||
|
}
|
||||||
|
this.appVersion = version;
|
||||||
|
},
|
||||||
|
|
||||||
|
onGetVersionError: function (event) {
|
||||||
|
console.log(event);
|
||||||
|
var readyState = event.detail.request.xhr.readyState;
|
||||||
|
var status = event.detail.request.xhr.status;
|
||||||
|
if (readyState === 4 && status === 404) {
|
||||||
|
console.log("Ignoring 404 for get version, as server is probably still starting...");
|
||||||
|
} else {
|
||||||
|
this.onRequestError(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -33,21 +33,21 @@
|
||||||
<link rel="import" href="../bower_components/strolch-wc-inspector/strolch-wc-control.html">
|
<link rel="import" href="../bower_components/strolch-wc-inspector/strolch-wc-control.html">
|
||||||
<link rel="import" href="../bower_components/strolch-wc-reports/strolch-wc-reports.html">
|
<link rel="import" href="../bower_components/strolch-wc-reports/strolch-wc-reports.html">
|
||||||
|
|
||||||
<link rel="import" href="./c-compute-behavior.html">
|
<link rel="import" href="./c-app-behavior.html">
|
||||||
|
<link rel="import" href="./behaviors/c-compute-behavior.html">
|
||||||
|
<link rel="import" href="./styles/c-app-style.html">
|
||||||
<link rel="import" href="./c-app-routing.html">
|
<link rel="import" href="./c-app-routing.html">
|
||||||
<link rel="import" href="./c-app-menu.html">
|
<link rel="import" href="./c-app-menu.html">
|
||||||
|
|
||||||
<link rel="import" href="./c-view404.html">
|
<link rel="import" href="./views/c-view404.html">
|
||||||
|
|
||||||
<dom-module id="c-app">
|
<dom-module id="c-app">
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<style is="custom-styles" include="strolch-wc-styles">
|
<style is="custom-style" include="c-app-style">
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
--app-primary-color: var(--paper-blue-900);
|
|
||||||
--app-secondary-color: black;
|
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -64,7 +64,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
app-toolbar {
|
app-toolbar {
|
||||||
background-color: var(--paper-blue-900);
|
background-color: var(--app-primary-color);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -197,7 +197,7 @@
|
||||||
<paper-toast id="toast"
|
<paper-toast id="toast"
|
||||||
text="[[toastText]]"
|
text="[[toastText]]"
|
||||||
duration="1750"
|
duration="1750"
|
||||||
on-iron-overlay-closed="_onToastClosed"></paper-toast>
|
on-iron-overlay-closed="onToastClosed"></paper-toast>
|
||||||
|
|
||||||
<paper-toast id="newVersionAvailableToast"
|
<paper-toast id="newVersionAvailableToast"
|
||||||
text="[[localize('newVersionAvailableRefreshRequired')]]"
|
text="[[localize('newVersionAvailableRefreshRequired')]]"
|
||||||
|
@ -250,10 +250,14 @@
|
||||||
is: 'c-app',
|
is: 'c-app',
|
||||||
|
|
||||||
behaviors: [
|
behaviors: [
|
||||||
CustomComputeBehavior, StrolchLocalizeBehavior
|
StrolchLocalizeBehavior, CustomComputeBehavior, CustomAppBehavior
|
||||||
],
|
],
|
||||||
|
|
||||||
properties: {
|
properties: {
|
||||||
|
localesPath: {
|
||||||
|
type: String,
|
||||||
|
value: '../../locales.json'
|
||||||
|
},
|
||||||
page: {
|
page: {
|
||||||
type: String,
|
type: String,
|
||||||
observer: 'observePage'
|
observer: 'observePage'
|
||||||
|
@ -328,7 +332,7 @@
|
||||||
|
|
||||||
observePage: function (newValue, oldValue) {
|
observePage: function (newValue, oldValue) {
|
||||||
if (newValue) {
|
if (newValue) {
|
||||||
this._reloadPage(newValue);
|
this.reloadPage(newValue);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onPageChange: function (event) {
|
onPageChange: function (event) {
|
||||||
|
@ -354,240 +358,13 @@
|
||||||
this.changePage(action);
|
this.changePage(action);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
toggleDrawer: function () {
|
|
||||||
this.$$("#drawer").toggle();
|
|
||||||
},
|
|
||||||
closeDrawer: function () {
|
|
||||||
this.$$("#drawer").close();
|
|
||||||
},
|
|
||||||
|
|
||||||
onShowToast: function (e) {
|
|
||||||
if (this.$.toast.opened) {
|
|
||||||
// purge if we have too many
|
|
||||||
if (this.queuedToasts.length > 5)
|
|
||||||
this.queuedToasts = [];
|
|
||||||
this.queuedToasts.push(e.detail.text);
|
|
||||||
} else {
|
|
||||||
this.toastText = e.detail.text;
|
|
||||||
this.$.toast.open();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_onToastClosed: function (e) {
|
|
||||||
if (this.queuedToasts.length > 0) {
|
|
||||||
this.toastText = this.queuedToasts.splice(0, 1)[0];
|
|
||||||
this.$.toast.open();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onShowStrolchDialog: function (event) {
|
|
||||||
var dlgTitle;
|
|
||||||
if (event.detail.title != null)
|
|
||||||
dlgTitle = event.detail.title;
|
|
||||||
else
|
|
||||||
dlgTitle = event.detail.isError ? 'errorOccurred' : 'info';
|
|
||||||
var dlgText = event.detail.text;
|
|
||||||
this._showDialog(dlgTitle, dlgText);
|
|
||||||
},
|
|
||||||
onShowDialog: function (event) {
|
|
||||||
var dlgTitle;
|
|
||||||
if (event.detail.title != null)
|
|
||||||
dlgTitle = event.detail.title;
|
|
||||||
else
|
|
||||||
dlgTitle = event.detail.isError ? 'errorOccurred' : 'info';
|
|
||||||
var dlgText = event.detail.message;
|
|
||||||
this._showDialog(dlgTitle, dlgText);
|
|
||||||
},
|
|
||||||
onShowConfirmation: function (event) {
|
|
||||||
var dlgTitle = event.detail.title;
|
|
||||||
var dlgText = event.detail.text;
|
|
||||||
var dlgCallback = event.detail.callback;
|
|
||||||
this._showConfirmation(dlgTitle, dlgText, dlgCallback);
|
|
||||||
},
|
|
||||||
onShowNotification: function (event) {
|
|
||||||
this.$.toolBar.showNotification(event.detail);
|
|
||||||
},
|
|
||||||
onClearNotification: function (event) {
|
|
||||||
this.$.toolBar.clearNotification(event.detail);
|
|
||||||
},
|
|
||||||
onLogOut: function (event) {
|
|
||||||
this.$.login.logout();
|
|
||||||
this.set("authTokenValid", false);
|
|
||||||
},
|
|
||||||
onServerNotAvailable: function (event) {
|
|
||||||
clearInterval(this.checkForNewVersionInterval);
|
|
||||||
this.$.dlg.close();
|
|
||||||
this.$.confirmationDlg.close();
|
|
||||||
this.$.serverNotConnectedDlg.open();
|
|
||||||
},
|
|
||||||
onSessionInvalid: function (event) {
|
|
||||||
var that = this;
|
|
||||||
console.log(this.routeTail);
|
|
||||||
if (this.routeTail.prefix != '/login') {
|
|
||||||
this._showConfirmation('sessionInvalid', 'sessionInvalidConfirmNavToLogin', function () {
|
|
||||||
that.deleteCookie('strolch.authorization');
|
|
||||||
that.set("authTokenValid", false);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onPrivilegeDenied: function (event) {
|
|
||||||
if (this.authTokenValid) {
|
|
||||||
this._showDialog('privilegeDenied', 'privilegeDeniedText', this.requestEventToUrl(event));
|
|
||||||
} else {
|
|
||||||
console.warn("Privilege denied to URL " + this.requestEventToUrl(event), this.requestErrorToMsg(event));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
userLocaleChanged: function (newValue, oldValue) {
|
|
||||||
if (newValue && oldValue) {
|
|
||||||
console.log('User locale changed to ' + newValue);
|
|
||||||
this.$.ajaxPutLocale.generateRequest();
|
|
||||||
Strolch.setUserLocale(newValue);
|
|
||||||
window.location.reload();
|
|
||||||
} else if (this.userConfig == null && Strolch.getUserConfig() != null && Strolch.getUserConfig().locale != newValue) {
|
|
||||||
this.userConfig = Strolch.getUserConfig();
|
|
||||||
this.userConfig.locale = newValue;
|
|
||||||
Strolch.setUserConfig(this.userConfig);
|
|
||||||
this.$.ajaxPutLocale.generateRequest();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
sessionValidated: function () {
|
|
||||||
console.log("Session validated.");
|
|
||||||
var userLocale = Strolch.getUserLocale();
|
|
||||||
var userConfig = Strolch.getUserConfig();
|
|
||||||
if (userLocale !== userConfig.locale) {
|
|
||||||
console.log("Updating server side locale for user " + userConfig.username + " to " + userLocale);
|
|
||||||
userConfig.locale = userLocale;
|
|
||||||
Strolch.setUserConfig(userConfig);
|
|
||||||
this.$.ajaxPutLocale.url = this.baseRestPath + "/strolch/sessions/" + userConfig.sessionId + "/locale/" + userLocale;
|
|
||||||
this.$.ajaxPutLocale.generateRequest();
|
|
||||||
}
|
|
||||||
this.set("authToken", Strolch.getAuthToken());
|
|
||||||
this.set("authTokenValid", true);
|
|
||||||
this.set("userConfig", userConfig);
|
|
||||||
},
|
|
||||||
logout: function () {
|
|
||||||
sessionStorage.clear();
|
|
||||||
Polymer.dom(this.root).querySelectorAll('#auth')[0].logout();
|
|
||||||
Strolch.clearStorageData();
|
|
||||||
this.deleteCookie("strolch.authorization");
|
|
||||||
},
|
|
||||||
|
|
||||||
_showDialog: function (dlgTitle, dlgText, dlgReason) {
|
|
||||||
if (this.localize) {
|
|
||||||
this.dlgTitle = this.localize(dlgTitle);
|
|
||||||
dlgText = this.localize(dlgText);
|
|
||||||
if (dlgReason)
|
|
||||||
dlgText += ": " + dlgReason;
|
|
||||||
console.log("Message: " + this.dlgTitle + ': ' + dlgText);
|
|
||||||
this.$.dlgText.innerHTML = this.localize(dlgText);
|
|
||||||
this.$.dlg.open();
|
|
||||||
} else {
|
|
||||||
this.debounce('show-dlg', function () {
|
|
||||||
this.dlgTitle = this.localize(dlgTitle);
|
|
||||||
dlgText = this.localize(dlgText);
|
|
||||||
if (dlgReason)
|
|
||||||
dlgText += ": " + dlgReason;
|
|
||||||
console.log("Message: " + this.dlgTitle + ': ' + dlgText);
|
|
||||||
this.$.dlgText.innerHTML = this.localize(dlgText);
|
|
||||||
this.$.dlg.open();
|
|
||||||
}, 250);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_showConfirmation: function (dlgTitle, dlgText, dlgCallback) {
|
|
||||||
if (this.localize) {
|
|
||||||
this.dlgTitle = this.localize(dlgTitle);
|
|
||||||
dlgText = this.localize(dlgText);
|
|
||||||
console.log("Message: " + this.dlgTitle + ': ' + dlgText);
|
|
||||||
this.$.confirmationDlgText.innerHTML = this.localize(dlgText);
|
|
||||||
var dlg = this.$.confirmationDlg;
|
|
||||||
var onClose = function (event) {
|
|
||||||
dlgCallback(event.detail.confirmed);
|
|
||||||
dlg.removeEventListener("iron-overlay-closed", onClose);
|
|
||||||
};
|
|
||||||
dlg.addEventListener("iron-overlay-closed", onClose);
|
|
||||||
dlg.open();
|
|
||||||
} else {
|
|
||||||
this.debounce('show-dlg', function () {
|
|
||||||
this.dlgTitle = this.localize(dlgTitle);
|
|
||||||
dlgText = this.localize(dlgText);
|
|
||||||
console.log("Message: " + this.dlgTitle + ': ' + dlgText);
|
|
||||||
this.$.confirmationDlgText.innerHTML = this.localize(dlgText);
|
|
||||||
var dlg = this.$.confirmationDlg;
|
|
||||||
var onClose = function (event) {
|
|
||||||
dlgCallback(event.detail.confirmed);
|
|
||||||
dlg.removeEventListener("iron-overlay-closed", onClose);
|
|
||||||
};
|
|
||||||
dlg.addEventListener("iron-overlay-closed", onClose);
|
|
||||||
dlg.open();
|
|
||||||
}, 250);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
refreshBrowser: function () {
|
refreshBrowser: function () {
|
||||||
localStorage['appScmRevision'] = this.scmRevision;
|
localStorage['appScmRevision'] = this.scmRevision;
|
||||||
document.location.reload();
|
document.location.reload();
|
||||||
},
|
},
|
||||||
checkForNewVersion: function () {
|
|
||||||
this.$.ajaxGetVersion.generateRequest();
|
|
||||||
},
|
|
||||||
reconnect: function () {
|
|
||||||
this.$.serverNotConnectedDlg.close();
|
|
||||||
this.onGetVersionResponse = function (event) {
|
|
||||||
var version = event.detail.response;
|
|
||||||
this.scmRevision = version.appVersion.scmRevision;
|
|
||||||
localStorage['appScmRevision'] = this.scmRevision;
|
|
||||||
document.location.reload();
|
|
||||||
};
|
|
||||||
this.$.ajaxGetVersion.generateRequest();
|
|
||||||
},
|
|
||||||
|
|
||||||
onGetVersionResponse: function (event) {
|
|
||||||
var version = event.detail.response;
|
|
||||||
Strolch.setAppVersion(version);
|
|
||||||
this.scmRevision = version.appVersion.scmRevision;
|
|
||||||
|
|
||||||
if (localStorage['appScmRevision'] == null) {
|
|
||||||
localStorage['appScmRevision'] = this.scmRevision;
|
|
||||||
} else if (this.scmRevision !== localStorage['appScmRevision']) {
|
|
||||||
console.log("App SCM Revision has changed from " + localStorage['appScmRevision'] + " to " + this.scmRevision + ". Need to refresh browser...");
|
|
||||||
this.$.newVersionAvailableToast.open();
|
|
||||||
}
|
|
||||||
this.appVersion = version;
|
|
||||||
},
|
|
||||||
|
|
||||||
onGetVersionError: function (event) {
|
|
||||||
console.log(event);
|
|
||||||
var readyState = event.detail.request.xhr.readyState;
|
|
||||||
var status = event.detail.request.xhr.status;
|
|
||||||
if (readyState === 4 && status === 404) {
|
|
||||||
console.log("Ignoring 404 for get version, as server is probably still starting...");
|
|
||||||
} else {
|
|
||||||
this.onRequestError(event);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/* Lifecycle */
|
/* Lifecycle */
|
||||||
attached: function () {
|
|
||||||
var that = this;
|
|
||||||
setTimeout(function () {
|
|
||||||
that.checkForNewVersion();
|
|
||||||
}, 3000);
|
|
||||||
this.checkForNewVersionInterval = setInterval(function () {
|
|
||||||
that.checkForNewVersion();
|
|
||||||
}, 10000);
|
|
||||||
},
|
|
||||||
|
|
||||||
_reloadPage: function (pageName) {
|
|
||||||
this.debounce('page-reload', function () {
|
|
||||||
this.selectedPage = pageName;
|
|
||||||
var page = this.$$('#' + pageName);
|
|
||||||
if (page && page.reload) {
|
|
||||||
console.log('Reloading ' + pageName);
|
|
||||||
page.reload();
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -0,0 +1,78 @@
|
||||||
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||||
|
<link rel="import" href="../../bower_components/paper-styles/color.html">
|
||||||
|
|
||||||
|
<link rel="import" href="../../bower_components/strolch-wc-styles/strolch-wc-styles.html">
|
||||||
|
|
||||||
|
<dom-module id="c-app-style">
|
||||||
|
<template>
|
||||||
|
<style is="c-app-style" include="strolch-wc-styles">
|
||||||
|
:root {
|
||||||
|
|
||||||
|
/* dimensions of this app */
|
||||||
|
--app-width: 100%;
|
||||||
|
--app-max-width: 2000px;
|
||||||
|
--app-min-width: 640px;
|
||||||
|
|
||||||
|
/* dimensions of the header */
|
||||||
|
--app-header-height: 64px;
|
||||||
|
--app-drawer-height: calc(100vh - var(--app-header-height));
|
||||||
|
--app-notification-height: 48px;
|
||||||
|
|
||||||
|
/* dimensions of the pages */
|
||||||
|
--app-pages-content-padding: 24px;
|
||||||
|
|
||||||
|
/* primary colors */
|
||||||
|
--app-primary-color: #9965F4;
|
||||||
|
--app-secondary-color: #616161;
|
||||||
|
|
||||||
|
/* highlight colors */
|
||||||
|
--app-light-highlight-fg-color: black;
|
||||||
|
--app-light-highlight-bg-color: var(--paper-indigo-100);
|
||||||
|
--app-regular-highlight-fg-color: white;
|
||||||
|
--app-regular-highlight-bg-color: var(--paper-indigo-200);
|
||||||
|
--app-dark-highlight-fg-color: white;
|
||||||
|
--app-dark-highlight-bg-color: var(--paper-indigo-400);
|
||||||
|
|
||||||
|
/* warning colors */
|
||||||
|
--app-light-warning-fg-color: white;
|
||||||
|
--app-light-warning-bg-color: var(--paper-red-200);
|
||||||
|
--app-regular-warning-fg-color: white;
|
||||||
|
--app-regular-warning-bg-color: var(--paper-red-700);
|
||||||
|
--app-dark-warning-fg-color: white;
|
||||||
|
--app-dark-warning-bg-color: var(--paper-red-700);
|
||||||
|
|
||||||
|
/* decent colors */
|
||||||
|
--app-light-decent-fg-color: black;
|
||||||
|
--app-light-decent-bg-color: var(--paper-grey-100);
|
||||||
|
--app-regular-decent-fg-color: black;
|
||||||
|
--app-regular-decent-bg-color: var(--paper-grey-200);
|
||||||
|
--app-dark-decent-fg-color: black;
|
||||||
|
--app-dark-decent-bg-color: var(--paper-grey-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--app-primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-material {
|
||||||
|
background: white;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-card {
|
||||||
|
background: white;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-card .header {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-toggle-button {
|
||||||
|
--paper-toggle-button-checked-button-color: var(--app-primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</template>
|
||||||
|
</dom-module>
|
Loading…
Reference in New Issue