187 lines
6.4 KiB
HTML
187 lines
6.4 KiB
HTML
<!--
|
|
@license
|
|
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
|
|
<link rel="import" href="../bower_components/polymer/polymer-element.html">
|
|
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
|
|
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
|
|
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
|
|
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
|
|
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
|
|
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
|
<link rel="import" href="../bower_components/app-route/app-location.html">
|
|
<link rel="import" href="../bower_components/app-route/app-route.html">
|
|
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
|
|
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
|
|
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
|
|
<link rel="import" href="../bower_components/paper-input/paper-input.html">
|
|
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
|
|
<link rel="import" href="../bower_components/paper-button/paper-button.html">
|
|
<link rel="import" href="../bower_components/iron-input/iron-input.html">
|
|
<link rel="import" href="../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
|
|
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
|
|
<link rel="import" href="my-icons.html">
|
|
|
|
|
|
<link rel="lazy-import" href="status-view.html">
|
|
<link rel="lazy-import" href="settings-view.html">
|
|
<link rel="lazy-import" href="colors-view.html">
|
|
<link rel="lazy-import" href="lamps-view.html">
|
|
<link rel="lazy-import" href="schedule-view.html">
|
|
<link rel="lazy-import" href="json-view.html">
|
|
<link rel="lazy-import" href="view404-view.html">
|
|
|
|
<dom-module id="my-app">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
--app-primary-color: #4285f4;
|
|
--app-secondary-color: black;
|
|
|
|
display: block;
|
|
}
|
|
|
|
app-drawer-layout:not([narrow]) [drawer-toggle] {
|
|
display: none;
|
|
}
|
|
|
|
app-header {
|
|
color: #fff;
|
|
background-color: var(--app-primary-color);
|
|
}
|
|
|
|
app-header paper-icon-button {
|
|
--paper-icon-button-ink-color: white;
|
|
}
|
|
|
|
.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}}"
|
|
url-space-regex="^[[rootPath]]">
|
|
</app-location>
|
|
|
|
<app-route
|
|
route="{{route}}"
|
|
pattern="[[rootPath]]:page"
|
|
data="{{routeData}}"
|
|
tail="{{subroute}}">
|
|
</app-route>
|
|
|
|
<app-drawer-layout fullbleed narrow="{{narrow}}">
|
|
<!-- Drawer content -->
|
|
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
|
|
<app-toolbar>Config</app-toolbar>
|
|
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
|
|
<a name="status" href="[[rootPath]]status">Status</a>
|
|
<a name="settings" href="[[rootPath]]settings">Settings</a>
|
|
<a name="colors" href="[[rootPath]]colors">Colors</a>
|
|
<a name="lamps" href="[[rootPath]]lamps">Lamps</a>
|
|
<a name="schedule" href="[[rootPath]]schedule">Schedule</a>
|
|
<a name="json" href="[[rootPath]]json">JSON</a>
|
|
</iron-selector>
|
|
</app-drawer>
|
|
|
|
<!-- Main content -->
|
|
<app-header-layout has-scrolling-region>
|
|
|
|
<app-header slot="header" condenses reveals effects="waterfall">
|
|
<app-toolbar>
|
|
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
|
|
<div main-title>DLite</div>
|
|
</app-toolbar>
|
|
</app-header>
|
|
|
|
<iron-pages
|
|
selected="[[page]]"
|
|
attr-for-selected="name"
|
|
fallback-selection="view404"
|
|
role="main">
|
|
<status-view name="status"></status-view>
|
|
<settings-view name="settings"></settings-view>
|
|
<colors-view name="colors"></colors-view>
|
|
<lamps-view name="lamps"></lamps-view>
|
|
<schedule-view name="schedule"></schedule-view>
|
|
<json-view name="json"></json-view>
|
|
</iron-pages>
|
|
</app-header-layout>
|
|
</app-drawer-layout>
|
|
</template>
|
|
|
|
<script>
|
|
class MyApp extends Polymer.Element {
|
|
static get is() { return 'my-app'; }
|
|
|
|
static get properties() {
|
|
return {
|
|
page: {
|
|
type: String,
|
|
reflectToAttribute: true,
|
|
observer: '_pageChanged',
|
|
},
|
|
routeData: Object,
|
|
subroute: String,
|
|
// This shouldn't be neccessary, but the Analyzer isn't picking up
|
|
// Polymer.Element#rootPath
|
|
rootPath: String,
|
|
};
|
|
}
|
|
|
|
static get observers() {
|
|
return [
|
|
'_routePageChanged(routeData.page)',
|
|
];
|
|
}
|
|
|
|
_routePageChanged(page) {
|
|
// If no page was found in the route data, page will be an empty string.
|
|
// Default to 'view1' in that case.
|
|
this.page = page || 'status';
|
|
|
|
// Close a non-persistent drawer when the page & route are changed.
|
|
if (!this.$.drawer.persistent) {
|
|
this.$.drawer.close();
|
|
}
|
|
}
|
|
|
|
_pageChanged(page) {
|
|
// Load page import on demand. Show 404 page if fails
|
|
var resolvedPageUrl = this.resolveUrl(page + '-view.html');
|
|
Polymer.importHref(
|
|
resolvedPageUrl,
|
|
null,
|
|
this._showPage404.bind(this),
|
|
true);
|
|
}
|
|
|
|
_showPage404() {
|
|
this.page = 'view404';
|
|
}
|
|
}
|
|
|
|
window.customElements.define(MyApp.is, MyApp);
|
|
</script>
|
|
</dom-module>
|