fix-navbar

smart-hut/src/App.js

@@ -45,6 +45,7 @@ class App extends Component {
     this.state = {
       loggedIn: loggedIn,
       token: token,
+      info: "",
     };
 
     this.auth = this.auth.bind(this);
@@ -78,6 +79,7 @@ class App extends Component {
             token: res.data.jwttoken,
             loggedIn: true,
           });
+          this.getInfo();
           return res;
           //this.props.history.push("/dashboard");
         } else {

smart-hut/src/client_server.js

@@ -160,6 +160,14 @@ export var call = {
   register: function (data, headers) {
     return axios.post(config + "register", data);
   },
+  getUserInfo: function (token) {
+    if (!token) {
+      token = tkn;
+    }
+    return axios.get(config + "auth/profile", {
+      headers: { Authorization: "Bearer " + token },
+    });
+  },
   initResetPassword: function (data, headers) {
     return axios.post(config + "register/init-reset-password", data);
   },

smart-hut/src/components/HeaderController.js

@@ -1,7 +1,16 @@
 import React from "react";
-import { Dropdown, Icon, Grid, Divider } from "semantic-ui-react";
+import {
+  Dropdown,
+  Icon,
+  Grid,
+  Divider,
+  Button,
+  Label,
+  Responsive,
+} from "semantic-ui-react";
 import { Segment, Image } from "semantic-ui-react";
 import { BrowserView, MobileView } from "react-device-detect";
+import { call } from "../client_server";
 
 const AvatarImage = () => (
   <Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
@@ -19,86 +28,73 @@ const IconHomeImage = () => (
 
 const TitleImage = () => <Image src="sm_logo.png" size="medium" centered />;
 
-const BrowserStructure = (props) => (
-  <Grid columns="equal" divided inverted padded>
-    <Grid.Row color="black" textAlign="center">
-      <Grid.Column width={3} height={0.5}>
-        <Segment color="black" inverted>
-          <IconHomeImage />
-        </Segment>
-      </Grid.Column>
-      <Grid.Column>
-        <Segment color="black" inverted>
-          <TitleImage />
-        </Segment>
-      </Grid.Column>
-      <Grid.Column width={2} heigth={1}>
-        <AvatarImage />
-        <Divider />
-        <Dropdown item icon="setting" size="huge">
-          <Dropdown.Menu>
-            <Dropdown.Item>
-              <Icon name="dropdown" />
-              <span className="text">Settings</span>
-              <Dropdown.Menu>
-                <Dropdown.Item>Document</Dropdown.Item>
-                <Dropdown.Item>Image</Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown.Item>
-            <Dropdown.Item>See profile...</Dropdown.Item>
-            <Dropdown.Divider />
-            <Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
-          </Dropdown.Menu>
-        </Dropdown>
-      </Grid.Column>
-    </Grid.Row>
-  </Grid>
-);
-
-const MobileStructure = (props) => (
-  <Grid columns="equal" divided inverted padded>
-    <Grid.Row color="black" textAlign="center">
-      <Segment color="black" inverted>
-        <TitleImage />
-      </Segment>
-    </Grid.Row>
-    <Grid.Row color="black" textAlign="center">
-      <Grid.Column>
-        <IconHomeImage />
-      </Grid.Column>
-      <Grid.Column>
-        <AvatarImage />
-        <Divider />
-        <Dropdown item icon="setting" size="huge">
-          <Dropdown.Menu>
-            <Dropdown.Item>
-              <Icon name="dropdown" />
-              <span className="text">Settings</span>
-              <Dropdown.Menu>
-                <Dropdown.Item>Document</Dropdown.Item>
-                <Dropdown.Item>Image</Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown.Item>
-            <Dropdown.Item>See profile...</Dropdown.Item>
-            <Dropdown.Divider />
-            <Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
-          </Dropdown.Menu>
-        </Dropdown>
-      </Grid.Column>
-    </Grid.Row>
-  </Grid>
-);
-
 export default class MyHeader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: "",
+    };
+
+    this.getInfo();
+  }
+  getInfo() {
+    call.getUserInfo(this.state.token).then((res) => {
+      if (res.status === 200) {
+        this.setState({
+          username: res.data.username,
+        });
+      }
+    });
+  }
   render() {
     return (
       <div>
-        <BrowserView>
+        <Responsive minWidth={768}>
-          <BrowserStructure logout={this.props.logout} />
+          <Grid columns="equal" divided inverted padded>
-        </BrowserView>
+            <Grid.Row color="black" textAlign="center">
-        <MobileView>
+              <Grid.Column width={3} height={0.5}>
-          <MobileStructure />
+                <Segment color="black" inverted>
-        </MobileView>
+                  <IconHomeImage />
+                </Segment>
+              </Grid.Column>
+              <Grid.Column>
+                <Segment color="black" inverted>
+                  <TitleImage />
+                </Segment>
+              </Grid.Column>
+              <Grid.Column width={2} heigth={1}>
+                <Label as="a" image color="black">
+                  <img alt="SmartHut logo" src="smart-home.png" />
+                  {this.state.username}
+                </Label>
+                <Divider />
+                <Button onClick={this.props.logout}>Logout</Button>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Responsive>
+        <Responsive maxWidth={768}>
+          <Grid columns="equal" divided inverted padded>
+            <Grid.Row color="black" textAlign="center">
+              <Segment color="black" inverted>
+                <TitleImage />
+              </Segment>
+            </Grid.Row>
+            <Grid.Row color="black" textAlign="center">
+              <Grid.Column>
+                <IconHomeImage />
+              </Grid.Column>
+              <Grid.Column>
+                <Label as="a" image color="black">
+                  <img alt="SmartHut logo" src="smart-home.png" />
+                  {this.state.username}
+                </Label>
+                <Divider />
+                <Button onClick={this.props.logout}>Logout</Button>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Responsive>
       </div>
     );
   }

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

@@ -71,7 +71,9 @@ export class ButtonDimmer extends Component {
           }
         />
         <img alt="icon" src="/img/buttonDimmer.svg" />
-        <span className="knob">{this.props.device.name}</span>
+        <span className="knob">
+          {this.props.device.name} ({this.props.device.id})
+        </span>
         <PlusPanel name="UP" onClick={this.increaseIntensity}>
           <span>&#43;</span>
         </PlusPanel>
@@ -136,7 +138,7 @@ export class KnobDimmer extends Component {
             dy="0.3em"
             fontWeight="bold"
           >
-            {this.props.device.name}
+            {this.props.device.name} ({this.props.device.id})
           </text>
           <CircularProgress
             style={{ ...KnobProgress, opacity: this.state.value + 0.1 }}

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

@@ -49,6 +49,9 @@ export const textStyle = {
   fill: "#1a2849",
   fontSize: "1.5rem",
   fontFamily: "Lato",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
 };
 
 export const knobIcon = {

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

@@ -84,6 +84,10 @@ export default class Light extends Component {
     });
   };
 
+  get intensity() {
+    return isNaN(this.state.intensity) ? 0 : this.state.intensity;
+  }
+
   render() {
     const intensityLightView = (
       <div style={LightDimmerContainer}>
@@ -96,7 +100,7 @@ export default class Light extends Component {
         />
         <CircularInput
           style={LightDimmerStyle}
-          value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
+          value={+(Math.round(this.intensity / 100 + "e+2") + "e-2")}
           onChange={this.setIntensity}
         >
           <text
@@ -107,12 +111,12 @@ export default class Light extends Component {
             dy="0.3em"
             fontWeight="bold"
           >
-            {this.props.device.name}
+            {this.props.device.name} <br /> ({this.props.device.id})
           </text>
           <CircularProgress
             style={{
               ...KnobProgress,
-              opacity: this.state.intensity / 100 + 0.3,
+              opacity: this.intensity / 100 + 0.3,
             }}
           />
           <CircularThumb style={CircularThumbStyle} />
@@ -134,7 +138,9 @@ export default class Light extends Component {
         <div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
           <Image src={this.getIcon()} style={iconStyle} />
           <BottomPanel style={{ backgroundColor: "#ffa41b" }}>
-            <h5 style={nameStyle}>{this.props.device.name}</h5>
+            <h5 style={nameStyle}>
+              {this.props.device.name} ({this.props.device.id})
+            </h5>
           </BottomPanel>
         </div>
       </StyledDiv>

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

@@ -17,6 +17,9 @@ export const textStyle = {
   fill: "#ffd31d",
   fontSize: "1.5rem",
   fontFamily: "Lato",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
 };
 
 export const nameStyle = {

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

@@ -110,7 +110,7 @@ export default class NewDevice extends Component {
         if (this.state.name === "") {
           data.params["name"] = "Dimmable Light";
         }
-        data.params["intensity"] = 1;
+        data.params["intensity"] = 0;
         break;
       case "sensor":
         if (this.state.name === "") {

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

@@ -175,7 +175,7 @@ export default class Sensor extends Component {
                 dy="0.4em"
                 fontWeight="bold"
               >
-                {this.setName()}
+                {this.setName()} ({this.props.device.id})
               </text>
             </CircularInput>
             <Image style={iconSensorStyle} src={`/img/${this.icon}`} />

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

@@ -18,6 +18,9 @@ export const sensorText = {
   fill: "#3e99ff",
   fontSize: "1.2rem",
   fontFamily: "Lato",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
 };
 
 export const valueStyle = {
@@ -61,6 +64,9 @@ export const nameMotionStyle = {
   left: "50%",
   transform: "translateX(-50%)",
   fontSize: "1.2rem",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
 };
 
 export const motionSensorIcon = {

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

@@ -75,7 +75,9 @@ export default class SmartPlug extends Component {
           }
         />
         <Image src={this.getIcon()} style={imageStyle} />
-        <span style={nameStyle}>{this.props.device.name}</span>
+        <span style={nameStyle}>
+          {this.props.device.name} ({this.props.device.id})
+        </span>
 
         <BottomPanel
           style={

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

@@ -32,4 +32,7 @@ export const nameStyle = {
   top: "30%",
   left: "50%",
   transform: "translateX(-50%)",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
 };

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

@@ -67,7 +67,9 @@ export default class Switch extends Component {
         />
 
         <Image src={this.getIcon()} style={imageStyle} />
-        <span style={nameStyle}>{this.props.device.name}</span>
+        <span style={nameStyle}>
+          {this.props.device.name} ({this.props.device.id})
+        </span>
 
         <BottomPanel
           style={

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

@@ -13,6 +13,9 @@ export const nameStyle = {
   top: "30%",
   left: "50%",
   transform: "translateX(-50%)",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
 };
 
 export const turnedOnStyle = {

smart-hut/src/components/modalform.js

@@ -17,13 +17,17 @@ export default class ModalWindow extends Component {
   constructor(props) {
     super(props);
 
-    console.table(this.props);
+    if (typeof this.props.idRoom === "function") {
+      this.idRoom = this.props.idRoom();
+    } else {
+      this.idRoom = this.props.idRoom;
+    }
 
     this.state = {
       id: "",
       selectedIcon: "",
-      name: this.props.type === "new" ? "Device" : this.props.idRoom.name,
+      name: this.props.type === "new" ? "New Room" : this.idRoom.name,
-      img: this.props.type === "new" ? null : this.props.idRoom.image,
+      img: this.props.type === "new" ? null : this.idRoom.image,
       openModal: false,
     };
 
@@ -50,9 +54,9 @@ export default class ModalWindow extends Component {
     let data = {
       icon:
         this.state.selectedIcon === ""
-          ? this.props.idRoom.icon
+          ? this.idRoom.icon
           : this.state.selectedIcon,
-      name: this.state.name === "" ? this.props.idRoom.name : this.state.name,
+      name: this.state.name === "" ? this.idRoom.name : this.state.name,
       image: this.state.img,
     };
     this.props.updateRoom(data);
@@ -98,7 +102,7 @@ export default class ModalWindow extends Component {
       padding: "10px 10px",
       margin: "10px 0px",
     };
-
+    console.log(this.state, this.idRoom);
     return (
       <div>
         <Responsive minWidth={768}>
@@ -167,7 +171,7 @@ export default class ModalWindow extends Component {
               <SelectIcons
                 updateIcon={this.updateIcon}
                 currentIcon={
-                  this.props.type === "new" ? "home" : this.props.idRoom.icon
+                  this.props.type === "new" ? "home" : this.idRoom.icon
                 }
               />
             </div>

smart-hut/src/views/Dashboard.js

@@ -168,10 +168,7 @@ export default class Dashboard extends Component {
     call
       .devicePost(data, this.props.tkn)
       .then((res) => {
-        this.setState((state) => ({
+        this.getDevices();
-          devices: state.devices.concat([res.data]),
-        }));
-        return this.state.devices;
       })
       .catch((err) => {});
   }

smart-hut/src/views/Home.js

@@ -207,11 +207,6 @@ const Home = () => (
             <Image bordered rounded size="large" src="/img/banner.jpg" />
           </Grid.Column>
         </Grid.Row>
-        <Grid.Row>
-          <Grid.Column textAlign="center">
-            <Button size="huge">Check It Out</Button>
-          </Grid.Column>
-        </Grid.Row>
       </Grid>
     </Segment>
 
@@ -226,9 +221,6 @@ const Home = () => (
           the set the illumination of your entire place. Follow the intelligent
           light, follow SmartHut.
         </p>
-        <Button as="a" size="large">
-          Read More
-        </Button>
       </Container>
     </Segment>
 
@@ -239,19 +231,57 @@ const Home = () => (
             <Grid.Column width={3}>
               <Header inverted as="h4" content="About" />
               <List link inverted>
-                <List.Item as="a">Sitemap</List.Item>
+                <List.Item>
-                <List.Item as="a">Contact Us</List.Item>
+                  <a href="https://usi.ch" target="blank">
-                <List.Item as="a">Religious Ceremonies</List.Item>
+                    Usi
-                <List.Item as="a">Gazebo Plans</List.Item>
+                  </a>
+                </List.Item>
+                <List.Item>
+                  <a href="https://vimtok.com" target="blank">
+                    VimTok
+                  </a>
+                </List.Item>
+                <List.Item>
+                  <a href="https://legendofajax.fun" target="blank">
+                    Legend of Ajax
+                  </a>
+                </List.Item>
+                <List.Item>
+                  <a href="https://theshell.ch" target="blank">
+                    The Shell
+                  </a>
+                </List.Item>
               </List>
             </Grid.Column>
             <Grid.Column width={3}>
               <Header inverted as="h4" content="Services" />
               <List link inverted>
-                <List.Item as="a">Banana Pre-Order</List.Item>
+                <List.Item>
-                <List.Item as="a">DNA FAQ</List.Item>
+                  <a href="https://semantic-ui.com/" target="blank">
-                <List.Item as="a">How To Access</List.Item>
+                    Semantic UI
-                <List.Item as="a">Favorite X-Men</List.Item>
+                  </a>
+                </List.Item>
+                <List.Item>
+                  <a
+                    href="https://worldmeters.info/coronavirus/"
+                    target="blank"
+                  >
+                    Stay Safe
+                  </a>
+                </List.Item>
+                <List.Item>
+                  <a
+                    href="http://hasthelargehadroncolliderdestroyedtheworldyet.com/"
+                    target="blank"
+                  >
+                    Stay Home
+                  </a>
+                </List.Item>
+                <List.Item>
+                  <a href="http://Howmuchtoiletpaper.com/" target="blank">
+                    Can you Survive?
+                  </a>
+                </List.Item>
               </List>
             </Grid.Column>
             <Grid.Column width={7}>

smart-hut/src/views/Navbar.js

@@ -26,19 +26,18 @@ class Navbar extends Component {
 
   handleClick = (e, { id, name }) => {
     const room = this.props.rooms.filter((d) => d.id === id)[0];
+    console.log(room);
     this.setState({
       activeItem: id,
-      activeRoom: room,
       activeItemName: name,
     });
+    this.activeRoom = room;
+    console.log(this.activeRoom);
     this.forceUpdate();
-    console.log(this.state.activeRoom);
     this.props.handleItemClick(id);
   };
 
   render() {
-    const { activeRoom } = this.state;
-    console.log("DIO", activeRoom);
     return (
       <div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
         <Responsive minWidth={768}>
@@ -170,7 +169,10 @@ class Navbar extends Component {
                 <Grid.Column width={8}>
                   <ModalWindow
                     type="modify"
-                    idRoom={activeRoom}
+                    idRoom={() => {
+                      console.log("MALUSA", this.activeRoom);
+                      return this.activeRoom;
+                    }}
                     updateRoom={this.props.updateRoom}
                     deleteRoom={this.props.deleteRoom}
                   />