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;
}

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

@ -1,23 +1,267 @@
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>
);
}
} }
const mapStateToProps = (state, _) => ({ const mapStateToProps = (state, _) => ({
activeRoom: state.active.activeRoom, activeRoom: state.active.activeRoom,
activeTab: state.active.activeTab, activeTab: state.active.activeTab,
}); });
const AutomationsPanelContainer = connect( const AutomationsPanelContainer = connect(
mapStateToProps, mapStateToProps,
RemoteService RemoteService
)(AutomationsPanel); )(AutomationsPanel);
export default AutomationsPanelContainer; export default AutomationsPanelContainer;

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

@ -8,8 +8,8 @@ import AutomationsNavbar from "./AutomationsNavbar";
import MyHeader from "../components/HeaderController"; import MyHeader from "../components/HeaderController";
import { Grid, Responsive, Button } from "semantic-ui-react"; import { Grid, Responsive, Button } from "semantic-ui-react";
import { import {
panelStyle, panelStyle,
mobilePanelStyle, mobilePanelStyle,
} from "../components/dashboard/devices/styleComponents"; } from "../components/dashboard/devices/styleComponents";
import { RemoteService } from "../remote"; import { RemoteService } from "../remote";
@ -17,177 +17,203 @@ import { connect } from "react-redux";
import { appActions } from "../storeActions"; import { appActions } from "../storeActions";
class Dashboard extends Component { class Dashboard extends Component {
constructor(props) { constructor(props) {
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);
}
get initialState() {
return {
activeTab: this.activeTab,
};
}
setInitialState() {
this.setState(this.initialState);
}
get activeTab() {
return this.props.activeTab;
}
set activeTab(tab) {
this.props.setActiveTab(tab);
}
selectTab(e, { name }) {
this.setState({ activeTab: name });
this.activeTab = name;
}
renderTab(tab) {
switch (tab) {
case "Devices":
return <DevicePanel tab={this.state.activeTab} />;
case "Scenes":
return <ScenesPanel tab={this.state.activeTab} />;
case "Automations":
return <AutomationsPanel />;
default:
return <h1>ERROR</h1>;
} }
}
renderNavbar(tab) { get initialState() {
switch (tab) { return {
case "Devices": activeTab: this.activeTab,
return <Navbar />; };
case "Scenes":
return <ScenesNavbar />;
case "Automations":
return <AutomationsNavbar />;
default:
return <h1>ERROR</h1>;
} }
}
render() { setInitialState() {
return ( this.setState(this.initialState);
<div style={{ background: "#1b1c1d" }}> }
<Responsive minWidth={768}>
<Grid>
<Grid.Row color="black">
<Grid.Column>
<MyHeader />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column width={3}></Grid.Column>
<Grid.Column textAlign="center" width={13}>
<Button
basic
name="Devices"
content="Devices"
active={this.activeTab === "Devices"}
color={this.activeTab === "Devices" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
<Button
basic
name="Scenes"
content="Scenes"
active={this.activeTab === "Scenes"}
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
<Button
basic
name="Automations"
content="Automations"
active={this.activeTab === "Automations"}
color={this.activeTab === "Automations" ? "yellow" : "grey"}
onClick={this.selectTab}
/>
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column width={3}>
{this.renderNavbar(this.activeTab)}
</Grid.Column>
<Grid.Column width={13}> get activeTab() {
<div style={panelStyle}>{this.renderTab(this.activeTab)}</div> return this.props.activeTab;
</Grid.Column> }
</Grid.Row>
</Grid> set activeTab(tab) {
</Responsive> this.props.setActiveTab(tab);
<Responsive maxWidth={768}> }
<Grid inverted>
<Grid.Row color="black"> selectTab(e, { name }) {
<Grid.Column> this.setState({ activeTab: name });
<MyHeader /> this.activeTab = name;
</Grid.Column> }
</Grid.Row>
<Grid.Row color="black"> renderTab(tab) {
<Grid.Column textAlign="center"> switch (tab) {
<Button case "Devices":
basic return <DevicePanel tab={this.state.activeTab} />;
name="Devices" case "Scenes":
content="Devices" return <ScenesPanel tab={this.state.activeTab} />;
active={this.activeTab === "Devices"} case "Automations":
color={this.activeTab === "Devices" ? "yellow" : "grey"} return <AutomationsPanel />;
onClick={this.selectTab} default:
/> return <h1>ERROR</h1>;
<Button }
basic }
name="Scenes"
content="Scenes" renderNavbar(tab) {
active={this.activeTab === "Scenes"} switch (tab) {
color={this.activeTab === "Scenes" ? "yellow" : "grey"} case "Devices":
onClick={this.selectTab} return <Navbar />;
/> case "Scenes":
<Button return <ScenesNavbar />;
basic case "Automations":
name="Automations" return <AutomationsNavbar />;
content="Automations" default:
active={this.activeTab === "Automations"} return <h1>ERROR</h1>;
color={this.activeTab === "Automations" ? "yellow" : "grey"} }
onClick={this.selectTab} }
/>
</Grid.Column> render() {
</Grid.Row> return (
<Grid.Row color="black"> <div style={{ background: "#1b1c1d" }}>
<Grid.Column color="black"> <Responsive minWidth={768}>
{this.renderNavbar(this.activeTab)} <Grid>
</Grid.Column> <Grid.Row color="black">
</Grid.Row> <Grid.Column>
<Grid.Row> <MyHeader />
<Grid.Column> </Grid.Column>
<div style={mobilePanelStyle}> </Grid.Row>
{this.renderTab(this.activeTab)} <Grid.Row color="black">
</div> <Grid.Column width={3}></Grid.Column>
</Grid.Column> <Grid.Column textAlign="center" width={13}>
</Grid.Row> <Button
</Grid> basic
</Responsive> name="Devices"
</div> content="Devices"
); active={this.activeTab === "Devices"}
} color={
this.activeTab === "Devices"
? "yellow"
: "grey"
}
onClick={this.selectTab}
/>
<Button
basic
name="Scenes"
content="Scenes"
active={this.activeTab === "Scenes"}
color={
this.activeTab === "Scenes"
? "yellow"
: "grey"
}
onClick={this.selectTab}
/>
<Button
basic
name="Automations"
content="Automations"
active={this.activeTab === "Automations"}
color={
this.activeTab === "Automations"
? "yellow"
: "grey"
}
onClick={this.selectTab}
/>
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column width={3}>
{this.renderNavbar(this.activeTab)}
</Grid.Column>
<Grid.Column width={13}>
<div style={panelStyle}>
{this.renderTab(this.activeTab)}
</div>
</Grid.Column>
</Grid.Row>
</Grid>
</Responsive>
<Responsive maxWidth={768}>
<Grid inverted>
<Grid.Row color="black">
<Grid.Column>
<MyHeader />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column textAlign="center">
<Button
basic
name="Devices"
content="Devices"
active={this.activeTab === "Devices"}
color={
this.activeTab === "Devices"
? "yellow"
: "grey"
}
onClick={this.selectTab}
/>
<Button
basic
name="Scenes"
content="Scenes"
active={this.activeTab === "Scenes"}
color={
this.activeTab === "Scenes"
? "yellow"
: "grey"
}
onClick={this.selectTab}
/>
<Button
basic
name="Automations"
content="Automations"
active={this.activeTab === "Automations"}
color={
this.activeTab === "Automations"
? "yellow"
: "grey"
}
onClick={this.selectTab}
/>
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column color="black">
{this.renderNavbar(this.activeTab)}
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<div style={mobilePanelStyle}>
{this.renderTab(this.activeTab)}
</div>
</Grid.Column>
</Grid.Row>
</Grid>
</Responsive>
</div>
);
}
} }
const mapStateToProps = (state, _) => ({ const mapStateToProps = (state, _) => ({
activeTab: state.active.activeTab, activeTab: state.active.activeTab,
}); });
const setActiveTab = (activeTab) => { const setActiveTab = (activeTab) => {
return (dispatch) => dispatch(appActions.setActiveTab(activeTab)); return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
}; };
const DashboardContainer = connect(mapStateToProps, { const DashboardContainer = connect(mapStateToProps, {
...RemoteService, ...RemoteService,
setActiveTab, setActiveTab,
})(Dashboard); })(Dashboard);
export default DashboardContainer; export default DashboardContainer;