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,14 +1,258 @@
|
|||
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);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <h1 color="black">AUTOMATIONS</h1>;
|
||||
return (
|
||||
<List style={{ marginTop: "3rem" }}>
|
||||
<Automation />
|
||||
</List>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ class Dashboard extends Component {
|
|||
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);
|
||||
}
|
||||
|
||||
|
|
@ -92,7 +92,11 @@ class Dashboard extends Component {
|
|||
name="Devices"
|
||||
content="Devices"
|
||||
active={this.activeTab === "Devices"}
|
||||
color={this.activeTab === "Devices" ? "yellow" : "grey"}
|
||||
color={
|
||||
this.activeTab === "Devices"
|
||||
? "yellow"
|
||||
: "grey"
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
|
|
@ -100,7 +104,11 @@ class Dashboard extends Component {
|
|||
name="Scenes"
|
||||
content="Scenes"
|
||||
active={this.activeTab === "Scenes"}
|
||||
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
|
||||
color={
|
||||
this.activeTab === "Scenes"
|
||||
? "yellow"
|
||||
: "grey"
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
|
|
@ -108,7 +116,11 @@ class Dashboard extends Component {
|
|||
name="Automations"
|
||||
content="Automations"
|
||||
active={this.activeTab === "Automations"}
|
||||
color={this.activeTab === "Automations" ? "yellow" : "grey"}
|
||||
color={
|
||||
this.activeTab === "Automations"
|
||||
? "yellow"
|
||||
: "grey"
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
</Grid.Column>
|
||||
|
|
@ -119,7 +131,9 @@ class Dashboard extends Component {
|
|||
</Grid.Column>
|
||||
|
||||
<Grid.Column width={13}>
|
||||
<div style={panelStyle}>{this.renderTab(this.activeTab)}</div>
|
||||
<div style={panelStyle}>
|
||||
{this.renderTab(this.activeTab)}
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
|
|
@ -138,7 +152,11 @@ class Dashboard extends Component {
|
|||
name="Devices"
|
||||
content="Devices"
|
||||
active={this.activeTab === "Devices"}
|
||||
color={this.activeTab === "Devices" ? "yellow" : "grey"}
|
||||
color={
|
||||
this.activeTab === "Devices"
|
||||
? "yellow"
|
||||
: "grey"
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
|
|
@ -146,7 +164,11 @@ class Dashboard extends Component {
|
|||
name="Scenes"
|
||||
content="Scenes"
|
||||
active={this.activeTab === "Scenes"}
|
||||
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
|
||||
color={
|
||||
this.activeTab === "Scenes"
|
||||
? "yellow"
|
||||
: "grey"
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
|
|
@ -154,7 +176,11 @@ class Dashboard extends Component {
|
|||
name="Automations"
|
||||
content="Automations"
|
||||
active={this.activeTab === "Automations"}
|
||||
color={this.activeTab === "Automations" ? "yellow" : "grey"}
|
||||
color={
|
||||
this.activeTab === "Automations"
|
||||
? "yellow"
|
||||
: "grey"
|
||||
}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
</Grid.Column>
|
||||
|
|
|
|||
Loading…
Reference in a new issue