fix the wrong stuff in the bach I

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

@@ -24,7 +24,12 @@ class DevicePanel extends Component {
 
   render() {
     return (
-      <Grid doubling columns={2} divided="vertically">
+      <Grid
+        doubling
+        columns={2}
+        divided="vertically"
+        style={{ paddingTop: "3rem" }}
+      >
         {this.props.devices.map((e, i) => {
           return (
             <Grid.Column key={i}>

smart-hut/src/components/dashboard/devices/Device.js

@@ -5,7 +5,7 @@ import Sensor from "./Sensor";
 import { ButtonDimmer, KnobDimmer } from "./Dimmer";
 import Switcher from "./Switch";
 import Videocam from "./Videocam";
-import { Segment, Grid, Header, Button, Icon } from "semantic-ui-react";
+import { Segment, Grid, Header, Button, Icon, Card } from "semantic-ui-react";
 import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
 import DeviceSettingsModal from "./DeviceSettingsModal";
@@ -58,12 +58,48 @@ class Device extends React.Component {
 
   render() {
     return (
-      <Segment>
+      <Card>
+        <Card.Content>
+          <Card.Header textAlign="center">{this.props.device.name}</Card.Header>
+
+          <Card.Description style={centerComponent}>
+            {this.renderDeviceComponent()}
+          </Card.Description>
+        </Card.Content>
+        <Card.Content extra>
+          <div className="ui two buttons">
+            <Button color="blue" icon onClick={this.edit} labelPosition="left">
+              <Icon name="pencil" />
+              Edit
+            </Button>
+
+            {this.props.device.kind === "smartPlug" ? (
+              <Button
+                color="orange"
+                icon
+                onClick={this.resetSmartPlug}
+                labelPosition="left"
+              >
+                <Icon name="undo" />
+                Reset
+              </Button>
+            ) : null}
+            <DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
+          </div>
+        </Card.Content>
+        {/* <Segment>
         <Grid columns={2}>
           <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
           {this.props.tab === "Devices" ? (
-            <Grid.Column textAlign="center">
-              <Header as="h3">{this.props.stateOrDevice.name}</Header>
+          <Grid.Column textAlign="center">
+            <Header as="h3">{this.props.device.name}</Header>
+
+            <Button color="blue" icon onClick={this.edit} labelPosition="left">
+              <Icon name="pencil" />
+              Edit
+            </Button>
+
+            {this.props.device.kind === "smartPlug" ? (
               <Button
                 color="blue"
                 icon
@@ -93,11 +129,19 @@ class Device extends React.Component {
 
           <DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
         </Grid>
-      </Segment>
+      </Segment>*/}
+      </Card>
     );
   }
 }
 
+const centerComponent = {
+  marginLeft: "50%",
+  transform: "translateX(-50%)",
+  marginTop: "10%",
+  marginBottom: "10%",
+};
+
 const mapStateToProps = (state, ownProps) => ({
   get stateOrDevice() {
     if (state.active.activeTab === "Devices") {

smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js

@@ -26,23 +26,26 @@ const DeleteModal = (props) => (
 );
 
 const SettingsForm = (props) => {
-  const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setValues({ ...values, [name]: value });
-  };
-
   const [values, setValues] = useState({ name: "" });
 
+  const handleInputChange = (e) => {
+    const { name, value } = e.target.value;
+    setValues({ ...values, [name]: value });
+    console.log("EDDDDITING!!", e.target.value);
+    console.log(props);
+  };
+
   return (
     <Form>
       <Form.Field>
-        <label>Edit Name: </label>
-        <Input
+        <label>Edit Name:</label>
+        <input
           autoComplete="off"
           name="name"
           onChange={handleInputChange}
-          placeholder={props.name}
-          // {this.props.device.name}
+          value={props.name}
+          autoFocus="on"
+          placeholder="Device name"
         />
       </Form.Field>
 

smart-hut/src/components/dashboard/devices/DimmerStyle.js

@@ -35,6 +35,7 @@ export const ValueStyle = {
   fontSize: "1.3rem",
   fontFamily: "Lato",
   textAnchor: "middle",
+  userSelect: "none",
 };
 
 export const CircularThumbStyle = {
@@ -52,6 +53,7 @@ export const textStyle = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
+  userSelect: "none",
 };
 
 export const knobIcon = {

smart-hut/src/components/dashboard/devices/Light.js

@@ -128,8 +128,8 @@ class Light extends Component {
     );
 
     const normalLightView = (
-      <StyledDiv>
-        <div onClick={this.onClickDevice}>
+      <StyledDiv onClick={this.onClickDevice}>
+        <div>
           <Image src={this.getIcon()} style={iconStyle} />
           <BottomPanel style={{ backgroundColor: "#ffa41b" }}>
             <h5 style={nameStyle}>Light</h5>

smart-hut/src/components/dashboard/devices/LightStyle.js

@@ -20,6 +20,7 @@ export const textStyle = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
+  userSelect: "none",
 };
 
 export const nameStyle = {
@@ -29,6 +30,7 @@ export const nameStyle = {
   left: "50%",
   transform: "translateX(-50%)",
   color: "white",
+  userSelect: "none",
 };
 
 export const LightDimmerStyle = {

smart-hut/src/components/dashboard/devices/NewDevice.js

@@ -20,6 +20,7 @@ const StyledDiv = styled.div`
   border-radius: 100%;
   border: none;
   position: relative;
+  margin-bottom: 3rem;
   box-shadow: 3px 2px 10px 5px #ccc;
   transition: all 0.3s ease-out;
   :hover {

smart-hut/src/components/dashboard/devices/SensorStyle.js

@@ -21,12 +21,14 @@ export const sensorText = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
+  userSelect: "none",
 };
 
 export const valueStyle = {
   fill: "#3e99ff",
   fontSize: "2.4rem",
   fontFamily: "Lato",
+  userSelect: "none",
 };
 
 export const errorStyle = {
@@ -34,6 +36,7 @@ export const errorStyle = {
   fontSize: "1.5rem",
   fontFamily: "Lato",
   textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+  userSelect: "none",
 };
 
 export const motionSensorInnerCircle = {

smart-hut/src/components/dashboard/devices/SmartPlugStyle.js

@@ -5,6 +5,7 @@ export const energyConsumedStyle = {
   top: "20%",
   left: "50%",
   transform: "translateX(-50%)",
+  userSelect: "none",
 };
 
 export const kwhStyle = {
@@ -14,6 +15,7 @@ export const kwhStyle = {
   top: "50%",
   left: "50%",
   transform: "translateX(-50%)",
+  userSelect: "none",
 };
 
 export const imageStyle = {
@@ -24,6 +26,7 @@ export const imageStyle = {
   left: "50%",
   transform: "translateX(-35%)",
   filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
+  userSelect: "none",
 };
 
 export const nameStyle = {
@@ -35,4 +38,5 @@ export const nameStyle = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
+  userSelect: "none",
 };

smart-hut/src/components/dashboard/devices/SwitchStyle.js

@@ -5,6 +5,7 @@ export const imageStyle = {
   top: "5%",
   left: "50%",
   transform: "translateX(-50%)",
+  userSelect: "none",
 };
 
 export const nameStyle = {
@@ -16,6 +17,7 @@ export const nameStyle = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
+  userSelect: "none",
 };
 
 export const turnedOnStyle = {
@@ -25,4 +27,5 @@ export const turnedOnStyle = {
   top: "20%",
   left: "50%",
   transform: "translateX(-50%)",
+  userSelect: "none",
 };

smart-hut/src/components/dashboard/devices/styleComponents.js

@@ -75,6 +75,7 @@ export const iconStyle = {
   top: "10%",
   left: "50%",
   transform: "translateX(-50%)",
+  userSelect: "none",
 };
 export const nameStyle = {
   position: "absolute",

smart-hut/src/store.js

@@ -418,7 +418,7 @@ function reducer(previousState, action) {
       break;
     case "REDUX_WEBSOCKET::MESSAGE":
       const devices = JSON.parse(action.payload.message);
-      console.log(devices);
+      //console.log(devices);
       newState = reducer(previousState, {
         type: "DEVICES_UPDATE",
         partial: true,