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

improved ws, chat component

Browse Source
This commit is contained in:
0x1d
2018-11-22 13:01:26 +01:00
parent fb5c6cf688
commit fcee9f38c3
18 changed files with 3025 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
data/script.js
View File

@@ -10784,31 +10784,40 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
const hues = [ ["#FDEB71", "#F8D800"], ["#ABDCFF", "#0396FF"], ["#FEB692", "#EA5455"], ["#CE9FFC", "#7367F0"], ["#90F7EC", "#32CCBC"], ["#FFF6B7", "#F6416C"], ["#81FBB8", "#28C76F"], ["#E2B0FF", "#9F44D3"], ["#F97794", "#623AA2"], ["#FCCF31", "#F55555"], ["#F761A1", "#8C1BAB"], ["#43CBFF", "#9708CC"], ["#5EFCE8", "#736EFE"], ["#FAD7A1", "#E96D71"], ["#FFD26F", "#3677FF"], ["#A0FE65", "#FA016D"], ["#FFDB01", "#0E197D"], ["#FEC163", "#DE4313"], ["#92FFC0", "#002661"], ["#EEAD92", "#6018DC"], ["#F6CEEC", "#D939CD"], ["#52E5E7", "#130CB7"], ["#F1CA74", "#A64DB6"], ["#E8D07A", "#5312D6"], ["#EECE13", "#B210FF"], ["#79F1A4", "#0E5CAD"], ["#FDD819", "#E80505"], ["#FFF3B0", "#CA26FF"], ["#FFF5C3", "#9452A5"], ["#F05F57", "#360940"], ["#2AFADF", "#4C83FF"], ["#FFF886", "#F072B6"], ["#97ABFF", "#123597"], ["#F5CBFF", "#C346C2"], ["#FFF720", "#3CD500"], ["#FF6FD8", "#3813C2"], ["#EE9AE5", "#5961F9"], ["#FFD3A5", "#FD6585"], ["#C2FFD8", "#465EFB"], ["#FD6585", "#0D25B9"], ["#FD6E6A", "#FFC600"], ["#65FDF0", "#1D6FA3"], ["#6B73FF", "#000DFF"], ["#FF7AF5", "#513162"], ["#F0FF00", "#58CFFB"], ["#FFE985", "#FA742B"], ["#FFA6B7", "#1E2AD2"], ["#FFAA85", "#B3315F"], ["#72EDF2", "#5151E5"], ["#FF9D6C", "#BB4E75"], ["#F6D242", "#FF52E5"], ["#69FF97", "#00E4FF"], ["#3B2667", "#BC78EC"], ["#70F570", "#49C628"], ["#3C8CE7", "#00EAFF"], ["#FAB2FF", "#1904E5"], ["#81FFEF", "#F067B4"], ["#FFA8A8", "#FCFF00"], ["#FFCF71", "#2376DD"], ["#FF96F9", "#C32BAC"] ];
let endpoint = '/pixel';
let endpoint = '/ws';
// gradients
// https://uigradients.com
__WEBPACK_IMPORTED_MODULE_0_jquery___default()(() => {
let app = new __WEBPACK_IMPORTED_MODULE_1__core_App__["a" /* default */](__WEBPACK_IMPORTED_MODULE_0_jquery___default()('body'))
.components(__WEBPACK_IMPORTED_MODULE_2__components_exports__)
.websocket(new WebSocket(endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + endpoint : endpoint));
app.ws.onmessage = (msg) => {
app.mediator.trigger('out/chat/log', {topic: 'out/chat/log', payload: msg.data});
};
app.mediator.on('pixels/hue', (payload) => {
let colors = payload.split(',');
let msg = JSON.stringify({
topic: 'pixels/state',
broadcast: 1,
payload: JSON.stringify({
brightness: 32,
color: parseInt(hues[payload][0].replace('#', '0x'), 16),
color2: parseInt(hues[payload][1].replace('#', '0x'), 16),
totalSteps: 32,
//brightness: 64,
color: parseInt(colors[0].replace('#', '0x'), 16),
color2: parseInt(colors[1].replace('#', '0x'), 16),
//totalSteps: 64,
pattern: 5
})
});
app.mediator.trigger('pixels/totalSteps', 32);
//app.mediator.trigger('pixels/brightness', 64);
//app.mediator.trigger('pixels/totalSteps', 64);
app.mediator.trigger('pixels/pattern', 5);
app.mediator.trigger('pixels/color', hues[payload][0]);
app.mediator.trigger('pixels/color2', hues[payload][1]);
app.mediator.trigger('pixels/color', colors[0]);
app.mediator.trigger('pixels/color2', colors[1]);
//console.log('pixels/hue: ' + msg);
app.ws.send(msg);
});
// TODO make components
@@ -11040,6 +11049,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* 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"]; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__Chat_Chat__ = __webpack_require__(30);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Chat", function() { return __WEBPACK_IMPORTED_MODULE_13__Chat_Chat__["a"]; });
@@ -11984,20 +11996,18 @@ class ParamSlider extends __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__["a"
constructor(ctx, node) {
super(ctx, node);
//this.store = new Store(this.config.endpoint);
this.ctx.mediator.on(this.config.topic, (payload) => {
this.node.find('input').val(payload);
});
}
onChange(evt) {
this.ctx.ws.send(JSON.stringify({
let msg = JSON.stringify({
topic: this.config.topic,
payload: evt.target.value
}));
}
subscribe(){
this.ctx.mediator.on(this.config.topic, (payload) => {
//console.log(this.config.topic + ":" + payload);
this.node.find('input').val(payload);
//this.notify(payload);
payload: evt.target.value,
broadcast: 1
});
this.ctx.ws.send(msg);
}
}
/* harmony export (immutable) */ __webpack_exports__["a"] = ParamSlider;
@@ -12061,7 +12071,8 @@ class ParamColor extends __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPick
notify(val){
let obj = {
topic: this.config.topic,
payload: parseInt(val.replace('#', '0x'))
payload: parseInt(val.replace('#', '0x')),
broadcast: 1
};
this.ctx.ws.send(JSON.stringify(obj));
}
@@ -12111,10 +12122,10 @@ class ParamWs extends __WEBPACK_IMPORTED_MODULE_1__base_TextInput_TextInput__["a
obj[this.config.name] = this.value;
//this.store.save(obj);
console.log(this.value);
this.ctx.ws.send({
this.ctx.ws.send(JSON.stringify({
topic: this.config.topic,
payload: this.value
});
}));
this.ctx.mediator.trigger(this.config.endpoint, this.value);
}
@@ -12138,11 +12149,20 @@ class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a"
constructor(ctx, node) {
super(ctx, node);
this.render({
let viewData = {
label: this.config.label,
name: this.config.name,
entries: this.config.entries
});
name: this.config.name
};
if(this.config.external){
__WEBPACK_IMPORTED_MODULE_0_jquery___default.a.getJSON(this.config.external).done((data) => {
viewData.entries = data;
this.render(viewData);
})
} else {
viewData.entries = this.config.entries;
this.render(viewData);
}
this.selectEntry(this.config.default);
this.ctx.mediator.on(this.config.topic, (payload) => {
this.selectEntry(payload);
@@ -12156,7 +12176,8 @@ class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a"
onChange(evt) {
let obj = {
topic: this.config.topic,
payload: evt.target.value
payload: evt.target.value,
broadcast: 1
};
this.ctx.mediator.trigger(obj.topic, obj.payload);
this.ctx.ws.send(JSON.stringify(obj));
@@ -12227,5 +12248,84 @@ class LedStripPatternSwitch extends __WEBPACK_IMPORTED_MODULE_1__base_Switch_Swi
/* harmony export (immutable) */ __webpack_exports__["a"] = LedStripPatternSwitch;
/***/ }),
/* 30 */
/***/ (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__Chat_html__ = __webpack_require__(31);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Chat_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__Chat_html__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_Component__ = __webpack_require__(1);
class Chat extends __WEBPACK_IMPORTED_MODULE_2__core_Component__["a" /* default */] {
constructor(ctx, node, template) {
super(ctx, node, template || __WEBPACK_IMPORTED_MODULE_1__Chat_html___default.a);
this.render(this.config);
this.ctx.mediator.on(this.config.topic, this.onMessage.bind(this));
this.node.delegate('input.msg', 'keypress', this.onInput.bind(this));
this.node.delegate('button', 'click', this.send.bind(this));
}
templates() {
return {
message: (user, msg) => `
<li>
<span class="user-label">${user}</span>
<span class="message-text">${msg}</span>
</li>
`
};
}
onMessage(msg) {
let payload = msg.payload; //.replace(/<.+?>/g, '');
//console.log('onMsg: ' + msg);
let msgParts = payload.split(':');
let messages = this.node.find('.messages');
messages.append(
this.templates().message(msgParts[0], msgParts[1] ? msgParts[1] : '')
);
this.node.find('.message-container').animate({
scrollTop: messages[0].scrollHeight
}, 250);
}
sanitizeInput(val) {
return val.replace(/<.+?>/g, '');
}
send(evt) {
evt.preventDefault();
let username = this.node.find('input.username');
let msg = this.node.find('input.msg');
if (username.length > 0 && message.length > 0) {
let message = JSON.stringify({
topic: this.sanitizeInput(this.config.topic),
payload: this.sanitizeInput(username.val() + ':' + msg.val())
});
this.ctx.ws.send(message);
msg.val('');
}
}
onInput(evt) {
if (evt.keyCode === 13) {
this.send(evt);
}
}
}
/* harmony export (immutable) */ __webpack_exports__["a"] = Chat;
/***/ }),
/* 31 */
/***/ (function(module, exports) {
module.exports = "<form>\n <ul>\n <li class=\"form-row\">\n <input type=\"text\" placeholder=\"Topic\" class=\"topic\" value=\"{{topic}}\" disabled>\n <input type=\"text\" placeholder=\"Username\" class=\"username\">\n </li>\n </ul>\n <div class=\"message-container\">\n <ul class=\"messages\"></ul>\n </div>\n <ul>\n <li class=\"form-row\">\n <input type=\"text\" placeholder=\"{{placeholder}}\" class=\"msg\">\n <button>Send</button>\n </li>\n </ul>\n </ul>\n</form>"
/***/ })
/******/ ]);