From 462144b6a9bc59bf9c06ce5aebe0b13a3aea766f Mon Sep 17 00:00:00 2001 From: Tommy Ekh Date: Fri, 5 Apr 2024 23:52:09 +0200 Subject: [PATCH 1/4] Title change --- fs/main.js | 98 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 50 insertions(+), 48 deletions(-) diff --git a/fs/main.js b/fs/main.js index 0947450..ef6ad16 100644 --- a/fs/main.js +++ b/fs/main.js @@ -1,71 +1,73 @@ -import htm from './htm.min.js'; -import {Component, h, render} from './preact.min.js'; +import htm from "./htm.min.js"; +import { Component, h, render } from "./preact.min.js"; const html = htm.bind(h); class App extends Component { - state = {connected: false, ssid: '', pass: '', spin: false, frames: []}; + state = { connected: false, ssid: "", pass: "", spin: false, frames: [] }; componentDidMount() { const logframe = (marker, frame) => { - this.setState( - state => ({ - connected: state.connected, - frames: state.frames.concat(marker + JSON.stringify(frame)) - })); + this.setState((state) => ({ + connected: state.connected, + frames: state.frames.concat(marker + JSON.stringify(frame)), + })); }; // Setup JSON-RPC engine - var rpc = mkrpc('ws://' + location.host + '/rpc'); - rpc.onopen = ev => { + var rpc = mkrpc("ws://" + location.host + "/rpc"); + rpc.onopen = (ev) => { // When RPC is connected, fetch list of supported RPC services - this.setState({connected: true}); - rpc.call('RPC.List').then(res => console.log(res)); + this.setState({ connected: true }); + rpc.call("RPC.List").then((res) => console.log(res)); }; - rpc.onclose = ev => this.setState({connected: false}); - rpc.onout = ev => logframe('-> ', ev); - rpc.onin = ev => logframe('<- ', ev); + rpc.onclose = (ev) => this.setState({ connected: false }); + rpc.onout = (ev) => logframe("-> ", ev); + rpc.onin = (ev) => logframe("<- ", ev); this.rpc = rpc; } render(props, state) { - const onssid = ev => this.setState({ssid: ev.target.value}); - const onpass = ev => this.setState({pass: ev.target.value}); - const onclick = ev => { + const onssid = (ev) => this.setState({ ssid: ev.target.value }); + const onpass = (ev) => this.setState({ pass: ev.target.value }); + const onclick = (ev) => { // Button press. Update device's configuration - var sta = {enable: true, ssid: state.ssid, pass: state.pass}; - var config = {wifi: {sta: sta, ap: {enable: false}}}; + var sta = { enable: true, ssid: state.ssid, pass: state.pass }; + var config = { wifi: { sta: sta, ap: { enable: false } } }; // var config = {debug: {level: +state.ssid}}; - this.setState({spin: true}); - this.rpc.call('Config.Set', {config, save: true, reboot: true}) - .catch(err => alert('Error: ' + err)) - .then(ev => this.setState({spin: false})); + this.setState({ spin: true }); + this.rpc + .call("Config.Set", { config, save: true, reboot: true }) + .catch((err) => alert("Error: " + err)) + .then((ev) => this.setState({ spin: false })); }; - return html` -
-

${props.title}

-
Websocket connected: - ${state.connected ? 'yes' : 'no'}
+ return html`
+

${props.title}

+
+ Websocket connected: ${state.connected ? "yes" : "no"} +
-
- - -
-
- - -
- +
+ + +
+
+ + +
+
-

JSON-RPC over WebSocket log:

- 
${state.frames.join('\n')}
-
`; +

JSON-RPC over WebSocket log:

+ 
${state.frames.join("\n")}
+
`; } } -render(html`<${App} title="Mongoose OS Configurator" />`, document.body); +render(html`<${App} title="HANPortReader Configurator" />`, document.body); From 5c1e0bd900d4e9834d238cffa412742338e7cc27 Mon Sep 17 00:00:00 2001 From: Tommy Ekh Date: Thu, 11 Apr 2024 09:47:43 +0200 Subject: [PATCH 2/4] List component --- .vscode/settings.json | 4 ++++ fs/wifinets.js | 27 +++++++++++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 fs/wifinets.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..9e4a3ba --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "mos.port": "COM6", + "mos.board": "ESP32" +} diff --git a/fs/wifinets.js b/fs/wifinets.js new file mode 100644 index 0000000..19a42a2 --- /dev/null +++ b/fs/wifinets.js @@ -0,0 +1,27 @@ +// WifiNets.js +import { h } from 'preact'; +import { useState, useEffect } from 'preact/hooks'; + +const WifiNets = () => { + const [categories, setCategories] = useState([]); + + useEffect(() => { + // Fetch categories from your backend (Mongoose) + fetch('/api/categories') + .then((response) => response.json()) + .then((data) => setCategories(data.categories)) + .catch((error) => console.error('Error fetching categories:', error)); + }, []); + + return ( + + ); +}; + +export default WifiNets; From 0742cdfcdd45696e7c2d65a784f7076a57848dbc Mon Sep 17 00:00:00 2001 From: Tommy Ekh Date: Wed, 17 Apr 2024 13:54:32 +0200 Subject: [PATCH 3/4] List implemented --- fs/main.js | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/fs/main.js b/fs/main.js index ef6ad16..73b50e9 100644 --- a/fs/main.js +++ b/fs/main.js @@ -2,8 +2,26 @@ import htm from "./htm.min.js"; import { Component, h, render } from "./preact.min.js"; const html = htm.bind(h); +function DropdownList({ networks, onSelect }) { + return html` + + `; +} + class App extends Component { - state = { connected: false, ssid: "", pass: "", spin: false, frames: [] }; + state = { + connected: false, + ssid: "", + pass: "", + spin: false, + frames: [], + wifiNets: [], + }; + componentDidMount() { const logframe = (marker, frame) => { this.setState((state) => ({ @@ -12,12 +30,15 @@ class App extends Component { })); }; - // Setup JSON-RPC engine + // Setup JSON-RPC engine and Wifi list var rpc = mkrpc("ws://" + location.host + "/rpc"); rpc.onopen = (ev) => { // When RPC is connected, fetch list of supported RPC services this.setState({ connected: true }); rpc.call("RPC.List").then((res) => console.log(res)); + rpc.call("Wifi.Scan").then((res) => { + this.setState({ wifiNets: res.result.map((item) => item.ssid) }); + }); }; rpc.onclose = (ev) => this.setState({ connected: false }); rpc.onout = (ev) => logframe("-> ", ev); @@ -25,8 +46,11 @@ class App extends Component { this.rpc = rpc; } render(props, state) { - const onssid = (ev) => this.setState({ ssid: ev.target.value }); + const onssid = (ev) => this.setState({ ssid: ev }); const onpass = (ev) => this.setState({ pass: ev.target.value }); + + //const wifiOptions = ["2Apple", "Banana", "Orange"]; + // const ssidlist = this.rpc.call("RPC.Scan").then((res) => console.log(res)); const onclick = (ev) => { // Button press. Update device's configuration var sta = { enable: true, ssid: state.ssid, pass: state.pass }; @@ -47,7 +71,7 @@ class App extends Component {
- + <${DropdownList} networks=${state.wifiNets} onSelect=${onssid} />
From 5c8ac12ca4281d7ad649add2ee58136376b5690e Mon Sep 17 00:00:00 2001 From: Tommy Ekh Date: Thu, 18 Apr 2024 10:02:49 +0200 Subject: [PATCH 4/4] Increased timeout and improved style --- fs/main.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/fs/main.js b/fs/main.js index 73b50e9..bcf884d 100644 --- a/fs/main.js +++ b/fs/main.js @@ -35,10 +35,10 @@ class App extends Component { rpc.onopen = (ev) => { // When RPC is connected, fetch list of supported RPC services this.setState({ connected: true }); - rpc.call("RPC.List").then((res) => console.log(res)); - rpc.call("Wifi.Scan").then((res) => { + rpc.call("Wifi.Scan","",10000).then((res) => { this.setState({ wifiNets: res.result.map((item) => item.ssid) }); }); + rpc.call("RPC.List").then((res) => console.log(res)); }; rpc.onclose = (ev) => this.setState({ connected: false }); rpc.onout = (ev) => logframe("-> ", ev); @@ -71,7 +71,7 @@ class App extends Component {
- <${DropdownList} networks=${state.wifiNets} onSelect=${onssid} /> + <${DropdownList} networks=${state.wifiNets} onSelect=${onssid} style="flex:1;" />