98 lines
3.9 KiB
HTML
98 lines
3.9 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/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="lamps-view">
|
|
<template>
|
|
<style include="shared-styles">
|
|
:host {
|
|
display: block;
|
|
|
|
padding: 10px;
|
|
}
|
|
paper-checkbox {
|
|
--primary-color: #ff5722;
|
|
}
|
|
</style>
|
|
|
|
<div class="card">
|
|
<div class="circle">4</div>
|
|
<h1>Lamp/LED Definition</h1>
|
|
<p>Edit the LED/lamp definitions here, define the order of the LEDs in the chain and give each node a unique name:</p>
|
|
<p>
|
|
<iron-input bind-value="{{editing}}">
|
|
<paper-checkbox checked="{{editing}}">Enable Editing</paper-checkbox>
|
|
</iron-input><br />
|
|
<!--Number of Lamps: <input type="number" min="1" max="120" value="{{numberleds::input}}"></input>-->
|
|
<iron-input>
|
|
<paper-input always-float-label label="Number of Lamps" type="number" auto-validate="true" value="{{numberleds::input}}" min="1" max="120" error-message="The value must be in the range of 1 to 120" readonly$="[[!editing]]"></paper-input>
|
|
<paper-button raised on-click="resizeLampList">Resize List of Lamp Names</paper-button>
|
|
</iron-input><br />
|
|
<br />
|
|
<vaadin-grid aria-label="Color Definitions" items="[[lampmapping]]">
|
|
<vaadin-grid-column width="50px" flex-grow="0">
|
|
<template class="header">#</template>
|
|
<template>
|
|
[[index]]
|
|
</template>
|
|
</vaadin-grid-column>
|
|
|
|
<vaadin-grid-column>
|
|
<template class="header">Lamp Name</template>
|
|
<template>
|
|
<!--<input type="text" maxLength="40" placeholder="Enter lamp name" value="{{item::input}}" readonly$="[[!editing]]">-->
|
|
<paper-input always-float-label label="Lamp Name" maxLength="40" value="{{item::input}}" readonly$="[[!editing]]"></paper-input>
|
|
</template>
|
|
</vaadin-grid-column>
|
|
</vaadin-grid>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
class LampsView extends Polymer.Element {
|
|
static get is() { return 'lamps-view'; }
|
|
ready() {
|
|
super.ready();
|
|
}
|
|
static get properties() {
|
|
return {
|
|
editing: { type: Boolean, value: false },
|
|
numberleds: { type: Number, value: 2 },
|
|
lampmapping: { type: Array, value: ["lamp1", "lamp2"] }
|
|
}
|
|
}
|
|
resizeLampList() {
|
|
if (this.lampmapping.length < this.numberleds) {
|
|
for (var i=this.lampmapping.length; i<this.numberleds; ++i) {
|
|
this.push('lampmapping', "lamp"+(i+1));
|
|
}
|
|
} else if (this.lampmapping.length > this.numberleds) {
|
|
for (var i=this.lampmapping.length-1; i>=this.numberleds; --i) {
|
|
this.pop('lampmapping');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
window.customElements.define(LampsView.is, LampsView);
|
|
|
|
</script>
|
|
</dom-module>
|