Skip to content

Wifi list implemented #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Wifi list implemented #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
462144b
Title change
Apr 5, 2024
5c1e0bd
List component
Apr 11, 2024
0742cdf
List implemented
Apr 17, 2024
5c8ac12
Increased timeout and improved style
Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"mos.port": "COM6",
"mos.board": "ESP32"
}
124 changes: 75 additions & 49 deletions fs/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,97 @@
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);

function DropdownList({ networks, onSelect }) {
return html`
<select onChange=${(e) => onSelect(e.target.value)}>
${networks.map(
(option) => html`<option value=${option}>${option}</option>`
)}
</select>
`;
}

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 => ({
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 => {
// 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));
this.setState({ connected: true });
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);
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 });
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};
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`
<div class="container">
<h1>${props.title}</h1>
<div style="text-align: right; font-size:small;">Websocket connected:
<b> ${state.connected ? 'yes' : 'no'}</b></div>
return html` <div class="container">
<h1>${props.title}</h1>
<div style="text-align: right; font-size:small;">
Websocket connected: <b> ${state.connected ? "yes" : "no"}</b>
</div>

<div style="display: flex; flex-direction: column; margin: 2em 0;">
<div style="display: flex; margin: 0.2em 0;">
<label style="width: 33%;">WiFi network:</label>
<input type="text"
onInput=${onssid} style="flex:1;" />
</div>
<div style="display: flex; margin: 0.2em 0;">
<label style="width: 33%;">WiFi password:</label>
<input type="text"
onInput=${onpass} style="flex:1;" />
</div>
<button class="btn" style="margin: 0.3em 0; width: 100%;
background: ${state.ssid ? '#2079b0' : '#ccc'}"
onclick=${onclick} disabled=${!state.ssid}>
<span class=${state.spin ? 'spin' : ''} /> Save WiFi settings
</button>
<div style="display: flex; margin: 0.2em 0;">
<label style="width: 33%;">WiFi network:</label>
<${DropdownList} networks=${state.wifiNets} onSelect=${onssid} style="flex:1;" />
</div>
<div style="display: flex; margin: 0.2em 0;">
<label style="width: 33%;">WiFi password:</label>
<input type="text" onInput=${onpass} style="flex:1;" />
</div>
<button
class="btn"
style="margin: 0.3em 0; width: 100%;
background: ${state.ssid ? "#2079b0" : "#ccc"}"
onclick=${onclick}
disabled=${!state.ssid}
>
<span class=${state.spin ? "spin" : ""} /> Save WiFi settings
</button>
</div>

<h4>JSON-RPC over WebSocket log:</h4>
<pre class="log">${state.frames.join('\n')}</pre>
</div>`;
<h4>JSON-RPC over WebSocket log:</h4>
<pre class="log">${state.frames.join("\n")}</pre>
</div>`;
}
}

render(html`<${App} title="Mongoose OS Configurator" />`, document.body);
render(html`<${App} title="HANPortReader Configurator" />`, document.body);
27 changes: 27 additions & 0 deletions fs/wifinets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<select>
{categories.map((wifinet) => (
<option key={wifinet._id} value={wifinet._id}>
{wifinet.name}
</option>
))}
</select>
);
};

export default WifiNets;