Merge branch '52-added-switches-creation-and-updates' into 'dev'

addes switches creation and update

Closes #52

See merge request sa4-2020/the-sanmarinoes/frontend!51
This commit is contained in:
Matteo Omenetti 2020-03-23 19:11:46 +01:00
commit 557d18dfc1
11 changed files with 92 additions and 21 deletions

View file

@ -63,13 +63,22 @@ export var call = {
return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } }) return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } })
}, },
updateRoom: function(data, headers) { updateRoom: function(data, headers) {
return axios.put(config + 'room?name='+ data.name, data, { headers: { Authorization : "Bearer " + tkn } }) return axios.put(config + 'room/'+ data.id, data, { headers: { Authorization : "Bearer " + tkn } })
}, },
deleteRoom: function(data, headers) { deleteRoom: function(data, headers) {
return axios.delete(config + 'room/'+data.id, { headers: { Authorization : "Bearer " + tkn } }); return axios.delete(config + 'room/'+data.id, { headers: { Authorization : "Bearer " + tkn } });
}, },
devicePost: function(data, headers) { devicePost: function(data, headers) {
return axios.post(config + data.device, data.params, { headers: { Authorization : "Bearer " + tkn } }) return axios.post(config + data.device, data.params, { headers: { Authorization : "Bearer " + tkn } })
.then(res => {
if (res.status === 200 && (data.device === "switch")) {
data.params.lights.forEach(e => {
let urlUp = config + data.device + '/' + res.data.id + '/lights?switchableId=' + e;
axios.post(urlUp, {}, { headers: { Authorization : "Bearer " + tkn } })
});
}
return res;
})
}, },
deviceUpdate: function(data, typeDevice) { deviceUpdate: function(data, typeDevice) {
let url = 'device'; let url = 'device';
@ -79,7 +88,7 @@ export var call = {
return axios.put(config + url, data, { headers: { Authorization : "Bearer " + tkn } }) return axios.put(config + url, data, { headers: { Authorization : "Bearer " + tkn } })
}, },
deviceDelete: function(data, headers) { deviceDelete: function(data, headers) {
return axios.delete(config + data.device + '/' + data.id, {}, { headers: { Authorization : "Bearer " + tkn } }) return axios.delete(config + data.device + '/' + data.id, { headers: { Authorization : "Bearer " + tkn } })
}, },
deviceGetById: function(data, headers) { deviceGetById: function(data, headers) {
return axios.get(config + data.device + '/' + data.id) return axios.get(config + data.device + '/' + data.id)

View file

@ -13,7 +13,6 @@ export default class SelectIcons extends Component {
selectIcon = (e) => { selectIcon = (e) => {
let el = e.target.name; let el = e.target.name;
if (e.target.tagName === "I"){ if (e.target.tagName === "I"){
console.log(e.target.parentNode);
el = e.target.parentNode.name; el = e.target.parentNode.name;
} }
this.props.updateIcon(el); this.props.updateIcon(el);

View file

@ -108,7 +108,6 @@ export default class DevicePanel extends Component {
removeDevice = () => { removeDevice = () => {
const item = this.props.devices.filter(d => d.id === this.state.settingsDeviceId)[0]; const item = this.props.devices.filter(d => d.id === this.state.settingsDeviceId)[0];
console.log(item)
const data = { const data = {
device: item.kind, device: item.kind,
id: this.state.settingsDeviceId id: this.state.settingsDeviceId
@ -116,9 +115,10 @@ export default class DevicePanel extends Component {
call.deviceDelete(data) call.deviceDelete(data)
.then(res => { .then(res => {
console.log(res)
if (res.status === 200) { if (res.status === 200) {
this.openModal();
this.getDevices(); this.getDevices();
this.forceUpdate();
} }
}).catch(err => { }).catch(err => {

View file

@ -12,9 +12,9 @@ const DeviceType = (props) => {
return (<Light onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />) return (<Light onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />)
case "sensor": case "sensor":
return <Sensor onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} /> return <Sensor onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
case "dimmer": case "buttonDimmer":
return <DefaultDimmer onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} /> return <DefaultDimmer onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
case "smartplug": case "smartPlug":
return <SmartPlug onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} /> return <SmartPlug onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
case "switch": case "switch":
return <Switcher onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} /> return <Switcher onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />

View file

@ -99,7 +99,7 @@ export default class Light extends Component {
deviceId={this.props.device.id} deviceId={this.props.device.id}
edit={this.props.edit} edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/> onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
{this.props.device.intensity ? (intensityLightView) : (normalLightView)} {this.props.device.intensity >= 0 ? (intensityLightView) : (normalLightView)}
</StyledDiv> </StyledDiv>
) )
} }

View file

@ -79,9 +79,17 @@ export default class NewDevice extends Component {
case "dimmableLight": case "dimmableLight":
data.params["intensity"] = 1; data.params["intensity"] = 1;
break; break;
case "sensor":
data.params["sensor"] = this.state.typeOfSensor;
data.params["value"] = 0;
break;
case "switch":
data.params["lights"] = this.state.lightsAttached;
break;
default: default:
break; break;
} }
console.log(data)
this.props.addDevice(data); this.props.addDevice(data);
this.resetState(); this.resetState();
}; };
@ -122,7 +130,7 @@ export default class NewDevice extends Component {
{ {
key: 'dimmer', key: 'dimmer',
text: 'Dimmer', text: 'Dimmer',
value: 'dimmer', value: 'buttonDimmer',
image: {avatar: true, src: '/img/dimmer.svg'}, image: {avatar: true, src: '/img/dimmer.svg'},
}, },
]; ];

View file

@ -6,9 +6,22 @@
* For this story, make the sensors return a constant value with some small random error. * For this story, make the sensors return a constant value with some small random error.
*/ */
/*
OPTIONAL STATE
error: 2.4
<text style={errorStyle} x={100} y={100} textAnchor="middle" dy="0.6em" fontWeight="bold">
&#177;{this.state.error}
</text>
errorStyle,
*/
import React, {Component} from "react"; import React, {Component} from "react";
import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input"; import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input";
import {errorStyle, sensorText, style, valueStyle} from "./SensorStyle"; import { sensorText, style, valueStyle} from "./SensorStyle";
import Settings from "./DeviceSettings"; import Settings from "./DeviceSettings";
import {StyledDiv} from "./styleComponents"; import {StyledDiv} from "./styleComponents";
@ -17,10 +30,9 @@ export default class Sensor extends Component {
super(props); super(props);
this.state = { this.state = {
turnedOn: false, turnedOn: false,
value: 20, value: 0,
error: 2.4
}; };
this.units = "ºC" this.units = ""
} }
setName = () => { setName = () => {
@ -31,6 +43,23 @@ export default class Sensor extends Component {
}; };
componentDidMount() { componentDidMount() {
switch(this.props.device.sensor) {
case "TEMPERATURE":
this.units = "ºC";
break;
case "HUMIDITY" :
this.units = "%";
break;
case "LIGHT":
this.units = "lm";
break;
default:
this.units = "";
}
this.setState({
value : this.props.device.value
});
} }
@ -51,9 +80,6 @@ export default class Sensor extends Component {
<text style={valueStyle} x={100} y={80} textAnchor="middle" dy="0.3em" fontWeight="bold"> <text style={valueStyle} x={100} y={80} textAnchor="middle" dy="0.3em" fontWeight="bold">
{Math.round(this.state.value)}{this.units} {Math.round(this.state.value)}{this.units}
</text> </text>
<text style={errorStyle} x={100} y={100} textAnchor="middle" dy="0.6em" fontWeight="bold">
&#177;{this.state.error}
</text>
<text style={sensorText} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold"> <text style={sensorText} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
{this.setName()} {this.setName()}
</text> </text>

View file

@ -9,6 +9,7 @@ import {StyledDiv} from "./styleComponents";
import Settings from "./DeviceSettings"; import Settings from "./DeviceSettings";
import {Image} from "semantic-ui-react"; import {Image} from "semantic-ui-react";
import {energyConsumedStyle, imageStyle, nameStyle} from "./SmartPlugStyle"; import {energyConsumedStyle, imageStyle, nameStyle} from "./SmartPlugStyle";
import { call } from '../../../client_server';
export default class SmartPlug extends Component { export default class SmartPlug extends Component {
constructor(props){ constructor(props){
@ -22,7 +23,13 @@ export default class SmartPlug extends Component {
} }
onClickDevice = () => { onClickDevice = () => {
this.setState((prevState) => ({turnedOn: !prevState.turnedOn})); this.props.device.on = !this.state.turnedOn;
call.deviceUpdate(this.props.device, 'smartPlug')
.then(res => {
if (res.status === 200 ){
this.setState((prevState) => ({turnedOn: !prevState.turnedOn}));
}
})
}; };
getIcon = () => { getIcon = () => {
@ -33,6 +40,10 @@ export default class SmartPlug extends Component {
}; };
componentDidMount() { componentDidMount() {
this.setState({
turnedOn : this.props.device.on,
energyConsumed : this.props.device.totalConsumption
})
} }
render(){ render(){

View file

@ -10,6 +10,7 @@ import {StyledDiv} from "./styleComponents";
import Settings from "./DeviceSettings"; import Settings from "./DeviceSettings";
import {Image} from "semantic-ui-react"; import {Image} from "semantic-ui-react";
import {imageStyle, nameStyle} from "./SwitchStyle"; import {imageStyle, nameStyle} from "./SwitchStyle";
import { call } from '../../../client_server';
export default class Switch extends Component { export default class Switch extends Component {
constructor(props){ constructor(props){
@ -23,7 +24,23 @@ export default class Switch extends Component {
} }
onClickDevice = () => { onClickDevice = () => {
this.setState((prevState) => ({turnedOn: !prevState.turnedOn})); this.props.device.on = !this.state.turnedOn;
let state = "";
if(this.props.device.on) {
state = "ON"
} else {
state = "OFF"
}
let data = {
"type" : state,
"id" : this.props.device.id
}
call.deviceUpdate(data, 'switch/operate')
.then(res => {
if (res.status === 200 ){
this.setState((prevState) => ({turnedOn: !prevState.turnedOn}));
}
})
}; };
getIcon = () => { getIcon = () => {
@ -34,7 +51,9 @@ export default class Switch extends Component {
}; };
componentDidMount() { componentDidMount() {
this.setState({
turnedOn: this.props.device.on
})
} }
render(){ render(){

View file

@ -99,7 +99,7 @@ getRooms() {
} }
updateRoom(data) { updateRoom(data) {
console.log(data) data.id = this.state.activeItem;
call.updateRoom(data) call.updateRoom(data)
.then(res => { .then(res => {
if (res.status === 200 && res.data) { if (res.status === 200 && res.data) {

View file

@ -17,7 +17,6 @@ class Navbar extends Component {
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode })); editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
handleClick = (e, {id, name}) => { handleClick = (e, {id, name}) => {
console.log(id);
let obj = undefined; let obj = undefined;
this.props.rooms.forEach((e) => { this.props.rooms.forEach((e) => {
if (e.id === id) { if (e.id === id) {