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

Merge branch 'dev' of https://lab.si.usi.ch/sa4-2020/the-sanmarinoes/frontend into dev

Browse source
This commit is contained in:
britea 2020-05-08 18:42:11 +02:00
commit 7354eefb49
15 changed files with 239 additions and 12233 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
smart-hut/src/components/HeaderController.js
View file

@ -77,14 +77,20 @@ 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
<Checkbox compact
label={<label style={{
>Share cameras</label>} margin: "auto",
checked={this.props.cameraEnabled} marginTop: "1em",
toggle textAlign: "center",
onChange={(e, val) => this.setCameraEnabled(val.checked)} }}
/> >
<Checkbox
label={<label>Share cameras</label>}
checked={this.props.cameraEnabled}
toggle
onChange={(e, val) => this.setCameraEnabled(val.checked)}
/>
</Segment> </Segment>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
@ -108,14 +114,20 @@ 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
<Checkbox compact
label={<label style={{
>Share cameras</label>} margin: "auto",
checked={this.props.cameraEnabled} marginTop: "1em",
toggle textAlign: "center",
onChange={(e, val) => this.setCameraEnabled(val.checked)} }}
/> >
<Checkbox
label={<label>Share cameras</label>}
checked={this.props.cameraEnabled}
toggle
onChange={(e, val) => this.setCameraEnabled(val.checked)}
/>
</Segment> </Segment>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>

39
smart-hut/src/components/RoomModal.js
View file

@ -94,12 +94,12 @@ class RoomModal extends Component {
}; };
setSureTrue = () => { setSureTrue = () => {
this.setState({sure: true}) this.setState({ sure: true });
} };
setSureFalse= () => { setSureFalse = () => {
this.setState({sure: false}) this.setState({ sure: false });
} };
changeSomething = (event) => { changeSomething = (event) => {
let nam = event.target.name; let nam = event.target.name;
@ -231,21 +231,22 @@ class RoomModal extends Component {
{this.type === "modify" ? ( {this.type === "modify" ? (
<div> <div>
<Button <Button
icon icon
labelPosition="left" labelPosition="left"
inverted inverted
color="red" color="red"
onClick={this.setSureTrue} onClick={this.setSureTrue}
> >
<Icon name="trash alternate" /> <Icon name="trash alternate" />
Delete Room </Button> Delete Room{" "}
</Button>
<Confirm <Confirm
open={this.state.sure} open={this.state.sure}
onCancel={this.setSureFalse} onCancel={this.setSureFalse}
onConfirm={this.deleteRoom}/> onConfirm={this.deleteRoom}
</div> />
</div>
) : null} ) : null}
</Modal.Content> </Modal.Content>
<Modal.Actions> <Modal.Actions>

24
smart-hut/src/components/SceneModal.js
View file

@ -115,11 +115,11 @@ class SceneModal extends Component {
}; };
openModal = (e) => { openModal = (e) => {
this.setState({ ...this.state, openModal: true }); this.setState({ ...this.state, openModal: true });
}; };
updateIcon(e) { updateIcon(e) {
this.setState({ ...this.state, selectedIcon: e }); this.setState({ ...this.state, selectedIcon: e });
} }
setCopyFrom(_, copyFrom) { setCopyFrom(_, copyFrom) {
@ -128,7 +128,7 @@ class SceneModal extends Component {
setGuestAccessEnabled(val) { setGuestAccessEnabled(val) {
console.log(this.state, val); console.log(this.state, val);
this.setState({ ...this.state, guestAccessEnabled: val }); this.setState({ ...this.state, guestAccessEnabled: val });
} }
render() { render() {
@ -224,15 +224,15 @@ 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}
toggle toggle
onChange={(e, val) => onChange={(e, val) =>
this.setGuestAccessEnabled(val.checked) this.setGuestAccessEnabled(val.checked)
} }
/> />
</Segment> </Segment>
</Form.Field> </Form.Field>
) : null} ) : null}

87
smart-hut/src/components/dashboard/AutomationCreationModal.js
View file

@ -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)

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

@ -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);
}, },
}); });

13
smart-hut/src/components/dashboard/HostsPanel.js
View file

@ -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() { render() {
if (this.props.isActiveDefaultHost) { if (this.props.isActiveDefaultHost) {
return ( return (
@ -46,9 +53,11 @@ class HostsPanel extends Component {
{scene.name} <Icon name={scene.icon} /> {scene.name} <Icon name={scene.icon} />
</Header> </Header>
</Card.Header> </Card.Header>
<Card.Content extras> <Card.Content extras={true}>
<div className="ui two buttons"> <div className="ui two buttons">
<Button>Apply</Button> <Button onClick={() => this.applyHostScene(scene.id)}>
Apply
</Button>
</div> </div>
</Card.Content> </Card.Content>
</Card> </Card>

26
smart-hut/src/components/dashboard/devices/NewDevice.js
View file

@ -141,10 +141,14 @@ class NewDevice extends Component {
case "buttonDimmer": case "buttonDimmer":
case "knobDimmer": case "knobDimmer":
outputs = this.state.lightsAttached; outputs = this.state.lightsAttached;
if (this.state.lightsAttached === undefined || if (
this.state.lightsAttached.length === 0) { this.state.lightsAttached === undefined ||
alert("No lights attached to this switch! Please, add a light a first."); this.state.lightsAttached.length === 0
return; ) {
alert(
"No lights attached to this switch! Please, add a light a first."
);
return;
} }
break; break;
default: default:
@ -165,11 +169,17 @@ class NewDevice extends Component {
render() { render() {
const deviceOptions = [ const deviceOptions = [
//stuff //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 //stuff ends
{ {

35
smart-hut/src/components/dashboard/devices/Sensor.js
View file

@ -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" &&
@ -123,6 +116,18 @@ class Sensor extends Component {
return this.iconOff; 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() { render() {
const MotionSensor = (props) => { const MotionSensor = (props) => {
return ( return (
@ -161,11 +166,18 @@ class Sensor extends Component {
> >
<CircularProgress <CircularProgress
strokeWidth="2rem" strokeWidth="2rem"
stroke={this.colors.progress} stroke={
this.props.stateOrDevice.sensor === "TEMPERATURE"
? this.temperatureColor(this.state.value)
: this.colors.progress
}
fill={this.colors.circle} fill={this.colors.circle}
/> />
<text <text
style={{ ...valueStyle, fill: this.colors.text }} style={{
...valueStyle,
fill: this.colors.text,
}}
x={100} x={100}
y={110} y={110}
textAnchor="middle" textAnchor="middle"
@ -177,7 +189,10 @@ class Sensor extends Component {
{this.units} {this.units}
</text> </text>
<text <text
style={{ ...sensorText, fill: this.colors.text }} style={{
...sensorText,
fill: this.colors.text,
}}
x={100} x={100}
y={150} y={150}
textAnchor="middle" textAnchor="middle"

3
smart-hut/src/components/dashboard/devices/Videocam.js
View file

@ -70,11 +70,12 @@ class Videocam extends Component {
/> />
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
<Grid.Row textAlign="center"> <Grid.Row>
<Grid.Column> <Grid.Column>
<Checkbox <Checkbox
checked={this.props.stateOrDevice.on} checked={this.props.stateOrDevice.on}
toggle toggle
label="Turn on/off"
onChange={(e, val) => this.setOnOff(val.checked)} onChange={(e, val) => this.setOnOff(val.checked)}
/> />
</Grid.Column> </Grid.Column>

13
smart-hut/src/remote.js
View file

@ -549,12 +549,21 @@ export const RemoteService = {
}; };
}, },
sceneApply: (id) => { sceneApply: (id, hostId = null) => {
return (dispatch) => { return (dispatch) => {
let url = `/scene/${id}/apply`; let url = `/scene/${id}/apply`;
if (hostId) {
url = url + "?hostId=" + hostId;
}
return Endpoint.post(url) 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) => { .catch((err) => {
console.warn("scene apply error", err); console.warn("scene apply error", err);
throw new RemoteError(["Network error"]); throw new RemoteError(["Network error"]);

22
smart-hut/src/store.js
View file

@ -49,6 +49,7 @@ function reducer(previousState, action) {
[scene.id]: { [scene.id]: {
name: { $set: scene.name }, name: { $set: scene.name },
icon: { $set: scene.icon }, icon: { $set: scene.icon },
guestAccessEnabled: { $set: scene.guestAccessEnabled },
}, },
}, },
}); });
@ -92,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;
@ -137,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: [] },
}; };
@ -198,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: [] },
}; };
@ -368,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);
@ -377,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]) {
@ -527,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,

3
smart-hut/src/storeActions.js
View file

@ -63,9 +63,10 @@ const actions = {
devices, devices,
partial, partial,
}), }),
hostDevicesUpdate: (hostId, devices) => ({ hostDevicesUpdate: (hostId, devices, partial = false) => ({
type: "HOST_DEVICES_UPDATE", type: "HOST_DEVICES_UPDATE",
hostId, hostId,
partial,
devices, devices,
}), }),
stateDelete: (stateId) => ({ stateDelete: (stateId) => ({

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

@ -8,10 +8,7 @@ import ScenesNavbar from "./ScenesNavbar";
import HostsNavbar from "./HostsNavbar"; import HostsNavbar from "./HostsNavbar";
import MyHeader from "../components/HeaderController"; import MyHeader from "../components/HeaderController";
import { Grid, Responsive, Button, Menu } from "semantic-ui-react"; import { Grid, Responsive, Button, Menu } from "semantic-ui-react";
import { import { mobilePanelStyle } from "../components/dashboard/devices/styleComponents";
panelStyle,
mobilePanelStyle,
} from "../components/dashboard/devices/styleComponents";
import { RemoteService } from "../remote"; import { RemoteService } from "../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
@ -84,10 +81,10 @@ class Dashboard extends Component {
// needed to correctly assign the background image // needed to correctly assign the background image
//in case a room has one. //in case a room has one.
let backgroundImageHelper; let backgroundImageHelper;
if(this.activeTab==="Devices"){ if (this.activeTab === "Devices") {
backgroundImageHelper=this.props.allRooms; backgroundImageHelper = this.props.backgroundImage;
}else{ } else {
backgroundImageHelper=null; backgroundImageHelper = null;
} }
//console.log("helper is",helper) //console.log("helper is",helper)
return ( return (
@ -135,15 +132,19 @@ class Dashboard extends Component {
</Grid.Column> </Grid.Column>
)} )}
<Grid.Column width={this.hasNavbar ? 13 : 16}> <Grid.Column width={this.hasNavbar ? 13 : 16}>
<div style={ <div
{backgroundImage:"url("+ backgroundImageHelper+")", style={{
backgroundImage: "url(" + backgroundImageHelper + ")",
backgroundColor: "#fafafa", backgroundColor: "#fafafa",
height: "85vh", height: "85vh",
padding: "0rem 3rem", padding: "0rem 3rem",
color: "#000000", color: "#000000",
overflow: "auto", overflow: "auto",
maxHeight: "75vh",} maxHeight: "75vh",
}>{this.renderTab(this.activeTab)}</div> }}
>
{this.renderTab(this.activeTab)}
</div>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
@ -216,26 +217,16 @@ class Dashboard extends Component {
const mapStateToProps = (state, _) => ({ const mapStateToProps = (state, _) => ({
activeTab: state.active.activeTab, activeTab: state.active.activeTab,
get currentRoom(){ get currentRoom() {
return state.active.activeRoom; return state.active.activeRoom;
}, },
//this took me way longer to figure out than it should have get backgroundImage() {
get allRooms(){ if (state.active.activeRoom === -1) {
if(state.active.activeRoom==-1){
return null; return null;
} } else {
for(let i in state.rooms){ return state.rooms[state.active.activeRoom].image;
if(i==state.active.activeRoom){
//console.log("check",state.rooms[i].image)
if(state.rooms[i].image===undefined){
return null;
}else{
return state.rooms[i].image;
}
}
} }
}, },
}); });
const setActiveTab = (activeTab) => { const setActiveTab = (activeTab) => {

12113
smart-hut/yarn.lock
View file

File diff suppressed because it is too large Load diff

4
yarn.lock Normal file
View file

@ -0,0 +1,4 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1