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 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 { Segment, Image } from "semantic-ui-react";
import { RemoteService } from "../remote"; import { RemoteService } from "../remote";
import { withRouter } from "react-router-dom"; 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)); .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() { render() {
return ( return (
<div> <div>
@ -60,6 +77,11 @@ export class MyHeader extends React.Component {
<Button basic inverted onClick={this.logout}> <Button basic inverted onClick={this.logout}>
Logout Logout
</Button> </Button>
<Checkbox
checked={this.props.cameraEnabled}
toggle
onChange={(e, val) => this.setCameraEnabled(val.checked)}
/>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
@ -94,6 +116,7 @@ export class MyHeader extends React.Component {
const mapStateToProps = (state, _) => ({ const mapStateToProps = (state, _) => ({
username: username:
state.userInfo && state.userInfo.username ? state.userInfo.username : "", state.userInfo && state.userInfo.username ? state.userInfo.username : "",
cameraEnabled: state.userInfo ? state.userInfo.cameraEnabled : false,
}); });
const LoginContainer = connect( const LoginContainer = connect(
mapStateToProps, mapStateToProps,

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { RemoteService } from "../../remote"; 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"; import Device from "../../components/dashboard/devices/Device";
class HostsPanel extends Component { class HostsPanel extends Component {
@ -12,31 +12,59 @@ class HostsPanel extends Component {
) { ) {
this.props.fetchDevices(null, this.props.activeHost).catch(console.error); this.props.fetchDevices(null, this.props.activeHost).catch(console.error);
this.props.fetchAllRooms(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() { 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 ( return (
<Card.Group centered style={{ paddingTop: "3rem" }}> <React.Fragment>
{this.props.isActiveDefaultHost && ( <Header style={{ textAlign: "center", marginTop: "3rem" }} as="h3">
<Segment placeholder> Scenes
<Header icon> </Header>
<Icon name="folder open" /> <Card.Group centered>
Please select a host to visit on the left. {this.props.hostScenes.map((scene) => (
</Header> <Card>
</Segment> <Card.Header textAlign="center">
)} <Header style={{ margin: "1.5rem 0" }} as="h3">
{this.props.hostDeviceIds.map((id) => { {scene.name} <Icon name={scene.icon} />
return ( </Header>
<Device </Card.Header>
key={id} <Card.Content extras>
hostId={this.props.activeHost} <div className="ui two buttons">
tab="Hosts" <Button>Apply</Button>
id={id} </div>
/> </Card.Content>
); </Card>
})} ))}
</Card.Group> </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, _) => ({ const mapStateToProps = (state, _) => ({
isActiveDefaultHost: state.active.activeHost === -1, isActiveDefaultHost: state.active.activeHost === -1,
activeHost: state.active.activeHost, activeHost: state.active.activeHost,
hostScenes: state.hostScenes[state.active.activeHost] || [],
hostDevices: state.hostDevices, hostDevices: state.hostDevices,
hostDeviceIds: Object.keys(state.hostDevices[state.active.activeHost] || {}), 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 React, { Component, useState } from "react";
import { import { Button, Form, Icon, Header, Modal, Input } from "semantic-ui-react";
Button,
Form,
Icon,
Header,
Modal,
Input,
Checkbox,
} from "semantic-ui-react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { RemoteService } from "../../../remote"; 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) { setOnOff(onOff) {
const turn = onOff; const turn = onOff;
if (this.props.tab === "Devices") { if (this.props.tab === "Devices" || this.props.tab === "Hosts") {
this.props this.props
.saveDevice({ ...this.props.device, on: turn }) .saveDevice({ ...this.props.device, on: turn })
.then((res) => .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 * Fetches user information via REST calls, if it is logged in
* @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects * @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 * @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
* with user-fiendly errors as a RemoteError * with user-fiendly errors as a RemoteError
*/ */
fetchAllScenes: () => { fetchAllScenes: (hostId = null) => {
return (dispatch) => { return (dispatch) => {
return Endpoint.get("/scene") return Endpoint.get("/scene", hostId ? { hostId } : {})
.then((res) => void dispatch(actions.scenesUpdate(res.data))) .then(
(res) =>
void dispatch(
!hostId
? actions.scenesUpdate(res.data)
: actions.hostScenesUpdate(hostId, res.data)
)
)
.catch((err) => { .catch((err) => {
console.error("Fetch all scenes error", err); console.error("Fetch all scenes error", err);
throw new RemoteError(["Network error"]); throw new RemoteError(["Network error"]);
@ -458,6 +479,7 @@ export const RemoteService = {
data = { data = {
name: data.name, name: data.name,
icon: data.icon, icon: data.icon,
guestAccessEnabled: sceneId ? data.guestAccessEnabled : false,
}; };
return (sceneId return (sceneId

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

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

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

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