Merge branch '63-fixed-minor-bugs' into 'dev'
fixed minor bugs Closes #63 See merge request sa4-2020/the-sanmarinoes/frontend!65
This commit is contained in:
Matteo Omenetti
commit
436f7c1bd5
6 changed files with 268 additions and 243 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue