addes switches creation and update
This commit is contained in:
parent
8b49bdfbb7
commit
f579ea80fe
11 changed files with 92 additions and 21 deletions
|
@ -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)
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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 => {
|
||||||
|
|
||||||
|
|
|
@ -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} />
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
@ -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">
|
||||||
|
±{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">
|
|
||||||
±{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>
|
||||||
|
|
|
@ -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(){
|
||||||
|
|
|
@ -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(){
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue