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) {
super(props);
this.state = this.initialState;
this.setInitialState();
this.addHostModal = this.addHostModal.bind(this);
this.modifyHostModal = this.modifyHostModal.bind(this);
this.deleteHost = this.deleteHost.bind(this);
this.saveGuestSettings = this.saveGuestSettings.bind(this);
}
get initialState() {
@ -26,47 +23,6 @@ class HostModal extends Component {
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) => {
let nam = event.target.name;
let val = event.target.value;
@ -81,101 +37,55 @@ class HostModal extends Component {
this.setState({ openModal: true });
};
saveGuestSettings() {}
render() {
return (
<div>
{!this.props.nicolaStop ? (
<div>
<Responsive minWidth={768}>
{this.type === "new" ? (
<Button
icon
labelPosition="left"
inverted
onClick={this.openModal}
>
<Icon name="plus" size="small" />
ADD AUTOMATION
</Button>
) : (
<Icon name="pencil" size="small" onClick={this.openModal} />
)}
</Responsive>
<Responsive maxWidth={768}>
{this.type === "new" ? (
<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}
<React.Fragment>
<Responsive minWidth={768}>
<Button icon labelPosition="left" inverted onClick={this.openModal}>
<Icon name="plus" size="small" />
Invitation settings
</Button>
</Responsive>
<Responsive maxWidth={768}>
{this.type === "new" ? (
<Button icon fluid labelPosition="left" onClick={this.openModal}>
<Icon name="plus" size="small" />
Invitation settings
</Button>
) : (
<Button icon fluid labelPosition="left" onClick={this.openModal}>
<Icon name="pencil" size="small" />
EDIT AUTOMATION
</Button>
)}
</Responsive>
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
<Header>
{this.type === "new" ? "Add new hosts" : "Modify hosts"}
</Header>
<Header>Select guests</Header>
<Modal.Content>
{
//TODO FORM TO ADD OR MODIFY SCENE
}
{this.type === "modify" ? (
<Button
icon
labelPosition="left"
inverted
color="red"
onClick={this.deleteHost}
>
<Icon name="trash alternate" />
Delete Host
</Button>
) : null}
<marquee scrollamount="50">
<h1>Spaghetti!</h1>
</marquee>
</Modal.Content>
<Modal.Actions>
<Button color="red" onClick={this.closeModal}>
<Icon name="remove" />{" "}
{this.type === "new" ? "Cancel" : "Discard changes"}
<Icon name="remove" /> Discard changes
</Button>
<Button
color="green"
onClick={
this.type === "new"
? this.addHostModal
: this.modifyHostModal
}
>
<Icon name="checkmark" />{" "}
{this.type === "new" ? "Add hosts" : "Save changes"}
<Button color="green" onClick={this.saveGuestSettings}>
<Icon name="checkmark" /> Save changes
</Button>
</Modal.Actions>
</Modal>
</div>
</React.Fragment>
);
}
}
const setActiveHost = (activeHost) => {
return (dispatch) =>
dispatch(appActions.setActiveHost(activeHost));
return (dispatch) => dispatch(appActions.setActiveHost(activeHost));
};
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,
hostDevices: state.hostDevices,
});
const HostsPanelContainer = connect(
mapStateToProps,
RemoteService
)(HostsPanel);
const HostsPanelContainer = connect(mapStateToProps, RemoteService)(HostsPanel);
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 Device from "./devices/Device";
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 {
constructor(props) {
@ -42,7 +42,12 @@ class ScenesPanel extends Component {
</Card.Content>
</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.sceneStates.map((e, i) => {

2
smart-hut/src/components/dashboard/devices/Thermostat.css
View file

@ -28,4 +28,4 @@
background: white;
border-radius: 5px;
}
*/
*/

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

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

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

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

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

@ -92,31 +92,30 @@ const actions = {
deviceId,
}),
getHosts: (hosts) => ({
type: "GET_HOSTS",
hosts,
hostsUpdate: (hosts) => ({
type: "HOSTS_UPDATE",
hosts,
}),
getHostDevices: (host) => ({
type: "GET_HOST_DEVICES",
host,
type: "GET_HOST_DEVICES",
host,
}),
guestSave: (guest) => ({
type: "GUEST_SAVE",
guest,
type: "GUEST_SAVE",
guest,
}),
guestUpdate: (guest) => ({
type: "GUEST_UPDATE",
guest,
type: "GUEST_UPDATE",
guest,
}),
guestDelete: (guest) => ({
type: "GUEST_DELETE",
guest,
type: "GUEST_DELETE",
guest,
}),
};
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 Navbar from "./Navbar";
import ScenesNavbar from "./ScenesNavbar";
import AutomationsNavbar from "./AutomationsNavbar";
import HostsNavbar from "./HostsNavbar";
import MyHeader from "../components/HeaderController";
import { Grid, Responsive, Button, Menu } from "semantic-ui-react";
@ -71,8 +70,6 @@ class Dashboard extends Component {
return <Navbar />;
case "Scenes":
return <ScenesNavbar />;
case "Automations":
return <AutomationsNavbar />;
case "Hosts":
return <HostsNavbar />;
default:
@ -96,7 +93,7 @@ class Dashboard extends Component {
</Grid.Row>
<Grid.Row color="black">
<Grid.Column textAlign="center" width={16}>
<Menu fluid widths={3} inverted color="grey">
<Menu fluid widths={4} inverted color="grey">
<Menu.Item
name="Devices"
content="Devices"

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

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

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

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

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

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