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

WIP

Browse source
This commit is contained in:
Claudio Maggioni (maggicl) 2020-05-02 16:40:29 +02:00
parent c5e1e1bd8d
commit 091ab50c0e
11 changed files with 109 additions and 293 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,11 +9,8 @@ class HostModal extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = this.initialState; this.state = this.initialState;
this.setInitialState();
this.addHostModal = this.addHostModal.bind(this); this.saveGuestSettings = this.saveGuestSettings.bind(this);
this.modifyHostModal = this.modifyHostModal.bind(this);
this.deleteHost = this.deleteHost.bind(this);
} }
get initialState() { get initialState() {
@ -26,47 +23,6 @@ class HostModal extends Component {
this.setState(this.initialState); this.setState(this.initialState);
} }
get type() {
return !this.props.id ? "new" : "modify";
}
addHostModal = (e) => {
/*let data = {
// DATA HERE
};*/
// TODO CALL TO REMOTE SERVER TO ADD SCENE
/*this.props
.saveRoom(data, null)
.then(() => {
this.setInitialState();
this.closeModal();
})
.catch((err) => console.error("error in creating room", err));*/
};
modifyHostModal = (e) => {
/* let data = {
// DATA HERE
};*/
// TODO CALL TO REMOTE SERVER TO MODIFY SCENE
/*this.props
.saveRoom(data, this.props.id)
.then(() => {
this.setInitialState();
this.closeModal();
})
.catch((err) => console.error("error in updating room", err));*/
};
deleteHost = (e) => {
// TODO CALL TO REMOTE SERVER TO DELETE SCENE
/*
this.props
.deleteRoom(this.props.id)
.then(() => this.closeModal())
.catch((err) => console.error("error in deleting room", err));*/
};
changeSomething = (event) => { changeSomething = (event) => {
let nam = event.target.name; let nam = event.target.name;
let val = event.target.value; let val = event.target.value;
@ -81,101 +37,55 @@ class HostModal extends Component {
this.setState({ openModal: true }); this.setState({ openModal: true });
}; };
saveGuestSettings() {}
render() { render() {
return ( return (
<div> <React.Fragment>
{!this.props.nicolaStop ? ( <Responsive minWidth={768}>
<div> <Button icon labelPosition="left" inverted onClick={this.openModal}>
<Responsive minWidth={768}> <Icon name="plus" size="small" />
{this.type === "new" ? ( Invitation settings
<Button </Button>
icon </Responsive>
labelPosition="left" <Responsive maxWidth={768}>
inverted {this.type === "new" ? (
onClick={this.openModal} <Button icon fluid labelPosition="left" onClick={this.openModal}>
> <Icon name="plus" size="small" />
<Icon name="plus" size="small" /> Invitation settings
ADD AUTOMATION </Button>
</Button> ) : (
) : ( <Button icon fluid labelPosition="left" onClick={this.openModal}>
<Icon name="pencil" size="small" onClick={this.openModal} /> <Icon name="pencil" size="small" />
)} EDIT AUTOMATION
</Responsive> </Button>
<Responsive maxWidth={768}> )}
{this.type === "new" ? ( </Responsive>
<Button
icon
fluid
labelPosition="left"
onClick={this.openModal}
>
<Icon name="plus" size="small" />
ADD AUTOMATION
</Button>
) : (
<Button
icon
fluid
labelPosition="left"
onClick={this.openModal}
>
<Icon name="pencil" size="small" />
EDIT AUTOMATION
</Button>
)}
</Responsive>
</div>
) : null}
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}> <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
<Header> <Header>Select guests</Header>
{this.type === "new" ? "Add new hosts" : "Modify hosts"}
</Header>
<Modal.Content> <Modal.Content>
{ <marquee scrollamount="50">
//TODO FORM TO ADD OR MODIFY SCENE <h1>Spaghetti!</h1>
} </marquee>
{this.type === "modify" ? (
<Button
icon
labelPosition="left"
inverted
color="red"
onClick={this.deleteHost}
>
<Icon name="trash alternate" />
Delete Host
</Button>
) : null}
</Modal.Content> </Modal.Content>
<Modal.Actions> <Modal.Actions>
<Button color="red" onClick={this.closeModal}> <Button color="red" onClick={this.closeModal}>
<Icon name="remove" />{" "} <Icon name="remove" /> Discard changes
{this.type === "new" ? "Cancel" : "Discard changes"}
</Button> </Button>
<Button <Button color="green" onClick={this.saveGuestSettings}>
color="green" <Icon name="checkmark" /> Save changes
onClick={
this.type === "new"
? this.addHostModal
: this.modifyHostModal
}
>
<Icon name="checkmark" />{" "}
{this.type === "new" ? "Add hosts" : "Save changes"}
</Button> </Button>
</Modal.Actions> </Modal.Actions>
</Modal> </Modal>
</div> </React.Fragment>
); );
} }
} }
const setActiveHost = (activeHost) => { const setActiveHost = (activeHost) => {
return (dispatch) => return (dispatch) => dispatch(appActions.setActiveHost(activeHost));
dispatch(appActions.setActiveHost(activeHost));
}; };
const mapStateToProps = (state, ownProps) => ({ const mapStateToProps = (state, ownProps) => ({

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

@ -41,8 +41,5 @@ const mapStateToProps = (state, _) => ({
activeHost: state.active.activeHost, activeHost: state.active.activeHost,
hostDevices: state.hostDevices, hostDevices: state.hostDevices,
}); });
const HostsPanelContainer = connect( const HostsPanelContainer = connect(mapStateToProps, RemoteService)(HostsPanel);
mapStateToProps,
RemoteService
)(HostsPanel);
export default HostsPanelContainer; export default HostsPanelContainer;

9
smart-hut/src/components/dashboard/ScenesPanel.js
View file

@ -3,7 +3,7 @@ import { connect } from "react-redux";
import { RemoteService } from "../../remote"; import { RemoteService } from "../../remote";
import Device from "./devices/Device"; import Device from "./devices/Device";
import NewSceneDevice from "./NewSceneDevice"; import NewSceneDevice from "./NewSceneDevice";
import { Grid, Button, Card, Segment, Header } from "semantic-ui-react"; import { Button, Card, Segment, Header, Icon } from "semantic-ui-react";
class ScenesPanel extends Component { class ScenesPanel extends Component {
constructor(props) { constructor(props) {
@ -42,7 +42,12 @@ class ScenesPanel extends Component {
</Card.Content> </Card.Content>
</Card> </Card>
) : ( ) : (
<Grid.Column>Welcome to the Scene View, you add a Scene</Grid.Column> <Segment placeholder>
<Header icon>
<Icon name="folder open" />
Please select a scene on the left or add a new one.
</Header>
</Segment>
)} )}
{!this.props.isActiveDefaultScene {!this.props.isActiveDefaultScene
? this.props.sceneStates.map((e, i) => { ? this.props.sceneStates.map((e, i) => {

24
smart-hut/src/remote.js
View file

@ -353,7 +353,7 @@ export const RemoteService = {
*/ */
fetchAllHosts: () => { fetchAllHosts: () => {
return (dispatch) => { return (dispatch) => {
return Endpoint.get(`/user`) return Endpoint.get(`/user/hosts`)
.then((res) => void dispatch(actions.getHosts(res.data))) .then((res) => void dispatch(actions.getHosts(res.data)))
.catch((err) => { .catch((err) => {
console.error(`Fetch hosts error`, err); console.error(`Fetch hosts error`, err);
@ -362,21 +362,21 @@ export const RemoteService = {
}; };
}, },
/** /**
* Adds the current user as a guest to another user * Adds the current user as a guest to another user
* identified through a host id. * identified through a host id.
* @param {Number} hostId the host to add. * @param {Number} hostId the host to add.
* @param {String} username the username of the guest to add. * @param {String} username the username of the guest to add.
* @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
*/ */
addUserAsGuest: (hostId, username) => { addUserAsGuest: (hostId, username) => {
return (dispatch) => { return (dispatch) => {
return Endpoint.post(`/user/guest`) return Endpoint.post(`/user/guest`)
.then((res) => void dispatch(actions.guestSave(res.data))) .then((res) => void dispatch(actions.guestSave(res.data)))
.catch((err) => { .catch((err) => {
console.error(`Guest save error`, err); console.error(`Guest save error`, err);
throw new RemoteError(["Network Error"]); throw new RemoteError(["Network Error"]);
}); });
}; };
}, },

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

@ -469,15 +469,15 @@ function reducer(previousState, action) {
}, },
}); });
break; break;
case "SET_ACTIVE_HOST": case "SET_ACTIVE_HOST":
newState = update(previousState, { newState = update(previousState, {
active: { active: {
activeHost: { activeHost: {
$set: action.activeHost, $set: action.activeHost,
},
}, },
}); },
break; });
break;
case "REDUX_WEBSOCKET::MESSAGE": case "REDUX_WEBSOCKET::MESSAGE":
const devices = JSON.parse(action.payload.message); const devices = JSON.parse(action.payload.message);
//console.log("socket", JSON.stringify(devices, null, 2)); //console.log("socket", JSON.stringify(devices, null, 2));
@ -488,32 +488,15 @@ function reducer(previousState, action) {
devices, devices,
}); });
break; break;
case "GET_HOSTS": case "HOSTS_UPDATE":
change = {}; change = {
for (const host of action.hosts) { hosts: {},
change.$add = host; };
} for (const host of action.hosts) {
newState = update(previousState, change); change.hosts[host.id] = { $set: host };
break; }
case "GET_HOST_DEVICES": newState = update(previousState, change);
change = {}; break;
// TODO ACTUAL WORKING CODE
break;
case "GUEST_SAVE":
change = {};
// TODO ACTUAL WORKING CODE
newState = update(previousState, change);
break;
case "GUEST_UPDATE":
change = {};
// TODO ACTUAL WORKING CODE
newState = update(previousState, change);
break;
case "GUEST_DELETE":
change = {};
// TODO ACTUAL WORKING CODE
newState = update(previousState, change);
break;
default: default:
console.warn(`Action type ${action.type} unknown`, action); console.warn(`Action type ${action.type} unknown`, action);
return previousState; return previousState;

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

@ -92,31 +92,30 @@ const actions = {
deviceId, deviceId,
}), }),
getHosts: (hosts) => ({ hostsUpdate: (hosts) => ({
type: "GET_HOSTS", type: "HOSTS_UPDATE",
hosts, hosts,
}), }),
getHostDevices: (host) => ({ getHostDevices: (host) => ({
type: "GET_HOST_DEVICES", type: "GET_HOST_DEVICES",
host, host,
}), }),
guestSave: (guest) => ({ guestSave: (guest) => ({
type: "GUEST_SAVE", type: "GUEST_SAVE",
guest, guest,
}), }),
guestUpdate: (guest) => ({ guestUpdate: (guest) => ({
type: "GUEST_UPDATE", type: "GUEST_UPDATE",
guest, guest,
}), }),
guestDelete: (guest) => ({ guestDelete: (guest) => ({
type: "GUEST_DELETE", type: "GUEST_DELETE",
guest, guest,
}), }),
}; };
export const appActions = { export const appActions = {

5
smart-hut/src/views/Dashboard.js
View file

@ -5,7 +5,6 @@ import AutomationsPanel from "../components/dashboard/AutomationsPanel";
import HostsPanel from "../components/dashboard/HostsPanel"; import HostsPanel from "../components/dashboard/HostsPanel";
import Navbar from "./Navbar"; import Navbar from "./Navbar";
import ScenesNavbar from "./ScenesNavbar"; import ScenesNavbar from "./ScenesNavbar";
import AutomationsNavbar from "./AutomationsNavbar";
import HostsNavbar from "./HostsNavbar"; import HostsNavbar from "./HostsNavbar";
import MyHeader from "../components/HeaderController"; import MyHeader from "../components/HeaderController";
import { Grid, Responsive, Button, Menu } from "semantic-ui-react"; import { Grid, Responsive, Button, Menu } from "semantic-ui-react";
@ -71,8 +70,6 @@ class Dashboard extends Component {
return <Navbar />; return <Navbar />;
case "Scenes": case "Scenes":
return <ScenesNavbar />; return <ScenesNavbar />;
case "Automations":
return <AutomationsNavbar />;
case "Hosts": case "Hosts":
return <HostsNavbar />; return <HostsNavbar />;
default: default:
@ -96,7 +93,7 @@ class Dashboard extends Component {
</Grid.Row> </Grid.Row>
<Grid.Row color="black"> <Grid.Row color="black">
<Grid.Column textAlign="center" width={16}> <Grid.Column textAlign="center" width={16}>
<Menu fluid widths={3} inverted color="grey"> <Menu fluid widths={4} inverted color="grey">
<Menu.Item <Menu.Item
name="Devices" name="Devices"
content="Devices" content="Devices"

121
smart-hut/src/views/HostsNavbar.js
View file

@ -7,7 +7,6 @@ import {
Responsive, Responsive,
Dropdown, Dropdown,
} from "semantic-ui-react"; } from "semantic-ui-react";
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
import HostModal from "../components/HostModal"; import HostModal from "../components/HostModal";
import { RemoteService } from "../remote"; import { RemoteService } from "../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
@ -20,8 +19,11 @@ class HostsNavbar extends Component {
editMode: false, editMode: false,
}; };
this.toggleEditMode = this.toggleEditMode.bind(this); this.getHosts();
this.openCurrentModalMobile = this.openCurrentModalMobile.bind(this); }
getHosts() {
this.props.fetchAllHosts().catch(console.error);
} }
get activeItemHost() { get activeItemHost() {
@ -37,28 +39,11 @@ class HostsNavbar extends Component {
return this.props.hosts[this.props.activeHost].name; return this.props.hosts[this.props.activeHost].name;
} }
openCurrentModalMobile() {
console.log(this.activeItemHost, this.props.hostsModalRefs);
const currentModal = this.props.hostsModalRefs[
this.activeItemHost
].current;
currentModal.openModal();
}
toggleEditMode(e) {
this.setState((prevState) => ({ editMode: !prevState.editMode }));
}
render() { render() {
return ( return (
<div style={{ background: "#1b1c1d!important", padding: "0 20px" }}> <div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
<Responsive minWidth={768}> <Responsive minWidth={768}>
<Grid> <Grid style={{ margin: "1em -1em 0 1em" }}>
<Grid.Row color="black">
<button style={editButtonStyle} onClick={this.toggleEditMode}>
Edit
</button>
</Grid.Row>
<Grid.Row> <Grid.Row>
<Menu inverted fluid vertical> <Menu inverted fluid vertical>
<Menu.Item <Menu.Item
@ -68,43 +53,23 @@ class HostsNavbar extends Component {
active={this.activeItemHost === -1} active={this.activeItemHost === -1}
onClick={this.selectHosts} onClick={this.selectHosts}
> >
<Grid> <strong>Hosts</strong>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small" />
</Grid.Column>
<Grid.Column>AUTOMATIONS</Grid.Column>
</Grid.Row>
</Grid>
</Menu.Item> </Menu.Item>
{Object.values(this.props.hosts).map((e, i) => { {Object.values(this.props.hosts).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.activeItemHost === e.id} active={this.activeItemHost === e.id}
onClick={this.selectHosts} onClick={this.selectHosts}
> >
<Grid> {e.name}
<Grid.Row> </Menu.Item>
<Grid.Column width={12}>{e.name}</Grid.Column> );
<Grid.Column floated="right">
{this.state.editMode ? (
<HostModal id={e.id} />
) : null}
</Grid.Column>
</Grid.Row>
</Grid>
</Menu.Item>
);
})} })}
<Menu.Item name="newM"> <Menu.Item name="newM">
<Grid> <HostModal />
<Grid.Row centered name="new">
<HostModal id={null} />
</Grid.Row>
</Grid>
</Menu.Item> </Menu.Item>
</Menu> </Menu>
</Grid.Row> </Grid.Row>
@ -122,14 +87,7 @@ class HostsNavbar extends Component {
active={this.activeItemHost === -1} active={this.activeItemHost === -1}
onClick={this.selectHosts} onClick={this.selectHosts}
> >
<Grid> <strong>Hosts</strong>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small" />
</Grid.Column>
<Grid.Column>Hosts</Grid.Column>
</Grid.Row>
</Grid>
</Dropdown.Item> </Dropdown.Item>
{Object.values(this.props.hosts).map((e, i) => { {Object.values(this.props.hosts).map((e, i) => {
@ -141,43 +99,13 @@ class HostsNavbar extends Component {
active={this.activeItemHost === e.id} active={this.activeItemHost === e.id}
onClick={this.selectHosts} onClick={this.selectHosts}
> >
<Grid> {e.name}
<Grid.Row>
<Grid.Column width={12}>{e.name}</Grid.Column>
<Grid.Column floated="right">
{this.state.editMode ? (
<HostModal id={e.id} />
) : null}
</Grid.Column>
</Grid.Row>
</Grid>
</Menu.Item> </Menu.Item>
); );
})} })}
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
</Menu> </Menu>
<Grid inverted>
<Grid.Row>
<Grid.Column width={8}>
<HostModal id={null} />
</Grid.Column>
{this.activeItemHost !== -1 ? (
<Grid.Column width={8}>
<Button
icon
fluid
labelPosition="left"
onClick={this.openCurrentModalMobile}
>
<Icon name="pencil" size="small" />
EDIT AUTOMATION
</Button>
</Grid.Column>
) : null}
</Grid.Row>
</Grid>
</Responsive> </Responsive>
</div> </div>
); );
@ -185,17 +113,12 @@ class HostsNavbar extends Component {
} }
const setActiveHost = (activeHost) => { const setActiveHost = (activeHost) => {
return (dispatch) => return (dispatch) => dispatch(appActions.setActiveHost(activeHost));
dispatch(appActions.setActiveHost(activeHost));
}; };
const mapStateToProps = (state, _) => ({ const mapStateToProps = (state, _) => ({
hosts: state.hosts, hosts: state.hosts,
activeHost: state.active.activeHost, activeHost: state.active.activeHost,
hostModalRefs: Object.keys(state.hosts).reduce(
(acc, key) => ({ ...acc, [key]: React.createRef() }),
{}
),
}); });
const HostsNavbarContainer = connect(mapStateToProps, { const HostsNavbarContainer = connect(mapStateToProps, {
...RemoteService, ...RemoteService,

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

@ -82,7 +82,9 @@ class Navbar extends Component {
<Grid.Column> <Grid.Column>
<Icon name="home" size="small" /> <Icon name="home" size="small" />
</Grid.Column> </Grid.Column>
<Grid.Column width={8}>House View</Grid.Column> <Grid.Column width={8}>
<strong>Home view</strong>
</Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Menu.Item> </Menu.Item>

4
smart-hut/src/views/ScenesNavbar.js
View file

@ -86,7 +86,7 @@ class ScenesNavbar extends Component {
active={this.activeItemScene === -1} active={this.activeItemScene === -1}
onClick={this.selectScene} onClick={this.selectScene}
> >
SCENES <strong>Scenes</strong>
</Menu.Item> </Menu.Item>
{Object.values(this.props.scenes).map((e, i) => { {Object.values(this.props.scenes).map((e, i) => {
@ -137,7 +137,7 @@ class ScenesNavbar extends Component {
> >
<Grid> <Grid>
<Grid.Row> <Grid.Row>
<Grid.Column>Scene</Grid.Column> <Grid.Column>Scenes</Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Dropdown.Item> </Dropdown.Item>