275 lines
9.1 KiB
HTML
275 lines
9.1 KiB
HTML
<link rel="import" href="../../polymer/polymer.html">
|
|
|
|
<link rel="import" href="../../iron-pages/iron-pages.html">
|
|
<link rel="import" href="../../iron-selector/iron-selector.html">
|
|
<link rel="import" href="../../iron-icons/iron-icons.html">
|
|
|
|
<link rel="import" href="../../app-route/app-location.html">
|
|
<link rel="import" href="../../app-route/app-route.html">
|
|
|
|
<link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
|
|
<link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
|
|
<link rel="import" href="../../app-layout/app-drawer/app-drawer.html">
|
|
<link rel="import" href="../../app-layout/app-drawer-layout/app-drawer-layout.html">
|
|
|
|
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
|
|
|
|
<link rel="import" href="../../paper-styles/color.html">
|
|
<link rel="import" href="../../paper-styles/default-theme.html">
|
|
<link rel="import" href="../../paper-styles/shadow.html">
|
|
<link rel="import" href="../../paper-styles/typography.html">
|
|
|
|
<link rel="import" href="../../strolch-wc-styles/strolch-wc-styles.html">
|
|
<link rel="import" href="../../strolch-wc-auth/strolch-wc-auth.html">
|
|
<link rel="import" href="../../strolch-wc-inspector/strolch-wc-inspector.html">
|
|
<link rel="import" href="./c-view404.html">
|
|
|
|
<dom-module id="c-app">
|
|
|
|
<template>
|
|
|
|
<style is="strolch-wc-styles">
|
|
|
|
:host {
|
|
--app-primary-color: var(--paper-blue-900);
|
|
--app-secondary-color: black;
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
app-header {
|
|
color: #fff;
|
|
background-color: var(--app-primary-color);
|
|
}
|
|
|
|
app-header paper-icon-button {
|
|
--paper-icon-button-ink-color: white;
|
|
}
|
|
|
|
app-toolbar {
|
|
background-color: var(--paper-blue-900);
|
|
color: #fff;
|
|
}
|
|
|
|
.drawer-list {
|
|
margin: 0 20px;
|
|
}
|
|
|
|
.drawer-list a {
|
|
display: block;
|
|
padding: 0 16px;
|
|
text-decoration: none;
|
|
color: var(--app-secondary-color);
|
|
line-height: 40px;
|
|
}
|
|
|
|
.drawer-list a.iron-selected {
|
|
color: black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
</style>
|
|
|
|
<app-location route="{{route}}" use-hash-as-path></app-location>
|
|
<app-route route="{{route}}" pattern="/:view" data="{{routeData}}" tail="{{subroute}}"></app-route>
|
|
|
|
<app-drawer-layout fullbleed force-narrow>
|
|
<!-- Drawer content -->
|
|
<app-drawer id="drawer" opened="false">
|
|
<app-toolbar>Menu</app-toolbar>
|
|
<iron-selector selected="[[routeData.view]]"
|
|
attr-for-selected="name"
|
|
class="drawer-list"
|
|
role="navigation"
|
|
hidden="[[sessionInvalid]]">
|
|
<a name="inspector" href="#/inspector">Inspector</a> <a href="#" on-tap="logout">Logout</a>
|
|
</iron-selector>
|
|
|
|
</app-drawer>
|
|
|
|
<!-- Main content -->
|
|
<app-header-layout has-scrolling-region>
|
|
|
|
<div class="g-container">
|
|
<div class="g-row">
|
|
<div class="g-12">
|
|
|
|
<app-header condenses reveals effects="waterfall">
|
|
<app-toolbar>
|
|
<paper-icon-button icon="menu"
|
|
hidden="[[sessionInvalid]]"
|
|
drawer-toggle></paper-icon-button>
|
|
<div main-title>[[title]]</div>
|
|
</app-toolbar>
|
|
</app-header>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="g-row">
|
|
<div class="g-12">
|
|
<iron-pages selected="[[routeData.view]]"
|
|
attr-for-selected="id"
|
|
fallback-selection="c-view404"
|
|
role="main">
|
|
|
|
<strolch-wc-auth id="auth"
|
|
app="[[app]]"
|
|
base-path="../../../"
|
|
app-title="Strolch Inspector Demo"
|
|
dlg="[[dlg]]"></strolch-wc-auth>
|
|
|
|
<strolch-wc-inspector id="inspector"
|
|
app="[[app]]"
|
|
base-path="../../../"
|
|
route="{{subroute}}"></strolch-wc-inspector>
|
|
|
|
<c-view404 id="c-view404"></c-view404>
|
|
|
|
</iron-pages>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</app-header-layout>
|
|
</app-drawer-layout>
|
|
|
|
<paper-dialog id="dlg" modal>
|
|
<h2>[[dlgTitle]]</h2>
|
|
<p>[[dlgText]]</p>
|
|
<div class="buttons">
|
|
<paper-button dialog-confirm autofocus>Close</paper-button>
|
|
</div>
|
|
</paper-dialog>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
Polymer({
|
|
|
|
is: 'c-app',
|
|
|
|
properties: {
|
|
app: {
|
|
type: Object
|
|
},
|
|
dlg: {
|
|
type: Object
|
|
},
|
|
dlgTitle: {
|
|
type: String
|
|
},
|
|
dlgText: {
|
|
type: String
|
|
},
|
|
title: {
|
|
type: String,
|
|
reflectToAttribute: true
|
|
},
|
|
sessionInvalid: {
|
|
type: Boolean,
|
|
reflectToAttribute: true,
|
|
value: function () {
|
|
return true;
|
|
}
|
|
},
|
|
currentView: {
|
|
type: String,
|
|
value: function () {
|
|
return null;
|
|
}
|
|
}
|
|
},
|
|
|
|
observers: [
|
|
'viewChanged(routeData.view)'
|
|
],
|
|
|
|
viewChanged: function (view) {
|
|
if (this.currentView != view) {
|
|
console.log('View changed to ' + view + " from " + this.currentView);
|
|
|
|
if (view != null && view != 'auth') {
|
|
this.currentView = view;
|
|
}
|
|
|
|
this.title = this._getTitle(view);
|
|
|
|
if (!this.sessionInvalid) {
|
|
this._reloadView();
|
|
}
|
|
|
|
if (!this.$.drawer.persistent) {
|
|
this.$.drawer.close();
|
|
}
|
|
}
|
|
},
|
|
|
|
_reloadView: function () {
|
|
var viewElement = this.$$('#' + this.currentView);
|
|
if (viewElement != null && viewElement.reload) {
|
|
console.log('Reloading view ' + this.currentView);
|
|
viewElement.reload();
|
|
}
|
|
},
|
|
|
|
_getTitle: function (view) {
|
|
if (view == 'auth')
|
|
return 'Inspector Demo';
|
|
if (view == 'inspector')
|
|
return 'Inspector';
|
|
return view;
|
|
},
|
|
|
|
ready: function () {
|
|
this.app = this;
|
|
this.dlg = this.$.dlg;
|
|
if (Strolch.hasAuthToken()) {
|
|
this.$$('#auth').reload();
|
|
}
|
|
window.location = this._toUrl('auth');
|
|
},
|
|
|
|
sessionValid: function () {
|
|
this.sessionInvalid = false;
|
|
//this.$.drawerSelector.hidden = false;
|
|
//this.$.menuBtn.hidden = false;
|
|
|
|
if (this.currentView == null) {
|
|
window.location = this._toUrl('inspector');
|
|
} else {
|
|
window.location = this._toUrl(this.currentView);
|
|
this._reloadView();
|
|
}
|
|
},
|
|
|
|
_toUrl: function (view) {
|
|
var queryParams = Strolch.getQueryParamsAsString();
|
|
if (Strolch.isEmptyString(queryParams)) {
|
|
return '#/' + view;
|
|
} else {
|
|
return '#/' + view + '/?' + queryParams;
|
|
}
|
|
},
|
|
|
|
logout: function () {
|
|
this.sessionInvalid = true;
|
|
this.$$('#auth').logout();
|
|
window.location = this._toUrl('auth');
|
|
},
|
|
|
|
showError: function (title, text) {
|
|
this.dlgTitle = title;
|
|
this.dlgText = text;
|
|
console.log('ERROR: ' + this.dlgTitle + ': ' + this.dlgText);
|
|
this.$.dlg.open();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
</dom-module>
|