smarthut/frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Check values for different types of sensors when creating a trigger for an automation

Browse Source
This commit is contained in:
Christian Capeáns Pérez 2020-05-06 21:36:32 +02:00
parent b61148b24a
commit 78f6e508ec
3 changed files with 1396 additions and 1255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1114
smart-hut/src/components/dashboard/AutomationCreationModal.js
View File

File diff suppressed because it is too large Load Diff

301
smart-hut/src/components/dashboard/AutomationsPanel.js
View File

@ -4,169 +4,178 @@ import { RemoteService } from "../../remote";
import "./Automations.css";
import {
Segment,
Grid,
Header,
Button,
List,
Divider,
Menu,
Segment,
Grid,
Header,
Button,
List,
Divider,
Menu,
} from "semantic-ui-react";
import CreateAutomation, { operands } from "./AutomationCreationModal";
const Automation = ({ automation, devices, scenes, removeAutomation }) => {
const { triggers } = automation;
const scenePriorities = automation.scenes;
const getOperator = (operand) =>
operands.filter((o) => o.key === operand)[0].text;
const { triggers } = automation;
const scenePriorities = automation.scenes;
const getOperator = (operand) =>
operands.filter((o) => o.key === operand)[0].text;
return (
<React.Fragment>
<Header style={{ display: "inline", marginRight: "1rem" }}>
{automation.name}
</Header>
<CreateAutomation id={automation.id} />
<Button
style={{ display: "inline" }}
circular
onClick={() => removeAutomation(automation.id)}
color="red"
size="small"
icon={"trash alternate outline"}
/>
<Segment placeholder>
<Grid columns={2} stackable textAlign="center">
<Divider vertical></Divider>
<Grid.Row verticalAlign="middle">
<Grid.Column>
<Header>Triggers</Header>
<List divided relaxed>
{triggers !== undefined &&
triggers.map((trigger) => {
const device = devices.filter(
(d) => d.id === trigger.deviceId
)[0];
return (
<Menu key={trigger.id} compact>
<Menu.Item as="span">
{device.name}{" "}
{trigger.operator
? getOperator(trigger.operator) +
" " +
trigger.range
: trigger.on
? " - on"
: " - off"}
</Menu.Item>
</Menu>
);
})}
</List>
</Grid.Column>
<Grid.Column>
<Header>Scenes</Header>
<List divided relaxed>
{scenePriorities !== undefined &&
scenePriorities.map((sp) => {
const sceneData = scenes.filter(
(s) => s.id === sp.sceneId
)[0];
if (!sceneData) return "";
return (
<Menu key={sceneData.id} compact>
<Menu.Item as="span">{sceneData.name}</Menu.Item>
</Menu>
);
})}
</List>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</React.Fragment>
);
return (
<React.Fragment>
<Header style={{ display: "inline", marginRight: "1rem" }}>
{automation.name}
</Header>
<CreateAutomation id={automation.id} />
<Button
style={{ display: "inline" }}
circular
onClick={() => removeAutomation(automation.id)}
color="red"
size="small"
icon={"trash alternate outline"}
/>
<Segment placeholder>
<Grid columns={2} stackable textAlign="center">
<Divider vertical></Divider>
<Grid.Row verticalAlign="middle">
<Grid.Column>
<Header>Triggers</Header>
<List divided relaxed>
{triggers !== undefined &&
triggers.map((trigger) => {
const device = devices.filter(
(d) => d.id === trigger.deviceId
)[0];
return (
<Menu key={trigger.id} compact>
<Menu.Item as="span">
{device.name}{" "}
{trigger.operator
? getOperator(
trigger.operator
) +
" " +
trigger.range
: trigger.on
? " - on"
: " - off"}
</Menu.Item>
</Menu>
);
})}
</List>
</Grid.Column>
<Grid.Column>
<Header>Scenes</Header>
<List divided relaxed>
{scenePriorities !== undefined &&
scenePriorities.map((sp) => {
const sceneData = scenes.filter(
(s) => s.id === sp.sceneId
)[0];
if (!sceneData) return "";
return (
<Menu key={sceneData.id} compact>
<Menu.Item as="span">
{sceneData.name}
</Menu.Item>
</Menu>
);
})}
</List>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</React.Fragment>
);
};
class AutomationsPanel extends Component {
constructor(props) {
super(props);
this.state = { openModal: false };
this.getDevices();
this.getScenes();
this.getAutomations();
}
constructor(props) {
super(props);
this.state = { openModal: false };
this.getDevices();
this.getScenes();
this.getAutomations();
}
getScenes() {
this.props.fetchAllScenes().catch(console.error);
}
getScenes() {
this.props.fetchAllScenes().catch(console.error);
}
getDevices() {
this.props
.fetchDevices()
.catch((err) => console.error(`error fetching devices:`, err));
}
getDevices() {
this.props
.fetchDevices()
.catch((err) => console.error(`error fetching devices:`, err));
}
getAutomations() {
this.props
.fetchAutomations()
.catch((err) => console.error(`error fetching automations:`, err));
}
getAutomations() {
this.props
.fetchAutomations()
.catch((err) => console.error(`error fetching automations:`, err));
}
removeAutomation = (id) => {
this.props
.deleteAutomation(id)
.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>
removeAutomation = (id) => {
this.props
.deleteAutomation(id)
.catch((err) =>
console.error(`error removing automation ${id}:`, err)
);
})}
</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, _) => ({
activeRoom: state.active.activeRoom,
activeTab: state.active.activeTab,
get scenes() {
return Object.values(state.scenes);
},
get devices() {
return Object.values(state.devices);
},
get automations() {
console.log(state.automations);
return Object.values(state.automations);
},
activeRoom: state.active.activeRoom,
activeTab: state.active.activeTab,
get scenes() {
return Object.values(state.scenes);
},
get devices() {
return Object.values(state.devices);
},
get automations() {
return Object.values(state.automations);
},
});
const AutomationsPanelContainer = connect(
mapStateToProps,
RemoteService
mapStateToProps,
RemoteService
)(AutomationsPanel);
export default AutomationsPanelContainer;

1236
smart-hut/src/store.js
View File

File diff suppressed because it is too large Load Diff