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

Version 1 for the automations view done

Browse source
This commit is contained in:
Christian Capeáns Pérez 2020-04-24 12:26:55 +02:00
parent 2c3272a6a8
commit 48c0988063
3 changed files with 448 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
smart-hut/src/components/dashboard/Automations.css Normal file
View file

@ -0,0 +1,7 @@
.segment-automations {
top: 10%;
}
.list-index {
font-size: 1.5rem;
}

248
smart-hut/src/components/dashboard/AutomationsPanel.js
View file

@ -1,14 +1,258 @@
import React, { Component } from "react"; import React, { Component, useState } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { RemoteService } from "../../remote"; 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 { class AutomationsPanel extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {};
} }
render() { render() {
return <h1 color="black">AUTOMATIONS</h1>; return (
<List style={{ marginTop: "3rem" }}>
<Automation />
</List>
);
} }
} }

42
smart-hut/src/views/Dashboard.js
View file

@ -21,7 +21,7 @@ class Dashboard extends Component {
super(props); super(props);
this.state = this.initialState; this.state = this.initialState;
this.setInitialState(); this.setInitialState();
this.activeTab = "Automations"; //TODO Remove this to not put automations first
this.selectTab = this.selectTab.bind(this); this.selectTab = this.selectTab.bind(this);
} }
@ -92,7 +92,11 @@ class Dashboard extends Component {
name="Devices" name="Devices"
content="Devices" content="Devices"
active={this.activeTab === "Devices"} active={this.activeTab === "Devices"}
color={this.activeTab === "Devices" ? "yellow" : "grey"} color={
this.activeTab === "Devices"
? "yellow"
: "grey"
}
onClick={this.selectTab} onClick={this.selectTab}
/> />
<Button <Button
@ -100,7 +104,11 @@ class Dashboard extends Component {
name="Scenes" name="Scenes"
content="Scenes" content="Scenes"
active={this.activeTab === "Scenes"} active={this.activeTab === "Scenes"}
color={this.activeTab === "Scenes" ? "yellow" : "grey"} color={
this.activeTab === "Scenes"
? "yellow"
: "grey"
}
onClick={this.selectTab} onClick={this.selectTab}
/> />
<Button <Button
@ -108,7 +116,11 @@ class Dashboard extends Component {
name="Automations" name="Automations"
content="Automations" content="Automations"
active={this.activeTab === "Automations"} active={this.activeTab === "Automations"}
color={this.activeTab === "Automations" ? "yellow" : "grey"} color={
this.activeTab === "Automations"
? "yellow"
: "grey"
}
onClick={this.selectTab} onClick={this.selectTab}
/> />
</Grid.Column> </Grid.Column>
@ -119,7 +131,9 @@ class Dashboard extends Component {
</Grid.Column> </Grid.Column>
<Grid.Column width={13}> <Grid.Column width={13}>
<div style={panelStyle}>{this.renderTab(this.activeTab)}</div> <div style={panelStyle}>
{this.renderTab(this.activeTab)}
</div>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
@ -138,7 +152,11 @@ class Dashboard extends Component {
name="Devices" name="Devices"
content="Devices" content="Devices"
active={this.activeTab === "Devices"} active={this.activeTab === "Devices"}
color={this.activeTab === "Devices" ? "yellow" : "grey"} color={
this.activeTab === "Devices"
? "yellow"
: "grey"
}
onClick={this.selectTab} onClick={this.selectTab}
/> />
<Button <Button
@ -146,7 +164,11 @@ class Dashboard extends Component {
name="Scenes" name="Scenes"
content="Scenes" content="Scenes"
active={this.activeTab === "Scenes"} active={this.activeTab === "Scenes"}
color={this.activeTab === "Scenes" ? "yellow" : "grey"} color={
this.activeTab === "Scenes"
? "yellow"
: "grey"
}
onClick={this.selectTab} onClick={this.selectTab}
/> />
<Button <Button
@ -154,7 +176,11 @@ class Dashboard extends Component {
name="Automations" name="Automations"
content="Automations" content="Automations"
active={this.activeTab === "Automations"} active={this.activeTab === "Automations"}
color={this.activeTab === "Automations" ? "yellow" : "grey"} color={
this.activeTab === "Automations"
? "yellow"
: "grey"
}
onClick={this.selectTab} onClick={this.selectTab}
/> />
</Grid.Column> </Grid.Column>