Check values for different types of sensors when creating a trigger for an automation
This commit is contained in:
parent
b61148b24a
commit
78f6e508ec
3 changed files with 1396 additions and 1255 deletions
File diff suppressed because it is too large
Load diff
|
@ -4,169 +4,178 @@ import { RemoteService } from "../../remote";
|
||||||
import "./Automations.css";
|
import "./Automations.css";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Segment,
|
Segment,
|
||||||
Grid,
|
Grid,
|
||||||
Header,
|
Header,
|
||||||
Button,
|
Button,
|
||||||
List,
|
List,
|
||||||
Divider,
|
Divider,
|
||||||
Menu,
|
Menu,
|
||||||
} from "semantic-ui-react";
|
} from "semantic-ui-react";
|
||||||
import CreateAutomation, { operands } from "./AutomationCreationModal";
|
import CreateAutomation, { operands } from "./AutomationCreationModal";
|
||||||
|
|
||||||
const Automation = ({ automation, devices, scenes, removeAutomation }) => {
|
const Automation = ({ automation, devices, scenes, removeAutomation }) => {
|
||||||
const { triggers } = automation;
|
const { triggers } = automation;
|
||||||
const scenePriorities = automation.scenes;
|
const scenePriorities = automation.scenes;
|
||||||
const getOperator = (operand) =>
|
const getOperator = (operand) =>
|
||||||
operands.filter((o) => o.key === operand)[0].text;
|
operands.filter((o) => o.key === operand)[0].text;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Header style={{ display: "inline", marginRight: "1rem" }}>
|
<Header style={{ display: "inline", marginRight: "1rem" }}>
|
||||||
{automation.name}
|
{automation.name}
|
||||||
</Header>
|
</Header>
|
||||||
<CreateAutomation id={automation.id} />
|
<CreateAutomation id={automation.id} />
|
||||||
<Button
|
<Button
|
||||||
style={{ display: "inline" }}
|
style={{ display: "inline" }}
|
||||||
circular
|
circular
|
||||||
onClick={() => removeAutomation(automation.id)}
|
onClick={() => removeAutomation(automation.id)}
|
||||||
color="red"
|
color="red"
|
||||||
size="small"
|
size="small"
|
||||||
icon={"trash alternate outline"}
|
icon={"trash alternate outline"}
|
||||||
/>
|
/>
|
||||||
<Segment placeholder>
|
<Segment placeholder>
|
||||||
<Grid columns={2} stackable textAlign="center">
|
<Grid columns={2} stackable textAlign="center">
|
||||||
<Divider vertical></Divider>
|
<Divider vertical></Divider>
|
||||||
<Grid.Row verticalAlign="middle">
|
<Grid.Row verticalAlign="middle">
|
||||||
<Grid.Column>
|
<Grid.Column>
|
||||||
<Header>Triggers</Header>
|
<Header>Triggers</Header>
|
||||||
<List divided relaxed>
|
<List divided relaxed>
|
||||||
{triggers !== undefined &&
|
{triggers !== undefined &&
|
||||||
triggers.map((trigger) => {
|
triggers.map((trigger) => {
|
||||||
const device = devices.filter(
|
const device = devices.filter(
|
||||||
(d) => d.id === trigger.deviceId
|
(d) => d.id === trigger.deviceId
|
||||||
)[0];
|
)[0];
|
||||||
return (
|
return (
|
||||||
<Menu key={trigger.id} compact>
|
<Menu key={trigger.id} compact>
|
||||||
<Menu.Item as="span">
|
<Menu.Item as="span">
|
||||||
{device.name}{" "}
|
{device.name}{" "}
|
||||||
{trigger.operator
|
{trigger.operator
|
||||||
? getOperator(trigger.operator) +
|
? getOperator(
|
||||||
" " +
|
trigger.operator
|
||||||
trigger.range
|
) +
|
||||||
: trigger.on
|
" " +
|
||||||
? " - on"
|
trigger.range
|
||||||
: " - off"}
|
: trigger.on
|
||||||
</Menu.Item>
|
? " - on"
|
||||||
</Menu>
|
: " - off"}
|
||||||
);
|
</Menu.Item>
|
||||||
})}
|
</Menu>
|
||||||
</List>
|
);
|
||||||
</Grid.Column>
|
})}
|
||||||
<Grid.Column>
|
</List>
|
||||||
<Header>Scenes</Header>
|
</Grid.Column>
|
||||||
<List divided relaxed>
|
<Grid.Column>
|
||||||
{scenePriorities !== undefined &&
|
<Header>Scenes</Header>
|
||||||
scenePriorities.map((sp) => {
|
<List divided relaxed>
|
||||||
const sceneData = scenes.filter(
|
{scenePriorities !== undefined &&
|
||||||
(s) => s.id === sp.sceneId
|
scenePriorities.map((sp) => {
|
||||||
)[0];
|
const sceneData = scenes.filter(
|
||||||
if (!sceneData) return "";
|
(s) => s.id === sp.sceneId
|
||||||
return (
|
)[0];
|
||||||
<Menu key={sceneData.id} compact>
|
if (!sceneData) return "";
|
||||||
<Menu.Item as="span">{sceneData.name}</Menu.Item>
|
return (
|
||||||
</Menu>
|
<Menu key={sceneData.id} compact>
|
||||||
);
|
<Menu.Item as="span">
|
||||||
})}
|
{sceneData.name}
|
||||||
</List>
|
</Menu.Item>
|
||||||
</Grid.Column>
|
</Menu>
|
||||||
</Grid.Row>
|
);
|
||||||
</Grid>
|
})}
|
||||||
</Segment>
|
</List>
|
||||||
</React.Fragment>
|
</Grid.Column>
|
||||||
);
|
</Grid.Row>
|
||||||
|
</Grid>
|
||||||
|
</Segment>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
class AutomationsPanel extends Component {
|
class AutomationsPanel extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = { openModal: false };
|
this.state = { openModal: false };
|
||||||
this.getDevices();
|
this.getDevices();
|
||||||
this.getScenes();
|
this.getScenes();
|
||||||
this.getAutomations();
|
this.getAutomations();
|
||||||
}
|
}
|
||||||
|
|
||||||
getScenes() {
|
getScenes() {
|
||||||
this.props.fetchAllScenes().catch(console.error);
|
this.props.fetchAllScenes().catch(console.error);
|
||||||
}
|
}
|
||||||
|
|
||||||
getDevices() {
|
getDevices() {
|
||||||
this.props
|
this.props
|
||||||
.fetchDevices()
|
.fetchDevices()
|
||||||
.catch((err) => console.error(`error fetching devices:`, err));
|
.catch((err) => console.error(`error fetching devices:`, err));
|
||||||
}
|
}
|
||||||
|
|
||||||
getAutomations() {
|
getAutomations() {
|
||||||
this.props
|
this.props
|
||||||
.fetchAutomations()
|
.fetchAutomations()
|
||||||
.catch((err) => console.error(`error fetching automations:`, err));
|
.catch((err) => console.error(`error fetching automations:`, err));
|
||||||
}
|
}
|
||||||
|
|
||||||
removeAutomation = (id) => {
|
removeAutomation = (id) => {
|
||||||
this.props
|
this.props
|
||||||
.deleteAutomation(id)
|
.deleteAutomation(id)
|
||||||
.catch((err) => console.error(`error removing automation ${id}:`, err));
|
.catch((err) =>
|
||||||
};
|
console.error(`error removing automation ${id}:`, err)
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Grid style={{ marginTop: "3rem" }}>
|
|
||||||
<Grid.Row>
|
|
||||||
<Grid.Column textAlign="center" width={16}>
|
|
||||||
{!this.state.openModal ? (
|
|
||||||
<List>
|
|
||||||
<CreateAutomation />
|
|
||||||
</List>
|
|
||||||
) : (
|
|
||||||
<Button color="green">CREATE AUTOMATION</Button>
|
|
||||||
)}
|
|
||||||
</Grid.Column>
|
|
||||||
</Grid.Row>
|
|
||||||
<Grid.Row>
|
|
||||||
{this.props.automations.map((automation, i) => {
|
|
||||||
return (
|
|
||||||
<Grid.Column key={i} width={8} style={{ margin: "2rem 0" }}>
|
|
||||||
<Automation
|
|
||||||
removeAutomation={this.removeAutomation}
|
|
||||||
scenes={this.props.scenes}
|
|
||||||
devices={this.props.devices}
|
|
||||||
automation={automation}
|
|
||||||
/>
|
|
||||||
</Grid.Column>
|
|
||||||
);
|
);
|
||||||
})}
|
};
|
||||||
</Grid.Row>
|
|
||||||
</Grid>
|
render() {
|
||||||
);
|
return (
|
||||||
}
|
<Grid style={{ marginTop: "3rem" }}>
|
||||||
|
<Grid.Row>
|
||||||
|
<Grid.Column textAlign="center" width={16}>
|
||||||
|
{!this.state.openModal ? (
|
||||||
|
<List>
|
||||||
|
<CreateAutomation />
|
||||||
|
</List>
|
||||||
|
) : (
|
||||||
|
<Button color="green">CREATE AUTOMATION</Button>
|
||||||
|
)}
|
||||||
|
</Grid.Column>
|
||||||
|
</Grid.Row>
|
||||||
|
<Grid.Row>
|
||||||
|
{this.props.automations.map((automation, i) => {
|
||||||
|
return (
|
||||||
|
<Grid.Column
|
||||||
|
key={i}
|
||||||
|
width={8}
|
||||||
|
style={{ margin: "2rem 0" }}
|
||||||
|
>
|
||||||
|
<Automation
|
||||||
|
removeAutomation={this.removeAutomation}
|
||||||
|
scenes={this.props.scenes}
|
||||||
|
devices={this.props.devices}
|
||||||
|
automation={automation}
|
||||||
|
/>
|
||||||
|
</Grid.Column>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Grid.Row>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapStateToProps = (state, _) => ({
|
const mapStateToProps = (state, _) => ({
|
||||||
activeRoom: state.active.activeRoom,
|
activeRoom: state.active.activeRoom,
|
||||||
activeTab: state.active.activeTab,
|
activeTab: state.active.activeTab,
|
||||||
get scenes() {
|
get scenes() {
|
||||||
return Object.values(state.scenes);
|
return Object.values(state.scenes);
|
||||||
},
|
},
|
||||||
get devices() {
|
get devices() {
|
||||||
return Object.values(state.devices);
|
return Object.values(state.devices);
|
||||||
},
|
},
|
||||||
get automations() {
|
get automations() {
|
||||||
console.log(state.automations);
|
return Object.values(state.automations);
|
||||||
return Object.values(state.automations);
|
},
|
||||||
},
|
|
||||||
});
|
});
|
||||||
const AutomationsPanelContainer = connect(
|
const AutomationsPanelContainer = connect(
|
||||||
mapStateToProps,
|
mapStateToProps,
|
||||||
RemoteService
|
RemoteService
|
||||||
)(AutomationsPanel);
|
)(AutomationsPanel);
|
||||||
export default AutomationsPanelContainer;
|
export default AutomationsPanelContainer;
|
||||||
|
|
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue