Confirm dialog for Shutdown/reboot.

react/public/var/config.json

@@ -1,5 +1,5 @@
 {
-    "socket_server_port": 8080,
+    "socket_server_port": 80,
     "socket_server_address": "*",
     "debug": true,
     "max_upload_size": 1048576,

react/src/OkCancelDialog.tsx

@@ -0,0 +1,91 @@
+/*
+ * MIT License
+ * 
+ * Copyright (c) 2022 Robin E. R. Davies
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ * of the Software, and to permit persons to whom the Software is furnished to do
+ * so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React  from 'react';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import DialogEx from './DialogEx';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+
+
+export interface OkCancelDialogProps {
+    open: boolean,
+    text: string,
+    okButtonText: string,
+    onOk: () => void,
+    onClose: () => void
+};
+
+export interface OkCancelDialogState {
+};
+
+export default class OkCancelDialog extends React.Component<OkCancelDialogProps, OkCancelDialogState> {
+
+
+    constructor(props: OkCancelDialogProps) {
+        super(props);
+        this.state = {
+        };
+    }
+
+    render() {
+        let props = this.props;
+        let { open,okButtonText,text, onClose, onOk } = props;
+
+        const handleClose = () => {
+            onClose();
+        };
+
+        const handleOk = () => {
+            onOk();
+        }
+        const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+            // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                event.stopPropagation();
+                handleOk();
+            }
+        };
+        return (
+            <DialogEx tag="OkCancelDialog" open={open} onClose={handleClose} 
+                style={{userSelect: "none"}}
+                >
+                <DialogContent>
+                    <Typography
+                    >{text}</Typography>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleClose} color="primary">
+                        Cancel
+                    </Button>
+                    <Button onClick={handleOk} color="secondary" >
+                        {okButtonText}
+                    </Button>
+                </DialogActions>
+            </DialogEx>
+        );
+    }
+}

react/src/PiPedalModel.tsx

@@ -1942,7 +1942,7 @@ class PiPedalModelImpl implements PiPedalModel {
                 if (wifiDirectConfigSettings.countryCode === oldSettings.countryCode
                     && wifiDirectConfigSettings.channel === oldSettings.channel
                     && wifiDirectConfigSettings.hotspotName === oldSettings.hotspotName
-                    && wifiDirectConfigSettings.enable == oldSettings.enable) {
+                    && wifiDirectConfigSettings.enable === oldSettings.enable) {
                     if (wifiDirectConfigSettings.pin === oldSettings.pin) {
                         // no effective change.
                         resolve();

react/src/SettingsDialog.tsx

@@ -18,6 +18,7 @@
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React, { SyntheticEvent, Component } from 'react';
+import OkCancelDialog from './OkCancelDialog';
 import ListSelectDialog from './ListSelectDialog';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
@@ -74,6 +75,8 @@ interface SettingsDialogState {
     shuttingDown: boolean;
     restarting: boolean;
     isAndroidHosted: boolean;
+    showRestartOkDialog: boolean;
+    showShutdownOkDialog: boolean;
 };
 
 
@@ -166,6 +169,8 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                 showJackServerSettingsDialog: false,
                 shuttingDown: false,
                 restarting: false,
+                showShutdownOkDialog: false,
+                showRestartOkDialog: false,
                 isAndroidHosted: this.model.isAndroidHosted()
 
 
@@ -179,6 +184,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
             this.handleGovernorSettingsChanged = this.handleGovernorSettingsChanged.bind(this);
             this.handleConnectionStateChanged = this.handleConnectionStateChanged.bind(this);
             
+
         }
 
         handleConnectionStateChanged(): void {
@@ -430,6 +436,9 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
             });
         }
         handleRestart() {
+            this.setState({showRestartOkDialog: true});
+        }
+        handleRestartOk() {
             this.setState({ restarting: true });
             this.model.restart()
                 .then(() => {
@@ -443,6 +452,9 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
         }
 
         handleShutdown() {
+            this.setState({ showShutdownOkDialog: true});
+        }
+        handleShutdownOk() {
             this.setState({ shuttingDown: true });
             this.model.shutdown()
                 .then(() => {
@@ -513,6 +525,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
 
                                     )
                                 }
+                                <Divider/>
                                 <Typography className={classes.sectionHead} display="block" variant="caption" color="secondary">
                                     AUDIO
                                 </Typography>
@@ -642,7 +655,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
 
                                 <ButtonBase
                                     className={classes.setting} disabled={!this.state.wifiConfigSettings.valid}
-                                    onClick={() => this.handleShowGovernorSettingsDialogDialog()}  >
+                                    onClick={() => { } }  >
                                     <SelectHoverBackground selected={false} showHover={true} />
                                     <div style={{ width: "100%" }}>
                                         <Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
@@ -743,7 +756,16 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                         onClose={() => this.setState({ showWifiDirectConfigDialog: false })}
                         onOk={(wifiDirectConfigSettings: WifiDirectConfigSettings) => this.handleApplyWifiDirectConfig(wifiDirectConfigSettings)}
                     />
-
+                    <OkCancelDialog text="Are you sure you want to reboot?" okButtonText='Reboot' 
+                        open={this.state.showRestartOkDialog}
+                        onOk={()=> { this.setState({showRestartOkDialog: false}); this.handleRestartOk();}}
+                        onClose={()=> { this.setState({showRestartOkDialog: false}); } }
+                    />
+                    <OkCancelDialog text="Are you sure you want to shut down?" okButtonText='Shut down' 
+                        open={this.state.showShutdownOkDialog}
+                        onOk={()=> { this.setState({showShutdownOkDialog: false}); this.handleShutdownOk();}}
+                        onClose={()=> { this.setState({showShutdownOkDialog: false}); } }
+                    />
                 </DialogEx >
 
             );