Add wifi scan ability and prepared connecting

src/web/Startup.tsx

@@ -1,11 +1,26 @@
 import React, {Component} from "react";
-import GameSetup from "./GameSetup";
-import {Backdrop, Box, CircularProgress, Fade, Modal, Stack, Typography, Button} from "@mui/material";
+import {
+    Backdrop,
+    Box,
+    CircularProgress,
+    Fade,
+    Modal,
+    Stack,
+    Typography,
+    Button,
+    Dialog,
+    DialogTitle, DialogContent, DialogContentText, DialogActions
+} from "@mui/material";
+import {FunctionTest} from "../IPCConstants";
 
 
 interface StartupState {
     statusTxt: string,
     open: boolean,
+    nextStep: boolean,
+    cloudConnect: boolean,
+    connectionIssue: boolean,
+    openWifiQuestion: boolean,
 }
 
 export default class Startup extends Component<{}, StartupState> {
@@ -14,7 +29,10 @@ export default class Startup extends Component<{}, StartupState> {
         this.state = {
             statusTxt: "Smart-Monopoly wird gestartet...",
             open: false,
-
+            nextStep: false,
+            cloudConnect: false,
+            connectionIssue: false,
+            openWifiQuestion: false
         };
     }
 
@@ -24,18 +42,29 @@ export default class Startup extends Component<{}, StartupState> {
                 ...prevState,
                 open: true,
                 statusTxt: "Möchten Sie CloudConnect+ nutzen?"
-            }))
-        }, 2000)
+            }));
+            this.cloudDecision(true).then();
+        }, 1)
     }
 
     componentWillUnmount() {
 
     }
 
-    handleOpen = () => this.setState((prevState) => ({
-        ...prevState,
-        open: true
-    }));
+    connectToCloud = () => {
+
+    }
+
+    checkForNext = () => {
+        if(this.state.cloudConnect)
+        {
+            // Connect to cloud
+        }
+        else
+        {
+            // Just start
+        }
+    }
 
     handleClose = () => this.setState((prevState) => ({
         ...prevState,
@@ -43,19 +72,24 @@ export default class Startup extends Component<{}, StartupState> {
     }));
 
     style = {
-        position: 'absolute' as 'absolute',
+        position: 'absolute',
         top: '50%',
         left: '50%',
         transform: 'translate(-50%, -50%)',
-        width: 400,
+        width: 600,
         bgcolor: 'background.paper',
-        border: '2px solid #000',
+        border: '2px solid #0000',
         boxShadow: 24,
         p: 4,
     };
 
-    wifiDecision(decision: boolean) {
+    async cloudDecision(decision: boolean) {
         this.handleClose();
+        this.setState((prevState) => ({
+            ...prevState,
+            cloudConnect: decision,
+            openWifiQuestion: false
+        }));
 
 
         if(decision) {
@@ -63,18 +97,55 @@ export default class Startup extends Component<{}, StartupState> {
                 ...prevState,
                 statusTxt: "WiFi-Verbindung wird hergestellt..."
             }));
-            window.app.showWiFiSettings();
+
+            let status = (await window.api.request("FUNCTION_TEST", {})).data as FunctionTest;
+            if(!status.hasInternet)
+            {
+                this.setState((prevState) => ({
+                    ...prevState,
+                    openWifiQuestion: true
+                }));
+            }
+            else
+            {
+                this.checkForNext();
+            }
         }
         else {
             this.setState((prevState) => ({
                 ...prevState,
                 statusTxt: "Ready to go!"
             }));
+            this.checkForNext();
         }
     }
 
     render() {
         return <div className="startup">
+            <Dialog
+                open={this.state.openWifiQuestion}
+                onClose={null}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle id="alert-dialog-title">
+                    Keine Internetverbindung!
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        Es wurde keine Internetverbindung erkannt.<br/><br/>
+                        <strong>Möchten Sie eine WLAN-Verbindung einrichten?</strong>
+                        <br/><i>Andernfalls können Sie SmartMonopoly offline nutzen.</i>
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => this.cloudDecision(false)}>
+                        Offline nutzen
+                    </Button>
+                    <Button onClick={() => {window.app.toggleWiFiSettings(true)}} autoFocus>Einrichten</Button>
+                </DialogActions>
+            </Dialog>
+
             <Modal
                 aria-labelledby="transition-modal-title"
                 aria-describedby="transition-modal-description"
@@ -100,8 +171,8 @@ export default class Startup extends Component<{}, StartupState> {
                             <i>Dafür wird eine WiFi-Verbindung hergestellt</i>
                             <br/>
                             <br/>
-                            <Button variant="contained" onClick={() => this.wifiDecision(true)}>Ja</Button>
-                            <Button variant="contained" onClick={() => this.wifiDecision(false)}
+                            <Button variant="contained" onClick={() => this.cloudDecision(true)}>Ja</Button>
+                            <Button variant="contained" onClick={() => this.cloudDecision(false)}
                                     color="error">Nein</Button>
                         </Typography>
                     </Box>