Merge branch 'dev' of https://lab.si.usi.ch/sa4-2020/the-sanmarinoes/frontend into dev

smart-hut/src/components/HeaderController.js

@@ -58,7 +58,7 @@ export class MyHeader extends React.Component {
         <Responsive minWidth={768}>
           <Grid columns="equal" divided inverted padded>
             <Grid.Row color="black" textAlign="center">
-              <Grid.Column width={3} height={0.5}>
+              <Grid.Column width={4} height={0.5}>
                 <Segment color="black" inverted>
                   <IconHomeImage />
                 </Segment>
@@ -68,7 +68,7 @@ export class MyHeader extends React.Component {
                   <TitleImage />
                 </Segment>
               </Grid.Column>
-              <Grid.Column width={2} heigth={1}>
+              <Grid.Column width={4} heigth={1}>
                 <Label as="a" image color="black">
                   <img alt="SmartHut logo" src="smart-home.png" />
                   {this.props.username}
@@ -77,11 +77,15 @@ export class MyHeader extends React.Component {
                 <Button basic inverted onClick={this.logout}>
                   Logout
                 </Button>
+                <Segment compact style={{margin: "auto", marginTop: "1em", textAlign: "center"}}>
                 <Checkbox
+                  label={<label 
+                  >Share cameras</label>}
                   checked={this.props.cameraEnabled}
                   toggle
                   onChange={(e, val) => this.setCameraEnabled(val.checked)}
                 />
+                </Segment>
               </Grid.Column>
             </Grid.Row>
           </Grid>
@@ -104,6 +108,15 @@ export class MyHeader extends React.Component {
                 </Label>
                 <Divider />
                 <Button onClick={this.logout}>Logout</Button>
+                <Segment compact style={{margin: "auto", marginTop: "1em", textAlign: "center"}}>
+                <Checkbox
+                  label={<label 
+                  >Share cameras</label>}
+                  checked={this.props.cameraEnabled}
+                  toggle
+                  onChange={(e, val) => this.setCameraEnabled(val.checked)}
+                />
+                </Segment>
               </Grid.Column>
             </Grid.Row>
           </Grid>

smart-hut/src/components/SceneModal.js

@@ -9,6 +9,7 @@ import {
   Input,
   Dropdown,
   Checkbox,
+  Segment,
 } from "semantic-ui-react";
 import SelectIcons from "./SelectIcons";
 import { connect } from "react-redux";
@@ -110,15 +111,15 @@ class SceneModal extends Component {
   };
 
   closeModal = (e) => {
-    this.setState({ openModal: false });
+    this.setState({ ...this.state, openModal: false });
   };
 
   openModal = (e) => {
-    this.setState({ openModal: true });
+    this.setState({  ...this.state, openModal: true });
   };
 
   updateIcon(e) {
-    this.setState({ selectedIcon: e });
+    this.setState({  ...this.state, selectedIcon: e });
   }
 
   setCopyFrom(_, copyFrom) {
@@ -127,7 +128,7 @@ class SceneModal extends Component {
 
   setGuestAccessEnabled(val) {
     console.log(this.state, val);
-    this.setState({ guestAccessEnabled: val });
+    this.setState({  ...this.state, guestAccessEnabled: val });
   }
 
   render() {
@@ -223,13 +224,16 @@ class SceneModal extends Component {
               )}
               {this.type === "modify" ? (
                 <Form.Field>
+                  <Segment compact style={{ marginBottom: "1rem"}}>
                   <Checkbox
+                    label="Enable guest access"
                     checked={this.state.guestAccessEnabled}
                     toggle
                     onChange={(e, val) =>
                       this.setGuestAccessEnabled(val.checked)
                     }
                   />
+                  </Segment>
                 </Form.Field>
               ) : null}
             </Form>

smart-hut/src/components/dashboard/devices/Curtains.css

@@ -4,10 +4,6 @@
   box-sizing: border-box;
 }
 
-body {
-  overflow-y: hidden;
-}
-
 .container.curtain-container {
   position: relative;
   margin-top: 10%;

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

@@ -164,7 +164,10 @@ class Thermostats extends Component {
 const mapStateToProps2 = (state, ownProps) => ({
   ...mapStateToProps(state, ownProps),
   get tempSensorsInRoom() {
-    const deviceIds = state.rooms[state.devices[ownProps.id].roomId].devices;
+    if (state.active.activeTab !== "Devices") return false;
+    const room = state.rooms[state.devices[ownProps.id].roomId];
+    if (!room) return false;
+    const deviceIds = room.devices;
     const devices = [...deviceIds].map((id) => state.devices[id]);
     const sensors = devices.filter(
       (d) => d.kind === "sensor" && d.sensor === "TEMPERATURE"

smart-hut/src/views/Dashboard.js

@@ -85,12 +85,12 @@ class Dashboard extends Component {
       <div style={{ background: "#1b1c1d" }}>
         <Responsive minWidth={768}>
           <Grid>
-            <Grid.Row color="black">
+            <Grid.Row color="black" style={{ paddingBottom: 0 }}>
               <Grid.Column>
                 <MyHeader />
               </Grid.Column>
             </Grid.Row>
-            <Grid.Row color="black">
+            <Grid.Row color="black" style={{ paddingTop: 0 }}>
               <Grid.Column textAlign="center" width={16}>
                 <Menu fluid widths={4} inverted color="grey">
                   <Menu.Item