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

Merge branch '93-guests-implement-scenes-2' into 'dev'

Browse Source 
Resolve "Guests: implement scenes"

Closes #93

See merge request sa4-2020/the-sanmarinoes/frontend!124
This commit is contained in:
Andrea Brites Marto 2020-05-05 17:59:58 +02:00
commit ede920b628
10 changed files with 162 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,12 @@
import React from "react";
import { Grid, Divider, Button, Label, Responsive } from "semantic-ui-react";
import {
Grid,
Divider,
Button,
Label,
Responsive,
Checkbox,
} from "semantic-ui-react";
import { Segment, Image } from "semantic-ui-react";
import { RemoteService } from "../remote";
import { withRouter } from "react-router-dom";
@ -35,6 +42,16 @@ export class MyHeader extends React.Component {
.catch((err) => console.error("MyHeader fetch user info error", err));
}
setCameraEnabled(val) {
let enabled = {
cameraEnabled: val,
};
this.props
.userPermissions(enabled)
.then(() => this.getInfo())
.catch((err) => console.error("Camera enabled", err));
}
render() {
return (
<div>
@ -60,6 +77,11 @@ export class MyHeader extends React.Component {
<Button basic inverted onClick={this.logout}>
Logout
</Button>
<Checkbox
checked={this.props.cameraEnabled}
toggle
onChange={(e, val) => this.setCameraEnabled(val.checked)}
/>
</Grid.Column>
</Grid.Row>
</Grid>
@ -94,6 +116,7 @@ export class MyHeader extends React.Component {
const mapStateToProps = (state, _) => ({
username:
state.userInfo && state.userInfo.username ? state.userInfo.username : "",
cameraEnabled: state.userInfo ? state.userInfo.cameraEnabled : false,
});
const LoginContainer = connect(
mapStateToProps,

50
smart-hut/src/components/HostModal.js
View File

@ -22,8 +22,7 @@ class HostModal extends Component {
.then(() => {
this.setState({
...this.state,
guests: this.props.guests
.map((u) => u.id),
guests: this.props.guests.map((u) => u.id),
});
})
.catch(console.error);
@ -32,11 +31,13 @@ class HostModal extends Component {
.then((users) =>
this.setState({
...this.state,
users: users.filter(u => u.id !== this.props.currentUserId).map((u) => ({
key: u.id,
text: `@${u.username} (${u.name})`,
value: u.id,
})),
users: users
.filter((u) => u.id !== this.props.currentUserId)
.map((u) => ({
key: u.id,
text: `@${u.username} (${u.name})`,
value: u.id,
})),
})
)
.catch(console.error);
@ -86,25 +87,20 @@ class HostModal extends Component {
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
<Header>Select guests</Header>
<Modal.Content>
<marquee scrollamount="50">
<h1>Spaghetti!</h1>
</marquee>
<Modal.Content>
<Form>
<Form.Field style={{ marginTop: "1rem" }}>
<label>Select which users are your guests: </label>
<Dropdown
name="guests"
placeholder="Select Guests"
fluid
multiple
onChange={this.setGuests}
options={this.state.users}
value={this.state.guests}
/>
</Form.Field>
</Form>
</Modal.Content>
<Form>
<Form.Field style={{ marginTop: "1rem" }}>
<label>Select which users are your guests: </label>
<Dropdown
name="guests"
placeholder="Select Guests"
fluid
multiple
onChange={this.setGuests}
options={this.state.users}
value={this.state.guests}
/>
</Form.Field>
</Form>
</Modal.Content>
<Modal.Actions>
<Button color="red" onClick={this.closeModal}>
@ -127,7 +123,7 @@ const setActiveHost = (activeHost) => {
const mapStateToProps = (state) => ({
guests: state.guests,
currentUserId: state.userInfo.id
currentUserId: state.userInfo.id,
});
const HostModalContainer = connect(
mapStateToProps,

3
smart-hut/src/components/RoomModal.js
View File

@ -13,7 +13,6 @@ import SelectIcons from "./SelectIcons";
import { connect } from "react-redux";
import { RemoteService } from "../remote";
import { appActions } from "../storeActions";
import { update } from "immutability-helper";
const NO_IMAGE = "https://react.semantic-ui.com/images/wireframe/image.png";
@ -41,7 +40,7 @@ class RoomModal extends Component {
unsetImage = (e) => {
e.preventDefault();
this.setState({ ...this.state, img: "" });
}
};
setInitialState() {
this.setState(this.initialState);

22
smart-hut/src/components/SceneModal.js
View File

@ -8,6 +8,7 @@ import {
Form,
Input,
Dropdown,
Checkbox,
} from "semantic-ui-react";
import SelectIcons from "./SelectIcons";
import { connect } from "react-redux";
@ -23,6 +24,7 @@ class SceneModal extends Component {
this.modifySceneModal = this.modifySceneModal.bind(this);
this.deleteScene = this.deleteScene.bind(this);
this.updateIcon = this.updateIcon.bind(this);
this.setGuestAccessEnabled = this.setGuestAccessEnabled.bind(this);
this.setCopyFrom = this.setCopyFrom.bind(this);
}
@ -41,6 +43,8 @@ class SceneModal extends Component {
selectedIcon: "home",
scenes: this.scenes,
copyFrom: null,
guestAccessEnabled:
this.type === "new" ? null : this.props.scene.guestAccessEnabled,
};
}
@ -79,7 +83,9 @@ class SceneModal extends Component {
let data = {
name: this.state.name,
icon: this.state.selectedIcon,
guestAccessEnabled: this.state.guestAccessEnabled,
};
console.log(data);
this.props
.saveScene(data, this.props.id)
@ -119,6 +125,11 @@ class SceneModal extends Component {
this.setState({ ...this.state, copyFrom: copyFrom.value });
}
setGuestAccessEnabled(val) {
console.log(this.state, val);
this.setState({ guestAccessEnabled: val });
}
render() {
const spaceDiv = {
background: "#f4f4f4",
@ -210,6 +221,17 @@ class SceneModal extends Component {
/>
</Form.Field>
)}
{this.type === "modify" ? (
<Form.Field>
<Checkbox
checked={this.state.guestAccessEnabled}
toggle
onChange={(e, val) =>
this.setGuestAccessEnabled(val.checked)
}
/>
</Form.Field>
) : null}
</Form>
{this.type === "modify" ? (

71
smart-hut/src/components/dashboard/HostsPanel.js
View File

@ -1,7 +1,7 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";
import { Card, Segment, Header, Icon } from "semantic-ui-react";
import { Card, Segment, Header, Icon, Button } from "semantic-ui-react";
import Device from "../../components/dashboard/devices/Device";
class HostsPanel extends Component {
@ -12,31 +12,59 @@ class HostsPanel extends Component {
) {
this.props.fetchDevices(null, this.props.activeHost).catch(console.error);
this.props.fetchAllRooms(this.props.activeHost).catch(console.error);
this.props.fetchAllScenes(this.props.activeHost).catch(console.error);
}
}
render() {
if (this.props.isActiveDefaultHost) {
return (
<Segment placeholder style={{ paddingTop: "3rem" }}>
<Header icon>
<Icon name="folder open" />
Please select a host to visit on the left.
</Header>
</Segment>
);
}
return (
<Card.Group centered style={{ paddingTop: "3rem" }}>
{this.props.isActiveDefaultHost && (
<Segment placeholder>
<Header icon>
<Icon name="folder open" />
Please select a host to visit on the left.
</Header>
</Segment>
)}
{this.props.hostDeviceIds.map((id) => {
return (
<Device
key={id}
hostId={this.props.activeHost}
tab="Hosts"
id={id}
/>
);
})}
</Card.Group>
<React.Fragment>
<Header style={{ textAlign: "center", marginTop: "3rem" }} as="h3">
Scenes
</Header>
<Card.Group centered>
{this.props.hostScenes.map((scene) => (
<Card>
<Card.Header textAlign="center">
<Header style={{ margin: "1.5rem 0" }} as="h3">
{scene.name} <Icon name={scene.icon} />
</Header>
</Card.Header>
<Card.Content extras>
<div className="ui two buttons">
<Button>Apply</Button>
</div>
</Card.Content>
</Card>
))}
</Card.Group>
<Header style={{ textAlign: "center" }} as="h3">
Devices
</Header>
<Card.Group centered>
{this.props.hostDeviceIds.map((id) => {
return (
<Device
key={id}
hostId={this.props.activeHost}
tab="Hosts"
id={id}
/>
);
})}
</Card.Group>
</React.Fragment>
);
}
}
@ -44,6 +72,7 @@ class HostsPanel extends Component {
const mapStateToProps = (state, _) => ({
isActiveDefaultHost: state.active.activeHost === -1,
activeHost: state.active.activeHost,
hostScenes: state.hostScenes[state.active.activeHost] || [],
hostDevices: state.hostDevices,
hostDeviceIds: Object.keys(state.hostDevices[state.active.activeHost] || {}),
});

10
smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
View File

@ -1,13 +1,5 @@
import React, { Component, useState } from "react";
import {
Button,
Form,
Icon,
Header,
Modal,
Input,
Checkbox,
} from "semantic-ui-react";
import { Button, Form, Icon, Header, Modal, Input } from "semantic-ui-react";
import { connect } from "react-redux";
import { RemoteService } from "../../../remote";

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

@ -31,7 +31,7 @@ class Videocam extends Component {
setOnOff(onOff) {
const turn = onOff;
if (this.props.tab === "Devices") {
if (this.props.tab === "Devices" || this.props.tab === "Hosts") {
this.props
.saveDevice({ ...this.props.device, on: turn })
.then((res) =>

28
smart-hut/src/remote.js
View File

@ -242,6 +242,20 @@ export const RemoteService = {
});
},
/**
* Fetches user information via REST calls, if it is logged in
* @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
* with user-fiendly errors as a RemoteError
*/
userPermissions: (data) => {
return (dispatch) => {
return Endpoint.put("/user/permissions", {}, data).catch((err) => {
console.warn("Fetch user info error", err);
throw new RemoteError(["Network error"]);
});
};
},
/**
* Fetches user information via REST calls, if it is logged in
* @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
@ -290,10 +304,17 @@ export const RemoteService = {
* @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
* with user-fiendly errors as a RemoteError
*/
fetchAllScenes: () => {
fetchAllScenes: (hostId = null) => {
return (dispatch) => {
return Endpoint.get("/scene")
.then((res) => void dispatch(actions.scenesUpdate(res.data)))
return Endpoint.get("/scene", hostId ? { hostId } : {})
.then(
(res) =>
void dispatch(
!hostId
? actions.scenesUpdate(res.data)
: actions.hostScenesUpdate(hostId, res.data)
)
)
.catch((err) => {
console.error("Fetch all scenes error", err);
throw new RemoteError(["Network error"]);
@ -458,6 +479,7 @@ export const RemoteService = {
data = {
name: data.name,
icon: data.icon,
guestAccessEnabled: sceneId ? data.guestAccessEnabled : false,
};
return (sceneId

10
smart-hut/src/store.js
View File

@ -120,6 +120,15 @@ function reducer(previousState, action) {
createOrUpdateScene(scene);
}
break;
case "HOST_SCENES_UPDATE":
change = {
hostScenes: {
[action.hostId]: { $set: action.scenes }, // stored as array
},
};
newState = update(previousState, change);
break;
case "STATES_UPDATE":
//console.log(action.sceneStates);
change = null;
@ -576,6 +585,7 @@ const initState = {
rooms: {},
/** @type {[integer]Scene} */
scenes: {},
hostScenes: {},
/** @type {[integer]Automation} */
automations: {},
/** @type {[integer]Device} */

5
smart-hut/src/storeActions.js
View File

@ -102,6 +102,11 @@ const actions = {
type: "SCENES_UPDATE",
scenes,
}),
hostScenesUpdate: (hostId, scenes) => ({
type: "HOST_SCENES_UPDATE",
hostId,
scenes,
}),
deviceDelete: (deviceId) => ({
type: "DEVICE_DELETE",
deviceId,