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

Everything related to the settings is done

Browse source
This commit is contained in:
christiancp 2020-03-17 23:24:40 +01:00
parent 744f1b5710
commit 99f1e16927
15 changed files with 253 additions and 253 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -98,8 +98,7 @@ class App extends Component {
</Route>
<Route path="/signup" exact component={Signup} />
<Route path="/dashboard" >
//TODO Change this back the exclamation
{!this.state.loggedIn ? <Dashboard tkn={this.state.token} logout={this.logout} /> : <Redirect to="/login" />}
{this.state.loggedIn ? <Dashboard tkn={this.state.token} logout={this.logout} /> : <Redirect to="/login" />}
</Route>
<Route path="/forgot-password" >
<ForgotPass />

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

@ -2,7 +2,6 @@ import React, {Component} from 'react';
import {
Grid,
} from "semantic-ui-react";
import Device from "./devices/Device";
import NewDevice from "./devices/NewDevice";
import {LightDevice, SmartPlugDevice} from "./devices/TypesOfDevices";
import {editButtonStyle, panelStyle} from "./devices/styleComponents";
@ -12,6 +11,7 @@ import SmartPlug from "./devices/SmartPlug";
import Sensor from "./devices/Sensor";
import DigitalSensor from "./devices/DigitalSensor";
import Switch from "./devices/Switch";
import SettingsModal from "./devices/SettingsModal";
const devices = [
@ -44,7 +44,7 @@ const devices = [
{
"id": 5,
"name": "Smart Plug",
"type": "smartplug",
"type": "smart-plug",
...SmartPlugDevice
},
{
@ -64,12 +64,18 @@ class Panel extends Component {
constructor(props) {
super(props);
this.state = {
editMode: false,
devices: devices,
editMode: false,
openSettingsModal: false,
settingsDeviceId: null,
};
}
editModeController = (e) => this.setState((prevState) => ({editMode: !prevState.editMode}));
editModeController = (e) => {
this.setState((prevState) => ({editMode: !prevState.editMode}));
console.log("CAMBIADO", this.state.editMode)
};
changeDeviceData = (deviceId, newSettings) => {
console.log(newSettings.name, " <-- new name --> ", deviceId);
@ -95,23 +101,35 @@ class Panel extends Component {
this.forceUpdate();
};
openModal = (settingsDeviceId) => {
this.setState(prevState => ({
openSettingsModal: !prevState.openSettingsModal,
settingsDeviceId: settingsDeviceId
}));
};
render() {
const edit = {
mode: this.state.editMode,
openModal: this.openModal,
};
return (
<div style={panelStyle}>
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
<Grid doubling columns={5} divided="vertically">
{this.state.openSettingsModal ?
<SettingsModal openModal={this.openModal} device={this.state.devices.filter(d => d.id === this.state.settingsDeviceId)[0]}/> : ""}
<Grid.Column>
<Light onChangeData={this.changeDeviceData} device={devices[0]} edit={this.state.editMode}/>
<SmartPlug onChangeData={this.changeDeviceData} device={devices[4]} edit={edit}/>
</Grid.Column>
<Grid.Column>
<SmartPlug onChangeData={this.changeDeviceData} device={devices[4]} edit={this.state.editMode}/>
<Light onChangeData={this.changeDeviceData} device={devices[0]} edit={edit}/>
</Grid.Column>
<Grid.Column>
<Sensor onChangeData={this.changeDeviceData} device={devices[5]} edit={this.state.editMode}/>
<Sensor onChangeData={this.changeDeviceData} device={devices[5]} edit={edit}/>
</Grid.Column>
<Grid.Column>
<Switch onChangeData={this.changeDeviceData} device={devices[6]} edit={this.state.editMode}/>
<Switch onChangeData={this.changeDeviceData} device={devices[6]} edit={edit}/>
</Grid.Column>
<Grid.Column>
<NewDevice/>

48
smart-hut/src/components/dashboard/devices/Device.js
View file

@ -1,48 +0,0 @@
import React, {Component} from 'react';
import {Image} from "semantic-ui-react";
import {iconStyle, nameStyle, StyledDiv} from "./styleComponents";
import Settings from './DeviceSettings';
export default class Device extends Component {
constructor(props) {
super(props);
this.state = {
turnOnOff: "off",
icon: this.props.device.img
}
}
onClickDevice = () => {
if (!this.props.edit) {
if (this.props.device.type === "light") {
if (this.state.turnOnOff === "on") {
this.setState({
turnOnOff: "off",
icon: this.props.device.img
});
} else {
this.setState({
turnOnOff: "on",
icon: this.props.device.imgClick
});
}
}
}
};
render() {
return (
<StyledDiv onClick={this.props.edit ? () => {
} : this.onClickDevice} style={{textAlign: "center"}}>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
<Image src={this.state.icon} style={iconStyle}/>
<h5 style={nameStyle}>{this.props.device.name}</h5>
</StyledDiv>
)
}
}

49
smart-hut/src/components/dashboard/devices/DeviceSettings.js
View file

@ -1,43 +1,12 @@
import React, {Component} from "react";
import {Button, Form} from "semantic-ui-react";
import {editModeIconStyle, editModeStyle, formStyle} from "./styleComponents";
class SettingsForm extends Component {
constructor(props) {
super(props);
this.state = {}
};
onChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
};
saveChanges = () => {
let newName = this.state["new-name"];
this.props.onChangeData(this.props.id, {"name": newName});
};
render() {
return (
<Form style={formStyle}>
<Form.Field>
<label style={{color: "white"}}>New Device Name</label>
<input name="new-name" placeholder='New name' onChange={this.onChangeHandler}/>
</Form.Field>
<Button type='submit' onClick={this.saveChanges}>Save</Button>
</Form>
)
}
}
import {editModeIconStyle, editModeStyle} from "./styleComponents";
export default class Settings extends Component {
constructor(props) {
super(props);
this.state = {
displayForm: false,
displayForm: true,
}
};
@ -47,26 +16,18 @@ export default class Settings extends Component {
render() {
const view = (
<div>
{this.state.displayForm ? (
<SettingsForm id={this.props.deviceId} onChangeData={this.props.onChangeData}/>) : ("")}
<div onClick={this.displayForm}>
<div onClick={() => this.props.edit.openModal(this.props.deviceId)}>
<span style={editModeStyle}>
{!this.state.displayForm ? (
<img
src="/img/settings.svg"
alt=""
style={editModeIconStyle}/>)
:
<p style={{color: "white"}}>&times;</p>
}
style={editModeIconStyle}/>
</span>
</div>
</div>
);
return (
<React.Fragment>
{this.props.edit ? view : ("")}
{this.props.edit.mode ? view : ("")}
</React.Fragment>
)
};

2
smart-hut/src/components/dashboard/devices/DigitalSensor.js
View file

@ -45,7 +45,7 @@ export default class DigitalSensor extends Component {
render() {
return (
<StyledDiv style={{textAlign: "center"}}>
<StyledDiv>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}

30
smart-hut/src/components/dashboard/devices/Light.js
View file

@ -18,7 +18,7 @@ export default class Light extends Component {
super(props);
this.state = {
turnedOn: false,
hasIntensity : false
hasIntensity: false
};
this.iconOn = "/img/lightOn.svg";
this.iconOff = "/img/lightOff.svg"
@ -29,18 +29,18 @@ export default class Light extends Component {
};
setIntensity = (newValue) => {
this.setState({intensityLevel : newValue});
this.setState({intensityLevel: newValue});
};
getIcon = () => {
if(this.state.turnedOn){
if (this.state.turnedOn) {
return this.iconOn;
}
return this.iconOff;
};
componentDidMount() {
if(this.props.device.hasOwnProperty("hasIntensity") && this.props.device.hasOwnProperty("intensityLevel")) {
if (this.props.device.hasOwnProperty("hasIntensity") && this.props.device.hasOwnProperty("intensityLevel")) {
this.setState({
hasIntensity: this.props.device.hasIntensity,
intensityLevel: this.props.device.intensityLevel
@ -63,7 +63,7 @@ export default class Light extends Component {
<CircularThumb/>
<text style={valueStyle} x={100} y={100} textAnchor="middle" dy="0.3em" fontWeight="bold">
{Math.round(this.state.intensityLevel*100)}%
{Math.round(this.state.intensityLevel * 100)}%
</text>
<text style={intensityLightStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
{this.props.device.name}
@ -72,21 +72,21 @@ export default class Light extends Component {
);
const normalLightView = (
<StyledDiv onClick={this.props.edit ? () => {
} : this.onClickDevice} style={{textAlign: "center"}}>
<div onClick={this.props.edit.mode ? () => {
} : this.onClickDevice}>
<Image src={this.getIcon()} style={iconStyle}/>
<h5 style={nameStyle}>{this.props.device.name}</h5>
</div>
);
return (
<StyledDiv>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
<Image src={this.getIcon()} style={iconStyle}/>
<h5 style={nameStyle}>{this.props.device.name}</h5>
</StyledDiv>
);
return (
<React.Fragment>
{this.state.hasIntensity ? (intensityLightView) : (normalLightView)}
</React.Fragment>
</StyledDiv>
)
}
}

5
smart-hut/src/components/dashboard/devices/LightStyle.js
View file

@ -14,9 +14,10 @@ export const intensityLightStyle = {
};
export const nameStyle = {
fontSize : "1.2rem",
fontSize : "1rem",
position: "absolute",
top: "50%",
left: "50%",
transform: "translateX(-50%)"
transform: "translateX(-50%)",
color : "black"
};

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

@ -97,7 +97,7 @@ export default class NewDevice extends Component {
render() {
return (
<StyledDiv onClick={this.onClickDevice} style={{textAlign: "center"}}>
<StyledDiv onClick={this.onClickDevice}>
<Image src="/img/add.svg" style={{filter: "invert()"}}/>
{this.state.openForm ? (
<NewDeviceForm/>

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

@ -9,6 +9,8 @@
import React, {Component} from "react";
import {CircularInput, CircularProgress, CircularTrack} from "react-circular-input";
import {errorStyle, sensorText, style, valueStyle} from "./SensorStyle";
import Settings from "./DeviceSettings";
import {StyledDiv} from "./styleComponents";
export default class Sensor extends Component {
constructor(props) {
@ -16,14 +18,14 @@ export default class Sensor extends Component {
this.state = {
turnedOn: false,
value: 20,
error : 2.4
error: 2.4
};
this.units = "ºC"
}
setName = () => {
if(this.props.device.name.length > 15){
return this.props.device.name.slice(0,12) + "..."
if (this.props.device.name.length > 15) {
return this.props.device.name.slice(0, 12) + "..."
}
return this.props.device.name;
};
@ -34,13 +36,18 @@ export default class Sensor extends Component {
render() {
return (
<StyledDiv>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
<CircularInput
value={this.state.value/100}
value={this.state.value / 100}
style={style}
>
<CircularTrack/>
<CircularProgress/>
<text style={valueStyle} x={100} y={80} textAnchor="middle" dy="0.3em" fontWeight="bold">
{Math.round(this.state.value)}{this.units}
</text>
@ -51,6 +58,7 @@ export default class Sensor extends Component {
{this.setName()}
</text>
</CircularInput>
</StyledDiv>
)
}
}

68
smart-hut/src/components/dashboard/devices/SettingsModal.js Normal file
View file

@ -0,0 +1,68 @@
import React, {Component, useState} from 'react';
import {Button, Checkbox, Form, Modal} from "semantic-ui-react";
const SettingsForm = (props) => {
const handleInputChange = e => {
const {name, value} = e.target;
setValues({...values, [name]: value})
};
const handleCheckboxChange = (e,d) => {
const {name, checked} = d;
setValues({...values, [name]: checked})
};
const [values, setValues] = useState({name: ''});
return (
<Form>
<Form.Field>
<label>New Name: </label>
<input autoComplete="off" name="name" onChange={handleInputChange} value={values.name} placeholder='Device name'/>
</Form.Field>
{props.type === "smart-plug" ? (
<Form.Field>
<Checkbox slider name={"reset"} onClick={handleCheckboxChange} label='Reset Energy Consumption'/>
</Form.Field>
) : ""}
<Button onClick={() => props.saveFunction(values)} color="green" type='submit'>Save</Button>
</Form>
)
}
export default class SettingsModal extends Component {
constructor(props) {
super(props);
this.state = {
open: true,
};
}
handleClose = () => {
this.setState({open: false});
};
saveSettings = (device) => {
// TODO Here there should be all the connections to save the data in the backend
console.log("SAVED: ", device);
this.props.openModal();
};
render() {
const SettingsModal = () => (
<Modal open={true} onOpen={this.props.openModal} onClose={this.props.openModal}>
<Modal.Header>Settings of {this.props.device.name}</Modal.Header>
<Modal.Content>
<SettingsForm type={this.props.device.type} saveFunction={this.saveSettings}/>
</Modal.Content>
</Modal>
);
return (
<SettingsModal/>
)
}
}

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

@ -1,11 +1,8 @@
/**
A smart plug is a plug that has a boolean internal state, i.e., that can be turned on or off, either with the
SmartHut interface or by a switch.
The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours
2
(kWh) . The user can reset this value.
The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours 2(kWh) .
The user can reset this value.
**/
import React, {Component} from 'react';
import {StyledDiv} from "./styleComponents";
@ -35,17 +32,12 @@ export default class SmartPlug extends Component {
return this.iconOff;
};
resetEnergyConsumedValue = () => {
// In the settings form there must be an option to restore this value
// along with the rename feature.
}
componentDidMount() {
}
render(){
return (
<StyledDiv onClick={this.props.edit ? () => {} : this.onClickDevice} style={{textAlign: "center"}}>
<StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}

2
smart-hut/src/components/dashboard/devices/Switch.js
View file

@ -43,7 +43,7 @@ export default class Switch extends Component {
render(){
return (
<StyledDiv onClick={this.props.edit ? () => {} : this.onClickDevice} style={{textAlign: "center"}}>
<StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
<Settings
deviceId={this.props.device.id}
edit={this.props.edit}

0
smart-hut/src/components/dashboard/devices/Switcher.js
View file

4
smart-hut/src/components/dashboard/devices/styleComponents.js
View file

@ -29,7 +29,8 @@ export const editModeStyle = {
height : "1.5rem",
backgroundColor : "black",
borderRadius: "100%",
zIndex : "100"
zIndex : "1000",
cursor : "pointer",
};
export const editModeIconStyle = {
@ -88,6 +89,7 @@ export const StyledDiv = styled.div`
position : relative;
box-shadow: 3px 2px 10px 5px #ccc;
transition : all .3s ease-out;
text-align : center;
:hover{
background-color : #f2f2f2;
}

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

@ -59,14 +59,13 @@ export default class Dashboard extends Component{
render () {
return(
// TODO poner esto otra vez igual que antes.
<div style={{height : "110vh", background: '#1b1c1d'}}>
<Grid >
{/*<Grid.Row color='black'>*/}
{/* <Grid.Column>*/}
{/* <MyHeader />*/}
{/* </Grid.Column>*/}
{/*</Grid.Row>*/}
<Grid.Row color='black'>
<Grid.Column>
<MyHeader />
</Grid.Column>
</Grid.Row>
<Grid.Row color='black'>
<Grid.Column width={3}>
<Navbar addRoom={this.addRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>