WIP
This commit is contained in:
parent
c5e1e1bd8d
commit
091ab50c0e
11 changed files with 109 additions and 293 deletions
|
@ -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>
|
||||
<React.Fragment>
|
||||
<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" />
|
||||
ADD AUTOMATION
|
||||
Invitation settings
|
||||
</Button>
|
||||
) : (
|
||||
<Icon name="pencil" size="small" onClick={this.openModal} />
|
||||
)}
|
||||
</Responsive>
|
||||
<Responsive maxWidth={768}>
|
||||
{this.type === "new" ? (
|
||||
<Button
|
||||
icon
|
||||
fluid
|
||||
labelPosition="left"
|
||||
onClick={this.openModal}
|
||||
>
|
||||
<Button icon fluid labelPosition="left" onClick={this.openModal}>
|
||||
<Icon name="plus" size="small" />
|
||||
ADD AUTOMATION
|
||||
Invitation settings
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
icon
|
||||
fluid
|
||||
labelPosition="left"
|
||||
onClick={this.openModal}
|
||||
>
|
||||
<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}>
|
||||
<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) => ({
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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,7 +362,7 @@ 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.
|
||||
|
|
|
@ -488,32 +488,15 @@ function reducer(previousState, action) {
|
|||
devices,
|
||||
});
|
||||
break;
|
||||
case "GET_HOSTS":
|
||||
change = {};
|
||||
case "HOSTS_UPDATE":
|
||||
change = {
|
||||
hosts: {},
|
||||
};
|
||||
for (const host of action.hosts) {
|
||||
change.$add = host;
|
||||
change.hosts[host.id] = { $set: 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;
|
||||
default:
|
||||
console.warn(`Action type ${action.type} unknown`, action);
|
||||
return previousState;
|
||||
|
|
|
@ -92,8 +92,8 @@ const actions = {
|
|||
deviceId,
|
||||
}),
|
||||
|
||||
getHosts: (hosts) => ({
|
||||
type: "GET_HOSTS",
|
||||
hostsUpdate: (hosts) => ({
|
||||
type: "HOSTS_UPDATE",
|
||||
hosts,
|
||||
}),
|
||||
|
||||
|
@ -116,7 +116,6 @@ const actions = {
|
|||
type: "GUEST_DELETE",
|
||||
guest,
|
||||
}),
|
||||
|
||||
};
|
||||
|
||||
export const appActions = {
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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,14 +53,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>AUTOMATIONS</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
<strong>Hosts</strong>
|
||||
</Menu.Item>
|
||||
{Object.values(this.props.hosts).map((e, i) => {
|
||||
return (
|
||||
|
@ -86,25 +64,12 @@ 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>
|
||||
);
|
||||
})}
|
||||
<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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue