fixed minor bugs

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

View file

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

View file

@ -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({
key: d.id,
text: d.name,
value: d.id,
});
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>
);

View file

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

View file

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

View file

@ -29,99 +29,93 @@ export default class FourOhFour extends Component {
render() {
return (
<Segment.Group>
<Responsive as={Segment} minWidth={768}>
<div style={{ height: "110vh", background: "#1b1c1d" }}>
<Grid>
<Grid.Row color="black">
<Grid.Column>
<MyHeader logout={this.props.logout} />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column width={16}>
<Segment inverted color="red">
<Grid>
<Grid.Row>
<Grid.Column textAlign="center">
<h1>404 Page Not Found</h1>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={8}>
<Image centered src={this.state.meme} size="medium" />
</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...
</p>
<Button fluid inverted color="white">
<Link style={{ color: "black" }} to="/">
Let's go back to our main room!
</Link>
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</Grid.Column>
</Grid.Row>
</Grid>
</div>
<div style={{ height: "110vh", background: "#1b1c1d" }}>
<Responsive minWidth={768}>
<Grid>
<Grid.Row color="black">
<Grid.Column>
<MyHeader logout={this.props.logout} />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column width={16}>
<Segment inverted color="red">
<Grid>
<Grid.Row>
<Grid.Column textAlign="center">
<h1>404 Page Not Found</h1>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={8}>
<Image centered src={this.state.meme} size="medium" />
</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...
</p>
<Button fluid inverted color="white">
<Link style={{ color: "black" }} to="/">
Let's go back to our main room!
</Link>
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</Grid.Column>
</Grid.Row>
</Grid>
</Responsive>
<Responsive as={Segment} maxWidth={768}>
<div style={{ background: "#1b1c1d" }}>
<Grid>
<Grid.Row color="black">
<Grid.Column>
<MyHeader logout={this.props.logout} />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column width={16}>
<Segment inverted color="red">
<Grid>
<Grid.Row>
<Grid.Column textAlign="center">
<h1>404 Page Not Found</h1>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={16}>
<Image centered src={this.state.meme} size="medium" />
</Grid.Column>
</Grid.Row>
<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...
</p>
<Button fluid inverted color="white">
<Link style={{ color: "black" }} to="/">
Let's go back to our main room!
</Link>
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</Grid.Column>
</Grid.Row>
</Grid>
</div>
<Responsive maxWidth={768}>
<Grid>
<Grid.Row color="black">
<Grid.Column>
<MyHeader logout={this.props.logout} />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column width={16}>
<Segment inverted color="red">
<Grid>
<Grid.Row>
<Grid.Column textAlign="center">
<h1>404 Page Not Found</h1>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={16}>
<Image centered src={this.state.meme} size="medium" />
</Grid.Column>
</Grid.Row>
<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...
</p>
<Button fluid inverted color="white">
<Link style={{ color: "black" }} to="/">
Let's go back to our main room!
</Link>
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</Grid.Column>
</Grid.Row>
</Grid>
</Responsive>
</Segment.Group>
</div>
);
}
}

View file

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