Merge branch '63-fixed-minor-bugs' into 'dev'

fixed minor bugs

Closes #63

See merge request sa4-2020/the-sanmarinoes/frontend!65

smart-hut/src/App.js

@@ -27,6 +27,7 @@ class App extends Component {
     super(props);
 
     let loggedIn = false;
+    let token = undefined;
 
     try {
       let userJsonString = localStorage.getItem("token");
@@ -34,6 +35,7 @@ class App extends Component {
       let date = new Date().getTime();
       if (userJsonString && exp && date < exp) {
         loggedIn = true;
+        token = userJsonString;
       } else {
         localStorage.removeItem("token");
         localStorage.removeItem("exp");
@@ -42,6 +44,7 @@ class App extends Component {
 
     this.state = {
       loggedIn: loggedIn,
+      token: token,
     };
 
     this.auth = this.auth.bind(this);

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

@@ -144,11 +144,17 @@ export default class NewDevice extends Component {
         image: { avatar: true, src: "/img/switchOn.svg" },
       },
       {
-        key: "dimmer",
-        text: "Dimmer",
+        key: "buttonDimmer",
+        text: "Button Dimmer",
         value: "buttonDimmer",
         image: { avatar: true, src: "/img/dimmer.svg" },
       },
+      {
+        key: "knobDimmer",
+        text: "Knob Dimmer",
+        value: "knobDimmer",
+        image: { avatar: true, src: "/img/dimmer.svg" },
+      },
     ];
     const sensorOptions = [
       {
@@ -176,13 +182,27 @@ export default class NewDevice extends Component {
         image: { avatar: true, src: "/img/sensorOn.svg" },
       },
     ];
-    const availableLights = [];
+    const availableSwitchDevices = [];
+    const availableDimmerDevices = [];
     this.props.devices.forEach((d) => {
-      availableLights.push({
+      if (
+        d.kind === "regularLight" ||
+        d.kind === "dimmableLight" ||
+        d.kind === "smartPlug"
+      ) {
+        availableSwitchDevices.push({
           key: d.id,
           text: d.name,
           value: d.id,
         });
+      }
+      if (d.kind === "dimmableLight") {
+        availableDimmerDevices.push({
+          key: d.id,
+          text: d.name,
+          value: d.id,
+        });
+      }
     });
     const step1 = (
       <Dropdown
@@ -222,7 +242,7 @@ export default class NewDevice extends Component {
           />
         </Form.Field>
       );
-      const switchDimmerOptions = (
+      const switchOptions = (
         <Form.Field style={{ marginTop: "1rem" }}>
           <label>Select the Lights You Want to Attach: </label>
           <Dropdown
@@ -231,7 +251,20 @@ export default class NewDevice extends Component {
             fluid
             multiple
             onChange={this.setLightsDimmerSwitch}
-            options={availableLights}
+            options={availableSwitchDevices}
+          />
+        </Form.Field>
+      );
+      const dimmerOptions = (
+        <Form.Field style={{ marginTop: "1rem" }}>
+          <label>Select the Lights You Want to Attach: </label>
+          <Dropdown
+            name="typeOfDevice"
+            placeholder="Select Lights"
+            fluid
+            multiple
+            onChange={this.setLightsDimmerSwitch}
+            options={availableDimmerDevices}
           />
         </Form.Field>
       );
@@ -239,9 +272,10 @@ export default class NewDevice extends Component {
         <Form>
           {deviceName}
           {this.state.typeOfDevice === "sensor" ? sensorForm : ""}
-          {this.state.typeOfDevice === "switch" ||
-          this.state.typeOfDevice === "dimmer"
-            ? switchDimmerOptions
+          {this.state.typeOfDevice === "switch" ? switchOptions : ""}
+          {this.state.typeOfDevice === "buttonDimmer" ||
+          this.state.typeOfDevice === "knobDimmer"
+            ? dimmerOptions
             : ""}
         </Form>
       );

smart-hut/src/components/modalform.js

@@ -22,7 +22,7 @@ export default class ModalWindow extends Component {
     this.state = {
       id: "",
       selectedIcon: "",
-      name: this.props.type === "new" ? "" : this.props.idRoom.name,
+      name: this.props.type === "new" ? "Device" : this.props.idRoom.name,
       img: this.props.type === "new" ? null : this.props.idRoom.image,
       openModal: false,
     };

smart-hut/src/views/ConfirmResetPassword.js

@@ -20,8 +20,7 @@ class Paragraph extends Component {
           <Message.Header>
             Congratulation<ins>s</ins>!
           </Message.Header>
-          Your password has been <del>succesffuly</del>
-          <ins>successfully</ins> reset
+          Your password has been successfully reset
         </Message>
       );
     }

smart-hut/src/views/FourOhFour.js

@@ -29,9 +29,8 @@ export default class FourOhFour extends Component {
 
   render() {
     return (
-      <Segment.Group>
-        <Responsive as={Segment} minWidth={768}>
       <div style={{ height: "110vh", background: "#1b1c1d" }}>
+        <Responsive minWidth={768}>
           <Grid>
             <Grid.Row color="black">
               <Grid.Column>
@@ -53,12 +52,11 @@ export default class FourOhFour extends Component {
                       </Grid.Column>
                       <Grid.Column width={8}>
                         <p>
-                            Hey what are you doing here? Looks like you are
-                            lost, this room does not exist. Maybe you were
-                            looking for the kitchen, or the garage, or the
-                            bedroom, or your love room... so don't wait here and
-                            let's go back to our main room! ...or refresh this
-                            page some times...
+                          Hey what are you doing here? Looks like you are lost,
+                          this room does not exist. Maybe you were looking for
+                          the kitchen, or the garage, or the bedroom, or your
+                          love room... so don't wait here and let's go back to
+                          our main room! ...or refresh this page some times...
                         </p>
                         <Button fluid inverted color="white">
                           <Link style={{ color: "black" }} to="/">
@@ -72,11 +70,9 @@ export default class FourOhFour extends Component {
               </Grid.Column>
             </Grid.Row>
           </Grid>
-          </div>
         </Responsive>
 
-        <Responsive as={Segment} maxWidth={768}>
-          <div style={{ background: "#1b1c1d" }}>
+        <Responsive maxWidth={768}>
           <Grid>
             <Grid.Row color="black">
               <Grid.Column>
@@ -100,12 +96,11 @@ export default class FourOhFour extends Component {
                     <Grid.Row>
                       <Grid.Column width={16}>
                         <p>
-                            Hey what are you doing here? Looks like you are
-                            lost, this room does not exist. Maybe you were
-                            looking for the kitchen, or the garage, or the
-                            bedroom, or your love room... so don't wait here and
-                            let's go back to our main room! ...or refresh this
-                            page some times...
+                          Hey what are you doing here? Looks like you are lost,
+                          this room does not exist. Maybe you were looking for
+                          the kitchen, or the garage, or the bedroom, or your
+                          love room... so don't wait here and let's go back to
+                          our main room! ...or refresh this page some times...
                         </p>
                         <Button fluid inverted color="white">
                           <Link style={{ color: "black" }} to="/">
@@ -119,9 +114,8 @@ export default class FourOhFour extends Component {
               </Grid.Column>
             </Grid.Row>
           </Grid>
-          </div>
         </Responsive>
-      </Segment.Group>
+      </div>
     );
   }
 }

smart-hut/src/views/Navbar.js

@@ -49,19 +49,15 @@ class Navbar extends Component {
   render() {
     //const { activeItem } = this.state
     return (
-      <div style={{ background: "#1b1c1d!important" }}>
-        <Segment.Group>
-          <Responsive as={Segment} minWidth={768}>
+      <div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
+        <Responsive minWidth={768}>
           <Grid>
             <Grid.Row color="black">
-                <button
-                  style={editButtonStyle}
-                  onClick={this.editModeController}
-                >
+              <button style={editButtonStyle} onClick={this.editModeController}>
                 Edit
               </button>
             </Grid.Row>
-              <Grid.Row color="black">
+            <Grid.Row>
               <Menu inverted fluid vertical>
                 <Menu.Item
                   key={-1}
@@ -128,8 +124,8 @@ class Navbar extends Component {
           </Grid>
         </Responsive>
 
-          <Responsive as={Segment} maxWidth={768}>
-            <Menu inverted>
+        <Responsive maxWidth={768}>
+          <Menu>
             <Dropdown item fluid text={this.state.activeItemName}>
               <Dropdown.Menu>
                 <Dropdown.Item
@@ -192,7 +188,6 @@ class Navbar extends Component {
             </Grid.Row>
           </Grid>
         </Responsive>
-        </Segment.Group>
       </div>
     );
   }