iot/sprocket-ui
1
0
Fork 0
mirror of https://gitlab.com/wirelos/sprocket-ui.git synced 2025-12-14 14:01:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

select input component

Browse Source
This commit is contained in:
0x1d
2018-09-17 10:18:53 +02:00
parent 20e87b30f3
commit 56773fdfad
14 changed files with 287 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
data/index.html
View File

@@ -39,28 +39,12 @@
data-mode="2"
data-name="color2"
data-label="Color 2">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-id="1"
data-mode="3"
data-name="Rainbow"
data-label="Rainbow">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="TheaterChase"
data-label="Theater Chase"
data-id="2"
data-mode="3">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="Scanner"
data-label="Scanner"
data-id="4"
data-mode="3">
</li>
</li>
<li class="form-row ParamSelect"
data-label="Pattern"
data-name="pattern"
data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]'
></li>
</ul>
</div>
</form>

178
data/script.js
View File

@@ -60,7 +60,7 @@
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 8);
/******/ return __webpack_require__(__webpack_require__.s = 9);
/******/ })
/************************************************************************/
/******/ ([
@@ -10442,8 +10442,8 @@ return jQuery;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Mediator__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__DataStore__ = __webpack_require__(16);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__StoreAction__ = __webpack_require__(17);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__DataStore__ = __webpack_require__(17);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__StoreAction__ = __webpack_require__(18);
@@ -10490,11 +10490,11 @@ class RestStore extends __WEBPACK_IMPORTED_MODULE_2__DataStore__["a" /* default
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mustache__ = __webpack_require__(12);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mustache__ = __webpack_require__(13);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mustache___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_mustache__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_jquery__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_jquery__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__data_DataField__ = __webpack_require__(13);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__data_DataField__ = __webpack_require__(14);
@@ -10547,7 +10547,7 @@ class Component {
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__TextInput_html__ = __webpack_require__(15);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__TextInput_html__ = __webpack_require__(16);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__TextInput_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__TextInput_html__);
@@ -10585,7 +10585,7 @@ class TextInput extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* def
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Switch_html__ = __webpack_require__(18);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Switch_html__ = __webpack_require__(19);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Switch_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__Switch_html__);
@@ -10657,7 +10657,7 @@ class Mediator {
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Slider_html__ = __webpack_require__(19);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Slider_html__ = __webpack_require__(20);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Slider_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__Slider_html__);
@@ -10695,7 +10695,41 @@ class Slider extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* defaul
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__ColorPicker_html__ = __webpack_require__(20);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Select_html__ = __webpack_require__(21);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Select_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__Select_html__);
class Select extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* default */] {
constructor(ctx, node, template) {
super(ctx, node, template || __WEBPACK_IMPORTED_MODULE_2__Select_html___default.a);
this.render(this.config);
}
onChange(evt) {
console.log(evt.target.value);
}
subscribe() {
this.node.delegate('select', 'change', this.onChange.bind(this));
}
}
/* harmony export (immutable) */ __webpack_exports__["a"] = Select;
/***/ }),
/* 8 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__ColorPicker_html__ = __webpack_require__(22);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__ColorPicker_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__ColorPicker_html__);
@@ -10735,15 +10769,15 @@ class ColorPicker extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* d
/***/ }),
/* 8 */
/* 9 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_App__ = __webpack_require__(9);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_exports__ = __webpack_require__(10);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_App__ = __webpack_require__(10);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_exports__ = __webpack_require__(11);
@@ -10843,7 +10877,7 @@ Sui.ready(() => {
}); */
/***/ }),
/* 9 */
/* 10 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -10936,33 +10970,39 @@ class App {
/***/ }),
/* 10 */
/* 11 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__base_Form_Form__ = __webpack_require__(11);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__base_Form_Form__ = __webpack_require__(12);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Form", function() { return __WEBPACK_IMPORTED_MODULE_0__base_Form_Form__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__base_Switch_Switch__ = __webpack_require__(4);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Switch", function() { return __WEBPACK_IMPORTED_MODULE_1__base_Switch_Switch__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__base_Slider_Slider__ = __webpack_require__(6);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return __WEBPACK_IMPORTED_MODULE_2__base_Slider_Slider__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__base_TextInput_TextInput__ = __webpack_require__(3);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "TextInput", function() { return __WEBPACK_IMPORTED_MODULE_3__base_TextInput_TextInput__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__base_ColorPicker_ColorPicker__ = __webpack_require__(7);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return __WEBPACK_IMPORTED_MODULE_4__base_ColorPicker_ColorPicker__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__PresetSwitch__ = __webpack_require__(21);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "PresetSwitch", function() { return __WEBPACK_IMPORTED_MODULE_5__PresetSwitch__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__ParamSlider__ = __webpack_require__(22);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamSlider", function() { return __WEBPACK_IMPORTED_MODULE_6__ParamSlider__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__ParamText__ = __webpack_require__(23);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamText", function() { return __WEBPACK_IMPORTED_MODULE_7__ParamText__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__ParamColor__ = __webpack_require__(24);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamColor", function() { return __WEBPACK_IMPORTED_MODULE_8__ParamColor__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__ParamWs__ = __webpack_require__(25);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamWs", function() { return __WEBPACK_IMPORTED_MODULE_9__ParamWs__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__LedStripPatternSwitch__ = __webpack_require__(26);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "LedStripPatternSwitch", function() { return __WEBPACK_IMPORTED_MODULE_10__LedStripPatternSwitch__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__base_Select_Select__ = __webpack_require__(7);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Select", function() { return __WEBPACK_IMPORTED_MODULE_3__base_Select_Select__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__base_TextInput_TextInput__ = __webpack_require__(3);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "TextInput", function() { return __WEBPACK_IMPORTED_MODULE_4__base_TextInput_TextInput__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__base_ColorPicker_ColorPicker__ = __webpack_require__(8);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return __WEBPACK_IMPORTED_MODULE_5__base_ColorPicker_ColorPicker__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__PresetSwitch__ = __webpack_require__(23);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "PresetSwitch", function() { return __WEBPACK_IMPORTED_MODULE_6__PresetSwitch__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__ParamSlider__ = __webpack_require__(24);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamSlider", function() { return __WEBPACK_IMPORTED_MODULE_7__ParamSlider__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__ParamText__ = __webpack_require__(25);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamText", function() { return __WEBPACK_IMPORTED_MODULE_8__ParamText__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__ParamColor__ = __webpack_require__(26);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamColor", function() { return __WEBPACK_IMPORTED_MODULE_9__ParamColor__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__ParamWs__ = __webpack_require__(27);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamWs", function() { return __WEBPACK_IMPORTED_MODULE_10__ParamWs__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__ParamSelect__ = __webpack_require__(28);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamSelect", function() { return __WEBPACK_IMPORTED_MODULE_11__ParamSelect__["a"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__LedStripPatternSwitch__ = __webpack_require__(29);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "LedStripPatternSwitch", function() { return __WEBPACK_IMPORTED_MODULE_12__LedStripPatternSwitch__["a"]; });
@@ -10977,7 +11017,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/***/ }),
/* 11 */
/* 12 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -11033,7 +11073,7 @@ class Form extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* default
/***/ }),
/* 12 */
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -11672,11 +11712,11 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
/***/ }),
/* 13 */
/* 14 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__DataBinding__ = __webpack_require__(14);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__DataBinding__ = __webpack_require__(15);
class DataField {
@@ -11704,7 +11744,7 @@ class DataField {
/***/ }),
/* 14 */
/* 15 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -11742,13 +11782,13 @@ class DataBinding {
/***/ }),
/* 15 */
/* 16 */
/***/ (function(module, exports) {
module.exports = "<label for=\"{{name}}\">{{label}}</label>\n<input type=\"text\" class=\"{{name}}\" name=\"{{name}}\" placeholder=\"{{placeholder}}\">"
/***/ }),
/* 16 */
/* 17 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -11766,7 +11806,7 @@ class DataStore {
/***/ }),
/* 17 */
/* 18 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -11779,25 +11819,31 @@ class DataStore {
/***/ }),
/* 18 */
/* 19 */
/***/ (function(module, exports) {
module.exports = "<label for=\"{{name}}\">{{label}}</label>\n<label class=\"switch {{name}}\" name=\"{{name}}\">\n <input type=\"checkbox\" name=\"{{name}}\">\n <span class=\"slider round\"></span>\n</label>"
/***/ }),
/* 19 */
/* 20 */
/***/ (function(module, exports) {
module.exports = "<label>{{label}}</label>\n<input type=\"range\" name=\"{{name}}\" value=\"{{value}}\" min=\"{{min}}\" max=\"{{max}}\">"
/***/ }),
/* 20 */
/* 21 */
/***/ (function(module, exports) {
module.exports = "<label for=\"{{name}}\">{{label}}</label>\n<select name=\"{{name}}\">\n {{#entries}}\n <option value=\"{{value}}\">{{text}}</option>\n {{/entries}}\n</select>"
/***/ }),
/* 22 */
/***/ (function(module, exports) {
module.exports = "<label for=\"{{name}}\">{{label}}</label>\n<input type=\"color\" class=\"{{name}} ColorPicker\" name=\"{{name}}\">"
/***/ }),
/* 21 */
/* 23 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -11844,7 +11890,7 @@ class PresetSwitch extends __WEBPACK_IMPORTED_MODULE_1__base_Switch_Switch__["a"
/***/ }),
/* 22 */
/* 24 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -11875,7 +11921,7 @@ class ParamSlider extends __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__["a"
/***/ }),
/* 23 */
/* 25 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -11906,13 +11952,13 @@ class ParamText extends __WEBPACK_IMPORTED_MODULE_1__base_TextInput_TextInput__[
/***/ }),
/* 24 */
/* 26 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPicker__ = __webpack_require__(7);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPicker__ = __webpack_require__(8);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
@@ -11949,7 +11995,7 @@ class ParamColor extends __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPick
/***/ }),
/* 25 */
/* 27 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -11998,7 +12044,41 @@ class ParamWs extends __WEBPACK_IMPORTED_MODULE_1__base_TextInput_TextInput__["a
/***/ }),
/* 26 */
/* 28 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__ = __webpack_require__(7);
class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a" /* default */] {
constructor(ctx, node) {
super(ctx, node);
this.render({
label: this.config.label,
name: this.config.name,
entries: this.config.entries
});
}
onChange(evt) {
let obj = {};
obj[this.config.name] = evt.target.value;
this.ctx.ws.send(JSON.stringify(obj));
}
}
/* harmony export (immutable) */ __webpack_exports__["a"] = ParamSelect;
/***/ }),
/* 29 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";

24
data/styles.css
View File

@@ -252,14 +252,14 @@ form .form-row input[type="checkbox"] {
background: transparent;
border: none;
color: #eeeeee;
border-bottom: solid 1px #097479;
}
.sui input[type="text"]:focus,
.sui input[type="password"]:focus,
.sui input[type="text"]:hover,
.sui input[type="password"]:hover {
outline: none;
border-bottom: solid 1px #097479;
box-shadow: 3px #097479;
border-bottom: 1px solid #0eb8c0;
}
.sui input[type="checkbox"] {
transform: scale(2);
@@ -268,6 +268,22 @@ form .form-row input[type="checkbox"] {
flex: none !important;
background-color: transparent;
border: 0;
height: 50px;
width: 75px;
height: 42px;
width: 42px;
}
.sui select {
padding: .5em;
color: #eeeeee;
background: none;
border: none;
border-bottom: solid 1px #097479;
}
.sui select:focus,
.sui select:hover {
outline: none;
border: none;
border-bottom: solid 1px #0eb8c0 !important;
}
.sui select option {
background: #333333;
}

39
data/matrix.html → data/test-controls.html
View File

@@ -12,7 +12,7 @@
<body class="sui">
<div class="content">
<form class="param-control container open collapsible">
<!-- <form class="param-control container open collapsible">
<span class="heading">Debug</span>
<div class="content">
<ul>
@@ -25,33 +25,45 @@
</ul>
<br>
</div>
</form>
</form> -->
<form class="param-control container collapsible open" action="#" method="POST">
<span class="heading">Strip</span>
<div class="content">
<ul>
<li class="form-row ParamColor"
data-mode="2"
data-name="color"
data-label="Color"
data-endpoint="/patterns">
data-label="Color">
</li>
<li class="form-row ParamColor"
data-mode="2"
data-name="color2"
data-label="Color 2">
</li>
<li class="form-row ParamSelect"
data-label="Pattern"
data-name="pattern"
></li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-id="1"
data-mode="3"
data-name="Rainbow"
data-label="Rainbow"
data-endpoint="/strip/pattern">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="Scanner"
data-label="Scanner"
data-endpoint="/strip/pattern">
data-label="Rainbow">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="TheaterChase"
data-label="Theater Chase"
data-endpoint="/strip/pattern">
data-id="2"
data-mode="3">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="Scanner"
data-label="Scanner"
data-id="4"
data-mode="3">
</li>
</ul>
</div>
@@ -59,6 +71,7 @@
<div class="settings container collapsible open">
<span class="heading">WiFi Settings</span>
<div class="content">
<!-- <div class="Form" data-name="configForm" data-endpoint="/config.json"></div> -->
<form action="/wifiConfig" method="POST">
<!-- <li class="form-row">
<label for="ap">AP Mode</label>

23
src/app/components/ParamSelect.js Normal file
View File

@@ -0,0 +1,23 @@
import $ from 'jquery';
import Select from './base/Select/Select';
export default class ParamSelect extends Select {
constructor(ctx, node) {
super(ctx, node);
this.render({
label: this.config.label,
name: this.config.name,
entries: this.config.entries
});
}
onChange(evt) {
let obj = {};
obj[this.config.name] = evt.target.value;
this.ctx.ws.send(JSON.stringify(obj));
}
}

6
src/app/components/base/Select/Select.html Normal file
View File

@@ -0,0 +1,6 @@
<label for="{{name}}">{{label}}</label>
<select name="{{name}}">
{{#entries}}
<option value="{{value}}">{{text}}</option>
{{/entries}}
</select>

21
src/app/components/base/Select/Select.js Normal file
View File

@@ -0,0 +1,21 @@
import $ from 'jquery';
import Component from '../../../core/Component';
import markup from './Select.html';
export default class Select extends Component {
constructor(ctx, node, template) {
super(ctx, node, template || markup);
this.render(this.config);
}
onChange(evt) {
console.log(evt.target.value);
}
subscribe() {
this.node.delegate('select', 'change', this.onChange.bind(this));
}
}

2
src/app/components/exports.js
View File

@@ -1,6 +1,7 @@
export { default as Form } from './base/Form/Form'
export { default as Switch } from './base/Switch/Switch'
export { default as Slider } from './base/Slider/Slider'
export { default as Select } from './base/Select/Select'
export { default as TextInput } from './base/TextInput/TextInput'
export { default as ColorPicker } from './base/ColorPicker/ColorPicker'
export { default as PresetSwitch } from './PresetSwitch'
@@ -8,4 +9,5 @@ export { default as ParamSlider } from './ParamSlider'
export { default as ParamText } from './ParamText'
export { default as ParamColor } from './ParamColor'
export { default as ParamWs } from './ParamWs'
export { default as ParamSelect } from './ParamSelect'
export { default as LedStripPatternSwitch } from './LedStripPatternSwitch'

28
src/pages/index.html
View File

@@ -39,28 +39,12 @@
data-mode="2"
data-name="color2"
data-label="Color 2">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-id="1"
data-mode="3"
data-name="Rainbow"
data-label="Rainbow">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="TheaterChase"
data-label="Theater Chase"
data-id="2"
data-mode="3">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="Scanner"
data-label="Scanner"
data-id="4"
data-mode="3">
</li>
</li>
<li class="form-row ParamSelect"
data-label="Pattern"
data-name="pattern"
data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]'
></li>
</ul>
</div>
</form>

39
src/pages/matrix.html → src/pages/test-controls.html
View File

@@ -12,7 +12,7 @@
<body class="sui">
<div class="content">
<form class="param-control container open collapsible">
<!-- <form class="param-control container open collapsible">
<span class="heading">Debug</span>
<div class="content">
<ul>
@@ -25,33 +25,45 @@
</ul>
<br>
</div>
</form>
</form> -->
<form class="param-control container collapsible open" action="#" method="POST">
<span class="heading">Strip</span>
<div class="content">
<ul>
<li class="form-row ParamColor"
data-mode="2"
data-name="color"
data-label="Color"
data-endpoint="/patterns">
data-label="Color">
</li>
<li class="form-row ParamColor"
data-mode="2"
data-name="color2"
data-label="Color 2">
</li>
<li class="form-row ParamSelect"
data-label="Pattern"
data-name="pattern"
></li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-id="1"
data-mode="3"
data-name="Rainbow"
data-label="Rainbow"
data-endpoint="/strip/pattern">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="Scanner"
data-label="Scanner"
data-endpoint="/strip/pattern">
data-label="Rainbow">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="TheaterChase"
data-label="Theater Chase"
data-endpoint="/strip/pattern">
data-id="2"
data-mode="3">
</li>
<li class="form-row LedStripPatternSwitch"
data-group="stripPattern"
data-name="Scanner"
data-label="Scanner"
data-id="4"
data-mode="3">
</li>
</ul>
</div>
@@ -59,6 +71,7 @@
<div class="settings container collapsible open">
<span class="heading">WiFi Settings</span>
<div class="content">
<!-- <div class="Form" data-name="configForm" data-endpoint="/config.json"></div> -->
<form action="/wifiConfig" method="POST">
<!-- <li class="form-row">
<label for="ap">AP Mode</label>

4
src/styles/form/color.less
View File

@@ -2,6 +2,6 @@
flex: none !important;
background-color: transparent;
border: 0;
height: 50px;
width: 75px;
height: 42px;
width: 42px;
}

4
src/styles/form/input.less
View File

@@ -9,10 +9,10 @@
background: transparent;
border: none;
color: @color-white;
border-bottom: solid 1px @color-main;
&:focus, &:hover {
outline: none;
border-bottom: solid 1px @color-main;
box-shadow: 3px @color-main;
border-bottom: 1px solid @color-main-light;
}
}
input[type="checkbox"] {

17
src/styles/form/select.less Normal file
View File

@@ -0,0 +1,17 @@
.sui {
select {
padding: .5em;
color: @color-white;
background: none;
border: none;
border-bottom: solid 1px @color-main;
&:focus, &:hover {
outline: none;
border: none;
border-bottom: solid 1px @color-main-light !important;
}
option {
background: @color-container;
}
}
}

1
src/styles/main.less
View File

@@ -9,3 +9,4 @@
@import "form/layout.less";
@import "form/input.less";
@import "form/color.less";
@import "form/select.less";