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

fixed minor bugs

Browse source
This commit is contained in:
britea 2020-03-25 13:55:52 +01:00
parent cee6e3ce59
commit 7f70aeb828
6 changed files with 268 additions and 243 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
smart-hut/src/App.js
View file

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

60
smart-hut/src/components/dashboard/devices/NewDevice.js
View file

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

2
smart-hut/src/components/modalform.js
View file

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

3
smart-hut/src/views/ConfirmResetPassword.js
View file

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

174
smart-hut/src/views/FourOhFour.js
View file

@ -29,99 +29,93 @@ export default class FourOhFour extends Component {
render() { render() {
return ( return (
<Segment.Group> <div style={{ height: "110vh", background: "#1b1c1d" }}>
<Responsive as={Segment} minWidth={768}> <Responsive minWidth={768}>
<div style={{ height: "110vh", background: "#1b1c1d" }}> <Grid>
<Grid> <Grid.Row color="black">
<Grid.Row color="black"> <Grid.Column>
<Grid.Column> <MyHeader logout={this.props.logout} />
<MyHeader logout={this.props.logout} /> </Grid.Column>
</Grid.Column> </Grid.Row>
</Grid.Row> <Grid.Row color="black">
<Grid.Row color="black"> <Grid.Column width={16}>
<Grid.Column width={16}> <Segment inverted color="red">
<Segment inverted color="red"> <Grid>
<Grid> <Grid.Row>
<Grid.Row> <Grid.Column textAlign="center">
<Grid.Column textAlign="center"> <h1>404 Page Not Found</h1>
<h1>404 Page Not Found</h1> </Grid.Column>
</Grid.Column> </Grid.Row>
</Grid.Row> <Grid.Row>
<Grid.Row> <Grid.Column width={8}>
<Grid.Column width={8}> <Image centered src={this.state.meme} size="medium" />
<Image centered src={this.state.meme} size="medium" /> </Grid.Column>
</Grid.Column> <Grid.Column width={8}>
<Grid.Column width={8}> <p>
<p> Hey what are you doing here? Looks like you are lost,
Hey what are you doing here? Looks like you are this room does not exist. Maybe you were looking for
lost, this room does not exist. Maybe you were the kitchen, or the garage, or the bedroom, or your
looking for the kitchen, or the garage, or the love room... so don't wait here and let's go back to
bedroom, or your love room... so don't wait here and our main room! ...or refresh this page some times...
let's go back to our main room! ...or refresh this </p>
page some times... <Button fluid inverted color="white">
</p> <Link style={{ color: "black" }} to="/">
<Button fluid inverted color="white"> Let's go back to our main room!
<Link style={{ color: "black" }} to="/"> </Link>
Let's go back to our main room! </Button>
</Link> </Grid.Column>
</Button> </Grid.Row>
</Grid.Column> </Grid>
</Grid.Row> </Segment>
</Grid> </Grid.Column>
</Segment> </Grid.Row>
</Grid.Column> </Grid>
</Grid.Row>
</Grid>
</div>
</Responsive> </Responsive>
<Responsive as={Segment} maxWidth={768}> <Responsive maxWidth={768}>
<div style={{ background: "#1b1c1d" }}> <Grid>
<Grid> <Grid.Row color="black">
<Grid.Row color="black"> <Grid.Column>
<Grid.Column> <MyHeader logout={this.props.logout} />
<MyHeader logout={this.props.logout} /> </Grid.Column>
</Grid.Column> </Grid.Row>
</Grid.Row> <Grid.Row color="black">
<Grid.Row color="black"> <Grid.Column width={16}>
<Grid.Column width={16}> <Segment inverted color="red">
<Segment inverted color="red"> <Grid>
<Grid> <Grid.Row>
<Grid.Row> <Grid.Column textAlign="center">
<Grid.Column textAlign="center"> <h1>404 Page Not Found</h1>
<h1>404 Page Not Found</h1> </Grid.Column>
</Grid.Column> </Grid.Row>
</Grid.Row> <Grid.Row>
<Grid.Row> <Grid.Column width={16}>
<Grid.Column width={16}> <Image centered src={this.state.meme} size="medium" />
<Image centered src={this.state.meme} size="medium" /> </Grid.Column>
</Grid.Column> </Grid.Row>
</Grid.Row> <Grid.Row>
<Grid.Row> <Grid.Column width={16}>
<Grid.Column width={16}> <p>
<p> Hey what are you doing here? Looks like you are lost,
Hey what are you doing here? Looks like you are this room does not exist. Maybe you were looking for
lost, this room does not exist. Maybe you were the kitchen, or the garage, or the bedroom, or your
looking for the kitchen, or the garage, or the love room... so don't wait here and let's go back to
bedroom, or your love room... so don't wait here and our main room! ...or refresh this page some times...
let's go back to our main room! ...or refresh this </p>
page some times... <Button fluid inverted color="white">
</p> <Link style={{ color: "black" }} to="/">
<Button fluid inverted color="white"> Let's go back to our main room!
<Link style={{ color: "black" }} to="/"> </Link>
Let's go back to our main room! </Button>
</Link> </Grid.Column>
</Button> </Grid.Row>
</Grid.Column> </Grid>
</Grid.Row> </Segment>
</Grid> </Grid.Column>
</Segment> </Grid.Row>
</Grid.Column> </Grid>
</Grid.Row>
</Grid>
</div>
</Responsive> </Responsive>
</Segment.Group> </div>
); );
} }
} }

269
smart-hut/src/views/Navbar.js
View file

