2024-03-27 14:06:04 +01:00

72 lines
2.1 KiB
TypeScript

import {Component} from "react";
import {Backdrop, Box, Button, CircularProgress, Fade, Modal, Stack, Typography} from "@mui/material";
interface WiFiState {
open: boolean,
}
export default class WiFi extends Component<{}, WiFiState> {
constructor(props: {}) {
super(props);
this.state = {
open: false,
};
}
componentDidMount() {
setTimeout( () => this.setState({open: true}), 500);
}
style = {
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};
handleClose = () => this.setState((prevState) => ({
...prevState,
open: false
}));
render() {
return <Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={this.state.open}
onClose={null}
closeAfterTransition
slots={{backdrop: Backdrop}}
slotProps={{
backdrop: {
timeout: 500,
},
}}
>
<Fade in={this.state.open}>
<Box sx={this.style}>
<Typography id="transition-modal-title" variant="h6" component="h2">
WiFi Verbindungsmanager
</Typography>
<Typography id="transition-modal-description" sx={{mt: 2}}>
Folgende Netzwerke wurden gefunden...
<br/>
<i>Dafür wird eine WiFi-Verbindung hergestellt</i>
<br/>
<br/>
<Button variant="contained" onClick={() => null}>Ja</Button>
<Button variant="contained" onClick={() => null}
color="error">Nein</Button>
</Typography>
</Box>
</Fade>
</Modal>
}
}