Intermediate version not finished, implement dialogs for configurations instead of json_editor usage
This commit is contained in:
parent
59b24a92a1
commit
22c1f060be
|
|
@ -11,8 +11,12 @@
|
|||
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
|
||||
"iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
|
||||
"iron-pages": "PolymerElements/iron-pages#^2.0.0",
|
||||
"iron-label": "PolymerElements/iron-label#^2.0.0",
|
||||
"iron-selector": "PolymerElements/iron-selector#^2.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
|
||||
"paper-checkbox": "PolymerElements/paper-checkbox#^2.0.1",
|
||||
"paper-input": "PolymerElements/paper-input#^2.0.1",
|
||||
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.1",
|
||||
"polymer": "Polymer/polymer#^2.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
|
||||
"iron-ajax": "^2.0.6",
|
||||
|
|
|
|||
|
|
@ -3,8 +3,11 @@
|
|||
"shell": "src/my-app.html",
|
||||
"fragments": [
|
||||
"src/status-view.html",
|
||||
"src/settings-view.html",
|
||||
"src/colors-view.html",
|
||||
"src/lamps-view.html",
|
||||
"src/schedule-view.html",
|
||||
"src/json-view.html",
|
||||
"src/view404-view.html"
|
||||
],
|
||||
"sources": [
|
||||
|
|
|
|||
|
|
@ -10,6 +10,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<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="colors-view">
|
||||
<template>
|
||||
|
|
@ -19,65 +26,71 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
padding: 10px;
|
||||
}
|
||||
input[readonly] {
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
paper-checkbox {
|
||||
--primary-color: #ff5722;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--<iron-ajax auto url="https://demo.vaadin.com/demo-data/1.0/people?count=200" handle-as="json" last-response="{{users}}"></iron-ajax>
|
||||
-->
|
||||
<div class="card">
|
||||
<div class="circle">2</div>
|
||||
<h1>Color Definition</h1>
|
||||
<p>Edit the color definitions here:</p>
|
||||
<p></p>
|
||||
<div id="editor_holder" name="editor_holder"></div>
|
||||
<div class="circle">3</div>
|
||||
<h1>Edit Color Definition</h1>
|
||||
<p>
|
||||
<paper-checkbox checked="{{editing}}">Enable Editing</paper-checkbox>
|
||||
<vaadin-grid aria-label="Color Definitions" items="[[colors]]">
|
||||
<vaadin-grid-column width="50px" flex-grow="0">
|
||||
<template class="header">#</template>
|
||||
<template>
|
||||
[[index]]
|
||||
</template>
|
||||
</vaadin-grid-column>
|
||||
|
||||
<vaadin-grid-column>
|
||||
<template class="header">Color Name</template>
|
||||
<template>
|
||||
<input type="text" maxLength="40" placeholder="Enter color name" value="{{item.name::input}}" readonly$="[[!editing]]">
|
||||
</template>
|
||||
</vaadin-grid-column>
|
||||
|
||||
<vaadin-grid-column>
|
||||
<template class="header">Color Definition</template>
|
||||
<template>
|
||||
<input type="color" value="{{item.color::input}}" readonly$="[[!editing]]">
|
||||
</template>
|
||||
</vaadin-grid-column>
|
||||
</vaadin-grid>
|
||||
<br />
|
||||
<paper-button raised on-click="addColorsRow">Add Row</paper-button>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="js/jsoneditor.js"></script>
|
||||
<script>
|
||||
var schema = {
|
||||
"$schema": "http://json-schema.org/draft-06/schema#",
|
||||
"description": "DLite color definition",
|
||||
"type": "array",
|
||||
"format": "table",
|
||||
"uniqueItems": true,
|
||||
"disable_collapse": true,
|
||||
"items": {
|
||||
"type": "object",
|
||||
"description": "Color definition",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"description": "Color name used as identifier"
|
||||
},
|
||||
"color": {
|
||||
"type": "string",
|
||||
"format": "color",
|
||||
"description": "Color definition"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
class MyView2 extends Polymer.Element {
|
||||
class ColorsView extends Polymer.Element {
|
||||
static get is() { return 'colors-view'; }
|
||||
ready() {
|
||||
super.ready();
|
||||
|
||||
var element = this.$.editor_holder;
|
||||
var editor;
|
||||
|
||||
if (!element) {
|
||||
alert("Could not find editor_holder element!");
|
||||
} else {
|
||||
editor = new JSONEditor(element, {
|
||||
schema: schema,
|
||||
iconlib: "fontawesome4",
|
||||
disable_properties: true,
|
||||
no_additional_properties: false,
|
||||
disable_edit_json: true
|
||||
});
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
editing: { type: Boolean, value: false },
|
||||
colors: { type: Array, value: [{name: "", color: "#000000"}] }
|
||||
}
|
||||
}
|
||||
addColorsRow() {
|
||||
this.push('colors', {name: "", color: "#000000"});
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define(MyView2.is, MyView2);
|
||||
window.customElements.define(ColorsView.is, ColorsView);
|
||||
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
|
||||
(function() {
|
||||
var definitions = {
|
||||
"time": {
|
||||
"type": "string",
|
||||
"format": "time"
|
||||
},
|
||||
"schedule_item": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"time": {
|
||||
"$ref": "#/definitions/time",
|
||||
// "description": "Start time, when this schedule item should fire"
|
||||
},
|
||||
"lamp": {
|
||||
"type": "string",
|
||||
"watch": {
|
||||
"lamps": "lampmapping"
|
||||
},
|
||||
"enumSource": [{ "source": "lamps", "value": "{{item}}" }]
|
||||
},
|
||||
"color": {
|
||||
"type": "string",
|
||||
"watch": { "selectableColors": "colors" },
|
||||
"enumSource" : [{ "source": "selectableColors", "value": "{{item.name}}" }]
|
||||
// "description": "Name of the color to be shown; corresponds to color name in color definitions."
|
||||
},
|
||||
"mode": {
|
||||
"type": "string",
|
||||
// "description": "Dynamic behaviour / mode; allowed values are: OnOff",
|
||||
"enum": ["OnOff", "Ramp", "Neon-on"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
var colorsProperties = {
|
||||
"description": "DLite color definition",
|
||||
"type": "array",
|
||||
"format": "table",
|
||||
"uniqueItems": true,
|
||||
"disable_collapse": true,
|
||||
"items": {
|
||||
"type": "object",
|
||||
"description": "Color definition",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
/*"description": "Color name used as identifier"*/
|
||||
},
|
||||
"color": {
|
||||
"type": "string",
|
||||
"format": "color",
|
||||
/*"description": "Color definition"*/
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
var lampmappingProperties = {
|
||||
"type": "array",
|
||||
"format": "table",
|
||||
"description": "LED/Lamp names, used as identifier; order according to LED address",
|
||||
"items": {
|
||||
"type": "string"
|
||||
}
|
||||
};
|
||||
var settingsProperties = {
|
||||
"description": "DLite settings",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"comment": {
|
||||
"type": "string",
|
||||
"format": "textarea",
|
||||
"description": "Info about this schedule definition"
|
||||
},
|
||||
"mrclock": {
|
||||
"type": "string",
|
||||
"description": "Name of a MR-Clock fastclock"
|
||||
},
|
||||
"clock_starttime": {
|
||||
"$ref": "#/definitions/time",
|
||||
"description": "After boot, at which clock should this start to animate?"
|
||||
},
|
||||
"clock_speed": {
|
||||
"type": "number",
|
||||
"description": "Real time seconds for every model minute"
|
||||
},
|
||||
},
|
||||
};
|
||||
var scheduleProperties = {
|
||||
"description": "DLite schedule definition",
|
||||
"type": "array",
|
||||
"format": "table",
|
||||
// "description": "The schedule definition as an array of schedule items",
|
||||
"items": { "$ref": "#/definitions/schedule_item" }
|
||||
};
|
||||
var schema = {
|
||||
"$schema": "http://json-schema.org/draft-06/schema#",
|
||||
"description": "DLite Light Controller Configuration",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"colors": colorsProperties,
|
||||
"lampmapping": lampmappingProperties,
|
||||
"settings": settingsProperties,
|
||||
"schedule": scheduleProperties,
|
||||
},
|
||||
"definitions": definitions
|
||||
};
|
||||
window.schema = schema;
|
||||
})();
|
||||
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!--
|
||||
@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">
|
||||
|
||||
<script src="js/jsoneditor.js"></script>
|
||||
<script src="js/schema.js"></script>
|
||||
|
||||
<dom-module id="json-view">
|
||||
<template>
|
||||
<style include="shared-styles">
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<div class="circle">J</div>
|
||||
<h1>JSON Editor</h1>
|
||||
<p>You may edit all config parameters</p>
|
||||
<p>
|
||||
</p>
|
||||
<div id="editor_holder" name="editor_holder"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
class JsonView extends Polymer.Element {
|
||||
static get is() { return 'json-view'; }
|
||||
ready() {
|
||||
super.ready();
|
||||
|
||||
var element = this.$.editor_holder;
|
||||
var editor;
|
||||
|
||||
if (!element) {
|
||||
alert("Could not find editor_holder element!");
|
||||
} else {
|
||||
editor = new JSONEditor(element, {
|
||||
schema: window.schema,
|
||||
iconlib: "fontawesome4",
|
||||
disable_properties: true,
|
||||
no_additional_properties: false,
|
||||
disable_edit_json: true
|
||||
});
|
||||
}
|
||||
}
|
||||
/*
|
||||
static get properties() {
|
||||
return {
|
||||
editing: { type: Boolean, value: false },
|
||||
comment: { type: String, value: "" },
|
||||
clockStartTime: { type: Time, value: "00:00" },
|
||||
clockSpeed: {type: Number, value: 4 }
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
window.customElements.define(JsonView.is, JsonView);
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!--
|
||||
@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>
|
||||
|
|
@ -20,11 +20,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<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">
|
||||
|
|
@ -83,11 +93,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<app-drawer-layout fullbleed narrow="{{narrow}}">
|
||||
<!-- Drawer content -->
|
||||
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
|
||||
<app-toolbar>Menu</app-toolbar>
|
||||
<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>
|
||||
|
||||
|
|
@ -107,8 +120,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<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>
|
||||
|
|
@ -19,153 +27,114 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
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">3</div>
|
||||
<div class="circle">5</div>
|
||||
<h1>Schedule Definition</h1>
|
||||
<p>Please define the lightning schedule here:</p>
|
||||
<p></p>
|
||||
<div id="editor_holder" name="editor_holder"></div>
|
||||
<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 src="js/jsoneditor.js"></script>
|
||||
|
||||
<script>
|
||||
var schema = {
|
||||
"$schema": "http://json-schema.org/draft-06/schema#",
|
||||
"description": "DLite Light Controller Configuration",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"colors": {
|
||||
"description": "DLite color definition",
|
||||
"type": "array",
|
||||
"format": "table",
|
||||
"uniqueItems": true,
|
||||
"disable_collapse": true,
|
||||
"items": {
|
||||
"type": "object",
|
||||
"description": "Color definition",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"description": "Color name used as identifier"
|
||||
},
|
||||
"color": {
|
||||
"type": "string",
|
||||
"format": "color",
|
||||
"description": "Color definition"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"lampmapping": {
|
||||
"type": "array",
|
||||
"format": "table",
|
||||
"description": "LED/Lamp names, used as identifier; order according to LED address",
|
||||
"items": {
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"schedule": {
|
||||
"description": "DLite schedule definition",
|
||||
"type": "object",
|
||||
"required": [ "lampmapping", "schedule" ],
|
||||
"properties": {
|
||||
"comment": {
|
||||
"type": "string",
|
||||
"format": "textarea",
|
||||
"description": "Info about this schedule definition"
|
||||
},
|
||||
"mrclock": {
|
||||
"type": "string",
|
||||
"description": "Name of a MR-Clock fastclock"
|
||||
},
|
||||
"clock_starttime": {
|
||||
"$ref": "#/definitions/time",
|
||||
"description": "After boot, at which clock should this animate start"
|
||||
},
|
||||
"clock_speed": {
|
||||
"type": "number",
|
||||
"description": "Real time seconds for every model minute"
|
||||
},
|
||||
"schedule": {
|
||||
"type": "array",
|
||||
"format": "table",
|
||||
"description": "The schedule definition as an array of schedule items",
|
||||
"items": {
|
||||
"$ref": "#/definitions/schedule_item"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"definitions": {
|
||||
"time": {
|
||||
"type": "string",
|
||||
"format": "time"
|
||||
},
|
||||
"schedule_item": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"time": {
|
||||
"$ref": "#/definitions/time",
|
||||
// "description": "Start time, when this schedule item should fire"
|
||||
},
|
||||
"lamp": {
|
||||
"type": "string",
|
||||
"watch": {
|
||||
"lamps": "lampmapping"
|
||||
},
|
||||
"enumSource": [{
|
||||
"source": "lamps",
|
||||
"value": "{{item}}"
|
||||
}]
|
||||
},
|
||||
"color": {
|
||||
"type": "string",
|
||||
"watch": { "selectableColors": "colors" },
|
||||
"enumSource" : [{ "source": "selectableColors", "value": "{{item.name}}" }]
|
||||
// "description": "Name of the color to be shown; corresponds to color name in color definitions."
|
||||
},
|
||||
"mode": {
|
||||
"type": "string",
|
||||
// "description": "Dynamic behaviour / mode; allowed values are: OnOff",
|
||||
"enum": ["OnOff","neon-on"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var json = {
|
||||
};
|
||||
|
||||
|
||||
class MyView3 extends Polymer.Element {
|
||||
class ScheduleView extends Polymer.Element {
|
||||
static get is() { return 'schedule-view'; }
|
||||
ready() {
|
||||
super.ready();
|
||||
|
||||
var element = this.$.editor_holder;
|
||||
var editor;
|
||||
|
||||
if (!element) {
|
||||
alert("Could not find editor_holder element!");
|
||||
} else {
|
||||
editor = new JSONEditor(element, {
|
||||
schema: schema,
|
||||
iconlib: "fontawesome4",
|
||||
disable_properties: true,
|
||||
no_additional_properties: false,
|
||||
disable_edit_json: true
|
||||
});
|
||||
}
|
||||
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(MyView3.is, MyView3);
|
||||
window.customElements.define(ScheduleView.is, ScheduleView);
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
<!--
|
||||
@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-input/paper-textarea.html">
|
||||
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
|
||||
<link rel="import" href="../bower_components/paper-button/paper-button.html">
|
||||
|
||||
<dom-module id="settings-view">
|
||||
<template>
|
||||
<style include="shared-styles">
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
paper-checkbox {
|
||||
--primary-color: #ff5722;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<div class="circle">2</div>
|
||||
<h1>Edit Settings</h1>
|
||||
<p>
|
||||
<paper-checkbox checked="{{editing}}">Enable Editing</paper-checkbox>
|
||||
<paper-textarea always-float-label label="Comment:" readonly$="[[!editing]]">{{mrclock::input}}</paper-textarea>
|
||||
<paper-input always-float-label label="Name of MR-Clock (leave empty if no MR-Clock is used):" type="text" value="{{mrclock::input}}" readonly$="[[!editing]]"></paper-input>
|
||||
Either set a clock name, if a MR-Clock is used, or set clock start time and speed for an autonomous behaviour.
|
||||
<paper-input always-float-label label="Start time of clock after boot:" type="time" pattern="\d{2}:\d{2}" value="{{clockStartTime::input}}" allowed-pattern="[0-9]" readonly$="[[!editing]]"></paper-input>
|
||||
<paper-input always-float-label label="Clock Speed - Number of real-time seconds per model minute:" type="number" min="1" max="60" auto-validate="true" error-message="The value must be in the range of 1..60" value="{{clockSpeed::input}}" allowed-pattern="[0-9]" readonly$="[[!editing]]"></paper-input>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
class SettingsView extends Polymer.Element {
|
||||
static get is() { return 'settings-view'; }
|
||||
ready() { super.ready(); }
|
||||
/*
|
||||
static get properties() {
|
||||
return {
|
||||
editing: { type: Boolean, value: false },
|
||||
comment: { type: String, value: "" },
|
||||
clockStartTime: { type: Time, value: "00:00" },
|
||||
clockSpeed: {type: Number, value: 4 }
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
window.customElements.define(SettingsView.is, SettingsView);
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
@ -20,21 +20,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<script src="../bower_components/web-component-tester/browser.js"></script>
|
||||
|
||||
<!-- Import the element to test -->
|
||||
<link rel="import" href="../src/my-view1.html">
|
||||
<link rel="import" href="../src/settings-view.html">
|
||||
</head>
|
||||
<body>
|
||||
<test-fixture id="BasicView">
|
||||
<template>
|
||||
<my-view1></my-view1>
|
||||
<settings-view></settings-view>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
suite('my-view1 tests', function() {
|
||||
test('Number in circle should be 1', function() {
|
||||
suite('settings-view tests', function() {
|
||||
test('Number in circle should be 2', function() {
|
||||
var myView = fixture('BasicView');
|
||||
var circle = myView.shadowRoot.querySelector('.circle');
|
||||
assert.equal(circle.textContent, '1');
|
||||
assert.equal(circle.textContent, '2');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue