Merge branch 'dev' of https://lab.si.usi.ch/sa4-2020/the-sanmarinoes/frontend into dev
This commit is contained in:
commit
7354eefb49
15 changed files with 239 additions and 12233 deletions
|
@ -77,10 +77,16 @@ export class MyHeader extends React.Component {
|
|||
<Button basic inverted onClick={this.logout}>
|
||||
Logout
|
||||
</Button>
|
||||
<Segment compact style={{margin: "auto", marginTop: "1em", textAlign: "center"}}>
|
||||
<Segment
|
||||
compact
|
||||
style={{
|
||||
margin: "auto",
|
||||
marginTop: "1em",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
label={<label
|
||||
>Share cameras</label>}
|
||||
label={<label>Share cameras</label>}
|
||||
checked={this.props.cameraEnabled}
|
||||
toggle
|
||||
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
||||
|
@ -108,10 +114,16 @@ export class MyHeader extends React.Component {
|
|||
</Label>
|
||||
<Divider />
|
||||
<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
|
||||
label={<label
|
||||
>Share cameras</label>}
|
||||
label={<label>Share cameras</label>}
|
||||
checked={this.props.cameraEnabled}
|
||||
toggle
|
||||
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
||||
|
|
|
@ -94,12 +94,12 @@ class RoomModal extends Component {
|
|||
};
|
||||
|
||||
setSureTrue = () => {
|
||||
this.setState({sure: true})
|
||||
}
|
||||
this.setState({ sure: true });
|
||||
};
|
||||
|
||||
setSureFalse = () => {
|
||||
this.setState({sure: false})
|
||||
}
|
||||
this.setState({ sure: false });
|
||||
};
|
||||
|
||||
changeSomething = (event) => {
|
||||
let nam = event.target.name;
|
||||
|
@ -239,13 +239,14 @@ class RoomModal extends Component {
|
|||
onClick={this.setSureTrue}
|
||||
>
|
||||
<Icon name="trash alternate" />
|
||||
Delete Room </Button>
|
||||
Delete Room{" "}
|
||||
</Button>
|
||||
<Confirm
|
||||
open={this.state.sure}
|
||||
onCancel={this.setSureFalse}
|
||||
onConfirm={this.deleteRoom}/>
|
||||
onConfirm={this.deleteRoom}
|
||||
/>
|
||||
</div>
|
||||
|
||||
) : null}
|
||||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component, useState } from "react";
|
||||
import React, { Component, useState, useRef } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../../remote";
|
||||
import update from "immutability-helper";
|
||||
|
@ -51,6 +51,8 @@ const deviceStateOptions = [
|
|||
|
||||
const CreateTrigger = (props) => {
|
||||
const [activeOperand, setActiveOperand] = useState(true);
|
||||
const operandsRef = useRef(null);
|
||||
const valuesRef = useRef(null);
|
||||
const notAdmitedDevices = ["buttonDimmer"];
|
||||
const hasOperand = new Set([
|
||||
"knobDimmer",
|
||||
|
@ -72,6 +74,10 @@ const CreateTrigger = (props) => {
|
|||
const onChange = (e, val) => {
|
||||
props.inputChange(val);
|
||||
setActiveOperand(hasOperand.has(props.devices[val.value].kind));
|
||||
|
||||
if (operandsRef.current) operandsRef.current.setValue("");
|
||||
if (valuesRef.current)
|
||||
valuesRef.current.inputRef.current.valueAsNumber = undefined;
|
||||
};
|
||||
|
||||
return (
|
||||
|
@ -94,6 +100,7 @@ const CreateTrigger = (props) => {
|
|||
<Form.Field inline width={2}>
|
||||
<Dropdown
|
||||
onChange={(e, val) => props.inputChange(val)}
|
||||
ref={operandsRef}
|
||||
name="operand"
|
||||
compact
|
||||
selection
|
||||
|
@ -102,7 +109,10 @@ const CreateTrigger = (props) => {
|
|||
</Form.Field>
|
||||
<Form.Field inline width={7}>
|
||||
<Input
|
||||
onChange={(e, val) => props.inputChange(val)}
|
||||
onChange={(e, val) => {
|
||||
props.inputChange(val);
|
||||
}}
|
||||
ref={valuesRef}
|
||||
name="value"
|
||||
type="number"
|
||||
placeholder="Value"
|
||||
|
@ -207,7 +217,10 @@ class AutomationSaveModal extends Component {
|
|||
},
|
||||
trigger.kind === "booleanTrigger"
|
||||
? { 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) {
|
||||
if ("on" in trigger) {
|
||||
return "booleanTrigger";
|
||||
} else if ("operand" in trigger && "value" in trigger) {
|
||||
if ("operand" in trigger && "value" in trigger) {
|
||||
return "rangeTrigger";
|
||||
} else if ("on" in trigger) {
|
||||
return "booleanTrigger";
|
||||
} else {
|
||||
throw new Error("Trigger kind not handled");
|
||||
return false;
|
||||
//throw new Error("Trigger kind not handled");
|
||||
}
|
||||
}
|
||||
|
||||
_checkNewTrigger(trigger) {
|
||||
// Check for missing fields for creation
|
||||
const error = {
|
||||
result: false,
|
||||
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":
|
||||
if (!trigger.device || trigger.on === null || trigger.on === undefined)
|
||||
return error;
|
||||
break;
|
||||
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;
|
||||
default:
|
||||
throw new Error("theoretically unreachable statement");
|
||||
|
@ -290,7 +336,9 @@ class AutomationSaveModal extends Component {
|
|||
|
||||
if (result) {
|
||||
this.setState(
|
||||
update(this.state, { triggerList: { $push: [this.state.newTrigger] } })
|
||||
update(this.state, {
|
||||
triggerList: { $push: [this.state.newTrigger] },
|
||||
})
|
||||
);
|
||||
} else {
|
||||
alert(message);
|
||||
|
@ -305,7 +353,14 @@ class AutomationSaveModal extends Component {
|
|||
|
||||
// This gets triggered when the devices dropdown changes the value.
|
||||
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) {
|
||||
|
@ -392,14 +447,16 @@ class AutomationSaveModal extends Component {
|
|||
deviceId: trigger.device,
|
||||
kind,
|
||||
},
|
||||
kind
|
||||
kind === "booleanTrigger"
|
||||
? { on: trigger.on }
|
||||
: { operator: trigger.operand, value: trigger.value }
|
||||
: {
|
||||
operator: trigger.operand,
|
||||
range: parseInt(trigger.value),
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
console.log(automation);
|
||||
this.props
|
||||
.fastUpdateAutomation(automation)
|
||||
.then(this.closeModal)
|
||||
|
|
|
@ -161,7 +161,6 @@ const mapStateToProps = (state, _) => ({
|
|||
return Object.values(state.devices);
|
||||
},
|
||||
get automations() {
|
||||
console.log(state.automations);
|
||||
return Object.values(state.automations);
|
||||
},
|
||||
});
|
||||
|
|
|
@ -16,6 +16,13 @@ class HostsPanel extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
applyHostScene(id) {
|
||||
this.props
|
||||
.sceneApply(id, this.props.activeHost)
|
||||
.then(() => console.log("SCCUESS"))
|
||||
.catch((err) => console.error("sceneApply update error", err));
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.props.isActiveDefaultHost) {
|
||||
return (
|
||||
|
@ -46,9 +53,11 @@ class HostsPanel extends Component {
|
|||
{scene.name} <Icon name={scene.icon} />
|
||||
</Header>
|
||||
</Card.Header>
|
||||
<Card.Content extras>
|
||||
<Card.Content extras={true}>
|
||||
<div className="ui two buttons">
|
||||
<Button>Apply</Button>
|
||||
<Button onClick={() => this.applyHostScene(scene.id)}>
|
||||
Apply
|
||||
</Button>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
|
|
@ -141,9 +141,13 @@ class NewDevice extends Component {
|
|||
case "buttonDimmer":
|
||||
case "knobDimmer":
|
||||
outputs = this.state.lightsAttached;
|
||||
if (this.state.lightsAttached === undefined ||
|
||||
this.state.lightsAttached.length === 0) {
|
||||
alert("No lights attached to this switch! Please, add a light a first.");
|
||||
if (
|
||||
this.state.lightsAttached === undefined ||
|
||||
this.state.lightsAttached.length === 0
|
||||
) {
|
||||
alert(
|
||||
"No lights attached to this switch! Please, add a light a first."
|
||||
);
|
||||
return;
|
||||
}
|
||||
break;
|
||||
|
@ -165,11 +169,17 @@ class NewDevice extends Component {
|
|||
render() {
|
||||
const deviceOptions = [
|
||||
//stuff
|
||||
{ key: "thermostat", text: "Thermostat", value: "thermostat",
|
||||
image: {avatar: true, src: "/img/thermostat-icon.png"}
|
||||
{
|
||||
key: "thermostat",
|
||||
text: "Thermostat",
|
||||
value: "thermostat",
|
||||
image: { avatar: true, src: "/img/thermostat-icon.png" },
|
||||
},
|
||||
{ key: "curtains", text: "Curtain", value: "curtains",
|
||||
image: {avatar: true, src: "/img/curtains-icon.png"}
|
||||
{
|
||||
key: "curtains",
|
||||
text: "Curtain",
|
||||
value: "curtains",
|
||||
image: { avatar: true, src: "/img/curtains-icon.png" },
|
||||
},
|
||||
//stuff ends
|
||||
{
|
||||
|
|
|
@ -57,13 +57,6 @@ class Sensor extends Component {
|
|||
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) {
|
||||
if (
|
||||
this.props.stateOrDevice.kind === "sensor" &&
|
||||
|
@ -123,6 +116,18 @@ class Sensor extends Component {
|
|||
return this.iconOff;
|
||||
};
|
||||
|
||||
temperatureColor = (value) => {
|
||||
let hue = 100;
|
||||
const min = 16;
|
||||
const max = 20;
|
||||
if (value >= min && value < max) {
|
||||
hue = 100 - ((value - min) * 100) / (max - min);
|
||||
} else if (value >= max) {
|
||||
hue = 0;
|
||||
}
|
||||
return `hsl(${hue}, 100%, 50%)`;
|
||||
};
|
||||
|
||||
render() {
|
||||
const MotionSensor = (props) => {
|
||||
return (
|
||||
|
@ -161,11 +166,18 @@ class Sensor extends Component {
|
|||
>
|
||||
<CircularProgress
|
||||
strokeWidth="2rem"
|
||||
stroke={this.colors.progress}
|
||||
stroke={
|
||||
this.props.stateOrDevice.sensor === "TEMPERATURE"
|
||||
? this.temperatureColor(this.state.value)
|
||||
: this.colors.progress
|
||||
}
|
||||
fill={this.colors.circle}
|
||||
/>
|
||||
<text
|
||||
style={{ ...valueStyle, fill: this.colors.text }}
|
||||
style={{
|
||||
...valueStyle,
|
||||
fill: this.colors.text,
|
||||
}}
|
||||
x={100}
|
||||
y={110}
|
||||
textAnchor="middle"
|
||||
|
@ -177,7 +189,10 @@ class Sensor extends Component {
|
|||
{this.units}
|
||||
</text>
|
||||
<text
|
||||
style={{ ...sensorText, fill: this.colors.text }}
|
||||
style={{
|
||||
...sensorText,
|
||||
fill: this.colors.text,
|
||||
}}
|
||||
x={100}
|
||||
y={150}
|
||||
textAnchor="middle"
|
||||
|
|
|
@ -70,11 +70,12 @@ class Videocam extends Component {
|
|||
/>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row textAlign="center">
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Checkbox
|
||||
checked={this.props.stateOrDevice.on}
|
||||
toggle
|
||||
label="Turn on/off"
|
||||
onChange={(e, val) => this.setOnOff(val.checked)}
|
||||
/>
|
||||
</Grid.Column>
|
||||
|
|
|
@ -549,12 +549,21 @@ export const RemoteService = {
|
|||
};
|
||||
},
|
||||
|
||||
sceneApply: (id) => {
|
||||
sceneApply: (id, hostId = null) => {
|
||||
return (dispatch) => {
|
||||
let url = `/scene/${id}/apply`;
|
||||
if (hostId) {
|
||||
url = url + "?hostId=" + hostId;
|
||||
}
|
||||
|
||||
return Endpoint.post(url)
|
||||
.then((res) => dispatch(actions.deviceOperationUpdate(res.data)))
|
||||
.then((res) =>
|
||||
dispatch(
|
||||
hostId
|
||||
? actions.hostDevicesUpdate(hostId, res.data, true)
|
||||
: actions.deviceOperationUpdate(res.data)
|
||||
)
|
||||
)
|
||||
.catch((err) => {
|
||||
console.warn("scene apply error", err);
|
||||
throw new RemoteError(["Network error"]);
|
||||
|
|
|
@ -49,6 +49,7 @@ function reducer(previousState, action) {
|
|||
[scene.id]: {
|
||||
name: { $set: scene.name },
|
||||
icon: { $set: scene.icon },
|
||||
guestAccessEnabled: { $set: scene.guestAccessEnabled },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
@ -92,7 +93,9 @@ function reducer(previousState, action) {
|
|||
newState = update(previousState, { login: { $set: action.login } });
|
||||
break;
|
||||
case "USER_INFO_UPDATE":
|
||||
newState = update(previousState, { userInfo: { $set: action.userInfo } });
|
||||
newState = update(previousState, {
|
||||
userInfo: { $set: action.userInfo },
|
||||
});
|
||||
break;
|
||||
case "ROOMS_UPDATE":
|
||||
newState = previousState;
|
||||
|
@ -137,7 +140,9 @@ function reducer(previousState, action) {
|
|||
// and remove any join between that scene and deleted
|
||||
// sceneStates
|
||||
change = {
|
||||
scenes: { [action.sceneId]: { sceneStates: { $set: new Set() } } },
|
||||
scenes: {
|
||||
[action.sceneId]: { sceneStates: { $set: new Set() } },
|
||||
},
|
||||
sceneStates: { $unset: [] },
|
||||
};
|
||||
|
||||
|
@ -198,7 +203,9 @@ function reducer(previousState, action) {
|
|||
// devices
|
||||
if (action.roomId) {
|
||||
change = {
|
||||
rooms: { [action.roomId]: { devices: { $set: new Set() } } },
|
||||
rooms: {
|
||||
[action.roomId]: { devices: { $set: new Set() } },
|
||||
},
|
||||
devices: { $unset: [] },
|
||||
};
|
||||
|
||||
|
@ -368,7 +375,9 @@ function reducer(previousState, action) {
|
|||
|
||||
case "AUTOMATION_SAVE":
|
||||
change = {
|
||||
automations: { [action.automation.id]: { $set: action.automation } },
|
||||
automations: {
|
||||
[action.automation.id]: { $set: action.automation },
|
||||
},
|
||||
};
|
||||
|
||||
newState = update(previousState, change);
|
||||
|
@ -377,7 +386,9 @@ function reducer(previousState, action) {
|
|||
|
||||
case "STATE_SAVE":
|
||||
change = {
|
||||
sceneStates: { [action.sceneState.id]: { $set: action.sceneState } },
|
||||
sceneStates: {
|
||||
[action.sceneState.id]: { $set: action.sceneState },
|
||||
},
|
||||
};
|
||||
|
||||
if (previousState.scenes[action.sceneState.sceneId]) {
|
||||
|
@ -527,7 +538,6 @@ function reducer(previousState, action) {
|
|||
}
|
||||
return a;
|
||||
}, {});
|
||||
console.log(devices);
|
||||
newState = reducer(previousState, {
|
||||
type: "DEVICES_UPDATE",
|
||||
partial: true,
|
||||
|
|
|
@ -63,9 +63,10 @@ const actions = {
|
|||
devices,
|
||||
partial,
|
||||
}),
|
||||
hostDevicesUpdate: (hostId, devices) => ({
|
||||
hostDevicesUpdate: (hostId, devices, partial = false) => ({
|
||||
type: "HOST_DEVICES_UPDATE",
|
||||
hostId,
|
||||
partial,
|
||||
devices,
|
||||
}),
|
||||
stateDelete: (stateId) => ({
|
||||
|
|
|
@ -8,10 +8,7 @@ import ScenesNavbar from "./ScenesNavbar";
|
|||
import HostsNavbar from "./HostsNavbar";
|
||||
import MyHeader from "../components/HeaderController";
|
||||
import { Grid, Responsive, Button, Menu } from "semantic-ui-react";
|
||||
import {
|
||||
panelStyle,
|
||||
mobilePanelStyle,
|
||||
} from "../components/dashboard/devices/styleComponents";
|
||||
import { mobilePanelStyle } from "../components/dashboard/devices/styleComponents";
|
||||
|
||||
import { RemoteService } from "../remote";
|
||||
import { connect } from "react-redux";
|
||||
|
@ -85,7 +82,7 @@ class Dashboard extends Component {
|
|||
//in case a room has one.
|
||||
let backgroundImageHelper;
|
||||
if (this.activeTab === "Devices") {
|
||||
backgroundImageHelper=this.props.allRooms;
|
||||
backgroundImageHelper = this.props.backgroundImage;
|
||||
} else {
|
||||
backgroundImageHelper = null;
|
||||
}
|
||||
|
@ -135,15 +132,19 @@ class Dashboard extends Component {
|
|||
</Grid.Column>
|
||||
)}
|
||||
<Grid.Column width={this.hasNavbar ? 13 : 16}>
|
||||
<div style={
|
||||
{backgroundImage:"url("+ backgroundImageHelper+")",
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: "url(" + backgroundImageHelper + ")",
|
||||
backgroundColor: "#fafafa",
|
||||
height: "85vh",
|
||||
padding: "0rem 3rem",
|
||||
color: "#000000",
|
||||
overflow: "auto",
|
||||
maxHeight: "75vh",}
|
||||
}>{this.renderTab(this.activeTab)}</div>
|
||||
maxHeight: "75vh",
|
||||
}}
|
||||
>
|
||||
{this.renderTab(this.activeTab)}
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
|
@ -219,23 +220,13 @@ const mapStateToProps = (state, _) => ({
|
|||
get currentRoom() {
|
||||
return state.active.activeRoom;
|
||||
},
|
||||
//this took me way longer to figure out than it should have
|
||||
get allRooms(){
|
||||
if(state.active.activeRoom==-1){
|
||||
return null;
|
||||
}
|
||||
for(let i in state.rooms){
|
||||
if(i==state.active.activeRoom){
|
||||
//console.log("check",state.rooms[i].image)
|
||||
if(state.rooms[i].image===undefined){
|
||||
get backgroundImage() {
|
||||
if (state.active.activeRoom === -1) {
|
||||
return null;
|
||||
} else {
|
||||
return state.rooms[i].image;
|
||||
}
|
||||
}
|
||||
return state.rooms[state.active.activeRoom].image;
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
const setActiveTab = (activeTab) => {
|
||||
|
|
12113
smart-hut/yarn.lock
12113
smart-hut/yarn.lock
File diff suppressed because it is too large
Load diff
4
yarn.lock
Normal file
4
yarn.lock
Normal file
|
@ -0,0 +1,4 @@
|
|||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||
# yarn lockfile v1
|
||||
|
||||
|
Loading…
Reference in a new issue