Version 1 for the automations view done
This commit is contained in:
Christian Capeáns Pérez
parent
2c3272a6a8
commit
48c0988063
3 changed files with 448 additions and 171 deletions
7
smart-hut/src/components/dashboard/Automations.css
Normal file
7
smart-hut/src/components/dashboard/Automations.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.segment-automations {
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.list-index {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
@ -1,23 +1,267 @@
|
|||
import React, { Component } from "react";
|
||||
import React, { Component, useState } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../../remote";
|
||||
import "./Automations.css";
|
||||
import {
|
||||
Segment,
|
||||
Grid,
|
||||
Icon,
|
||||
Header,
|
||||
Input,
|
||||
Button,
|
||||
List,
|
||||
Dropdown,
|
||||
Form,
|
||||
Divider,
|
||||
Checkbox,
|
||||
Menu,
|
||||
Label,
|
||||
} from "semantic-ui-react";
|
||||
|
||||
const options = [
|
||||
{ key: "equal", text: "=", value: "equal" },
|
||||
{
|
||||
key: "greater-than-or-equal",
|
||||
text: "\u2265",
|
||||
value: "greater-than-or-equal",
|
||||
},
|
||||
{
|
||||
key: "greater-than",
|
||||
text: ">",
|
||||
value: "greater-than",
|
||||
},
|
||||
{
|
||||
key: "less-than-or-equal",
|
||||
text: "\u2264",
|
||||
value: "less-than-or-equal",
|
||||
},
|
||||
{
|
||||
key: "less-than",
|
||||
text: "<",
|
||||
value: "less-than",
|
||||
},
|
||||
];
|
||||
|
||||
const CreateTrigger = (props) => {
|
||||
const devices = [
|
||||
{ key: "Light-1", text: "Light-1", value: "Light-1" },
|
||||
{ key: "Light-2", text: "Light-2", value: "Light-2" },
|
||||
{ key: "SmartPlug-1", text: "SmartPlug-1", value: "SmartPlug-1" },
|
||||
{ key: "SmartPlug-2", text: "SmartPlug-2", value: "SmartPlug-2" },
|
||||
];
|
||||
|
||||
return (
|
||||
<List.Item>
|
||||
<List.Content>
|
||||
<Form>
|
||||
<Form.Group>
|
||||
<Form.Field inline width={7}>
|
||||
<Dropdown
|
||||
onChange={(e, val) => props.inputChange(val)}
|
||||
name="device"
|
||||
search
|
||||
selection
|
||||
options={devices}
|
||||
placeholder="Device"
|
||||
/>
|
||||
</Form.Field>
|
||||
|
||||
<Form.Field inline width={2}>
|
||||
<Dropdown
|
||||
onChange={(e, val) => props.inputChange(val)}
|
||||
name="operand"
|
||||
compact
|
||||
selection
|
||||
options={options}
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field inline width={7}>
|
||||
<Input
|
||||
onChange={(e, val) => props.inputChange(val)}
|
||||
name="value"
|
||||
type="number"
|
||||
placeholder="Value"
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
);
|
||||
};
|
||||
|
||||
const SceneItem = (props) => {
|
||||
return (
|
||||
<List.Item>
|
||||
<List.Header>
|
||||
<Grid textAlign="center">
|
||||
<Grid.Row>
|
||||
<Grid.Column width={4}>
|
||||
<Checkbox toggle />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={4}>
|
||||
<h3>{props.sceneName}</h3>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</List.Header>
|
||||
</List.Item>
|
||||
);
|
||||
};
|
||||
|
||||
const Trigger = ({ trigger }) => {
|
||||
console.log(trigger);
|
||||
const { device, operand, value } = trigger;
|
||||
const symbol = options.filter((opt) => opt.key === operand)[0].text;
|
||||
return (
|
||||
<List.Item fluid>
|
||||
<Menu compact>
|
||||
<Menu.Item as="span">{device}</Menu.Item>
|
||||
<Menu.Item as="span">{symbol}</Menu.Item>
|
||||
<Menu.Item as="span">{value}</Menu.Item>
|
||||
</Menu>
|
||||
</List.Item>
|
||||
);
|
||||
};
|
||||
|
||||
const Automation = (props) => {
|
||||
const [triggerList, setTrigger] = useState([]);
|
||||
const [newTrigger, setNewTrigger] = useState({
|
||||
device: null,
|
||||
operand: null,
|
||||
value: null,
|
||||
});
|
||||
const scenes = ["scene-1", "scene-2", "scene-3"];
|
||||
const automationName = "Automation Name";
|
||||
|
||||
const checkNewTrigger = (trigger) => {
|
||||
if (!trigger.device || !trigger.operand || !trigger.value) {
|
||||
return {
|
||||
result: false,
|
||||
message: "There are missing fields",
|
||||
};
|
||||
}
|
||||
const result = !triggerList.some(
|
||||
(t) => t.device === trigger.device && t.operand === trigger.operand
|
||||
);
|
||||
return {
|
||||
result: result,
|
||||
message: result
|
||||
? ""
|
||||
: "You have already created a trigger for this device with the same conditions",
|
||||
};
|
||||
};
|
||||
const addTrigger = () => {
|
||||
const { result, message } = checkNewTrigger(newTrigger);
|
||||
if (result) {
|
||||
setTrigger((prevList) => [...prevList, newTrigger]);
|
||||
} else {
|
||||
alert(message);
|
||||
}
|
||||
};
|
||||
|
||||
const onInputChange = (val) => {
|
||||
setNewTrigger({ ...newTrigger, [val.name]: val.value });
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Header style={{ display: "inline", marginRight: "1rem" }}>
|
||||
{automationName}
|
||||
</Header>
|
||||
|
||||
<Button
|
||||
style={{ display: "inline" }}
|
||||
circular
|
||||
size="small"
|
||||
icon="edit"
|
||||
/>
|
||||
|
||||
<Segment placeholder className="segment-automations">
|
||||
<Grid columns={2} stackable textAlign="center">
|
||||
<Divider vertical></Divider>
|
||||
<Grid.Row verticalAlign="middle">
|
||||
<Grid.Column>
|
||||
<Header>Create Triggers</Header>
|
||||
<List divided relaxed>
|
||||
{triggerList.length > 0 &&
|
||||
triggerList.map((trigger) => (
|
||||
<Trigger trigger={trigger} />
|
||||
))}
|
||||
<CreateTrigger inputChange={onInputChange} />
|
||||
</List>
|
||||
<Button
|
||||
onClick={addTrigger}
|
||||
circular
|
||||
icon="add"
|
||||
color="blue"
|
||||
size="huge"
|
||||
/>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
{scenes.length > 0 ? (
|
||||
<React.Fragment>
|
||||
<Header>Activate Scenes</Header>
|
||||
<Input
|
||||
//loading
|
||||
icon="search"
|
||||
placeholder="Search..."
|
||||
fluid
|
||||
/>
|
||||
<Divider horizontal />
|
||||
<List divided relaxed>
|
||||
{scenes.map((scene) => (
|
||||
<SceneItem sceneName={scene} />
|
||||
))}
|
||||
</List>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<Header icon>
|
||||
<Icon name="world" />
|
||||
</Header>
|
||||
<Button primary>Create Scene</Button>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Segment>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column style={{ marginRight: "1rem" }}>
|
||||
<Button color="green">SAVE</Button>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Button color="red">DELETE</Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
class AutomationsPanel extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <h1 color="black">AUTOMATIONS</h1>;
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<List style={{ marginTop: "3rem" }}>
|
||||
<Automation />
|
||||
</List>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
activeRoom: state.active.activeRoom,
|
||||
activeTab: state.active.activeTab,
|
||||
activeRoom: state.active.activeRoom,
|
||||
activeTab: state.active.activeTab,
|
||||
});
|
||||
const AutomationsPanelContainer = connect(
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
)(AutomationsPanel);
|
||||
export default AutomationsPanelContainer;
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ import AutomationsNavbar from "./AutomationsNavbar";
|
|||
import MyHeader from "../components/HeaderController";
|
||||
import { Grid, Responsive, Button } from "semantic-ui-react";
|
||||
import {
|
||||
panelStyle,
|
||||
mobilePanelStyle,
|
||||
panelStyle,
|
||||
mobilePanelStyle,
|
||||
} from "../components/dashboard/devices/styleComponents";
|
||||
|
||||
import { RemoteService } from "../remote";
|
||||
|
|
@ -17,177 +17,203 @@ import { connect } from "react-redux";
|
|||
import { appActions } from "../storeActions";
|
||||
|
||||
class Dashboard extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = this.initialState;
|
||||
this.setInitialState();
|
||||
|
||||
this.selectTab = this.selectTab.bind(this);
|
||||
}
|
||||
|
||||
get initialState() {
|
||||
return {
|
||||
activeTab: this.activeTab,
|
||||
};
|
||||
}
|
||||
|
||||
setInitialState() {
|
||||
this.setState(this.initialState);
|
||||
}
|
||||
|
||||
get activeTab() {
|
||||
return this.props.activeTab;
|
||||
}
|
||||
|
||||
set activeTab(tab) {
|
||||
this.props.setActiveTab(tab);
|
||||
}
|
||||
|
||||
selectTab(e, { name }) {
|
||||
this.setState({ activeTab: name });
|
||||
this.activeTab = name;
|
||||
}
|
||||
|
||||
renderTab(tab) {
|
||||
switch (tab) {
|
||||
case "Devices":
|
||||
return <DevicePanel tab={this.state.activeTab} />;
|
||||
case "Scenes":
|
||||
return <ScenesPanel tab={this.state.activeTab} />;
|
||||
case "Automations":
|
||||
return <AutomationsPanel />;
|
||||
default:
|
||||
return <h1>ERROR</h1>;
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = this.initialState;
|
||||
this.setInitialState();
|
||||
this.activeTab = "Automations"; //TODO Remove this to not put automations first
|
||||
this.selectTab = this.selectTab.bind(this);
|
||||
}
|
||||
}
|
||||
|
||||
renderNavbar(tab) {
|
||||
switch (tab) {
|
||||
case "Devices":
|
||||
return <Navbar />;
|
||||
case "Scenes":
|
||||
return <ScenesNavbar />;
|
||||
case "Automations":
|
||||
return <AutomationsNavbar />;
|
||||
default:
|
||||
return <h1>ERROR</h1>;
|
||||
get initialState() {
|
||||
return {
|
||||
activeTab: this.activeTab,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{ background: "#1b1c1d" }}>
|
||||
<Responsive minWidth={768}>
|
||||
<Grid>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column>
|
||||
<MyHeader />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column width={3}></Grid.Column>
|
||||
<Grid.Column textAlign="center" width={13}>
|
||||
<Button
|
||||
basic
|
||||
name="Devices"
|
||||
content="Devices"
|
||||
active={this.activeTab === "Devices"}
|
||||
color={this.activeTab === "Devices" ? "yellow" : "grey"}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
basic
|
||||
name="Scenes"
|
||||
content="Scenes"
|
||||
active={this.activeTab === "Scenes"}
|
||||
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
basic
|
||||
name="Automations"
|
||||
content="Automations"
|
||||
active={this.activeTab === "Automations"}
|
||||
color={this.activeTab === "Automations" ? "yellow" : "grey"}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column width={3}>
|
||||
{this.renderNavbar(this.activeTab)}
|
||||
</Grid.Column>
|
||||
setInitialState() {
|
||||
this.setState(this.initialState);
|
||||
}
|
||||
|
||||
<Grid.Column width={13}>
|
||||
<div style={panelStyle}>{this.renderTab(this.activeTab)}</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Responsive>
|
||||
<Responsive maxWidth={768}>
|
||||
<Grid inverted>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column>
|
||||
<MyHeader />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column textAlign="center">
|
||||
<Button
|
||||
basic
|
||||
name="Devices"
|
||||
content="Devices"
|
||||
active={this.activeTab === "Devices"}
|
||||
color={this.activeTab === "Devices" ? "yellow" : "grey"}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
basic
|
||||
name="Scenes"
|
||||
content="Scenes"
|
||||
active={this.activeTab === "Scenes"}
|
||||
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
basic
|
||||
name="Automations"
|
||||
content="Automations"
|
||||
active={this.activeTab === "Automations"}
|
||||
color={this.activeTab === "Automations" ? "yellow" : "grey"}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column color="black">
|
||||
{this.renderNavbar(this.activeTab)}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<div style={mobilePanelStyle}>
|
||||
{this.renderTab(this.activeTab)}
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Responsive>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
get activeTab() {
|
||||
return this.props.activeTab;
|
||||
}
|
||||
|
||||
set activeTab(tab) {
|
||||
this.props.setActiveTab(tab);
|
||||
}
|
||||
|
||||
selectTab(e, { name }) {
|
||||
this.setState({ activeTab: name });
|
||||
this.activeTab = name;
|
||||
}
|
||||
|
||||
renderTab(tab) {
|
||||
switch (tab) {
|
||||
case "Devices":
|
||||
return <DevicePanel tab={this.state.activeTab} />;
|
||||
case "Scenes":
|
||||
return <ScenesPanel tab={this.state.activeTab} />;
|
||||
case "Automations":
|
||||
return <AutomationsPanel />;
|
||||
default:
|
||||
return <h1>ERROR</h1>;
|
||||
}
|
||||
}
|
||||
|
||||
renderNavbar(tab) {
|
||||
switch (tab) {
|
||||
case "Devices":
|
||||
return <Navbar />;
|
||||
case "Scenes":
|
||||
return <ScenesNavbar />;
|
||||
case "Automations":
|
||||
return <AutomationsNavbar />;
|
||||
default:
|
||||
return <h1>ERROR</h1>;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{ background: "#1b1c1d" }}>
|
||||
<Responsive minWidth={768}>
|
||||
<Grid>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column>
|
||||
<MyHeader />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column width={3}></Grid.Column>
|
||||
<Grid.Column textAlign="center" width={13}>
|
||||
<Button
|
||||
basic
|
||||
name="Devices"
|
||||
content="Devices"
|
||||
active={this.activeTab === "Devices"}
|
||||
color={
|
||||
this.activeTab === "Devices"
|
||||
? "yellow"
|
||||
: "grey"
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
basic
|
||||
name="Scenes"
|
||||
content="Scenes"
|
||||
active={this.activeTab === "Scenes"}
|
||||
color={
|
||||
this.activeTab === "Scenes"
|
||||
? "yellow"
|
||||
: "grey"
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
basic
|
||||
name="Automations"
|
||||
content="Automations"
|
||||
active={this.activeTab === "Automations"}
|
||||
color={
|
||||
this.activeTab === "Automations"
|
||||
? "yellow"
|
||||
: "grey"
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column width={3}>
|
||||
{this.renderNavbar(this.activeTab)}
|
||||
</Grid.Column>
|
||||
|
||||
<Grid.Column width={13}>
|
||||
<div style={panelStyle}>
|
||||
{this.renderTab(this.activeTab)}
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Responsive>
|
||||
<Responsive maxWidth={768}>
|
||||
<Grid inverted>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column>
|
||||
<MyHeader />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column textAlign="center">
|
||||
<Button
|
||||
basic
|
||||
name="Devices"
|
||||
content="Devices"
|
||||
active={this.activeTab === "Devices"}
|
||||
color={
|
||||
this.activeTab === "Devices"
|
||||
? "yellow"
|
||||
: "grey"
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
basic
|
||||
name="Scenes"
|
||||
content="Scenes"
|
||||
active={this.activeTab === "Scenes"}
|
||||
color={
|
||||
this.activeTab === "Scenes"
|
||||
? "yellow"
|
||||
: "grey"
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
basic
|
||||
name="Automations"
|
||||
content="Automations"
|
||||
active={this.activeTab === "Automations"}
|
||||
color={
|
||||
this.activeTab === "Automations"
|
||||
? "yellow"
|
||||
: "grey"
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column color="black">
|
||||
{this.renderNavbar(this.activeTab)}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<div style={mobilePanelStyle}>
|
||||
{this.renderTab(this.activeTab)}
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Responsive>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
activeTab: state.active.activeTab,
|
||||
activeTab: state.active.activeTab,
|
||||
});
|
||||
|
||||
const setActiveTab = (activeTab) => {
|
||||
return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
|
||||
return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
|
||||
};
|
||||
|
||||
const DashboardContainer = connect(mapStateToProps, {
|
||||
...RemoteService,
|
||||
setActiveTab,
|
||||
...RemoteService,
|
||||
setActiveTab,
|
||||
})(Dashboard);
|
||||
export default DashboardContainer;
|
||||
|
|
|
|||
Loading…
Reference in a new issue