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

improve ui for irc usage

Browse Source
This commit is contained in:
0x1d
2018-11-23 17:16:14 +01:00
parent fcee9f38c3
commit b7686d95fd
5 changed files with 82 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
data/index.html
View File

@@ -73,8 +73,10 @@
<div class="Form" data-fileName="/config.json" data-name="configForm" data-from="/config.json" data-endpoint="/config"></div> <div class="Form" data-fileName="/config.json" data-name="configForm" data-from="/config.json" data-endpoint="/config"></div>
<h2>NeoPixel</h2> <h2>NeoPixel</h2>
<div class="Form" data-fileName="/pixelConfig.json" data-name="configForm" data-from="/pixelConfig.json" data-endpoint="/config"></div> <div class="Form" data-fileName="/pixelConfig.json" data-name="configForm" data-from="/pixelConfig.json" data-endpoint="/config"></div>
<h2>MQTT</h2> <!-- <h2>MQTT</h2>
<div class="Form" data-fileName="/mqttConfig.json" data-name="configForm" data-from="/mqttConfig.json" data-endpoint="/config"></div> <div class="Form" data-fileName="/mqttConfig.json" data-name="configForm" data-from="/mqttConfig.json" data-endpoint="/config"></div> -->
<h2>IRC</h2>
<div class="Form" data-fileName="/ircConfig.json" data-name="configForm" data-from="/ircConfig.json" data-endpoint="/config"></div>
</div> </div>
</div> </div>
<div class="settings container collapsible"> <div class="settings container collapsible">

40
data/script.js
View File

@@ -12268,8 +12268,11 @@ class Chat extends __WEBPACK_IMPORTED_MODULE_2__core_Component__["a" /* default
super(ctx, node, template || __WEBPACK_IMPORTED_MODULE_1__Chat_html___default.a); super(ctx, node, template || __WEBPACK_IMPORTED_MODULE_1__Chat_html___default.a);
this.render(this.config); this.render(this.config);
this.ctx.mediator.on(this.config.topic, this.onMessage.bind(this)); this.ctx.mediator.on(this.config.topic, this.onMessage.bind(this));
this.ctx.mediator.on("chat/connected", this.connected.bind(this));
//this.ctx.mediator.on("irc/configValid", this.configValid.bind(this));
this.node.delegate('input.msg', 'keypress', this.onInput.bind(this)); this.node.delegate('input.msg', 'keypress', this.onInput.bind(this));
this.node.delegate('button', 'click', this.send.bind(this)); this.node.delegate('button.send', 'click', this.send.bind(this));
this.node.delegate('button.join', 'click', this.join.bind(this));
} }
templates() { templates() {
@@ -12279,17 +12282,43 @@ class Chat extends __WEBPACK_IMPORTED_MODULE_2__core_Component__["a" /* default
<span class="user-label">${user}</span> <span class="user-label">${user}</span>
<span class="message-text">${msg}</span> <span class="message-text">${msg}</span>
</li> </li>
`,
serverMessage: (msg) => `
<li>
<span class="message-text">${msg}</span>
</li>
` `
}; };
} }
configValid() {
this.node.text("Please configure first");
}
join(evt) {
evt.preventDefault();
let message = JSON.stringify({
topic: 'irc/join',
payload: this.sanitizeInput(this.node.find('.channel').val())
});
this.ctx.ws.send(message);
this.node.find('.controls').show();
//this.node.find('button.join').hide();
}
connected() {
this.node.find('.controls').show();
this.node.find('button.connect').hide();
}
onMessage(msg) { onMessage(msg) {
let payload = msg.payload; //.replace(/<.+?>/g, ''); let payload = msg.payload; //.replace(/<.+?>/g, '');
//console.log('onMsg: ' + msg); //console.log('onMsg: ' + msg);
let msgParts = payload.split(':'); let msgParts = payload.split(':');
let messages = this.node.find('.messages'); let messages = this.node.find('.messages');
messages.append( messages.append(
this.templates().message(msgParts[0], msgParts[1] ? msgParts[1] : '') msgParts.length == 2 ?
this.templates().message(msgParts[0], this.sanitizeInput(msgParts[1]))
: this.templates().serverMessage(this.sanitizeInput(payload))
); );
this.node.find('.message-container').animate({ this.node.find('.message-container').animate({
scrollTop: messages[0].scrollHeight scrollTop: messages[0].scrollHeight
@@ -12300,12 +12329,11 @@ class Chat extends __WEBPACK_IMPORTED_MODULE_2__core_Component__["a" /* default
} }
send(evt) { send(evt) {
evt.preventDefault(); evt.preventDefault();
let username = this.node.find('input.username');
let msg = this.node.find('input.msg'); let msg = this.node.find('input.msg');
if (username.length > 0 && message.length > 0) { if (msg.length > 0) {
let message = JSON.stringify({ let message = JSON.stringify({
topic: this.sanitizeInput(this.config.topic), topic: this.sanitizeInput(this.config.topic),
payload: this.sanitizeInput(username.val() + ':' + msg.val()) payload: this.sanitizeInput(msg.val())
}); });
this.ctx.ws.send(message); this.ctx.ws.send(message);
msg.val(''); msg.val('');
@@ -12325,7 +12353,7 @@ class Chat extends __WEBPACK_IMPORTED_MODULE_2__core_Component__["a" /* default
/* 31 */ /* 31 */
/***/ (function(module, exports) { /***/ (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>" module.exports = "<form>\n <ul>\n <li class=\"form-row\">\n <label for=\"channel\">Channel</label>\n <input type=\"text\" placeholder=\"Channel\" class=\"channel\" value=\"#illucat\">\n <button class=\"join\">Join</button>\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 class=\"controls\" style=\"display:none\">\n <li class=\"form-row\">\n <input type=\"text\" placeholder=\"{{placeholder}}\" class=\"msg\">\n <button class=\"send\">Send</button>\n </li>\n </ul>\n</form>"
/***/ }) /***/ })
/******/ ]); /******/ ]);

