move to new skeleton

tutorials/webui/webui-preact/web_root/main.js

@@ -0,0 +1,86 @@
+'use strict';
+import { h, html, render, useEffect, useState } from './preact.min.js';
+
+
+const Configuration = function (props) {
+  const [url, setUrl] = useState(props.config.url || '');
+  const [pub, setPub] = useState(props.config.pub || '');
+  const [sub, setSub] = useState(props.config.sub || '');
+
+  useEffect(() => {
+    setUrl(props.config.url);
+    setPub(props.config.pub);
+    setSub(props.config.sub);
+  }, [props.config]);
+
+  const update = (name, val) =>
+    fetch('/api/config/set', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        [name]: val
+      })
+    })
+      .catch(err => {
+        console.log(err);
+        enable(false);
+      });
+
+  const updateurl = ev => update('url', url);
+  const updatepub = ev => update('pub', pub);
+  const updatesub = ev => update('sub', sub);
+
+  return html`
+<h3 style="background: #c03434; color: #fff; padding: 0.4em;">
+  Device Configuration</h3>
+<div style="margin: 0.5em 0; display: flex;">
+  <span class="addon nowrap">MQTT server:</span>
+  <input type="text" style="flex: 1 100%;"
+        value=${url} onchange=${updateurl}
+        oninput=${ev => setUrl(ev.target.value)} />
+  <button class="btn" disabled=${!url} onclick=${updateurl}
+    style="margin-left: 1em; background: #8aa;">Update</button>
+</div>
+<div style="margin: 0.5em 0; display: flex; ">
+  <span class="addon nowrap">Subscribe topic:</span>
+  <input type="text" style="flex: 1 100%;"
+      value=${sub} onchange=${updatesub}
+      oninput=${ev => setSub(ev.target.value)} />
+  <button class="btn" disabled=${!sub} onclick=${updatesub}
+    style="margin-left: 1em; background: #8aa;">Update</button>
+</div>
+<div style="margin: 0.5em 0; display: flex;">
+  <span class="addon nowrap">Publish topic:</span>
+  <input type="text" style="flex: 1 100%;"
+        value=${pub} onchange=${updatepub}
+        oninput=${ev => setPub(ev.target.value)} />
+  <button class="btn" disabled=${!pub} onclick=${updatepub}
+    style="margin-left: 1em; background: #8aa;">Update</button>
+</div>`;
+};
+
+
+const App = function (props) {
+  const [config, setConfig] = useState({});
+
+  const getconfig = () =>
+    fetch('/api/config/get')
+      .then(r => r.json())
+      .then(r => setConfig(r))
+      .catch(err => console.log(err));
+
+  useEffect(() => {
+    getconfig();
+  }, []);
+
+  return html`
+<h1>Basic Preact-based UI demo</h1>
+<div class="col col-6">
+  ${h(Configuration, { config })}
+</div>
+<button onclick=${getconfig}>Get configuration</button>`;
+};
+
+window.onload = () => render(h(App), document.body);