Update
This commit is contained in:
@ -9,18 +9,22 @@ import {
|
||||
Typography,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogTitle, DialogContent, DialogContentText, DialogActions
|
||||
DialogTitle, DialogContent, DialogContentText, DialogActions, Chip, FormControl
|
||||
} from "@mui/material";
|
||||
import {FunctionTest} from "../IPCConstants";
|
||||
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import PlayCircleIcon from '@mui/icons-material/PlayCircle';
|
||||
import CloudOffIcon from '@mui/icons-material/CloudOff';
|
||||
import CloudIcon from '@mui/icons-material/Cloud';
|
||||
|
||||
interface StartupState {
|
||||
statusTxt: string,
|
||||
open: boolean,
|
||||
nextStep: boolean,
|
||||
cloudConnect: boolean,
|
||||
connectionIssue: boolean,
|
||||
openCloudConnectModal: boolean,
|
||||
showStartBtn: boolean,
|
||||
isConnected: boolean,
|
||||
isConnectionIssue: boolean,
|
||||
openWifiQuestion: boolean,
|
||||
startCounter: number,
|
||||
}
|
||||
|
||||
export default class Startup extends Component<{}, StartupState> {
|
||||
@ -28,19 +32,22 @@ export default class Startup extends Component<{}, StartupState> {
|
||||
super(props);
|
||||
this.state = {
|
||||
statusTxt: "Smart-Monopoly wird gestartet...",
|
||||
open: false,
|
||||
nextStep: false,
|
||||
cloudConnect: false,
|
||||
connectionIssue: false,
|
||||
openWifiQuestion: false
|
||||
openCloudConnectModal: false,
|
||||
showStartBtn: false,
|
||||
isConnected: false,
|
||||
isConnectionIssue: false,
|
||||
openWifiQuestion: false,
|
||||
startCounter: 10,
|
||||
};
|
||||
}
|
||||
|
||||
counterInterval: string | number | NodeJS.Timeout;
|
||||
|
||||
componentDidMount() {
|
||||
setTimeout(() => {
|
||||
this.setState((prevState) => ({
|
||||
...prevState,
|
||||
open: true,
|
||||
openCloudConnectModal: true,
|
||||
statusTxt: "Möchten Sie CloudConnect+ nutzen?"
|
||||
}));
|
||||
this.cloudDecision(true).then();
|
||||
@ -51,25 +58,18 @@ export default class Startup extends Component<{}, StartupState> {
|
||||
|
||||
}
|
||||
|
||||
connectToCloud = () => {
|
||||
|
||||
}
|
||||
|
||||
checkForNext = () => {
|
||||
if(this.state.cloudConnect)
|
||||
{
|
||||
// Connect to cloud
|
||||
}
|
||||
else
|
||||
{
|
||||
// Just start
|
||||
connectToCloud = async (): Promise<boolean> => {
|
||||
try {
|
||||
let response = await window.api.request("CLOUD_CONNECT", {});
|
||||
return response.status;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
handleClose = () => this.setState((prevState) => ({
|
||||
...prevState,
|
||||
open: false
|
||||
}));
|
||||
startupBtnClick = () => {
|
||||
// Startup handle
|
||||
}
|
||||
|
||||
style = {
|
||||
position: 'absolute',
|
||||
@ -83,41 +83,80 @@ export default class Startup extends Component<{}, StartupState> {
|
||||
p: 4,
|
||||
};
|
||||
|
||||
|
||||
|
||||
async cloudDecision(decision: boolean) {
|
||||
this.handleClose();
|
||||
this.setState((prevState) => ({
|
||||
...prevState,
|
||||
cloudConnect: decision,
|
||||
openWifiQuestion: false
|
||||
openWifiQuestion: false,
|
||||
openCloudConnectModal: false,
|
||||
isConnectionIssue: false,
|
||||
isConnected: false,
|
||||
startCounter: 30
|
||||
}));
|
||||
clearInterval(this.counterInterval);
|
||||
|
||||
|
||||
if(decision) {
|
||||
if (decision) {
|
||||
this.setState((prevState) => ({
|
||||
...prevState,
|
||||
statusTxt: "WiFi-Verbindung wird hergestellt..."
|
||||
statusTxt: "Internetverbindung wird geprüft..."
|
||||
}));
|
||||
|
||||
let status = (await window.api.request("FUNCTION_TEST", {})).data as FunctionTest;
|
||||
if(!status.hasInternet)
|
||||
{
|
||||
if (!status.hasInternet) {
|
||||
this.setState((prevState) => ({
|
||||
...prevState,
|
||||
openWifiQuestion: true
|
||||
openWifiQuestion: true, // Weiterleiten auf WiFiFrage
|
||||
statusTxt: "Warten auf Netzwerkkonfiguration..."
|
||||
}));
|
||||
} else {
|
||||
this.setState((prevState) => ({
|
||||
...prevState,
|
||||
statusTxt: "Warten auf Cloud...",
|
||||
}));
|
||||
|
||||
this.connectToCloud().then((connected) => {
|
||||
this.setState((prevState) => ({
|
||||
...prevState,
|
||||
statusTxt: "Bereit zum spielen?",
|
||||
showStartBtn: true,
|
||||
isConnectionIssue: !connected,
|
||||
isConnected: connected
|
||||
})
|
||||
)
|
||||
if(connected)
|
||||
this.counterInterval = setInterval(() => {
|
||||
this.setState((prevState) => ({
|
||||
...prevState,
|
||||
startCounter: prevState.startCounter-1
|
||||
}));
|
||||
if(this.state.startCounter == 0) {
|
||||
clearInterval(this.counterInterval);
|
||||
this.startupBtnClick();
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
this.checkForNext();
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.setState((prevState) => ({
|
||||
...prevState,
|
||||
statusTxt: "Ready to go!"
|
||||
statusTxt: "Bereit zum spielen?",
|
||||
showStartBtn: true,
|
||||
startCounter: 30
|
||||
}));
|
||||
this.checkForNext();
|
||||
this.counterInterval = setInterval(() => {
|
||||
this.setState((prevState) => ({
|
||||
...prevState,
|
||||
startCounter: prevState.startCounter-1
|
||||
}));
|
||||
if(this.state.startCounter == 0) {
|
||||
clearInterval(this.counterInterval);
|
||||
this.startupBtnClick();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -142,14 +181,41 @@ export default class Startup extends Component<{}, StartupState> {
|
||||
<Button onClick={() => this.cloudDecision(false)}>
|
||||
Offline nutzen
|
||||
</Button>
|
||||
<Button onClick={() => {window.app.toggleWiFiSettings(true)}} autoFocus>Einrichten</Button>
|
||||
<Button onClick={() => {
|
||||
window.app.toggleWiFiSettings(true)
|
||||
}} autoFocus>Einrichten</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<Dialog
|
||||
open={this.state.isConnectionIssue}
|
||||
onClose={null}
|
||||
aria-labelledby="alert-dialog-title"
|
||||
aria-describedby="alert-dialog-description"
|
||||
>
|
||||
<DialogTitle id="alert-dialog-title">
|
||||
Cloud-Verbindung fehlgeschlagen!
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText id="alert-dialog-description">
|
||||
Die Cloud-Verbindung konnte nicht hergestellt werden.<br/>
|
||||
Möglicherweise liegt ein Problem mit der Internetverbindung vor,<br/>
|
||||
oder die Cloud ist derzeit in Wartung.<br/>
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => this.cloudDecision(false)}>
|
||||
Offline spielen
|
||||
</Button>
|
||||
<Button onClick={() =>
|
||||
window.app.toggleWiFiSettings(true)} autoFocus>WiFi-Einstellungen</Button>
|
||||
<Button onClick={() => this.cloudDecision(true)} autoFocus>Erneut versuchen</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<Modal
|
||||
aria-labelledby="transition-modal-title"
|
||||
aria-describedby="transition-modal-description"
|
||||
open={this.state.open}
|
||||
open={this.state.openCloudConnectModal}
|
||||
onClose={null}
|
||||
closeAfterTransition
|
||||
slots={{backdrop: Backdrop}}
|
||||
@ -159,7 +225,7 @@ export default class Startup extends Component<{}, StartupState> {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Fade in={this.state.open}>
|
||||
<Fade in={this.state.openCloudConnectModal}>
|
||||
<Box sx={this.style}>
|
||||
<Typography id="transition-modal-title" variant="h6" component="h2">
|
||||
CloudConnect+ nutzen?
|
||||
@ -171,19 +237,34 @@ export default class Startup extends Component<{}, StartupState> {
|
||||
<i>Dafür wird eine WiFi-Verbindung hergestellt</i>
|
||||
<br/>
|
||||
<br/>
|
||||
<Button variant="contained" onClick={() => this.cloudDecision(true)}>Ja</Button>
|
||||
<Button variant="contained" sx={{mr: 1}} onClick={() => this.cloudDecision(true)}>Ja</Button>
|
||||
<Button variant="contained" onClick={() => this.cloudDecision(false)}
|
||||
color="error">Nein</Button>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Fade>
|
||||
</Modal>
|
||||
<Stack alignItems="center">
|
||||
|
||||
<Stack alignItems="center" sx={{width: '100%'}}>
|
||||
<h1>Willkommen!</h1>
|
||||
<br/>
|
||||
<p>{this.state.statusTxt}</p>
|
||||
<br/>
|
||||
<CircularProgress/>
|
||||
{!this.state.showStartBtn && <CircularProgress/>}
|
||||
|
||||
<Box alignItems="center" sx={{width: '100%', ml: 10}}>
|
||||
<FormControl sx={{mr: 2, minWidth: '30%'}}>
|
||||
{this.state.showStartBtn && <Button color="secondary" variant="contained">Setup <SettingsIcon/></Button>}
|
||||
</FormControl>
|
||||
<FormControl sx={{minWidth: '30%'}}>
|
||||
{this.state.showStartBtn && <Button color="success" variant="contained">Start <Chip sx={{ml: 1}} size="small" label={this.state.startCounter} /> <PlayCircleIcon/></Button>}
|
||||
</FormControl>
|
||||
</Box>
|
||||
<Chip sx={{mt: 3}} color={this.state.isConnected ? "success" : "default"} onClick={() => this.setState(prevState => ({
|
||||
...prevState,
|
||||
openCloudConnectModal: true
|
||||
}))} label={this.state.isConnected ? <CloudIcon/> : <CloudOffIcon />}/>
|
||||
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user