Core Web Work - not ready

HolidayShowEditor/ViewModels/DeviceViewModel.cs

@@ -147,8 +147,7 @@ private async void OnCommandDeviceIoPortDetect(DeviceIoPorts ioPort)
             var option = await _dataContext.Context.Settings.Where(x => x.SettingName == SettingKeys.SetPlaybackOption).FirstOrDefaultAsync();
             if (option == null)
             {
-                option = new Settings();
-                option.SettingName = SettingKeys.SetPlaybackOption;
+                option = new Settings {SettingName = SettingKeys.SetPlaybackOption};
                 _dataContext.Context.Settings.Add(option);
             }
             option.ValueDouble = (double)SetPlaybackOptionEnum.DevicePinDetect;

HolidayShowEditor/ViewModels/SetsViewModel.cs

@@ -82,7 +82,7 @@ private void OnCommandSave()
 
         public List<DevicePatterns> DevicePatternsList { get
         {
-            var list =  _dataContext.Context.DevicePatterns.ToList().OrderBy(x => x.PatternDescription).ToList();
+            var list =  _dataContext.Context.DevicePatterns.ToList().OrderBy(x => x.PatternName).ToList();
             return list;
         } }
 

HolidayShowWeb/ClientApp/public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <base href="%PUBLIC_URL%/" />
     <!--
       manifest.json provides metadata used when your web app is added to the

HolidayShowWeb/ClientApp/src/App.js

@@ -6,6 +6,7 @@ import DeviceManager from './components/DeviceEditor';
 import SetsEditor from './components/SetsEditor';
 import EffectsEditor from './components/EffectsEditor';
 import SettingsEditor from './components/SettingsEditor';
