Merge branch 'dev-copy' into 'dev'

Dev copy See merge request sa4-2020/the-sanmarinoes/frontend!106
2020-05-01 11:21:38 +02:00 · 2020-05-01 11:21:38 +02:00 · c2f646d29a
commit c2f646d29a
parent 1de7b9992e 292a33e5bc
14 changed files with 192 additions and 162 deletions
--- a/smart-hut/src/components/dashboard/DevicePanel.js
+++ b/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={3}
+        divided="vertically"
+        style={{ paddingTop: "3rem" }}
+      >
        {this.props.devices.map((e, i) => {
          return (
            <Grid.Column key={i}>
--- a/smart-hut/src/components/dashboard/devices/Device.js
+++ b/smart-hut/src/components/dashboard/devices/Device.js
@ -7,11 +7,18 @@ import Switcher from "./Switch";
 import Videocam from "./Videocam";
 import Curtains from "./Curtain";
 import Thermostat from "./Thermostats";
-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";

+const centerComponent = {
+  marginLeft: "50%",
+  transform: "translateX(-50%)",
+  marginTop: "10%",
+  marginBottom: "10%",
+};
+
 class Device extends React.Component {
  constructor(props) {
    super(props);
@ -101,27 +108,14 @@ class Device extends React.Component {
          <Videocam id={this.props.stateOrDevice.id} tab={this.props.tab} />
        );
      default:
-        //throw new Error("Device type unknown");
-        return undefined;
+        throw new Error("Device type unknown");
    }
  }

-  render() {
-    {
-      if (this.props.type !== "") {
+  deviceDescription() {
    return (
-          <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>
-                  <Button
-                    color="blue"
-                    icon
-                    onClick={this.edit}
-                    labelPosition="left"
-                  >
+      <div className="ui two buttons">
+        <Button color="blue" icon onClick={this.edit} labelPosition="left">
          <Icon name="pencil" />
          Edit
        </Button>
@ -136,15 +130,13 @@ class Device extends React.Component {
            Reset
          </Button>
        ) : null}
-                </Grid.Column>
-              ) : (
-                <Grid.Column textAlign="center">
-                  <Header as="h3">{this.props.device.name}</Header>
-                  {this.props.tab === "Scenes" ? (
-                    <Header as="h4">{this.props.roomName}</Header>
-                  ) : (
-                    ""
-                  )}
+      </div>
+    );
+  }
+
+  stateDescription() {
+    return (
+      <div class="ui one button">
        <Button
          color="red"
          icon
@ -154,35 +146,49 @@ class Device extends React.Component {
          <Icon name="undo" />
          Delete
        </Button>
-                </Grid.Column>
+      </div>
+    );
+  }
+
+  get deviceName() {
+    return this.props.tab === "Devices"
+      ? this.props.stateOrDevice.name
+      : this.props.device.name;
+  }
+
+  render() {
+    {
+      return (
+        <Card>
+          <Card.Content>
+            <Card.Header textAlign="center">
+              <Header as="h3">{this.deviceName}</Header>
+              {this.props.tab === "Scenes" ? (
+                <Header as="h4">{this.props.roomName}</Header>
+              ) : (
+                ""
              )}
-            </Grid>
-            {this.props.stateOrDevice && this.props.tab === "Devices" ? (
+            </Card.Header>
+
+            <Card.Description style={centerComponent}>
+              {this.renderDeviceComponent()}
+            </Card.Description>
+          </Card.Content>
+          <Card.Content extra>
+            {this.props.tab === "Devices"
+              ? this.deviceDescription()
+              : this.stateDescription()}
+          </Card.Content>
          <DeviceSettingsModal
            ref={this.modalRef}
            id={this.props.stateOrDevice.id}
          />
-            ) : (
-              ""
-            )}
-          </Segment>
+        </Card>
      );
-      } else {
-        return null;
-      }
    }
  }
 }
-/*

-{this.props.stateOrDevice ? 
-                        <DeviceSettingsModal
-                        ref={this.modalRef}
-                        id={this.props.stateOrDevice.id}
-                        /> :
-                        ""
-                    }
-*/
 const mapStateToProps = (state, ownProps) => ({
  get stateOrDevice() {
    if (state.active.activeTab === "Devices") {
@ -207,7 +213,6 @@ const mapStateToProps = (state, ownProps) => ({
    }
  },
  get type() {
-    console.log("ALPACA", state, ownProps);
    if (state.active.activeTab === "Scenes") {
      if (state.sceneStates[ownProps.id]) {
        //console.log(state.sceneStates[ownProps.id], ownProps.id);
--- a/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
+++ b/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
@ -33,6 +33,8 @@ const SettingsForm = (props) => {

  const [values, setValues] = useState({ name: "" });

+  console.log(props);
+
  return (
    <Form>
      <Form.Field>
@ -42,7 +44,6 @@ const SettingsForm = (props) => {
          name="name"
          onChange={handleInputChange}
          placeholder={props.name}
-          // {this.props.device.name}
        />
      </Form.Field>

@ -106,20 +107,25 @@ class DeviceSettingsModal extends Component {
      );
  }

-  render() {
-    const SettingsModal = () => (
-      <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
-        <Modal.Header>Settings of {this.props.device.name}</Modal.Header>
-        <Modal.Content>
+  _editForm = null;
+  get editForm() {
+    this._editForm = this._editForm || (
      <SettingsForm
        name={this.state.name}
        removeDevice={this.deleteDevice}
        saveFunction={this.updateDevice}
      />
-        </Modal.Content>
+    );
+    return this._editForm;
+  }
+
+  render() {
+    return (
+      <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
+        <Modal.Header>Settings of {this.props.device.name}</Modal.Header>
+        <Modal.Content>{this.editForm}</Modal.Content>
      </Modal>
    );
-    return <SettingsModal />;
  }
 }

--- a/smart-hut/src/components/dashboard/devices/Dimmer.js
+++ b/smart-hut/src/components/dashboard/devices/Dimmer.js
@ -129,10 +129,10 @@ export class KnobDimmerComponent extends Component {
 }

 const mapStateToProps = (state, ownProps) => ({
-  get stateOrDevice(){
-    if(state.active.activeTab==="Devices"){
+  get stateOrDevice() {
+    if (state.active.activeTab === "Devices") {
      return state.devices[ownProps.id];
-    }else{
+    } else {
      return state.sceneStates[ownProps.id];
    }
  },
--- a/smart-hut/src/components/dashboard/devices/DimmerStyle.js
+++ b/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 = {
--- a/smart-hut/src/components/dashboard/devices/Light.js
+++ b/smart-hut/src/components/dashboard/devices/Light.js
@ -164,8 +164,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>
--- a/smart-hut/src/components/dashboard/devices/LightStyle.js
+++ b/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 = {
--- a/smart-hut/src/components/dashboard/devices/SensorStyle.js
+++ b/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 = {
--- a/smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
+++ b/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",
 };
--- a/smart-hut/src/components/dashboard/devices/SwitchStyle.js
+++ b/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",
 };
--- a/smart-hut/src/components/dashboard/devices/styleComponents.js
+++ b/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",
--- a/smart-hut/src/store.js
+++ b/smart-hut/src/store.js
@ -499,7 +499,6 @@ function reducer(previousState, action) {
      console.warn(`Action type ${action.type} unknown`, action);
      return previousState;
  }
-  console.log("THETRUEALPACA", newState, action.type, action);
  return newState;
 }