Fixing automations and ui in general
This commit is contained in:
Claudio Maggioni (maggicl)
parent
9d8524c7c9
commit
96184c76c9
8 changed files with 523 additions and 614 deletions
472
smart-hut/src/components/dashboard/AutomationCreationModal.js
Normal file
472
smart-hut/src/components/dashboard/AutomationCreationModal.js
Normal file
|
|
@ -0,0 +1,472 @@
|
|||
import React, { Component, useState } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../../remote";
|
||||
import update from "immutability-helper";
|
||||
import "./Automations.css";
|
||||
|
||||
import {
|
||||
Segment,
|
||||
Grid,
|
||||
Icon,
|
||||
Header,
|
||||
Input,
|
||||
Button,
|
||||
List,
|
||||
Divider,
|
||||
Menu,
|
||||
Form,
|
||||
Dropdown,
|
||||
Checkbox,
|
||||
} from "semantic-ui-react";
|
||||
|
||||
export const operands = [
|
||||
{ key: "EQUAL", text: "=", value: "EQUAL" },
|
||||
{
|
||||
key: "GREATER_EQUAL",
|
||||
text: "\u2265",
|
||||
value: "GREATER_EQUAL",
|
||||
},
|
||||
{
|
||||
key: "GREATER",
|
||||
text: ">",
|
||||
value: "GREATER",
|
||||
},
|
||||
{
|
||||
key: "LESS_EQUAL",
|
||||
text: "\u2264",
|
||||
value: "LESS_EQUAL",
|
||||
},
|
||||
{
|
||||
key: "LESS",
|
||||
text: "<",
|
||||
value: "LESS",
|
||||
},
|
||||
];
|
||||
|
||||
const deviceStateOptions = [
|
||||
{ key: "off", text: "off", value: false },
|
||||
{ key: "on", text: "on", value: true },
|
||||
];
|
||||
|
||||
const CreateTrigger = (props) => {
|
||||
const [activeOperand, setActiveOperand] = useState(true);
|
||||
const admitedDevices = ["sensor", "regularLight", "dimmableLight"]; // TODO: Complete this list
|
||||
const deviceList = props.devices
|
||||
.map((device) => {
|
||||
return {
|
||||
key: device.id,
|
||||
text: device.name,
|
||||
value: device.id,
|
||||
kind: device.kind,
|
||||
};
|
||||
})
|
||||
.filter((e) => admitedDevices.includes(e.kind));
|
||||
|
||||
const onChange = (e, val) => {
|
||||
props.inputChange(val);
|
||||
if (
|
||||
props.devices.filter((d) => d.id === val.value)[0].hasOwnProperty("on")
|
||||
) {
|
||||
setActiveOperand(false);
|
||||
} else {
|
||||
setActiveOperand(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<List.Item>
|
||||
<List.Content>
|
||||
<Form>
|
||||
<Form.Group>
|
||||
<Form.Field inline width={7}>
|
||||
<Dropdown
|
||||
onChange={onChange}
|
||||
name="device"
|
||||
search
|
||||
selection
|
||||
options={deviceList}
|
||||
placeholder="Device"
|
||||
/>
|
||||
</Form.Field>
|
||||
{activeOperand ? (
|
||||
<React.Fragment>
|
||||
<Form.Field inline width={2}>
|
||||
<Dropdown
|
||||
onChange={(e, val) => props.inputChange(val)}
|
||||
name="operand"
|
||||
compact
|
||||
selection
|
||||
options={operands}
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field inline width={7}>
|
||||
<Input
|
||||
onChange={(e, val) => props.inputChange(val)}
|
||||
name="value"
|
||||
type="number"
|
||||
placeholder="Value"
|
||||
/>
|
||||
</Form.Field>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<Form.Field inline width={7}>
|
||||
<Dropdown
|
||||
onChange={(e, val) => props.inputChange(val)}
|
||||
placeholder="State"
|
||||
name="on"
|
||||
compact
|
||||
selection
|
||||
options={deviceStateOptions}
|
||||
/>
|
||||
</Form.Field>
|
||||
)}
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
);
|
||||
};
|
||||
|
||||
const SceneItem = (props) => {
|
||||
let position = props.order.indexOf(props.scene.id);
|
||||
return (
|
||||
<List.Item>
|
||||
<List.Header>
|
||||
<Grid textAlign="center">
|
||||
<Grid.Row>
|
||||
<Grid.Column width={4}>
|
||||
<Checkbox
|
||||
toggle
|
||||
onChange={(e, val) =>
|
||||
props.orderScenes(props.scene.id, val.checked)
|
||||
}
|
||||
checked={position + 1 > 0}
|
||||
/>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={8}>
|
||||
<h3>{props.scene.name}</h3>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={4}>
|
||||
<h3>{position !== -1 ? "# " + (position + 1) : ""}</h3>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</List.Header>
|
||||
</List.Item>
|
||||
);
|
||||
};
|
||||
|
||||
const Trigger = ({ deviceName, trigger, onRemove, index }) => {
|
||||
const { operand, value, on } = trigger;
|
||||
let symbol;
|
||||
if (operand) {
|
||||
symbol = operands.filter((opt) => opt.key === operand)[0].text;
|
||||
}
|
||||
return (
|
||||
<List.Item className="trigger-item">
|
||||
<Menu compact>
|
||||
<Menu.Item as="span">{deviceName}</Menu.Item>
|
||||
{operand ? <Menu.Item as="span">{symbol}</Menu.Item> : ""}
|
||||
<Menu.Item as="span">{operand ? value : on ? "on" : "off"}</Menu.Item>
|
||||
</Menu>
|
||||
<Icon
|
||||
as={"i"}
|
||||
onClick={() => onRemove(index)}
|
||||
className="remove-icon"
|
||||
name="remove"
|
||||
/>
|
||||
</List.Item>
|
||||
);
|
||||
};
|
||||
|
||||
class AutomationSaveModal extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
triggerList: [],
|
||||
order: [],
|
||||
automationName: "New Automation",
|
||||
editName: false,
|
||||
newTrigger: {},
|
||||
scenesFilter: null,
|
||||
};
|
||||
|
||||
this.setTrigger = this._setter("triggerList");
|
||||
this.setOrder = this._setter("order");
|
||||
this.setautomationName = this._setter("automationName");
|
||||
this.setEditName = this._setter("editName");
|
||||
this.setNewTrigger = this._setter("newTrigger");
|
||||
|
||||
this.addTrigger = this.addTrigger.bind(this);
|
||||
this.removeTrigger = this.removeTrigger.bind(this);
|
||||
this.onInputChange = this.onInputChange.bind(this);
|
||||
this.searchScenes = this.searchScenes.bind(this);
|
||||
this.orderScenes = this.orderScenes.bind(this);
|
||||
}
|
||||
|
||||
get deviceList() {
|
||||
return Object.values(this.props.devices);
|
||||
}
|
||||
|
||||
_setter(property) {
|
||||
return (value) =>
|
||||
this.setState(update(this.state, { [property]: { $set: value } }));
|
||||
}
|
||||
|
||||
triggerKind(trigger) {
|
||||
if ("on" in trigger) {
|
||||
return "BooleanTrigger";
|
||||
} else if ("operand" in trigger && "value" in trigger) {
|
||||
return "RangeTrigger";
|
||||
} else {
|
||||
throw new Error("Trigger kind not handled");
|
||||
}
|
||||
}
|
||||
|
||||
_checkNewTrigger(trigger) {
|
||||
const auxDevice = this.props.devices[trigger.device];
|
||||
|
||||
// Check for missing fields for creation
|
||||
const error = {
|
||||
result: false,
|
||||
message: "There are missing fields!",
|
||||
};
|
||||
|
||||
switch (this.triggerKind(trigger)) {
|
||||
case "BooleanTrigger":
|
||||
if (!trigger.device || !trigger.on) return error;
|
||||
break;
|
||||
case "RangeTrigger":
|
||||
if (!trigger.device || !trigger.operand || !trigger.value) return error;
|
||||
break;
|
||||
}
|
||||
|
||||
const isNotDuplicate = !this.state.triggerList.some(
|
||||
(t) => t.device === trigger.device && t.operand === trigger.operand
|
||||
);
|
||||
|
||||
return {
|
||||
result: isNotDuplicate,
|
||||
message: isNotDuplicate
|
||||
? null
|
||||
: "You have already created a trigger for this device with the same conditions",
|
||||
};
|
||||
}
|
||||
|
||||
addTrigger() {
|
||||
const { result, message } = this._checkNewTrigger(this.state.newTrigger);
|
||||
|
||||
if (result) {
|
||||
this.setState(
|
||||
update(this.state, { triggerList: { $push: [this.state.newTrigger] } })
|
||||
);
|
||||
} else {
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
|
||||
removeTrigger(index) {
|
||||
this.setState(
|
||||
update(this.state, { triggerList: { $splice: [[index, 1]] } })
|
||||
);
|
||||
}
|
||||
|
||||
// This gets triggered when the devices dropdown changes the value.
|
||||
onInputChange(val) {
|
||||
this.setNewTrigger({ ...this.state.newTrigger, [val.name]: val.value });
|
||||
}
|
||||
|
||||
onChangeName(_, val) {
|
||||
this.setautomationName(val.value);
|
||||
}
|
||||
|
||||
orderScenes = (id, checked) => {
|
||||
if (checked) {
|
||||
this.setState(update(this.state, { order: { $push: [id] } }));
|
||||
} else {
|
||||
this.setState(
|
||||
update(this.state, {
|
||||
order: (prevList) => prevList.filter((e) => e !== id),
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
searchScenes(_, { value }) {
|
||||
this.setState(update(this.state, { scenesFilter: { $set: value } }));
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
get sceneList() {
|
||||
if (!this.scenesFilter) {
|
||||
return this.props.scenes;
|
||||
} else {
|
||||
return this.props.scenes.filter((e) =>
|
||||
e.name.includes(this.scenesFilter)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
_generateKey = (trigger) => {
|
||||
switch (this.triggerKind(trigger)) {
|
||||
case "BooleanTrigger":
|
||||
return trigger.device + trigger.value;
|
||||
case "RangeTrigger":
|
||||
return trigger.device + trigger.operand + trigger.value;
|
||||
}
|
||||
};
|
||||
|
||||
checkBeforeSave = () => {
|
||||
if (!this.state.automationName) {
|
||||
alert("Give a name to the automation");
|
||||
return false;
|
||||
}
|
||||
if (this.state.triggerList.length <= 0) {
|
||||
alert("You have to create a trigger");
|
||||
return false;
|
||||
}
|
||||
if (this.state.order.length <= 0) {
|
||||
alert("You need at least one active scene");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
saveAutomation = () => {
|
||||
if (this.checkBeforeSave()) {
|
||||
const automation = {
|
||||
name: this.state.automationName,
|
||||
};
|
||||
this.props.save({
|
||||
automation,
|
||||
triggerList: this.state.triggerList,
|
||||
order: this.state.order,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Header style={{ display: "inline", marginRight: "1rem" }}>
|
||||
{this.state.editName ? (
|
||||
<Input
|
||||
focus
|
||||
transparent
|
||||
placeholder="New automation name..."
|
||||
onChange={this.onChangeName}
|
||||
/>
|
||||
) : (
|
||||
this.state.automationName
|
||||
)}
|
||||
</Header>
|
||||
|
||||
<Button
|
||||
onClick={() => this.setEditName((prev) => !prev)}
|
||||
style={{ display: "inline" }}
|
||||
circular
|
||||
size="small"
|
||||
icon={this.state.editName ? "save" : "edit"}
|
||||
/>
|
||||
|
||||
<Segment placeholder className="segment-automations">
|
||||
<Grid columns={2} stackable textAlign="center">
|
||||
<Divider vertical />
|
||||
<Grid.Row verticalAlign="middle">
|
||||
<Grid.Column>
|
||||
<Header>Create Triggers</Header>
|
||||
<List divided relaxed>
|
||||
{this.state.triggerList.length > 0 &&
|
||||
this.state.triggerList.map((trigger, i) => {
|
||||
const deviceName = this.deviceList.filter(
|
||||
(d) => d.id === trigger.device
|
||||
)[0].name;
|
||||
const key = this._generateKey(trigger);
|
||||
return (
|
||||
<Trigger
|
||||
key={key}
|
||||
index={i}
|
||||
deviceName={deviceName}
|
||||
trigger={trigger}
|
||||
onRemove={this.removeTrigger}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<CreateTrigger
|
||||
devices={this.deviceList}
|
||||
inputChange={this.onInputChange}
|
||||
/>
|
||||
</List>
|
||||
<Button
|
||||
onClick={this.addTrigger}
|
||||
circular
|
||||
icon="add"
|
||||
color="blue"
|
||||
size="huge"
|
||||
/>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
{this.props.scenes.length > 0 ? (
|
||||
<React.Fragment>
|
||||
<Header>Activate Scenes</Header>
|
||||
<Input
|
||||
icon="search"
|
||||
placeholder="Search..."
|
||||
fluid
|
||||
onChange={this.searchScenes}
|
||||
/>
|
||||
<Divider horizontal />
|
||||
<List divided relaxed>
|
||||
{this.sceneList.map((scene) => (
|
||||
<SceneItem
|
||||
key={scene.id}
|
||||
scene={scene}
|
||||
order={this.state.order}
|
||||
orderScenes={this.orderScenes}
|
||||
/>
|
||||
))}
|
||||
</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 onClick={() => this.saveAutomation()} color="green">
|
||||
SAVE
|
||||
</Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
activeRoom: state.active.activeRoom,
|
||||
activeTab: state.active.activeTab,
|
||||
get scenes() {
|
||||
return Object.values(state.scenes);
|
||||
},
|
||||
devices: state.devices,
|
||||
get automations() {
|
||||
return Object.values(state.automations);
|
||||
},
|
||||
});
|
||||
const AutomationSaveModalContainer = connect(
|
||||
mapStateToProps,
|
||||
RemoteService
|
||||
)(AutomationSaveModal);
|
||||
export default AutomationSaveModalContainer;
|
||||
|
|
@ -6,402 +6,13 @@ import "./Automations.css";
|
|||
import {
|
||||
Segment,
|
||||
Grid,
|
||||
Icon,
|
||||
Header,
|
||||
Input,
|
||||
Button,
|
||||
List,
|
||||
Dropdown,
|
||||
Form,
|
||||
Divider,
|
||||
Checkbox,
|
||||
Menu,
|
||||
} from "semantic-ui-react";
|
||||
|
||||
const operands = [
|
||||
{ key: "EQUAL", text: "=", value: "EQUAL" },
|
||||
{
|
||||
key: "GREATER_EQUAL",
|
||||
text: "\u2265",
|
||||
value: "GREATER_EQUAL",
|
||||
},
|
||||
{
|
||||
key: "GREATER",
|
||||
text: ">",
|
||||
value: "GREATER",
|
||||
},
|
||||
{
|
||||
key: "LESS_EQUAL",
|
||||
text: "\u2264",
|
||||
value: "LESS_EQUAL",
|
||||
},
|
||||
{
|
||||
key: "LESS",
|
||||
text: "<",
|
||||
value: "LESS",
|
||||
},
|
||||
];
|
||||
|
||||
const deviceStateOptions = [
|
||||
{ key: "off", text: "off", value: false },
|
||||
{ key: "on", text: "on", value: true },
|
||||
];
|
||||
|
||||
const CreateTrigger = (props) => {
|
||||
const [activeOperand, setActiveOperand] = useState(true);
|
||||
const admitedDevices = ["sensor", "regularLight", "dimmableLight"]; // TODO Complete this list
|
||||
const deviceList = props.devices
|
||||
.map((device) => {
|
||||
return {
|
||||
key: device.id,
|
||||
text: device.name,
|
||||
value: device.id,
|
||||
kind: device.kind,
|
||||
};
|
||||
})
|
||||
.filter((e) => admitedDevices.includes(e.kind));
|
||||
|
||||
const onChange = (e, val) => {
|
||||
props.inputChange(val);
|
||||
if (
|
||||
props.devices.filter((d) => d.id === val.value)[0].hasOwnProperty("on")
|
||||
) {
|
||||
setActiveOperand(false);
|
||||
} else {
|
||||
setActiveOperand(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<List.Item>
|
||||
<List.Content>
|
||||
<Form>
|
||||
<Form.Group>
|
||||
<Form.Field inline width={7}>
|
||||
<Dropdown
|
||||
onChange={onChange}
|
||||
name="device"
|
||||
search
|
||||
selection
|
||||
options={deviceList}
|
||||
placeholder="Device"
|
||||
/>
|
||||
</Form.Field>
|
||||
{activeOperand ? (
|
||||
<React.Fragment>
|
||||
<Form.Field inline width={2}>
|
||||
<Dropdown
|
||||
onChange={(e, val) => props.inputChange(val)}
|
||||
name="operand"
|
||||
compact
|
||||
selection
|
||||
options={operands}
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field inline width={7}>
|
||||
<Input
|
||||
onChange={(e, val) => props.inputChange(val)}
|
||||
name="value"
|
||||
type="number"
|
||||
placeholder="Value"
|
||||
/>
|
||||
</Form.Field>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<Form.Field inline width={7}>
|
||||
<Dropdown
|
||||
onChange={(e, val) => props.inputChange(val)}
|
||||
placeholder="State"
|
||||
name="value"
|
||||
compact
|
||||
selection
|
||||
options={deviceStateOptions}
|
||||
/>
|
||||
</Form.Field>
|
||||
)}
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
);
|
||||
};
|
||||
|
||||
const SceneItem = (props) => {
|
||||
let position = props.order.indexOf(props.scene.id);
|
||||
return (
|
||||
<List.Item>
|
||||
<List.Header>
|
||||
<Grid textAlign="center">
|
||||
<Grid.Row>
|
||||
<Grid.Column width={4}>
|
||||
<Checkbox
|
||||
toggle
|
||||
onChange={(e, val) =>
|
||||
props.orderScenes(props.scene.id, val.checked)
|
||||
}
|
||||
checked={position + 1 > 0}
|
||||
/>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={8}>
|
||||
<h3>{props.scene.name}</h3>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={4}>
|
||||
<h3>{position !== -1 ? "# " + (position + 1) : ""}</h3>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</List.Header>
|
||||
</List.Item>
|
||||
);
|
||||
};
|
||||
|
||||
const Trigger = ({ deviceName, trigger, onRemove, index }) => {
|
||||
const { operand, value } = trigger;
|
||||
let symbol;
|
||||
if (operand) {
|
||||
symbol = operands.filter((opt) => opt.key === operand)[0].text;
|
||||
}
|
||||
return (
|
||||
<List.Item className="trigger-item">
|
||||
<Menu compact>
|
||||
<Menu.Item as="span">{deviceName}</Menu.Item>
|
||||
{operand ? <Menu.Item as="span">{symbol}</Menu.Item> : ""}
|
||||
<Menu.Item as="span">
|
||||
{operand ? value : value ? "on" : "off"}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
<Icon
|
||||
as={"i"}
|
||||
onClick={() => onRemove(index)}
|
||||
className="remove-icon"
|
||||
name="remove"
|
||||
/>
|
||||
</List.Item>
|
||||
);
|
||||
};
|
||||
|
||||
export const CreateAutomation = (props) => {
|
||||
const [triggerList, setTrigger] = useState([]);
|
||||
const [order, setOrder] = useState([]);
|
||||
const [stateScenes, setScenes] = useState(props.scenes);
|
||||
const [automationName, setautomationName] = useState("New Automation");
|
||||
const [editName, setEditName] = useState(false);
|
||||
const [newTrigger, setNewTrigger] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
setScenes(props.scenes);
|
||||
}, [props]);
|
||||
|
||||
const _checkNewTrigger = (trigger) => {
|
||||
const auxDevice = props.devices.filter((d) => d.id === trigger.device)[0];
|
||||
if (auxDevice && auxDevice.hasOwnProperty("on")) {
|
||||
if (!trigger.device || !trigger.value == null) {
|
||||
return {
|
||||
result: false,
|
||||
message: "There are missing fields!",
|
||||
};
|
||||
}
|
||||
} else {
|
||||
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);
|
||||
const auxTrigger = newTrigger;
|
||||
if (result) {
|
||||
if (
|
||||
props.devices
|
||||
.filter((d) => d.id === newTrigger.device)[0]
|
||||
.hasOwnProperty("on")
|
||||
) {
|
||||
delete auxTrigger.operand;
|
||||
}
|
||||
setTrigger((prevList) => [...prevList, auxTrigger]);
|
||||
} else {
|
||||
alert(message);
|
||||
}
|
||||
};
|
||||
|
||||
const removeTrigger = (index) => {
|
||||
setTrigger((prevList) => prevList.filter((t, i) => i !== index));
|
||||
};
|
||||
|
||||
// This gets triggered when the devices dropdown changes the value.
|
||||
const onInputChange = (val) => {
|
||||
setNewTrigger({ ...newTrigger, [val.name]: val.value });
|
||||
};
|
||||
const onChangeName = (e, val) => setautomationName(val.value);
|
||||
|
||||
const orderScenes = (id, checked) => {
|
||||
if (checked) {
|
||||
setOrder((prevList) => [...prevList, id]);
|
||||
} else {
|
||||
setOrder((prevList) => prevList.filter((e) => e !== id));
|
||||
}
|
||||
};
|
||||
const searchScenes = (e, { value }) => {
|
||||
if (value.length > 0) {
|
||||
setScenes((prevScenes) => {
|
||||
return stateScenes.filter((e) => {
|
||||
return e.name.includes(value);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
setScenes(props.scenes);
|
||||
}
|
||||
};
|
||||
|
||||
const _generateKey = (trigger) => {
|
||||
if (trigger.hasOwnProperty("operand")) {
|
||||
return trigger.device + trigger.operand + trigger.value;
|
||||
}
|
||||
return trigger.device + trigger.value;
|
||||
};
|
||||
|
||||
/*const checkBeforeSave = () => {
|
||||
if (automationName.length <= 0) {
|
||||
alert("Give a name to the automation");
|
||||
return false;
|
||||
}
|
||||
if (triggerList.length <= 0) {
|
||||
alert("You have to create a trigger");
|
||||
return false;
|
||||
}
|
||||
if (order.length <= 0) {
|
||||
alert("You need at least one active scene");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};*/
|
||||
|
||||
const saveAutomation = () => {
|
||||
//if(checkBeforeSave()){
|
||||
const automation = {
|
||||
name: automationName,
|
||||
};
|
||||
props.save({ automation, triggerList, order });
|
||||
//}
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Header style={{ display: "inline", marginRight: "1rem" }}>
|
||||
{editName ? (
|
||||
<Input
|
||||
focus
|
||||
transparent
|
||||
placeholder="New automation name..."
|
||||
onChange={onChangeName}
|
||||
/>
|
||||
) : (
|
||||
automationName
|
||||
)}
|
||||
</Header>
|
||||
|
||||
<Button
|
||||
onClick={() => setEditName((prev) => !prev)}
|
||||
style={{ display: "inline" }}
|
||||
circular
|
||||
size="small"
|
||||
icon={editName ? "save" : "edit"}
|
||||
/>
|
||||
|
||||
<Segment placeholder className="segment-automations">
|
||||
<Grid columns={2} stackable textAlign="center">
|
||||
<Divider vertical />
|
||||
<Grid.Row verticalAlign="middle">
|
||||
<Grid.Column>
|
||||
<Header>Create Triggers</Header>
|
||||
<List divided relaxed>
|
||||
{triggerList.length > 0 &&
|
||||
triggerList.map((trigger, i) => {
|
||||
const deviceName = props.devices.filter(
|
||||
(d) => d.id === trigger.device
|
||||
)[0].name;
|
||||
const key = _generateKey(trigger);
|
||||
return (
|
||||
<Trigger
|
||||
key={key}
|
||||
index={i}
|
||||
deviceName={deviceName}
|
||||
trigger={trigger}
|
||||
onRemove={removeTrigger}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<CreateTrigger
|
||||
devices={props.devices}
|
||||
inputChange={onInputChange}
|
||||
/>
|
||||
</List>
|
||||
<Button
|
||||
onClick={addTrigger}
|
||||
circular
|
||||
icon="add"
|
||||
color="blue"
|
||||
size="huge"
|
||||
/>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
{props.scenes.length > 0 ? (
|
||||
<React.Fragment>
|
||||
<Header>Activate Scenes</Header>
|
||||
<Input
|
||||
icon="search"
|
||||
placeholder="Search..."
|
||||
fluid
|
||||
onChange={searchScenes}
|
||||
/>
|
||||
<Divider horizontal />
|
||||
<List divided relaxed>
|
||||
{stateScenes.map((scene) => (
|
||||
<SceneItem
|
||||
key={scene.id}
|
||||
scene={scene}
|
||||
order={order}
|
||||
orderScenes={orderScenes}
|
||||
/>
|
||||
))}
|
||||
</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 onClick={() => saveAutomation()} color="green">
|
||||
SAVE
|
||||
</Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
import CreateAutomation, { operands } from "./AutomationCreationModal";
|
||||
|
||||
const Automation = ({ automation, devices, scenes, removeAutomation }) => {
|
||||
const { triggers } = automation;
|
||||
|
|
@ -518,11 +129,7 @@ class AutomationsPanel extends Component {
|
|||
<Grid.Column textAlign="center" width={16}>
|
||||
{!this.state.openModal ? (
|
||||
<List>
|
||||
<CreateAutomation
|
||||
save={this.props.saveAutomation}
|
||||
scenes={this.props.scenes}
|
||||
devices={this.props.devices}
|
||||
/>
|
||||
<CreateAutomation save={this.props.saveAutomation} />
|
||||
</List>
|
||||
) : (
|
||||
<Button color="green">CREATE AUTOMATION</Button>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// vim: set ts=2 sw=2 et tw=80:
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { Grid } from "semantic-ui-react";
|
||||
import { Grid, Card } from "semantic-ui-react";
|
||||
import Device from "./devices/Device";
|
||||
import NewDevice from "./devices/NewDevice";
|
||||
import { connect } from "react-redux";
|
||||
|
|
@ -24,12 +24,7 @@ class DevicePanel extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Grid
|
||||
doubling
|
||||
columns={3}
|
||||
divided="vertically"
|
||||
style={{ paddingTop: "3rem" }}
|
||||
>
|
||||
<Card.Group style={{ paddingTop: "3rem" }}>
|
||||
{this.props.devices.map((e, i) => {
|
||||
return (
|
||||
<Grid.Column key={i}>
|
||||
|
|
@ -42,7 +37,7 @@ class DevicePanel extends Component {
|
|||
<NewDevice />
|
||||
</Grid.Column>
|
||||
) : null}
|
||||
</Grid>
|
||||
</Card.Group>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ class Device extends React.Component {
|
|||
render() {
|
||||
{
|
||||
return (
|
||||
<Card>
|
||||
<Card style={{ height: "23em" }}>
|
||||
<Card.Content>
|
||||
<Card.Header textAlign="center">
|
||||
<Header as="h3">{this.deviceName}</Header>
|
||||
|
|
|
|||
|
|
@ -1,165 +0,0 @@
|
|||
import React, { Component } from "react";
|
||||
import {
|
||||
Menu,
|
||||
Button,
|
||||
Grid,
|
||||
Icon,
|
||||
Responsive,
|
||||
Dropdown,
|
||||
} from "semantic-ui-react";
|
||||
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
|
||||
import AutomationModal from "../components/AutomationModal";
|
||||
import { RemoteService } from "../remote";
|
||||
import { connect } from "react-redux";
|
||||
import { appActions } from "../storeActions";
|
||||
|
||||
class AutomationsNavbar extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
editMode: false,
|
||||
};
|
||||
|
||||
this.toggleEditMode = this.toggleEditMode.bind(this);
|
||||
this.openCurrentModalMobile = this.openCurrentModalMobile.bind(this);
|
||||
}
|
||||
|
||||
get activeItemAutomation() {
|
||||
return this.props.activeAutomation;
|
||||
}
|
||||
|
||||
set activeItemAutomation(item) {
|
||||
this.props.setActiveAutomation(item);
|
||||
}
|
||||
|
||||
get activeItemAutomationsName() {
|
||||
if (this.props.activeAutomation === -1) return "Home";
|
||||
return this.props.automations[this.props.activeAutomation].name;
|
||||
}
|
||||
|
||||
openCurrentModalMobile() {
|
||||
console.log(this.activeItemAutomation, this.props.automationsModalRefs);
|
||||
const currentModal = this.props.automationsModalRefs[
|
||||
this.activeItemAutomation
|
||||
].current;
|
||||
currentModal.openModal();
|
||||
}
|
||||
|
||||
toggleEditMode(e) {
|
||||
this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
|
||||
<Responsive minWidth={768}>
|
||||
<Grid>
|
||||
<Grid.Row color="black">
|
||||
<button style={editButtonStyle} onClick={this.toggleEditMode}>
|
||||
Edit
|
||||
</button>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<Menu inverted fluid vertical>
|
||||
<Menu.Item
|
||||
key={-1}
|
||||
id={null}
|
||||
name="automations"
|
||||
active={this.activeItemAutomation === -1}
|
||||
onClick={this.selectAutomations}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Icon name="home" size="small" />
|
||||
</Grid.Column>
|
||||
<Grid.Column>AUTOMATIONS</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Menu.Item>
|
||||
{
|
||||
//INSERT LIST OF AUTOMATIONS HERE
|
||||
}
|
||||
<Menu.Item name="newM">
|
||||
<Grid>
|
||||
<Grid.Row centered name="new">
|
||||
<AutomationModal id={null} />
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Responsive>
|
||||
|
||||
<Responsive maxWidth={768}>
|
||||
<Menu>
|
||||
<Dropdown item fluid text={this.activeItemAutomationName}>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item
|
||||
key={-1}
|
||||
id={null}
|
||||
name="scene"
|
||||
active={this.activeItemAutomation === -1}
|
||||
onClick={this.selectAutomations}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Icon name="home" size="small" />
|
||||
</Grid.Column>
|
||||
<Grid.Column>Automations</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Dropdown.Item>
|
||||
|
||||
{
|
||||
//INSERT LIST OF AUTOMATIONS HERE
|
||||
}
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Menu>
|
||||
<Grid inverted>
|
||||
<Grid.Row>
|
||||
<Grid.Column width={8}>
|
||||
<AutomationModal id={null} />
|
||||
</Grid.Column>
|
||||
{this.activeItemAutomation !== -1 ? (
|
||||
<Grid.Column width={8}>
|
||||
<Button
|
||||
icon
|
||||
fluid
|
||||
labelPosition="left"
|
||||
onClick={this.openCurrentModalMobile}
|
||||
>
|
||||
<Icon name="pencil" size="small" />
|
||||
EDIT AUTOMATION
|
||||
</Button>
|
||||
</Grid.Column>
|
||||
) : null}
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Responsive>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const setActiveAutomation = (activeAutomation) => {
|
||||
return (dispatch) =>
|
||||
dispatch(appActions.setActiveAutomation(activeAutomation));
|
||||
};
|
||||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
automations: state.automations,
|
||||
activeAutomation: state.active.activeAutomation,
|
||||
automationModalRefs: Object.keys(state.automations).reduce(
|
||||
(acc, key) => ({ ...acc, [key]: React.createRef() }),
|
||||
{}
|
||||
),
|
||||
});
|
||||
const AutomationsNavbarContainer = connect(mapStateToProps, {
|
||||
...RemoteService,
|
||||
setActiveAutomation,
|
||||
})(AutomationsNavbar);
|
||||
export default AutomationsNavbarContainer;
|
||||
|
|
@ -4,9 +4,8 @@ import ScenesPanel from "../components/dashboard/ScenesPanel";
|
|||
import AutomationsPanel from "../components/dashboard/AutomationsPanel";
|
||||
import Navbar from "./Navbar";
|
||||
import ScenesNavbar from "./ScenesNavbar";
|
||||
import AutomationsNavbar from "./AutomationsNavbar";
|
||||
import MyHeader from "../components/HeaderController";
|
||||
import { Grid, Responsive, Button } from "semantic-ui-react";
|
||||
import { Grid, Responsive, Button, Menu } from "semantic-ui-react";
|
||||
import {
|
||||
panelStyle,
|
||||
mobilePanelStyle,
|
||||
|
|
@ -67,13 +66,15 @@ class Dashboard extends Component {
|
|||
return <Navbar />;
|
||||
case "Scenes":
|
||||
return <ScenesNavbar />;
|
||||
case "Automations":
|
||||
return <AutomationsNavbar />;
|
||||
default:
|
||||
return <h1>ERROR</h1>;
|
||||
}
|
||||
}
|
||||
|
||||
get hasNavbar() {
|
||||
return this.state.activeTab !== "Automations";
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{ background: "#1b1c1d" }}>
|
||||
|
|
@ -85,40 +86,37 @@ class Dashboard extends Component {
|
|||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column width={3}></Grid.Column>
|
||||
<Grid.Column textAlign="center" width={13}>
|
||||
<Button
|
||||
<Grid.Column textAlign="center" width={16}>
|
||||
<Menu fluid widths={3} inverted color="grey">
|
||||
<Menu.Item
|
||||
basic
|
||||
name="Devices"
|
||||
content="Devices"
|
||||
active={this.activeTab === "Devices"}
|
||||
color={this.activeTab === "Devices" ? "yellow" : "grey"}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
<Menu.Item
|
||||
basic
|
||||
name="Scenes"
|
||||
content="Scenes"
|
||||
active={this.activeTab === "Scenes"}
|
||||
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
<Button
|
||||
basic
|
||||
<Menu.Item
|
||||
name="Automations"
|
||||
content="Automations"
|
||||
active={this.activeTab === "Automations"}
|
||||
color={this.activeTab === "Automations" ? "yellow" : "grey"}
|
||||
onClick={this.selectTab}
|
||||
/>
|
||||
</Menu>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row color="black">
|
||||
|
||||
{this.hasNavbar && (
|
||||
<Grid.Column width={3}>
|
||||
{this.renderNavbar(this.activeTab)}
|
||||
</Grid.Column>
|
||||
|
||||
<Grid.Column width={13}>
|
||||
)}
|
||||
<Grid.Column width={this.hasNavbar ? 13 : 16}>
|
||||
<div style={panelStyle}>{this.renderTab(this.activeTab)}</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
|
|
@ -159,11 +157,13 @@ class Dashboard extends Component {
|
|||
/>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
{this.hasNavbar && (
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column color="black">
|
||||
{this.renderNavbar(this.activeTab)}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
)}
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<div style={mobilePanelStyle}>
|
||||
|
|
|
|||
|
|
@ -60,9 +60,9 @@ class Navbar extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
|
||||
<div>
|
||||
<Responsive minWidth={768}>
|
||||
<Grid>
|
||||
<Grid style={{ margin: "1em -1em 0 1em" }}>
|
||||
<Grid.Row color="black">
|
||||
<button style={editButtonStyle} onClick={this.toggleEditMode}>
|
||||
Edit
|
||||
|
|
|
|||
|
|
@ -69,9 +69,9 @@ class ScenesNavbar extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
|
||||
<div>
|
||||
<Responsive minWidth={768}>
|
||||
<Grid>
|
||||
<Grid style={{ margin: "1em -1em 0 1em" }}>
|
||||
<Grid.Row color="black">
|
||||
<button style={editButtonStyle} onClick={this.toggleEditMode}>
|
||||
Edit
|
||||
|
|
|
|||
Loading…
Reference in a new issue