smarthut/frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix-navbar

Browse Source
This commit is contained in:
britea 2020-03-26 00:15:02 +01:00
parent ecbe64d21e
commit e5b5a2f903
18 changed files with 188 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
smart-hut/src/App.js
View File

@ -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 {

8
smart-hut/src/client_server.js
View File

@ -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);
},

150
smart-hut/src/components/HeaderController.js
View File

@ -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>
<BrowserStructure logout={this.props.logout} />
</BrowserView>
<MobileView>
<MobileStructure />
</MobileView>
<Responsive minWidth={768}>
<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}>
<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>
);
}

6
smart-hut/src/components/dashboard/devices/Dimmer.js
View File

@ -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 }}

3
smart-hut/src/components/dashboard/devices/DimmerStyle.js
View File

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

14
smart-hut/src/components/dashboard/devices/Light.js
View File

@ -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>

3
smart-hut/src/components/dashboard/devices/LightStyle.js
View File

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

2
smart-hut/src/components/dashboard/devices/NewDevice.js
View File

@ -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 === "") {

2
smart-hut/src/components/dashboard/devices/Sensor.js
View File

@ -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}`} />

6
smart-hut/src/components/dashboard/devices/SensorStyle.js
View File

@ -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 = {

4
smart-hut/src/components/dashboard/devices/SmartPlug.js
View File

@ -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={

3
smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
View File

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

4
smart-hut/src/components/dashboard/devices/Switch.js
View File

@ -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={

3
smart-hut/src/components/dashboard/devices/SwitchStyle.js
View File

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

18
smart-hut/src/components/modalform.js
View File

@ -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,
img: this.props.type === "new" ? null : this.props.idRoom.image,
name: this.props.type === "new" ? "New Room" : this.idRoom.name,
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>

5
smart-hut/src/views/Dashboard.js
View File

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

62
smart-hut/src/views/Home.js
View File

@ -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 as="a">Contact Us</List.Item>
<List.Item as="a">Religious Ceremonies</List.Item>
<List.Item as="a">Gazebo Plans</List.Item>
<List.Item>
<a href="https://usi.ch" target="blank">
Usi
</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 as="a">DNA FAQ</List.Item>
<List.Item as="a">How To Access</List.Item>
<List.Item as="a">Favorite X-Men</List.Item>
<List.Item>
<a href="https://semantic-ui.com/" target="blank">
Semantic UI
</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}>

12
smart-hut/src/views/Navbar.js
View File

@ -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}
/>