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 "./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;

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

File diff suppressed because it is too large Load Diff