frontend/smart-hut/src/components/dashboard/DevicePanel.js

import React, {Component} from 'react';
import {
  Grid,
} from "semantic-ui-react";
import NewDevice from "./devices/NewDevice";
import {LightDevice, SmartPlugDevice} from "./devices/TypesOfDevices";
import {editButtonStyle, panelStyle} from "./devices/styleComponents";
import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
import Light from "./devices/Light";
import SmartPlug from "./devices/SmartPlug";
import Sensor from "./devices/Sensor";
import DigitalSensor from "./devices/DigitalSensor";
import Switch from "./devices/Switch";
import SettingsModal from "./devices/SettingsModal";


const devices = [
  {
    "id": 1,
    "name": "Bedroom Light",
    "type": "light",
    "hasIntensity": true,
    "intensityLevel": 0.20,
    ...LightDevice
  },
  {
    "id": 2,
    "name": "Bathroom Light",
    "type": "light",
    ...LightDevice
  },
  {
    "id": 3,
    "name": "Desktop Light",
    "type": "light",
    ...LightDevice
  },
  {
    "id": 4,
    "name": "Entrance Light",
    "type": "light",
    ...LightDevice
  },
  {
    "id": 5,
    "name": "Smart Plug",
    "type": "smart-plug",
    ...SmartPlugDevice
  },
  {
    "id": 6,
    "name": "Bedroom Thermometer",
    "type": "temperature-sensor",
  },
  {
    "id": 7,
    "name": "Bedroom Alarm",
  },

];

export default class DevicePanel extends Component {

    constructor(props) {
        super(props);
        this.state = {
            editMode : false,
            devices : this.props.devices,
        };
    }

    editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));

    changeDeviceData = (deviceId, newSettings) => {

        console.log(newSettings.name, " <-- new name --> ", deviceId );
        this.state.devices.map(device => {
            if(device.id === deviceId){
                for(let prop in newSettings){
                    if(device.hasOwnProperty(prop)){
                        if(prop==="name"){
                            if(checkMaxLength(newSettings[prop])){
                                device[prop] = newSettings[prop];
                            }
                            else{
                                alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
                            }
                        }else{
                            device[prop] = newSettings[prop];
                        }

                    }
                }
            }
            return null;
        }); 
        this.forceUpdate();
    };
  }

  editModeController = (e) => {
    this.setState((prevState) => ({editMode: !prevState.editMode}));
  };

  changeDeviceData = (deviceId, newSettings) => {
    console.log(newSettings.name, " <-- new name --> ", deviceId);
    this.state.devices.map(device => {
      if (device.id === deviceId) {
        for (let prop in newSettings) {
          if (device.hasOwnProperty(prop)) {
            if (prop === "name") {
              if (checkMaxLength(newSettings[prop])) {
                device[prop] = newSettings[prop];
              } else {
                alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
              }
            } else {
              device[prop] = newSettings[prop];
            }


    render() {
        return (
            <div style={panelStyle}>
                <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
                <Grid doubling columns={this.props.devices.length > 0 ? this.props.devices.length : 1} divided="vertically">
                    {
                        this.props.devices ?
                            this.props.devices.map((e, i) => {
                                return (
                                    <Grid.Column key={i}>
                                        <DeviceType type={e.kind} onChangeData={this.changeDeviceData}  device={e} edit={this.state.editMode}/>
                                    </Grid.Column>
                                )
                            })
                        :
                            null
                    }
                    <Grid.Column>
                        <NewDevice/>
                    </Grid.Column>
                </Grid>
            </div>
        )
    }

}