Merge branch '106-rangetrigger-values-must-be-validated-to-a-sensible-range-for-the-respective-device' into 'dev'
Check values for different types of sensors when creating a trigger for an automation Closes #106 See merge request sa4-2020/the-sanmarinoes/frontend!139
This commit is contained in:
commit
0ec8dccb25
6 changed files with 127 additions and 57 deletions
|
@ -77,10 +77,16 @@ export class MyHeader extends React.Component {
|
||||||
<Button basic inverted onClick={this.logout}>
|
<Button basic inverted onClick={this.logout}>
|
||||||
Logout
|
Logout
|
||||||
</Button>
|
</Button>
|
||||||
<Segment compact style={{margin: "auto", marginTop: "1em", textAlign: "center"}}>
|
<Segment
|
||||||
|
compact
|
||||||
|
style={{
|
||||||
|
margin: "auto",
|
||||||
|
marginTop: "1em",
|
||||||
|
textAlign: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
label={<label
|
label={<label>Share cameras</label>}
|
||||||
>Share cameras</label>}
|
|
||||||
checked={this.props.cameraEnabled}
|
checked={this.props.cameraEnabled}
|
||||||
toggle
|
toggle
|
||||||
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
||||||
|
@ -108,10 +114,16 @@ export class MyHeader extends React.Component {
|
||||||
</Label>
|
</Label>
|
||||||
<Divider />
|
<Divider />
|
||||||
<Button onClick={this.logout}>Logout</Button>
|
<Button onClick={this.logout}>Logout</Button>
|
||||||
<Segment compact style={{margin: "auto", marginTop: "1em", textAlign: "center"}}>
|
<Segment
|
||||||
|
compact
|
||||||
|
style={{
|
||||||
|
margin: "auto",
|
||||||
|
marginTop: "1em",
|
||||||
|
textAlign: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
label={<label
|
label={<label>Share cameras</label>}
|
||||||
>Share cameras</label>}
|
|
||||||
checked={this.props.cameraEnabled}
|
checked={this.props.cameraEnabled}
|
||||||
toggle
|
toggle
|
||||||
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
||||||
|
|
|
@ -224,7 +224,7 @@ class SceneModal extends Component {
|
||||||
)}
|
)}
|
||||||
{this.type === "modify" ? (
|
{this.type === "modify" ? (
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Segment compact style={{ marginBottom: "1rem"}}>
|
<Segment compact style={{ marginBottom: "1rem" }}>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
label="Enable guest access"
|
label="Enable guest access"
|
||||||
checked={this.state.guestAccessEnabled}
|
checked={this.state.guestAccessEnabled}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { Component, useState } from "react";
|
import React, { Component, useState, useRef } from "react";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { RemoteService } from "../../remote";
|
import { RemoteService } from "../../remote";
|
||||||
import update from "immutability-helper";
|
import update from "immutability-helper";
|
||||||
|
@ -51,6 +51,8 @@ const deviceStateOptions = [
|
||||||
|
|
||||||
const CreateTrigger = (props) => {
|
const CreateTrigger = (props) => {
|
||||||
const [activeOperand, setActiveOperand] = useState(true);
|
const [activeOperand, setActiveOperand] = useState(true);
|
||||||
|
const operandsRef = useRef(null);
|
||||||
|
const valuesRef = useRef(null);
|
||||||
const notAdmitedDevices = ["buttonDimmer"];
|
const notAdmitedDevices = ["buttonDimmer"];
|
||||||
const hasOperand = new Set([
|
const hasOperand = new Set([
|
||||||
"knobDimmer",
|
"knobDimmer",
|
||||||
|
@ -72,6 +74,10 @@ const CreateTrigger = (props) => {
|
||||||
const onChange = (e, val) => {
|
const onChange = (e, val) => {
|
||||||
props.inputChange(val);
|
props.inputChange(val);
|
||||||
setActiveOperand(hasOperand.has(props.devices[val.value].kind));
|
setActiveOperand(hasOperand.has(props.devices[val.value].kind));
|
||||||
|
|
||||||
|
if (operandsRef.current) operandsRef.current.setValue("");
|
||||||
|
if (valuesRef.current)
|
||||||
|
valuesRef.current.inputRef.current.valueAsNumber = undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -94,6 +100,7 @@ const CreateTrigger = (props) => {
|
||||||
<Form.Field inline width={2}>
|
<Form.Field inline width={2}>
|
||||||
<Dropdown
|
<Dropdown
|
||||||
onChange={(e, val) => props.inputChange(val)}
|
onChange={(e, val) => props.inputChange(val)}
|
||||||
|
ref={operandsRef}
|
||||||
name="operand"
|
name="operand"
|
||||||
compact
|
compact
|
||||||
selection
|
selection
|
||||||
|
@ -102,7 +109,10 @@ const CreateTrigger = (props) => {
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<Form.Field inline width={7}>
|
<Form.Field inline width={7}>
|
||||||
<Input
|
<Input
|
||||||
onChange={(e, val) => props.inputChange(val)}
|
onChange={(e, val) => {
|
||||||
|
props.inputChange(val);
|
||||||
|
}}
|
||||||
|
ref={valuesRef}
|
||||||
name="value"
|
name="value"
|
||||||
type="number"
|
type="number"
|
||||||
placeholder="Value"
|
placeholder="Value"
|
||||||
|
@ -207,7 +217,10 @@ class AutomationSaveModal extends Component {
|
||||||
},
|
},
|
||||||
trigger.kind === "booleanTrigger"
|
trigger.kind === "booleanTrigger"
|
||||||
? { on: trigger.on }
|
? { on: trigger.on }
|
||||||
: { operand: trigger.operator, value: trigger.value }
|
: {
|
||||||
|
operand: trigger.operator,
|
||||||
|
value: trigger.value,
|
||||||
|
}
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -245,29 +258,62 @@ class AutomationSaveModal extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
triggerKind(trigger) {
|
triggerKind(trigger) {
|
||||||
if ("on" in trigger) {
|
if ("operand" in trigger && "value" in trigger) {
|
||||||
return "booleanTrigger";
|
|
||||||
} else if ("operand" in trigger && "value" in trigger) {
|
|
||||||
return "rangeTrigger";
|
return "rangeTrigger";
|
||||||
|
} else if ("on" in trigger) {
|
||||||
|
return "booleanTrigger";
|
||||||
} else {
|
} else {
|
||||||
throw new Error("Trigger kind not handled");
|
return false;
|
||||||
|
//throw new Error("Trigger kind not handled");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_checkNewTrigger(trigger) {
|
_checkNewTrigger(trigger) {
|
||||||
// Check for missing fields for creation
|
|
||||||
const error = {
|
const error = {
|
||||||
result: false,
|
result: false,
|
||||||
message: "There are missing fields!",
|
message: "There are missing fields!",
|
||||||
};
|
};
|
||||||
|
let device = Object.values(this.props.devices).filter(
|
||||||
|
(d) => d.id === trigger.device
|
||||||
|
)[0];
|
||||||
|
|
||||||
switch (this.triggerKind(trigger)) {
|
let triggerKind = this.triggerKind(trigger);
|
||||||
|
|
||||||
|
if (!device || !triggerKind) {
|
||||||
|
error.message = "There are missing fields";
|
||||||
|
return error;
|
||||||
|
}
|
||||||
|
let deviceKind = device.kind;
|
||||||
|
const devicesWithPercentage = ["dimmableLight", "curtains", "knobDimmer"];
|
||||||
|
|
||||||
|
switch (triggerKind) {
|
||||||
case "booleanTrigger":
|
case "booleanTrigger":
|
||||||
if (!trigger.device || trigger.on === null || trigger.on === undefined)
|
if (!trigger.device || trigger.on === null || trigger.on === undefined)
|
||||||
return error;
|
return error;
|
||||||
break;
|
break;
|
||||||
case "rangeTrigger":
|
case "rangeTrigger":
|
||||||
if (!trigger.device || !trigger.operand || !trigger.value) return error;
|
if (!trigger.device || !trigger.operand || !trigger.value) {
|
||||||
|
return error;
|
||||||
|
}
|
||||||
|
if (trigger.value < 0) {
|
||||||
|
error.message = "Values cannot be negative";
|
||||||
|
return error;
|
||||||
|
}
|
||||||
|
// If the device's range is a percentage, values cannot exceed 100
|
||||||
|
else if (
|
||||||
|
devicesWithPercentage.includes(deviceKind) &&
|
||||||
|
trigger.value > 100
|
||||||
|
) {
|
||||||
|
error.message = "The value can't exceed 100, as it's a percentage";
|
||||||
|
return error;
|
||||||
|
} else if (
|
||||||
|
deviceKind === "sensor" &&
|
||||||
|
device.sensor === "HUMIDITY" &&
|
||||||
|
trigger.value > 100
|
||||||
|
) {
|
||||||
|
error.message = "The value can't exceed 100, as it's a percentage";
|
||||||
|
return error;
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
throw new Error("theoretically unreachable statement");
|
throw new Error("theoretically unreachable statement");
|
||||||
|
@ -290,7 +336,9 @@ class AutomationSaveModal extends Component {
|
||||||
|
|
||||||
if (result) {
|
if (result) {
|
||||||
this.setState(
|
this.setState(
|
||||||
update(this.state, { triggerList: { $push: [this.state.newTrigger] } })
|
update(this.state, {
|
||||||
|
triggerList: { $push: [this.state.newTrigger] },
|
||||||
|
})
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
alert(message);
|
alert(message);
|
||||||
|
@ -305,7 +353,14 @@ class AutomationSaveModal extends Component {
|
||||||
|
|
||||||
// This gets triggered when the devices dropdown changes the value.
|
// This gets triggered when the devices dropdown changes the value.
|
||||||
onInputChange(val) {
|
onInputChange(val) {
|
||||||
this.setNewTrigger({ ...this.state.newTrigger, [val.name]: val.value });
|
if (val.name === "device") {
|
||||||
|
this.setNewTrigger({ [val.name]: val.value });
|
||||||
|
} else {
|
||||||
|
this.setNewTrigger({
|
||||||
|
...this.state.newTrigger,
|
||||||
|
[val.name]: val.value,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onChangeName(_, val) {
|
onChangeName(_, val) {
|
||||||
|
@ -392,14 +447,16 @@ class AutomationSaveModal extends Component {
|
||||||
deviceId: trigger.device,
|
deviceId: trigger.device,
|
||||||
kind,
|
kind,
|
||||||
},
|
},
|
||||||
kind
|
kind === "booleanTrigger"
|
||||||
? { on: trigger.on }
|
? { on: trigger.on }
|
||||||
: { operator: trigger.operand, value: trigger.value }
|
: {
|
||||||
|
operator: trigger.operand,
|
||||||
|
range: parseInt(trigger.value),
|
||||||
|
}
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(automation);
|
|
||||||
this.props
|
this.props
|
||||||
.fastUpdateAutomation(automation)
|
.fastUpdateAutomation(automation)
|
||||||
.then(this.closeModal)
|
.then(this.closeModal)
|
||||||
|
|
|
@ -161,7 +161,6 @@ const mapStateToProps = (state, _) => ({
|
||||||
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);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -57,13 +57,6 @@ class Sensor extends Component {
|
||||||
this.name = "Sensor";
|
this.name = "Sensor";
|
||||||
}
|
}
|
||||||
|
|
||||||
// setName = () => {
|
|
||||||
// if (this.props.device.name.length > 15) {
|
|
||||||
// return this.props.device.name.slice(0, 12) + "...";
|
|
||||||
// }
|
|
||||||
// return this.props.device.name;
|
|
||||||
// };
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
componentDidUpdate(prevProps) {
|
||||||
if (
|
if (
|
||||||
this.props.stateOrDevice.kind === "sensor" &&
|
this.props.stateOrDevice.kind === "sensor" &&
|
||||||
|
|
|
@ -93,7 +93,9 @@ function reducer(previousState, action) {
|
||||||
newState = update(previousState, { login: { $set: action.login } });
|
newState = update(previousState, { login: { $set: action.login } });
|
||||||
break;
|
break;
|
||||||
case "USER_INFO_UPDATE":
|
case "USER_INFO_UPDATE":
|
||||||
newState = update(previousState, { userInfo: { $set: action.userInfo } });
|
newState = update(previousState, {
|
||||||
|
userInfo: { $set: action.userInfo },
|
||||||
|
});
|
||||||
break;
|
break;
|
||||||
case "ROOMS_UPDATE":
|
case "ROOMS_UPDATE":
|
||||||
newState = previousState;
|
newState = previousState;
|
||||||
|
@ -138,7 +140,9 @@ function reducer(previousState, action) {
|
||||||
// and remove any join between that scene and deleted
|
// and remove any join between that scene and deleted
|
||||||
// sceneStates
|
// sceneStates
|
||||||
change = {
|
change = {
|
||||||
scenes: { [action.sceneId]: { sceneStates: { $set: new Set() } } },
|
scenes: {
|
||||||
|
[action.sceneId]: { sceneStates: { $set: new Set() } },
|
||||||
|
},
|
||||||
sceneStates: { $unset: [] },
|
sceneStates: { $unset: [] },
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -199,7 +203,9 @@ function reducer(previousState, action) {
|
||||||
// devices
|
// devices
|
||||||
if (action.roomId) {
|
if (action.roomId) {
|
||||||
change = {
|
change = {
|
||||||
rooms: { [action.roomId]: { devices: { $set: new Set() } } },
|
rooms: {
|
||||||
|
[action.roomId]: { devices: { $set: new Set() } },
|
||||||
|
},
|
||||||
devices: { $unset: [] },
|
devices: { $unset: [] },
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -369,7 +375,9 @@ function reducer(previousState, action) {
|
||||||
|
|
||||||
case "AUTOMATION_SAVE":
|
case "AUTOMATION_SAVE":
|
||||||
change = {
|
change = {
|
||||||
automations: { [action.automation.id]: { $set: action.automation } },
|
automations: {
|
||||||
|
[action.automation.id]: { $set: action.automation },
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
newState = update(previousState, change);
|
newState = update(previousState, change);
|
||||||
|
@ -378,7 +386,9 @@ function reducer(previousState, action) {
|
||||||
|
|
||||||
case "STATE_SAVE":
|
case "STATE_SAVE":
|
||||||
change = {
|
change = {
|
||||||
sceneStates: { [action.sceneState.id]: { $set: action.sceneState } },
|
sceneStates: {
|
||||||
|
[action.sceneState.id]: { $set: action.sceneState },
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
if (previousState.scenes[action.sceneState.sceneId]) {
|
if (previousState.scenes[action.sceneState.sceneId]) {
|
||||||
|
@ -528,7 +538,6 @@ function reducer(previousState, action) {
|
||||||
}
|
}
|
||||||
return a;
|
return a;
|
||||||
}, {});
|
}, {});
|
||||||
console.log(devices);
|
|
||||||
newState = reducer(previousState, {
|
newState = reducer(previousState, {
|
||||||
type: "DEVICES_UPDATE",
|
type: "DEVICES_UPDATE",
|
||||||
partial: true,
|
partial: true,
|
||||||
|
|
Loading…
Reference in a new issue