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

adapt message

Browse Source
This commit is contained in:
0x1d
2018-09-17 11:26:16 +02:00
parent 56773fdfad
commit 5c3b70bc96
5 changed files with 91 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
data/index.html
View File

@@ -33,16 +33,19 @@
<li class="form-row ParamColor"
data-mode="2"
data-name="color"
data-topic="pixels/color"
data-label="Color">
</li>
<li class="form-row ParamColor"
data-mode="2"
data-name="color2"
data-name="color"
data-topic="pixels/color2"
data-label="Color 2">
</li>
<li class="form-row ParamSelect"
data-label="Pattern"
data-name="pattern"
data-topic="pixels/pattern"
data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]'
></li>
</ul>

158
data/script.js
View File

@@ -10438,57 +10438,6 @@ return jQuery;
/* 1 */
/***/ (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__Mediator__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__DataStore__ = __webpack_require__(17);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__StoreAction__ = __webpack_require__(18);
class RestStore extends __WEBPACK_IMPORTED_MODULE_2__DataStore__["a" /* default */] {
constructor(endpoint, mediator = new __WEBPACK_IMPORTED_MODULE_1__Mediator__["a" /* default */]()){
super(mediator);
this.endpoint = endpoint;
}
load(entry){
return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].LOAD, 'GET', entry);
}
save(entry){
return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].SAVE, 'POST', entry);
}
add(entry){
return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].ADD, 'PUT', entry);
}
delete(entry){
return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].DELETE, 'POST', entry);
}
request(event, type, payload){
return __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.ajax({
url: this.endpoint,
type: type,
data: payload
})
.then(JSON.parse)
.then((response) => {
this.mediator.trigger(event, response);
});
}
on(event, subscriber, context){
this.mediator.on(event, subscriber, context);
}
}
/* harmony export (immutable) */ __webpack_exports__["a"] = RestStore;
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* 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__);
@@ -10539,6 +10488,57 @@ class Component {
/* harmony export (immutable) */ __webpack_exports__["a"] = Component;
/***/ }),
/* 2 */
/***/ (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__Mediator__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__DataStore__ = __webpack_require__(17);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__StoreAction__ = __webpack_require__(18);
class RestStore extends __WEBPACK_IMPORTED_MODULE_2__DataStore__["a" /* default */] {
constructor(endpoint, mediator = new __WEBPACK_IMPORTED_MODULE_1__Mediator__["a" /* default */]()){
super(mediator);
this.endpoint = endpoint;
}
load(entry){
return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].LOAD, 'GET', entry);
}
save(entry){
return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].SAVE, 'POST', entry);
}
add(entry){
return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].ADD, 'PUT', entry);
}
delete(entry){
return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].DELETE, 'POST', entry);
}
request(event, type, payload){
return __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.ajax({
url: this.endpoint,
type: type,
data: payload
})
.then(JSON.parse)
.then((response) => {
this.mediator.trigger(event, response);
});
}
on(event, subscriber, context){
this.mediator.on(event, subscriber, context);
}
}
/* harmony export (immutable) */ __webpack_exports__["a"] = RestStore;
/***/ }),
/* 3 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -10546,7 +10546,7 @@ class Component {
"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_1__core_Component__ = __webpack_require__(1);
/* 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__);
@@ -10584,7 +10584,7 @@ class TextInput extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* def
"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_1__core_Component__ = __webpack_require__(1);
/* 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__);
@@ -10656,7 +10656,7 @@ class Mediator {
"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_1__core_Component__ = __webpack_require__(1);
/* 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__);
@@ -10694,7 +10694,7 @@ class Slider extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* defaul
"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_1__core_Component__ = __webpack_require__(1);
/* 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__);
@@ -10728,7 +10728,7 @@ class Select extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* defaul
"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_1__core_Component__ = __webpack_require__(1);
/* 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__);
@@ -11023,9 +11023,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
"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_1__core_Component__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__TextInput_TextInput__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__core_store_RestStore__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__core_store_RestStore__ = __webpack_require__(2);
@@ -11850,7 +11850,7 @@ module.exports = "<label for=\"{{name}}\">{{label}}</label>\n<input type=\"color
/* 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_Switch_Switch__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(2);
@@ -11897,7 +11897,7 @@ class PresetSwitch extends __WEBPACK_IMPORTED_MODULE_1__base_Switch_Switch__["a"
/* 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_Slider_Slider__ = __webpack_require__(6);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(2);
@@ -11928,7 +11928,7 @@ class ParamSlider extends __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__["a"
/* 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_TextInput_TextInput__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(2);
@@ -11959,8 +11959,6 @@ class ParamText extends __WEBPACK_IMPORTED_MODULE_1__base_TextInput_TextInput__[
/* 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__(8);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
@@ -11968,26 +11966,15 @@ class ParamColor extends __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPick
constructor(ctx, node) {
super(ctx, node);
//this.store = new Store(this.config.endpoint);
/* this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint );
this.ws.onopen = (event) => {
console.log('open ' + this.config.endpoint);
};
this.ws.onmessage = (event) => {
console.log(event.data);
}; */
}
onChange(evt) {
/*this.store.save({
rgb: parseInt(this.value.replace('#', '0x'))
});*/
//let cmd = this.config.id + parseInt(this.value.replace('#', '0x'));
console.log(parseInt(this.value.replace('#', '0x')));
this.ctx.ws.send(JSON.stringify({
mode: this.config.mode,
value: parseInt(this.value.replace('#', '0x'))
}));
let obj = {
topic: this.config.topic,
payload: parseInt(this.value.replace('#', '0x'))
};
this.ctx.ws.send(JSON.stringify(obj));
console.log(obj);
}
}
@@ -12002,7 +11989,7 @@ class ParamColor extends __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPick
/* 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_TextInput_TextInput__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(2);
@@ -12067,10 +12054,11 @@ class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a"
}
onChange(evt) {
let obj = {};
obj[this.config.name] = evt.target.value;
let obj = {
topic: this.config.topic,
payload: evt.target.value
};
this.ctx.ws.send(JSON.stringify(obj));
}
}
@@ -12085,7 +12073,7 @@ class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a"
/* 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_Switch_Switch__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(2);

24
src/app/components/ParamColor.js
View File

@@ -1,31 +1,19 @@
import $ from 'jquery';
import ColorPicker from './base/ColorPicker/ColorPicker';
import Store from '../core/store/RestStore';
export default class ParamColor extends ColorPicker {
constructor(ctx, node) {
super(ctx, node);
//this.store = new Store(this.config.endpoint);
/* this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint );
this.ws.onopen = (event) => {
console.log('open ' + this.config.endpoint);
};
this.ws.onmessage = (event) => {
console.log(event.data);
}; */
}
onChange(evt) {
/*this.store.save({
rgb: parseInt(this.value.replace('#', '0x'))
});*/
//let cmd = this.config.id + parseInt(this.value.replace('#', '0x'));
console.log(parseInt(this.value.replace('#', '0x')));
this.ctx.ws.send(JSON.stringify({
mode: this.config.mode,
value: parseInt(this.value.replace('#', '0x'))
}));
let obj = {
topic: this.config.topic,
payload: parseInt(this.value.replace('#', '0x'))
};
this.ctx.ws.send(JSON.stringify(obj));
console.log(obj);
}
}

7
src/app/components/ParamSelect.js
View File

@@ -14,10 +14,11 @@ export default class ParamSelect extends Select {
}
onChange(evt) {
let obj = {};
obj[this.config.name] = evt.target.value;
let obj = {
topic: this.config.topic,
payload: evt.target.value
};
this.ctx.ws.send(JSON.stringify(obj));
}
}

5
src/pages/index.html
View File

@@ -33,16 +33,19 @@
<li class="form-row ParamColor"
data-mode="2"
data-name="color"
data-topic="pixels/color"
data-label="Color">
</li>
<li class="form-row ParamColor"
data-mode="2"
data-name="color2"
data-name="color"
data-topic="pixels/color2"
data-label="Color 2">
</li>
<li class="form-row ParamSelect"
data-label="Pattern"
data-name="pattern"
data-topic="pixels/pattern"
data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]'
></li>
</ul>