Intermediate version not finished, implement dialogs for configurations instead of json_editor usage

This commit is contained in:
Dirk Jahnke 2018-01-10 19:35:17 +01:00
parent 59b24a92a1
commit 22c1f060be
10 changed files with 528 additions and 178 deletions

View File

@ -11,8 +11,12 @@
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0", "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
"iron-media-query": "PolymerElements/iron-media-query#^2.0.0", "iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
"iron-pages": "PolymerElements/iron-pages#^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", "iron-selector": "PolymerElements/iron-selector#^2.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^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", "polymer": "Polymer/polymer#^2.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0", "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
"iron-ajax": "^2.0.6", "iron-ajax": "^2.0.6",

View File

@ -3,8 +3,11 @@
"shell": "src/my-app.html", "shell": "src/my-app.html",
"fragments": [ "fragments": [
"src/status-view.html", "src/status-view.html",
"src/settings-view.html",
"src/colors-view.html", "src/colors-view.html",
"src/lamps-view.html",
"src/schedule-view.html", "src/schedule-view.html",
"src/json-view.html",
"src/view404-view.html" "src/view404-view.html"
], ],
"sources": [ "sources": [

View File

@ -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="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.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"> <dom-module id="colors-view">
<template> <template>
@ -19,65 +26,71 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
padding: 10px; padding: 10px;
} }
input[readonly] {
border: 2px solid transparent;
}
input {
font: inherit;
}
paper-checkbox {
--primary-color: #ff5722;
}
</style> </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="card">
<div class="circle">2</div> <div class="circle">3</div>
<h1>Color Definition</h1> <h1>Edit Color Definition</h1>
<p>Edit the color definitions here:</p> <p>
<p></p> <paper-checkbox checked="{{editing}}">Enable Editing</paper-checkbox>
<div id="editor_holder" name="editor_holder"></div> <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> </div>
</template> </template>
<script src="js/jsoneditor.js"></script>
<script> <script>
var schema = { class ColorsView extends Polymer.Element {
"$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 {
static get is() { return 'colors-view'; } static get is() { return 'colors-view'; }
ready() { ready() {
super.ready(); super.ready();
}
var element = this.$.editor_holder; static get properties() {
var editor; return {
editing: { type: Boolean, value: false },
if (!element) { colors: { type: Array, value: [{name: "", color: "#000000"}] }
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
});
} }
} }
addColorsRow() {
this.push('colors', {name: "", color: "#000000"});
}
} }
window.customElements.define(MyView2.is, MyView2); window.customElements.define(ColorsView.is, ColorsView);
</script> </script>
</dom-module> </dom-module>

110
src/js/schema.js Normal file
View File

@ -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;
})();

72
src/json-view.html Normal file
View File

@ -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>

97
src/lamps-view.html Normal file
View File

@ -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>

View File

@ -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-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.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-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="import" href="my-icons.html">
<link rel="lazy-import" href="status-view.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="colors-view.html">
<link rel="lazy-import" href="lamps-view.html">
<link rel="lazy-import" href="schedule-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"> <link rel="lazy-import" href="view404-view.html">
<dom-module id="my-app"> <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}}"> <app-drawer-layout fullbleed narrow="{{narrow}}">
<!-- Drawer content --> <!-- Drawer content -->
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]"> <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"> <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="status" href="[[rootPath]]status">Status</a> <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="colors" href="[[rootPath]]colors">Colors</a>
<a name="lamps" href="[[rootPath]]lamps">Lamps</a>
<a name="schedule" href="[[rootPath]]schedule">Schedule</a> <a name="schedule" href="[[rootPath]]schedule">Schedule</a>
<a name="json" href="[[rootPath]]json">JSON</a>
</iron-selector> </iron-selector>
</app-drawer> </app-drawer>
@ -107,8 +120,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
fallback-selection="view404" fallback-selection="view404"
role="main"> role="main">
<status-view name="status"></status-view> <status-view name="status"></status-view>
<settings-view name="settings"></settings-view>
<colors-view name="colors"></colors-view> <colors-view name="colors"></colors-view>
<lamps-view name="lamps"></lamps-view>
<schedule-view name="schedule"></schedule-view> <schedule-view name="schedule"></schedule-view>
<json-view name="json"></json-view>
</iron-pages> </iron-pages>
</app-header-layout> </app-header-layout>
</app-drawer-layout> </app-drawer-layout>

View File

@ -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="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.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"> <dom-module id="schedule-view">
<template> <template>
@ -19,153 +27,114 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
padding: 10px; padding: 10px;
} }
paper-checkbox {
--primary-color: #ff5722;
}
.vertical-section-container {
max-width: 500px;
}
paper-dropdown-menu {
width: 200px;
margin-right: 20px;
}
</style> </style>
<div class="card"> <div class="card">
<div class="circle">3</div> <div class="circle">5</div>
<h1>Schedule Definition</h1> <h1>Schedule Definition</h1>
<p>Please define the lightning schedule here:</p> <p>Please define the lightning schedule here:</p>
<p></p> <p>
<div id="editor_holder" name="editor_holder"></div> <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> </div>
</template> </template>
<script src="js/jsoneditor.js"></script>
<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 = { var json = {
}; };
class MyView3 extends Polymer.Element { class ScheduleView extends Polymer.Element {
static get is() { return 'schedule-view'; } static get is() { return 'schedule-view'; }
ready() { ready() {
super.ready(); super.ready();
}
var element = this.$.editor_holder; static get properties() {
var editor; return {
editing: { type: Boolean, value: false },
if (!element) { schedule: { type: Array, value: [{time: "00:00", color: "#000000"}] }
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
});
} }
} }
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> </script>
</dom-module> </dom-module>

66
src/settings-view.html Normal file
View File

@ -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>

View File

@ -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> <script src="../bower_components/web-component-tester/browser.js"></script>
<!-- Import the element to test --> <!-- Import the element to test -->
<link rel="import" href="../src/my-view1.html"> <link rel="import" href="../src/settings-view.html">
</head> </head>
<body> <body>
<test-fixture id="BasicView"> <test-fixture id="BasicView">
<template> <template>
<my-view1></my-view1> <settings-view></settings-view>
</template> </template>
</test-fixture> </test-fixture>
<script> <script>
suite('my-view1 tests', function() { suite('settings-view tests', function() {
test('Number in circle should be 1', function() { test('Number in circle should be 2', function() {
var myView = fixture('BasicView'); var myView = fixture('BasicView');
var circle = myView.shadowRoot.querySelector('.circle'); var circle = myView.shadowRoot.querySelector('.circle');
assert.equal(circle.textContent, '1'); assert.equal(circle.textContent, '2');
}); });
}); });
</script> </script>