TobiasH/smart-monopoly
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects 1 Releases Wiki Activity

Add wifi scan ability and prepared connecting

Browse Source
This commit is contained in:
Tobias Hopp
2024-03-28 04:17:53 +01:00
parent 900b07f088
commit 2d7186c7c9
12 changed files with 429 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/web/WiFi.tsx
View File

@ -1,42 +1,115 @@
import {Component} from "react";
import {Backdrop, Box, Button, CircularProgress, Fade, Modal, Stack, Typography} from "@mui/material";
import React, {Component} from "react";
import {
Alert,
Backdrop,
Box,
Button,
CircularProgress,
Fade,
FormControl, InputLabel, LinearProgress,
MenuItem,
Modal,
Select, SelectChangeEvent,
Stack,
Typography
} from "@mui/material";
import WifiPasswordIcon from "@mui/icons-material/WifiPassword";
import WifiIcon from "@mui/icons-material/Wifi";
import {IPCAnswer, WiFiNetwork} from "../IPCConstants";
interface WiFiState {
open: boolean,
currentSelection: string,
foundWiFis: WiFiNetwork[],
scanning: boolean,
status: status
}
type status = "NONE" | "SELECTION_FAILURE" | "CONNECTING" | "PASSWORD_NEEDED" | "FAILURE" | "CONNECTED" | 'SCAN_FAILURE';
export default class WiFi extends Component<{}, WiFiState> {
constructor(props: {}) {
super(props);
this.state = {
open: false,
open: true,
currentSelection: "pleaseSelect",
foundWiFis: [],
scanning: false,
status: "NONE",
};
}
componentDidMount() {
setTimeout( () => this.setState({open: true}), 500);
this.scanWifi();
}
style = {
position: 'absolute' as 'absolute',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
width: '50%',
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};
handleClose = () => {
scanWifi = () => {
this.setState((prevState) => ({
...prevState,
open: false
//currentSelection: "pleaseSelect",
//foundWiFis: [],
scanning: true,
}));
window.api.request('WIFI_SCAN', {}).then((answer: IPCAnswer) => {
if(answer.status)
this.setState((prevState) => ({
...prevState,
foundWiFis: answer.data as WiFiNetwork[],
scanning: false
}));
else
this.setState((prevState) => ({
...prevState,
status: "SCAN_FAILURE",
scanning: false
}));
});
}
window.api.request("WIFI_CONNECT", {});
handleClose = () => {
window.app.toggleWiFiSettings(false);
}
handleConnect = () => {
if(this.state.currentSelection == "pleaseSelect")
{
return this.setState((prevState) => ({
...prevState,
status: "SELECTION_FAILURE"
}));
}
this.setState((prevState) => ({
...prevState,
status: "CONNECTING"
}));
window.api.request('WIFI_CONNECT', {data: this.state.currentSelection}).then((answer: IPCAnswer) => {
this.setState((prevState) => ({
...prevState,
status: answer.status ? "CONNECTED" : "FAILURE"
}));
})
}
onChange = (event: SelectChangeEvent) => {
this.setState((prevState) => ({
...prevState,
currentSelection: event.target.value
}));
}
render() {
@ -55,18 +128,84 @@ export default class WiFi extends Component<{}, WiFiState> {
>
<Fade in={this.state.open}>
<Box sx={this.style}>
<Box sx={{width: '100%', mb: 2}}>
{(this.state.scanning||this.state.status == "CONNECTING") && <LinearProgress/>}
</Box>
<Typography id="transition-modal-title" variant="h6" component="h2">
WiFi Verbindungsmanager
</Typography>
<Typography id="transition-modal-description" sx={{mt: 2}}>
Folgende Netzwerke wurden gefunden...
<Alert variant={this.state.status == "FAILURE" ? "filled" : "standard"}
severity={this.state.status.includes("FAILURE") ? "error" : "info"}>
{this.state.status == "NONE" && "Bitte wählen Sie eins der folgenden Netzwerke aus"}
{this.state.status == "CONNECTING" && "Verbinden..." }
{this.state.status == "SCAN_FAILURE" && "Das Scannen ist fehlgeschlagen. - Möglicherweise fehlen Berechtigungen, um Netzwerke zu scannen, oder es befindet sich kein WLAN-Interface auf diesem Gerät." }
{this.state.status == "FAILURE" && "Verbindungsfehler!" }
{this.state.status == "SELECTION_FAILURE" && "Bitte zunächst ein Netzwerk auswählen!" }
</Alert>
<br/>
<i>Dafür wird eine WiFi-Verbindung hergestellt</i>
<FormControl sx={{m: 1, minWidth: '70%'}} error={this.state.status == "SELECTION_FAILURE"}>
<InputLabel id="wifi-select-label">WiFi</InputLabel>
<Select
labelId="wifi-select-label"
id="wifi-select"
value={this.state.currentSelection}
label="Age"
disabled={this.state.scanning}
onChange={this.onChange}
>
<MenuItem disabled={true} value="pleaseSelect">Bitte wählen...</MenuItem>
{this.state.foundWiFis.map((wifi: WiFiNetwork) => (
<MenuItem value={wifi.ssid}>{wifi.ssid} {wifi.isSecured ? <WifiPasswordIcon sx={{ml: 1}}/> :
<WifiIcon sx={{ml: 1}}/>}</MenuItem>
))};
{null}
</Select>
</FormControl>
<FormControl sx={{mt: 2, minWidth: '5%'}}>
<Button variant="contained" disabled={this.state.scanning || this.state.status == "CONNECTING"} onClick={() => this.scanWifi()}>Aktualisieren
{this.state.scanning && (
<CircularProgress
size={24}
sx={{
position: 'absolute',
top: '50%',
left: '50%',
marginTop: '-12px',
marginLeft: '-12px',
}}
/>
)}</Button>
</FormControl>
<br/>
<br/>
<Button variant="contained" onClick={() => this.handleClose()}>Ja !</Button>
<Button variant="contained" onClick={() => null}
color="error">Nein</Button>
<FormControl sx={{mr: 2, minWidth: '20%'}}>
<Button variant="contained" disabled={this.state.status == "CONNECTING" || this.state.scanning}
onClick={() => this.handleConnect()}>Verbinden
{this.state.status == "CONNECTING" && (
<CircularProgress
size={24}
sx={{
position: 'absolute',
top: '50%',
left: '50%',
marginTop: '-12px',
marginLeft: '-12px',
}}
/>
)}</Button>
</FormControl>
<FormControl sx={{ml: 2, minWidth: '20%'}}>
<Button variant="contained" disabled={this.state.status == "CONNECTING"}
onClick={() => this.handleClose()}
color="error">Abbrechen</Button>
</FormControl>
</Typography>
</Box>
</Fade>