+import DevicePatternEditor from './components/DevicePatternEditor';
 
 export default class App extends Component {
   displayName = App.name
@@ -15,6 +16,7 @@ export default class App extends Component {
       <Layout>
         <Route exact path='/' component={Home} />
         <Route exact path='/DeviceEditor' component={DeviceManager} />
+        <Route exact path='/DevicePatternEditor' component={DevicePatternEditor} />
         <Route exact path='/SetsEditor' component={SetsEditor} />
         <Route exact path='/EffectsEditor' component={EffectsEditor} />
         <Route exact path='/SettingsEditor' component={SettingsEditor} />

HolidayShowWeb/ClientApp/src/Services/DeviceIoPortServices.js

@@ -0,0 +1,18 @@
+class DeviceIoPortServices{
+
+    ioPortIdentify = async (id) =>{
+
+        let options = {
+                method: 'put',
+                headers: {
+                  'Accept': 'application/json',
+                  'Content-Type': 'application/json'
+                }
+        }
+
+        await fetch(`/api/DeviceIoPorts/PutDeviceIoPortIdentify/${id}`, options)
+    }
+
+} 
+
+export default new DeviceIoPortServices();

HolidayShowWeb/ClientApp/src/Services/DevicePatternServices.js

@@ -0,0 +1,9 @@
+class DevicePatternServices{
+
+    GetDevicePatternsByDeviceId = async (id)=>{
+        let response = await fetch(`/api/DevicePatterns/GetDevicePatternsByDeviceId/${id}`);
+        return await response.json();
+    }
+} 
+
+export default new DevicePatternServices();

HolidayShowWeb/ClientApp/src/components/CommonStyles.css

@@ -0,0 +1,29 @@
+ .dimmed {
+    /* content: " "; */
+    z-index: 10;
+    display: block;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .centerMiddleContent{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -50px;
+    margin-left: -50px;
+    width: 100px;
+    height: 100px;
+  }
+
+  .visibile{
+    visibility: visible;
+  }
+
+  .hidden{
+    visibility: hidden;
+  }

HolidayShowWeb/ClientApp/src/components/DeviceEditor.js

@@ -1,62 +1,176 @@
 import React, { Component } from 'react';
 import DeviceServices from '../Services/DeviceServices'
+import DeviceIoPortServices from '../Services/DeviceIoPortServices'
+
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import DeviceEditor from './DeviceIoPortsEditor';
-import { ListItemIcon } from '../../node_modules/@material-ui/core';
+import DeviceIoPortEditor from './DeviceIoPortEditor';
+import SaveIcon from '@material-ui/icons/Save'
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import BusyContent from './controls/BusyContent';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+
+import './CommonStyles.css';
 
+const styles = theme => ({
+    textField: {
+        fontSize: '14px',
+        paddingBottom: 0,
+        marginTop: 4,
+        fontWeight: 500
+    },
 
-export default class DeviceManager extends Component {
+    input: {
+        fontSize: '16px'
+    }
+});
+
+class DeviceManager extends Component {
     displayName = DeviceManager.name
 
     constructor(props) {
         super(props)
 
         this.DeviceServices = DeviceServices;
+        this.DeviceIoPortServices = DeviceIoPortServices;
 
         this.state = {
             devices: [],
-            selectedDevice: null
+            devicesDirty: [],
+            selectedDevice: null,
+            isBusy: false,
         }
     }
 
     handleDeviceSelection = (device) => {
-        this.setState({selectedDevice: device});
+        this.setState({ selectedDevice: device });
     }
 
     componentDidMount = async () => {
-        let devices = await this.DeviceServices.getAllDevices();
-        this.setState({ devices });
-        console.log({ devices });
+
+        try {
+            this.setIsBusy(true);
+            let devices = await this.DeviceServices.getAllDevices();
+
+            let cleanState = [];
+            for (let index = 0; index < devices.length; index++) {
+                const element = devices[index];
+                cleanState[index] = false;
+            }
+
+            this.setState({
+                devices,
+                devicesDirty: cleanState
+            });
+
+        } catch (e) {
+
+        } finally {
+            this.setIsBusy(false);
+        }
+    }
+
+    handleNameChange = (device, evt) => {
+        device.name = evt.target.value;
+
+        this.handleDirty(device);
+
+        this.setState({});
     }
 
-    handleOnSave = (device) => {
+    handleDirtyCleanChange(device, isDirty) {
+        var stateIndex = this.state.devices.indexOf(device);
+
+        this.state.devicesDirty[stateIndex] = isDirty;
+
+        this.setState({
+            devicesDirty: this.state.devicesDirty
+        });
+    }
 
+    handleDirty(device) {
+        this.handleDirtyCleanChange(device, true);
+    }
+
+    getDirty(device) {
+        var stateIndex = this.state.devices.indexOf(device);
+        return this.state.devicesDirty[stateIndex];
+    }
+
+    handleDeviceSave = async (device) => {
+        try {
+            this.setIsBusy(true);
+            await this.DeviceServices.saveDevice(device);
+            this.handleDirtyCleanChange(device, false);
+            this.setState({});
+        } catch (e) {
+
+        } finally {
+            this.setIsBusy(false);
+        }
+    }
+
+    handleIoPortDetect = async (ioPortId) => {
+        try {
+            this.setIsBusy(true);
+            await this.DeviceIoPortServices.ioPortIdentify(ioPortId);
+            this.setState({});
+        } catch (e) 
+        {
+
+        } finally {
+            this.setIsBusy(false);
+        }
+
+    }
+
+    setIsBusy(busyState) {
+        this.setState({ isBusy: busyState });
     }
 
     render() {
+
+        const { classes } = this.props;
+
         return (
-            <div style={{display: "flex", flex: "1", height: "100vh"}}>
+            <div style={{ display: "flex", flex: "1", height: "100vh" }}>
                 <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", flex: "1" }}>
                     <List component="nav">
 
-                        {this.state.devices.map(device => (
-                            <ListItem button onClick={()=>this.handleDeviceSelection(device)}>
-                                <ListItemText inset primary={device.name} />
-                                <ListItemIcon>
-                                    <SaveIcon/>
-                                </ListItemIcon>
-                            </ListItem>
-                        ))}
+                        {this.state.devices.map((device, i) =>
+                            (
+                                <ListItem button onClick={() => this.handleDeviceSelection(device)} key={i}>
+                                    <TextField
+                                        label={"Device ID" + device.deviceId}
+                                        value={device.name}
+                                        onChange={(evt) => this.handleNameChange(device, evt)}
+                                        margin="normal"
+                                        className={classes.textField}
+                                        InputProps={{
+                                            className: classes.input,
+                                        }}
+                                    />
+                                    <Button onClick={(evt) => this.handleDeviceSave(device, evt)} className={this.getDirty(device) ? "visibile" : "hidden"}><SaveIcon /></Button>
+                                </ListItem>
+                            ))}
 
                     </List>
 
-                    <div style={{overflow: "auto"}}>
-                    <DeviceEditor device={this.state.selectedDevice}/>
+                    <div style={{ overflow: "auto" }}>
+                        <DeviceIoPortEditor 
+                            device={this.state.selectedDevice} 
+                            onIoPortChanged={(evt) => this.handleDirty(this.state.selectedDevice)} 
+                            onIoPortDetect={(ioPortId, evt) => this.handleIoPortDetect(ioPortId)} />
                     </div>
                 </div>
+                {
+                    this.state.isBusy && (<BusyContent />)
+                }
             </div>
         );
     }
 }
+
+export default withStyles(styles)(DeviceManager);

HolidayShowWeb/ClientApp/src/components/DeviceIoPortEditor.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import TextField from '@material-ui/core/TextField';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import Switch from '@material-ui/core/Switch';
+
+import Button from '@material-ui/core/Button';
+import FindReplace from '@material-ui/icons/FindReplace'
+
+const styles = theme => ({
+    textField: {
+        fontSize: '14px',
+        paddingBottom: 0,
+        marginTop: 4,
+        fontWeight: 500
+    },
+    formHelperText: {
+        fontSize: '16px'
+    },
+    input: {
+        fontSize: '16px'
+    }
+});
+
+class DeviceIoPortEditor extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    handleIoPortDangerChange = (ioPort, evt) => {
+        ioPort.isDanger = evt.target.checked;
+
+        this.props.onIoPortChanged(evt);
+    }
+
+    handleIoPortNameChange = (ioPort, evt) => {
+        ioPort.description = evt.target.value;
+
+        this.props.onIoPortChanged(evt);
+
+        this.setState({});
+    }
+
+    render() {
+
+        const { classes } = this.props;
+
+
+        return (
+            <div>
+                <div>
+                    <div style={{ display: "flex", flexFlow: "column" }}>
+                        {
+                            (this.props.device && this.props.device.deviceIoPorts) && this.props.device.deviceIoPorts.map((ioPort, i) => {
+                                return (
+                                    <div style={{ display: "flex", flexFlow: "row" }} key={i}>
+
+                                        <TextField
+                                            label={"PIN: " + ioPort.commandPin + ""}
+                                            value={ioPort.description}
+                                            onChange={(evt) => this.handleIoPortNameChange(ioPort, evt)}
+                                            margin="normal"
+                                            className={classes.textField}
+                                            InputLabelProps={{
+                                                style: {
+                                                    backgroundColor: "red",
+                                                    fontSize: "30px"
+                                                },
+                                            }}
+                                        />
+
+                                        <Switch
+                                            checked={ioPort.isDanger}
+                                            onChange={(evt) => this.handleIoPortDangerChange(ioPort, evt)}
+                                        />
+
+                                        <Button onClick={(evt) => this.props.onIoPortDetect(ioPort.deviceIoPortId, evt)}><FindReplace /></Button>
+                                    </div>
+                                )
+                            })
+                        }
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+}
+
+DeviceIoPortEditor.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(DeviceIoPortEditor);