12
src/app/components/Chat/Chat.html
View File

@@ -1,18 +1,20 @@
<form> <form>
<ul> <ul>
<li class="form-row"> <li class="form-row">
<input type="text" placeholder="Topic" class="topic" value="{{topic}}" disabled> <label for="channel">Channel</label>
<input type="text" placeholder="Username" class="username"> <input type="text" placeholder="Channel" class="channel" value="#illucat">
<button class="join">Join</button>
<!-- <input type="text" placeholder="Topic" class="topic" value="{{topic}}" disabled> -->
<!-- <input type="text" placeholder="Username" class="username"> -->
</li> </li>
</ul> </ul>
<div class="message-container"> <div class="message-container">
<ul class="messages"></ul> <ul class="messages"></ul>
</div> </div>
<ul> <ul class="controls" style="display:none">
<li class="form-row"> <li class="form-row">
<input type="text" placeholder="{{placeholder}}" class="msg"> <input type="text" placeholder="{{placeholder}}" class="msg">
<button>Send</button> <button class="send">Send</button>
</li> </li>
</ul> </ul>
</ul>
</form> </form>

38
src/app/components/Chat/Chat.js
View File

@@ -8,8 +8,11 @@ export default class Chat extends Component {
super(ctx, node, template || markup); super(ctx, node, template || markup);
this.render(this.config); this.render(this.config);
this.ctx.mediator.on(this.config.topic, this.onMessage.bind(this)); this.ctx.mediator.on(this.config.topic, this.onMessage.bind(this));
this.ctx.mediator.on("chat/connected", this.connected.bind(this));
//this.ctx.mediator.on("irc/configValid", this.configValid.bind(this));
this.node.delegate('input.msg', 'keypress', this.onInput.bind(this)); this.node.delegate('input.msg', 'keypress', this.onInput.bind(this));
this.node.delegate('button', 'click', this.send.bind(this)); this.node.delegate('button.send', 'click', this.send.bind(this));
this.node.delegate('button.join', 'click', this.join.bind(this));
} }
templates() { templates() {
@@ -19,17 +22,43 @@ export default class Chat extends Component {
<span class="user-label">${user}</span> <span class="user-label">${user}</span>
<span class="message-text">${msg}</span> <span class="message-text">${msg}</span>
</li> </li>
`,
serverMessage: (msg) => `
<li>
<span class="message-text">${msg}</span>
</li>
` `
}; };
} }
configValid() {
this.node.text("Please configure first");
}
join(evt) {
evt.preventDefault();
let message = JSON.stringify({
topic: 'irc/join',
payload: this.sanitizeInput(this.node.find('.channel').val())
});
this.ctx.ws.send(message);
this.node.find('.controls').show();
//this.node.find('button.join').hide();
}
connected() {
this.node.find('.controls').show();
this.node.find('button.connect').hide();
}
onMessage(msg) { onMessage(msg) {
let payload = msg.payload; //.replace(/<.+?>/g, ''); let payload = msg.payload; //.replace(/<.+?>/g, '');
//console.log('onMsg: ' + msg); //console.log('onMsg: ' + msg);
let msgParts = payload.split(':'); let msgParts = payload.split(':');
let messages = this.node.find('.messages'); let messages = this.node.find('.messages');
messages.append( messages.append(
this.templates().message(msgParts[0], msgParts[1] ? msgParts[1] : '') msgParts.length == 2 ?
this.templates().message(msgParts[0], this.sanitizeInput(msgParts[1]))
: this.templates().serverMessage(this.sanitizeInput(payload))
); );
this.node.find('.message-container').animate({ this.node.find('.message-container').animate({
scrollTop: messages[0].scrollHeight scrollTop: messages[0].scrollHeight
@@ -40,12 +69,11 @@ export default class Chat extends Component {
} }
send(evt) { send(evt) {
evt.preventDefault(); evt.preventDefault();
let username = this.node.find('input.username');
let msg = this.node.find('input.msg'); let msg = this.node.find('input.msg');
if (username.length > 0 && message.length > 0) { if (msg.length > 0) {
let message = JSON.stringify({ let message = JSON.stringify({
topic: this.sanitizeInput(this.config.topic), topic: this.sanitizeInput(this.config.topic),
payload: this.sanitizeInput(username.val() + ':' + msg.val()) payload: this.sanitizeInput(msg.val())
}); });
this.ctx.ws.send(message); this.ctx.ws.send(message);
msg.val(''); msg.val('');

6
src/pages/index.html
View File

@@ -73,8 +73,10 @@
<div class="Form" data-fileName="/config.json" data-name="configForm" data-from="/config.json" data-endpoint="/config"></div> <div class="Form" data-fileName="/config.json" data-name="configForm" data-from="/config.json" data-endpoint="/config"></div>
<h2>NeoPixel</h2> <h2>NeoPixel</h2>
<div class="Form" data-fileName="/pixelConfig.json" data-name="configForm" data-from="/pixelConfig.json" data-endpoint="/config"></div> <div class="Form" data-fileName="/pixelConfig.json" data-name="configForm" data-from="/pixelConfig.json" data-endpoint="/config"></div>
<h2>MQTT</h2> <!-- <h2>MQTT</h2>
<div class="Form" data-fileName="/mqttConfig.json" data-name="configForm" data-from="/mqttConfig.json" data-endpoint="/config"></div> <div class="Form" data-fileName="/mqttConfig.json" data-name="configForm" data-from="/mqttConfig.json" data-endpoint="/config"></div> -->
<h2>IRC</h2>
<div class="Form" data-fileName="/ircConfig.json" data-name="configForm" data-from="/ircConfig.json" data-endpoint="/config"></div>
</div> </div>
</div> </div>
<div class="settings container collapsible"> <div class="settings container collapsible">