GUI improvements:

- Add help texts.
- Fix dialogs
- Fix room selection
This commit is contained in:
Jochen Friedrich 2020-02-27 11:52:06 +00:00
parent 58364cd0de
commit 07b86a33a1
4 changed files with 113 additions and 44 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 255 B

After

Width:  |  Height:  |  Size: 3.6 KiB

View file

@ -40,38 +40,61 @@
<script type="text/x-red" data-template-name="matrix-server"> <script type="text/x-red" data-template-name="matrix-server">
<div class="form-row"> <div class="form-row">
<label for="node-config-input-name"><i class="icon-tag"></i> Name</label> <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-config-input-name"> <input type="text" id="node-config-input-name">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-config-input-server"><i class="icon-bookmark"></i> Server</label> <label for="node-config-input-server"><i class="fa fa-globe"></i> Server</label>
<input type="text" id="node-config-input-server"> <input type="text" id="node-config-input-server">
</div> </div>
<hr align="middle">
<div class="form-row"> <div class="form-row">
<label for="node-config-input-user"><i class="icon-bookmark"></i> Username</label> <i class="fa fa-wrench"></i> Generate Token
</div>
<div class="form-row">
<label for="node-config-input-user"><i class="fa fa-user"></i> Username</label>
<input type="text" id="node-config-input-user"> <input type="text" id="node-config-input-user">
</div> <label for="node-config-input-pass"><i class="fa fa-lock"></i> Password</label>
<div class="form-row">
<label for="node-config-input-pass"><i class="icon-bookmark"></i> Password</label>
<input type="text" id="node-config-input-pass"> <input type="text" id="node-config-input-pass">
<button type="button" id="node-config-input-generate" class="red-ui-button"><i class='fa fa-refresh'></i></button>
</div> </div>
<hr align="middle">
<div class="form-row"> <div class="form-row">
<label for="node-config-input-userid"><i class="icon-bookmark"></i> UserId</label> <label for="node-config-input-userid"><i class="fa fa-user"></i> UserId</label>
<input type="text" id="node-config-input-userid"> <input type="text" id="node-config-input-userid">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-config-input-token"><i class="icon-bookmark"></i> Token</label> <label for="node-config-input-token"><i class="fa fa-tag"></i> Token</label>
<span> <input type="text" id="node-config-input-token">
<input type="text" id="node-config-input-token">
<button type="button" id="node-config-input-generate" class="red-ui-button"><i class='fa fa-refresh'></i></button>
</span>
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-config-input-room"><i class="icon-bookmark"></i> Default Room</label> <label for="node-config-input-room"><i class="fa fa-tag"></i> Default Room</label>
<input type="text" id="node-config-input-room"> <input type="text" id="node-config-input-room">
</div> </div>
</script> </script>
<script type="text/x-red" data-help-name="matrix-server">
<h2>Matrix server configuration</h2>
<h3>The configuration of your matrix homeserver</h3>
<p>The configuration needs a server URL, a userid and an access token:</p>
<dl class="message-properties">
<dt>server<span class="property-type">string</span></dt>
<dd>the matrix server URL to connect to.</dd>
<dt>userid<span class="property-type">string</span></dt>
<dd>the matrix id of the user. Usually @user:server.</dd>
<dt>token<span class="property-type">string</span></dt>
<dd>the access token.</dd>
</dl>
<p>If your server supports logging in useing userid and password, you can fill in
server, user and password and press the generate button. This will make your browser
log in to your matrix account and pull matrix id and access token automatically.</p>
<p>Optionally, a default room might be specified:</p>
<dl class="message-properties">
<dt>room<span class="property-type">string</span></dt>
<dd>default matrix room to use.</dd>
</dl>
</script>
<!-- INPUT Node "matrix-input" --> <!-- INPUT Node "matrix-input" -->
<script type="text/javascript"> <script type="text/javascript">
@ -95,25 +118,34 @@
<script type="text/x-red" data-template-name="matrix-input"> <script type="text/x-red" data-template-name="matrix-input">
<div class="form-row"> <div class="form-row">
<label for="node-input-server"><i class="icon-tag"></i> Server</label> <label for="node-input-server"><i class="fa fa-globe"></i> Server</label>
<input type="text" id="node-input-server" placeholder="Server"> <input type="text" id="node-input-server" placeholder="Server">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Name</label> <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name"> <input type="text" id="node-input-name" placeholder="Name">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-room"><i class="icon-tag"></i> Room</label> <label for="node-input-room"><i class="fa fa-tag"></i> Room</label>
<input type="text" id="node-input-room" placeholder="Room"> <input type="text" id="node-input-room" placeholder="Room">
</div> </div>
<div class="form-row"> <input type="checkbox" id="node-input-filterself" placeholder="Filterself">&nbsp;&nbsp;Filter events sent by self
<label for="node-input-filterself"><i class="icon-tag"></i> Filter events sent by self</label>
<input type="checkbox" id="node-input-filterself" placeholder="Filterself">
</div>
</script> </script>
<script type="text/x-red" data-help-name="matrix-input"> <script type="text/x-red" data-help-name="matrix-input">
<p>Matrix input node</p> <h2>Matrix input node</h2>
<h3>This node receives matrix events of type org.nodered.msg and emits the content as a node-red msg.</h3>
<p>The configuration has there parameters:</p>
<dl class="message-properties">
<dt>server<span class="property-type">matrix server configuration</span></dt>
<dd>the matrix server URL to connect to.</dd>
<dt>name<span class="property-type">string</span></dt>
<dd>the name of the node.</dd>
<dt>room<span class="property-type">string</span></dt>
<dd>the room to receive messages from. If empty, all rooms are used the matrix user has joined.</dd>
<dt>Events sent by self<span class="property-type">boolean</span></dt>
<dd>If uncheked, the node will receive its own messages.</dd>
</dl>
</script> </script>
<!-- INPUT Node "matrix-recvtext" --> <!-- INPUT Node "matrix-recvtext" -->
@ -139,25 +171,34 @@
<script type="text/x-red" data-template-name="matrix-recvtext"> <script type="text/x-red" data-template-name="matrix-recvtext">
<div class="form-row"> <div class="form-row">
<label for="node-input-server"><i class="icon-tag"></i> Server</label> <label for="node-input-server"><i class="fa fa-globe"></i> Server</label>
<input type="text" id="node-input-server" placeholder="Server"> <input type="text" id="node-input-server" placeholder="Server">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Name</label> <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name"> <input type="text" id="node-input-name" placeholder="Name">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-room"><i class="icon-tag"></i> Room</label> <label for="node-input-room"><i class="fa fa-tag"></i> Room</label>
<input type="text" id="node-input-room" placeholder="Room"> <input type="text" id="node-input-room" placeholder="Room">
</div> </div>
<div class="form-row"> <input type="checkbox" id="node-input-filterself" placeholder="Filterself">&nbsp;&nbsp;Filter events sent by self
<label for="node-input-filterself"><i class="icon-tag"></i> Filter events sent by self</label>
<input type="checkbox" id="node-input-filterself" placeholder="Filterself">
</div>
</script> </script>
<script type="text/x-red" data-help-name="matrix-recvtext"> <script type="text/x-red" data-help-name="matrix-recvtext">
<p>Matrix receive text node</p> <h2>Matrix receive text node</h2>
<h3>This node receives messages of type m.text and emits the content is a node-red msg.payload</h3>
<p>The configuration has there parameters:</p>
<dl class="message-properties">
<dt>server<span class="property-type">matrix server configuration</span></dt>
<dd>the matrix server URL to connect to.</dd>
<dt>name<span class="property-type">string</span></dt>
<dd>the name of the node.</dd>
<dt>room<span class="property-type">string</span></dt>
<dd>the room to receive messages from. If empty, all rooms are used the matrix user has joined.</dd>
<dt>Events sent by self<span class="property-type">boolean</span></dt>
<dd>If uncheked, the node will receive its own messages.</dd>
</dl>
</script> </script>
<!-- OUTPUT Node "matrix-output" --> <!-- OUTPUT Node "matrix-output" -->
@ -182,21 +223,31 @@
<script type="text/x-red" data-template-name="matrix-output"> <script type="text/x-red" data-template-name="matrix-output">
<div class="form-row"> <div class="form-row">
<label for="node-input-server"><i class="icon-tag"></i> Server</label> <label for="node-input-server"><i class="fa fa-globe"></i> Server</label>
<input type="text" id="node-input-server" placeholder="Server"> <input type="text" id="node-input-server" placeholder="Server">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Name</label> <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name"> <input type="text" id="node-input-name" placeholder="Name">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-room"><i class="icon-tag"></i> Room</label> <label for="node-input-room"><i class="fa fa-tag"></i> Room</label>
<input type="text" id="node-input-room" placeholder="Room"> <input type="text" id="node-input-room" placeholder="Room">
</div> </div>
</script> </script>
<script type="text/x-red" data-help-name="matrix-output"> <script type="text/x-red" data-help-name="matrix-output">
<p>Matrix output node</p> <h2>Matrix output node</h2>
<h3>This node sends node-red msg messages to matrix as content of org.nodered.msg matrix events.</h3>
<p>The configuration has there parameters:</p>
<dl class="message-properties">
<dt>server<span class="property-type">matrix server configuration</span></dt>
<dd>the matrix server URL to connect to.</dd>
<dt>name<span class="property-type">string</span></dt>
<dd>the name of the node.</dd>
<dt>room<span class="property-type">string</span></dt>
<dd>the room to send messages to. If empty, the default room will be used. If this is empty, too, the message won't be sent.</dd>
</dl>
</script> </script>
<!-- OUTPUT Node "matrix-sendtext" --> <!-- OUTPUT Node "matrix-sendtext" -->
@ -222,24 +273,40 @@
<script type="text/x-red" data-template-name="matrix-sendtext"> <script type="text/x-red" data-template-name="matrix-sendtext">
<div class="form-row"> <div class="form-row">
<label for="node-input-server"><i class="icon-tag"></i> Server</label> <label for="node-input-server"><i class="fa fa-globe"></i> Server</label>
<input type="text" id="node-input-server" placeholder="Server"> <input type="text" id="node-input-server" placeholder="Server">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-name"><i class="icon-tag"></i> Name</label> <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name"> <input type="text" id="node-input-name" placeholder="Name">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-input-room"><i class="icon-tag"></i> Room</label> <label for="node-input-room"><i class="fa fa-tag"></i> Room</label>
<input type="text" id="node-input-room" placeholder="Room"> <input type="text" id="node-input-room" placeholder="Room">
</div> </div>
<div class="form-row"> <input type="checkbox" id="node-input-notice" placeholder="Notice">&nbsp;&nbsp; Send Text as m.notice (silent)
<label for="node-input-notice"><i class="icon-tag"></i> Send Text as m.notice (silent)</label>
<input type="checkbox" id="node-input-notice" placeholder="Notice">
</div>
</script> </script>
<script type="text/x-red" data-help-name="matrix-sendtext"> <script type="text/x-red" data-help-name="matrix-sendtext">
<p>Matrix send text node</p> <h2>Matrix send text node</h2>
<h3>This node sends messages to matrix as m.text matrix events.</h3>
<p>The configuration has there parameters:</p>
<dl class="message-properties">
<dt>server<span class="property-type">matrix server configuration</span></dt>
<dd>the matrix server URL to connect to.</dd>
<dt>name<span class="property-type">string</span></dt>
<dd>the name of the node.</dd>
<dt>room<span class="property-type">string</span></dt>
<dd>the room to send messages to. The order to choose the room to send message to is:
<ul>
<dd>msg.roomId</dd>
<dd>The room specified here</dd>
<dd>The default room specified in the server</dd>
</ul>
If no room can be found, the message won't be sent.
</dd>
<dt>send text as m.notice<span class="property-type">boolean</span></dt>
<dd>Use m.notice sub type to send messages silent</dd>
</dl>
</script> </script>

View file

@ -162,7 +162,7 @@ module.exports = function(RED) {
var msg = { var msg = {
payload: event.getContent().body, payload: event.getContent().body,
sender: event.getSender(), sender: event.getSender(),
room: room.roomId roomId: room.roomId
}; };
node.send(msg); node.send(msg);
@ -254,7 +254,9 @@ module.exports = function(RED) {
} }
var destRoom = ""; var destRoom = "";
if (node.room) { if (msg.roomId) {
destRoom = msg.roomId;
} else if (node.room) {
destRoom = node.room; destRoom = node.room;
} else if (node.configNode.room) { } else if (node.configNode.room) {
destRoom = node.configNode.room; destRoom = node.configNode.room;

View file

@ -1,6 +1,6 @@
{ {
"name": "node-red-contrib-matrix", "name": "node-red-contrib-matrix",
"version": "0.0.3", "version": "0.0.4",
"description": "Node-RED Module for Matrix", "description": "Node-RED Module for Matrix",
"main": "matrix.js", "main": "matrix.js",
"dependencies": { "dependencies": {