dlite-config/src/schedule-view.html

141 lines
5.1 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="shared-styles.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/paper-dropdown-menu/paper-dropdown-menu.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">
<dom-module id="schedule-view">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-checkbox {
--primary-color: #ff5722;
}
.vertical-section-container {
max-width: 500px;
}
paper-dropdown-menu {
width: 200px;
margin-right: 20px;
}
</style>
<div class="card">
<div class="circle">5</div>
<h1>Schedule Definition</h1>
<p>Please define the lightning schedule here:</p>
<p>
<paper-checkbox checked="{{editing}}">Enable Editing</paper-checkbox>
<vaadin-grid aria-label="Schedule Definitions" items="[[schedule]]">
<vaadin-grid-column width="50px" flex-grow="0">
<template class="header">#</template>
<template>
[[index]]
</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Time</template>
<template>
<paper-input type="time" value="{{item.time::input}}" readonly$="[[!editing]]">
</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Lamp</template>
<template>
<paper-dropdown-menu no-animations="true" keyBindings="{{item.lamp::input}}" raedonly$="[[!editing]]">
<paper-listbox slot="dropdown-content" class="dropdown-content">
<paper-item>eg1</paper-item>
<paper-item>eg2</paper-item>
<paper-item>eg3</paper-item>
<paper-item>og1</paper-item>
<paper-item>og2</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Color</template>
<template>
<paper-dropdown-menu no-animations="true" keyBindings="{{item.color::input}}" raedonly$="[[!editing]]">
<paper-listbox slot="dropdown-content" class="dropdown-content">
<paper-item>black/off</paper-item>
<paper-item>candle</paper-item>
<paper-item>25Watt</paper-item>
<paper-item>40Watt</paper-item>
<paper-item>60Watt</paper-item>
<paper-item>100Watt</paper-item>
<paper-item>BrightWhite</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Mode</template>
<template>
<paper-dropdown-menu no-animations="true" keyBindings="{{item.mode::input}}" raedonly$="[[!editing]]">
<paper-listbox slot="dropdown-content" class="dropdown-content">
<paper-item>OnOff</paper-item>
<paper-item>Ramp</paper-item>
<paper-item>NeonOn</paper-item>
<paper-item>TV-b&w</paper-item>
<paper-item>TV-color</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
</vaadin-grid-column>
</vaadin-grid>
<br />
<paper-button raised on-click="addScheduleRow">Add Row</paper-button>
</p>
</div>
</template>
<script>
var json = {
};
class ScheduleView extends Polymer.Element {
static get is() { return 'schedule-view'; }
ready() {
super.ready();
}
static get properties() {
return {
editing: { type: Boolean, value: false },
schedule: { type: Array, value: [{time: "00:00", color: "#000000"}] }
}
}
addScheduleRow() {
this.push('schedule', {time: "00:00", lamp: "eg1", color: "black/off", mode: "OnOff"});
}
}
window.customElements.define(ScheduleView.is, ScheduleView);
</script>
</dom-module>