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

126
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 ? (
<div>
<Responsive minWidth={768}> <Responsive minWidth={768}>
{this.type === "new" ? ( <Button icon labelPosition="left" inverted onClick={this.openModal}>
<Button
icon
labelPosition="left"
inverted
onClick={this.openModal}
>
<Icon name="plus" size="small" /> <Icon name="plus" size="small" />
ADD AUTOMATION Invitation settings
</Button> </Button>
) : (
<Icon name="pencil" size="small" onClick={this.openModal} />
)}
</Responsive> </Responsive>
<Responsive maxWidth={768}> <Responsive maxWidth={768}>
{this.type === "new" ? ( {this.type === "new" ? (
<Button <Button icon fluid labelPosition="left" onClick={this.openModal}>
icon
fluid
labelPosition="left"
onClick={this.openModal}
>
<Icon name="plus" size="small" /> <Icon name="plus" size="small" />
ADD AUTOMATION Invitation settings
</Button> </Button>
) : ( ) : (
<Button <Button icon fluid labelPosition="left" onClick={this.openModal}>
icon
fluid
labelPosition="left"
onClick={this.openModal}
>
<Icon name="pencil" size="small" /> <Icon name="pencil" size="small" />
EDIT AUTOMATION EDIT AUTOMATION
</Button> </Button>
)} )}
</Responsive> </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) => {

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

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

@ -488,32 +488,15 @@ function reducer(previousState, action) {
devices, devices,
}); });
break; break;
case "GET_HOSTS": case "HOSTS_UPDATE":
change = {}; change = {
hosts: {},
};
for (const host of action.hosts) { for (const host of action.hosts) {
change.$add = host; change.hosts[host.id] = { $set: host };
} }
newState = update(previousState, change); newState = update(previousState, change);
break; break;
case "GET_HOST_DEVICES":
change = {};
// 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;

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

@ -92,8 +92,8 @@ const actions = {
deviceId, deviceId,
}), }),
getHosts: (hosts) => ({ hostsUpdate: (hosts) => ({
type: "GET_HOSTS", type: "HOSTS_UPDATE",
hosts, hosts,
}), }),
@ -116,7 +116,6 @@ const actions = {
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"

101
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,14 +53,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>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 (
@ -86,25 +64,12 @@ 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>
); );
})} })}
<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>