268 lines
8.5 KiB
JavaScript
268 lines
8.5 KiB
JavaScript
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);
|
|
this.state = {};
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<List style={{ marginTop: "3rem" }}>
|
|
<Automation />
|
|
</List>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state, _) => ({
|
|
activeRoom: state.active.activeRoom,
|
|
activeTab: state.active.activeTab,
|
|
});
|
|
const AutomationsPanelContainer = connect(
|
|
mapStateToProps,
|
|
RemoteService
|
|
)(AutomationsPanel);
|
|
export default AutomationsPanelContainer;
|