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

switch and smart-plug update and fixed warnings

Browse source
This commit is contained in:
britea 2020-03-24 18:17:04 +01:00
parent e81b5a9553
commit 8dad01d633
10 changed files with 59 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
smart-hut/src/client_server.js
View file

@ -233,7 +233,7 @@ export var call = {
let promiseRes = axios.put(config + url, data, {
headers: { Authorization: "Bearer " + tkn },
});
// also for btn/knob dimmer
if (typeDevice === "switch/operate") {
promiseRes = promiseRes.then((e) => {
if (e.status === 200) {

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

@ -1,12 +1,7 @@
import React from "react";
import { Dropdown, Icon, Grid, Divider } from "semantic-ui-react";
import { Segment, Image } from "semantic-ui-react";
import {
BrowserView,
MobileView,
isBrowser,
isMobile,
} from "react-device-detect";
import { BrowserView, MobileView } from "react-device-detect";
const AvatarImage = () => (
<Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
@ -22,16 +17,6 @@ const IconHomeImage = () => (
/>
);
const IconHomeImageMobile = () => (
<Image
src="smart-home.png"
style={{ width: "10px", height: "auto" }}
centered
as="a"
href="/"
/>
);
const TitleImage = () => <Image src="title7.png" size="medium" centered />;
const BrowserStructure = (props) => (

2
smart-hut/src/components/SelectIcons.js
View file

@ -1,5 +1,5 @@
import React, { Component } from "react";
import { Button, Grid, Responsive } from "semantic-ui-react";
import { Button, Grid } from "semantic-ui-react";
export default class SelectIcons extends Component {
constructor(props) {

7
smart-hut/src/components/dashboard/DevicePanel.js
View file

@ -56,7 +56,7 @@ export default class DevicePanel extends Component {
this.forceUpdate();
};
getDevices() {
getDevices = () => {
if (this.props.activeItem === -1) {
call
.getAllDevices()
@ -82,7 +82,7 @@ export default class DevicePanel extends Component {
})
.catch((err) => {});
}
}
};
async addDevice(data) {
const ds = await this.props.addDevice(data);
@ -96,10 +96,8 @@ export default class DevicePanel extends Component {
const roomId = this.props.devices.filter(
(d) => d.id === this.state.settingsDeviceId
)[0].roomId;
console.log(roomId);
data["id"] = this.state.settingsDeviceId;
data["roomId"] = roomId;
console.log(data);
call
.deviceUpdate(data)
.then((res) => {
@ -159,6 +157,7 @@ export default class DevicePanel extends Component {
return (
<Grid.Column key={i}>
<DeviceType
updateDev={this.props.updateDeviceUi}
type={e.kind}
onChangeData={this.changeDeviceData}
device={e}

6
smart-hut/src/components/dashboard/devices/DeviceTypeController.js
View file

@ -10,6 +10,7 @@ const DeviceType = (props) => {
case "regularLight":
return (
<Light
updateDev={props.updateDeviceUi}
onChangeData={props.changeDeviceData}
device={props.device}
edit={props.edit}
@ -18,6 +19,7 @@ const DeviceType = (props) => {
case "sensor":
return (
<Sensor
updateDev={props.updateDeviceUi}
onChangeData={props.changeDeviceData}
device={props.device}
edit={props.edit}
@ -26,6 +28,7 @@ const DeviceType = (props) => {
case "buttonDimmer":
return (
<DefaultDimmer
updateDev={props.updateDeviceUi}
onChangeData={props.changeDeviceData}
device={props.device}
edit={props.edit}
@ -34,6 +37,7 @@ const DeviceType = (props) => {
case "smartPlug":
return (
<SmartPlug
updateDev={props.updateDeviceUi}
onChangeData={props.changeDeviceData}
device={props.device}
edit={props.edit}
@ -42,6 +46,7 @@ const DeviceType = (props) => {
case "switch":
return (
<Switcher
updateDev={props.updateDeviceUi}
onChangeData={props.changeDeviceData}
device={props.device}
edit={props.edit}
@ -50,6 +55,7 @@ const DeviceType = (props) => {
case "dimmableLight":
return (
<Light
updateDev={props.updateDeviceUi}
onChangeData={props.changeDeviceData}
device={props.device}
edit={props.edit}

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

@ -38,7 +38,9 @@ export default class Sensor extends Component {
value: 0,
};
this.units = "";
this.stateCallback = (e) => this.setState(Object.assign(this.state, e));
this.stateCallback = (e) => {
this.setState(Object.assign(this.state, e));
};
call.socketSubscribe(this.props.device.id, this.stateCallback);
}
@ -95,7 +97,7 @@ export default class Sensor extends Component {
dy="0.3em"
fontWeight="bold"
>
{Math.round(this.state.value)}
{+(Math.round(this.state.value + "e+2") + "e-2")}
{this.units}
</text>
<text

15
smart-hut/src/components/dashboard/devices/SmartPlug.js
View file

@ -20,6 +20,21 @@ export default class SmartPlug extends Component {
};
this.iconOn = "/img/smart-plug.svg";
this.iconOff = "/img/smart-plug-off.svg";
this.stateCallback = (e) => {
this.setState(
Object.assign(this.state, {
energyConsumed: (e.totalConsumption / 1000).toFixed(3),
turnedOn: e.on,
})
);
};
call.socketSubscribe(this.props.device.id, this.stateCallback);
}
componentWillUnmount() {
call.socketUnsubscribe(this.props.device.id, this.stateCallback);
}
onClickDevice = () => {

10
smart-hut/src/components/modalform.js
View file

@ -108,16 +108,6 @@ export default class ModalWindow extends Component {
<Icon name="pencil" size="small" onClick={this.openModal} />
)}
</Responsive>
<Responsive maxWidth={768}>
{this.props.type === "new" ? (
<Button icon fluid labelPosition="left" onClick={this.openModal}>
<Icon name="plus" size="small" />
ADD ROOM
</Button>
) : (
<Icon name="pencil" size="small" onClick={this.openModal} />
)}
</Responsive>
<Responsive maxWidth={768}>
{this.props.type === "new" ? (
<Button icon fluid labelPosition="left" onClick={this.openModal}>

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

@ -21,6 +21,7 @@ export default class Dashboard extends Component {
rooms: [],
activeItem: -1,
devices: [],
image: "",
tkn: this.props.tkn,
};
@ -51,6 +52,7 @@ export default class Dashboard extends Component {
.getAllDevicesByRoom(this.state.activeItem)
.then((res) => {
if (res.status === 200) {
console.log(res.data);
this.setState({
devices: res.data,
});
@ -98,6 +100,7 @@ export default class Dashboard extends Component {
.then((res) => {
//remove room in state.rooms
this.getRooms();
this.handleItemClick(-1);
})
.catch((err) => {
console.log(err);
@ -118,8 +121,6 @@ export default class Dashboard extends Component {
}
handleItemClick(id) {
// el -> obj of name and id
//da fare richiesta get della room e settare activeItem
this.setState({
activeItem: id,
});
@ -166,6 +167,20 @@ export default class Dashboard extends Component {
.catch((err) => {});
}
updateDeviceUi = (data) => {
let ds = this.state.devices;
ds.forEach((e) => {
if (e.id === data.id) {
e = data;
}
});
this.setState({
devices: ds,
});
return;
};
render() {
return (
<div style={{ height: "110vh", background: "#1b1c1d" }}>
@ -179,6 +194,7 @@ export default class Dashboard extends Component {
<Grid.Row color="black">
<Grid.Column width={3}>
<Navbar
activeItem={this.state.activeItem}
addRoom={this.addRoom}
updateRoom={this.updateRoom}
deleteRoom={this.deleteRoom}
@ -208,7 +224,9 @@ export default class Dashboard extends Component {
<Grid.Row color="black">
<Grid.Column color="black">
<Navbar
activeItem={this.state.activeItem}
addRoom={this.addRoom}
updateRoom={this.updateRoom}
deleteRoom={this.deleteRoom}
rooms={this.state.rooms}
handleItemClick={this.handleItemClick}
@ -218,10 +236,12 @@ export default class Dashboard extends Component {
<Grid.Row>
<Grid.Column>
<DevicePanel
img={this.state.image}
tkn={this.props.tkn}
activeItem={this.state.activeItem}
addDevice={this.addDevice}
devices={this.state.devices}
updateDev={this.updateDeviceUi}
/>
</Grid.Column>
</Grid.Row>

6
smart-hut/src/views/Navbar.js
View file

@ -21,6 +21,12 @@ class Navbar extends Component {
};
}
componentDidMount() {
this.setState({
activeItem: this.props.activeItem,
});
}
editModeController = (e) =>
this.setState((prevState) => ({ editMode: !prevState.editMode }));