@ -49,150 +49,145 @@ class Navbar extends Component {
render() { render() {
//const { activeItem } = this.state //const { activeItem } = this.state
return ( return (
<div style={{ background: "#1b1c1d!important" }}> <div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
<Segment.Group> <Responsive minWidth={768}>
<Responsive as={Segment} minWidth={768}> <Grid>
<Grid> <Grid.Row color="black">
<Grid.Row color="black"> <button style={editButtonStyle} onClick={this.editModeController}>
<button Edit
style={editButtonStyle} </button>
onClick={this.editModeController} </Grid.Row>
<Grid.Row>
<Menu inverted fluid vertical>
<Menu.Item
key={-1}
id={-1}
name="Home"
active={this.state.activeItem === -1}
onClick={this.handleClick}
> >
Edit <Grid>
</button> <Grid.Row>
</Grid.Row> <Grid.Column>
<Grid.Row color="black"> <Icon name="home" size="small" />
<Menu inverted fluid vertical> </Grid.Column>
<Menu.Item <Grid.Column>HOME</Grid.Column>
key={-1} </Grid.Row>
id={-1} </Grid>
name="Home" </Menu.Item>
active={this.state.activeItem === -1}
onClick={this.handleClick}
>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small" />
</Grid.Column>
<Grid.Column>HOME</Grid.Column>
</Grid.Row>
</Grid>
</Menu.Item>
{this.props.rooms {this.props.rooms
? this.props.rooms.map((e, i) => { ? this.props.rooms.map((e, i) => {
return ( return (
<Menu.Item <Menu.Item
id={e.id} id={e.id}
key={i} key={i}
name={e.name} name={e.name}
active={this.state.activeItem === e.id} active={this.state.activeItem === e.id}
onClick={this.handleClick} onClick={this.handleClick}
> >
<Grid> <Grid>
<Grid.Row> <Grid.Row>
<Grid.Column> <Grid.Column>
<Icon name={e.icon} size="small" /> <Icon name={e.icon} size="small" />
</Grid.Column> </Grid.Column>
<Grid.Column width={8}>{e.name}</Grid.Column> <Grid.Column width={8}>{e.name}</Grid.Column>
<Grid.Column floated="right"> <Grid.Column floated="right">
{this.state.editMode ? ( {this.state.editMode ? (
<ModalWindow <ModalWindow
type="modify" type="modify"
idRoom={e} idRoom={e}
updateRoom={this.props.updateRoom} updateRoom={this.props.updateRoom}
deleteRoom={this.props.deleteRoom} deleteRoom={this.props.deleteRoom}
/> />
) : null} ) : null}
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Menu.Item> </Menu.Item>
); );
}) })
: null} : null}
<Menu.Item <Menu.Item
name="newM" name="newM"
active={this.state.activeItem === "newM"} active={this.state.activeItem === "newM"}
> >
<Grid> <Grid>
<Grid.Row centered name="new"> <Grid.Row centered name="new">
<ModalWindow type="new" addRoom={this.props.addRoom} /> <ModalWindow type="new" addRoom={this.props.addRoom} />
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Menu.Item> </Menu.Item>
</Menu> </Menu>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Responsive> </Responsive>
<Responsive as={Segment} maxWidth={768}> <Responsive maxWidth={768}>
<Menu inverted> <Menu>
<Dropdown item fluid text={this.state.activeItemName}> <Dropdown item fluid text={this.state.activeItemName}>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item <Dropdown.Item
key={-1} key={-1}
id={-1} id={-1}
name="Home" name="Home"
active={this.state.activeItem === "Home"} active={this.state.activeItem === "Home"}
onClick={this.handleClick} onClick={this.handleClick}
> >
<Grid> <Grid>
<Grid.Row> <Grid.Row>
<Grid.Column> <Grid.Column>
<Icon name="home" size="small" /> <Icon name="home" size="small" />
</Grid.Column> </Grid.Column>
<Grid.Column>Home</Grid.Column> <Grid.Column>Home</Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Dropdown.Item> </Dropdown.Item>
{this.props.rooms {this.props.rooms
? this.props.rooms.map((e, i) => { ? this.props.rooms.map((e, i) => {
return ( return (
<Dropdown.Item <Dropdown.Item
id={e.id} id={e.id}
key={i} key={i}
name={e.name} name={e.name}
active={this.state.activeItem === e.id} active={this.state.activeItem === e.id}
onClick={this.handleClick} onClick={this.handleClick}
> >
<Grid> <Grid>
<Grid.Row> <Grid.Row>
<Grid.Column width={1}> <Grid.Column width={1}>
<Icon name={e.icon} size="small" /> <Icon name={e.icon} size="small" />
</Grid.Column> </Grid.Column>
<Grid.Column>{e.name}</Grid.Column> <Grid.Column>{e.name}</Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Dropdown.Item> </Dropdown.Item>
); );
}) })
: null} : null}
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
</Menu> </Menu>
<Grid inverted> <Grid inverted>
<Grid.Row> <Grid.Row>
<Grid.Column width={8}>
<ModalWindow type="new" addRoom={this.props.addRoom} />
</Grid.Column>
{this.state.activeItem !== -1 ? (
<Grid.Column width={8}> <Grid.Column width={8}>
<ModalWindow type="new" addRoom={this.props.addRoom} /> <ModalWindow
type="modify"
idRoom={this.state.activeRoom}
updateRoom={this.props.updateRoom}
deleteRoom={this.props.deleteRoom}
/>
</Grid.Column> </Grid.Column>
{this.state.activeItem !== -1 ? ( ) : null}
<Grid.Column width={8}> </Grid.Row>
<ModalWindow </Grid>
type="modify" </Responsive>
idRoom={this.state.activeRoom}
updateRoom={this.props.updateRoom}
deleteRoom={this.props.deleteRoom}
/>
</Grid.Column>
) : null}
</Grid.Row>
</Grid>
</Responsive>
</Segment.Group>
</div> </div>
); );
} }