Refactor UART example

examples/uart-bridge/web_root/main.js

@@ -7,24 +7,36 @@ const Message = m => html`<span
 </span>`;
 
 const App = function(props) {
-  const [cfg, setCfg] = useState({tcp: '', ws: ''});
+  const [cfg, setCfg] = useState({tcp: {}, ws: {}, mqtt: {}});
   const [messages, setMessages] = useState([]);
-  const [txt, setTxt] = useState('');
   const [connected, setConnected] = useState(false);
+  const [txt, setTxt] = useState('');
   const [ws, setWs] = useState(null);
+  const [rx, setRx] = useState('');
+  const [tx, setTx] = useState('');
+  const [baud, setBaud] = useState('');
+  const [tcpport, setTcpport] = useState(4001);
+  const [wsport, setWsport] = useState(4002);
+  const [mqtt, setMqtt] = useState('');
 
-  const tcp_port = cfg.tcp.split(':')[2] || 4001;
-  const ws_port = cfg.ws.split(':')[2] || 4002;
+  // const tcp_port = cfg.tcp.split(':')[2] || 4001;
+  // const ws_port = cfg.ws.split(':')[2] || 4002;
 
-  const refresh = () =>
-      fetch('/api/config/get').then(r => r.json()).then(r => setCfg(r));
+  const refresh = () => fetch('/api/config/get').then(r => r.json()).then(r => {
+    setTx(r.tx), setRx(r.rx), setBaud(r.baud), setCfg(r);
+    setTcpport(r.tcp.url.split(':')[2] || 4001);
+    setWsport(r.ws.url.split(':')[2] || 4002);
+    setMqtt(r.mqtt.url);
+  });
 
   const watchWebsocket = function() {
     // Connect to websocker port, to implement WS console
-    var l = window.location, proto = l.protocol.replace('http', 'ws');
-    var tid, url = `${proto}//${l.hostname}:${ws_port}/ws`;
-    console.log(url);
     var reconnect = function() {
+      var port;
+      setWsport(x => port = x);
+      var l = window.location, proto = l.protocol.replace('http', 'ws');
+      var tid, url = `${proto}//${l.hostname}:${port}/ws`;
+      // console.log(url);
       var ws = new WebSocket(url);
       ws.onopen = () => {
         setConnected(true);
@@ -56,25 +68,81 @@ const App = function(props) {
     setTxt('');
   };
 
+  const onchange = ev => false;
+
   return html`
 <div class="container">
-  <h1>UART \u27F7 network bridge </h1>
-  <h3>UART settings</h3>
+  <h1 style="margin-bottom: 0;">UART \u27F7 network bridge </h1>
   <pre class="d-none">${JSON.stringify(cfg, null, 2)}</pre>
-  <p>RX pin ${cfg.rx}, TX pin ${cfg.tx}, baud ${cfg.baud}</p>
-  <h3>TCP listener: port ${tcp_port}</h3>
-  <p>Use netcat to connect:</p>
-  <div class="msg"> $ nc ${location.hostname} ${tcp_port} </div>
-  <h3>Websocket listener: port ${ws_port}</h3>
-  <div>UART console. Status: ${connected ? 'connected' : 'disconnected'}</div>
+  <div class="row">
+    <div class="col col-4">
+      <h3>UART configuration</h3>
+      <div class="d-flex pr-1 my-1">
+        <label class="addon">UART TX pin</label>
+        <input style="width: 5em;" value=${tx} onchange=${onchange}
+          oninput=${ev => setTx(ev.target.value)} />
+      </div><div class="d-flex pr-1 my-1">
+        <label class="addon">UART RX pin</label>
+        <input style="width: 5em;" value=${rx} onchange=${onchange}
+          oninput=${ev => setRx(ev.target.value)} />
+      </div><div class="d-flex pr-1 my-y">
+        <label class="addon">UART Baud</label>
+        <input style="width: 5em;" value=${baud} onchange=${onchange}
+          oninput=${ev => setBaud(ev.target.value)} />
+      </div>
+    </div>
+    <div class="col col-8">
+      <h3>Network configuration</h3>
+      <div class="d-flex my-1">
+        <label class="addon">Local TCP port</label>
+        <input style="min-width: 4em; flex: 1 100%;"
+          value=${tcpport} onchange=${onchange}
+          oninput=${ev => setTcpport(ev.target.value)} />
+        <label class="ml-1 d-flex label"><input type="checkbox"
+          checked=${cfg.tcp.enable} /> enable</label>
+      </div><div class="d-flex my-1">
+        <label class="addon">Local WS port</label>
+        <input style="flex: 1 100%;"
+          value=${wsport} onchange=${onchange}
+          oninput=${ev => setWsport(ev.target.value)} />
+        <label class="ml-1 d-flex label"><input type="checkbox"
+          checked=${cfg.ws.enable} /> enable</label>
+      </div><div class="d-flex my-1">
+        <label class="addon">Remote MQTT</label>
+        <input style="flex: 1 100%;"
+          value=${mqtt} onchange=${onchange}
+          oninput=${ev => setMqtt(ev.target.value)} />
+        <label class="ml-1 d-flex label"><input type="checkbox"
+          checked=${cfg.mqtt.enable} /> enable</label>
+      </div>
+    </div>
+  </div>
+
+  <div class="msg">
+    Note: to connect over MQTT, 
+      go to <a href="http://www.hivemq.com/demos/websocket-client/">
+        console</a>, subscribe to b/tx and publish to b/rx<br/>
+    Note: to connect over TCP, use netcat utility:<br/>
+    $ nc ${location.hostname} ${tcpport}
+  </div>
+
+  <div style="margin-top: 2em;">
+    <b>UART console</b><span style="margin-left: 1em; color: #777;">works 
+    over the local WS port. WebSocket status: </span><span
+      style="color: ${connected ? 'teal' : 'red'};">
+      \u25cf ${connected ? 'connected' : 'disconnected'} </span>
+  </div>
+  <div style="margin: 0.5em 0; display: flex">
+    <input placeholder="to send data, type and press enter..." style="flex: 1 100%;"
+      value=${txt} onchange=${sendmessage}
+      oninput=${ev => setTxt(ev.target.value)} />
+    <button style="margin-left: 1em;"
+      onclick=${ev => setMessages([])}>clear</button>
+  </div>
   <pre style="height: 15em; overflow: auto;">
     ${messages.map(message => h(Message, {message}))}
   </pre>
-  <div style="margin: 0.5em 0; display: flex">
-    <input placeholder="type and press enter..." style="flex: 1 100%;"
-      value=${txt} onchange=${sendmessage}
-      oninput=${ev => setTxt(ev.target.value)} />
-  </div>
+
 </div>`;
 };