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

Device guest view implemented

Browse source
This commit is contained in:
Claudio Maggioni (maggicl) 2020-05-03 18:09:53 +02:00
parent c95f7a95f7
commit 3014b73323
15 changed files with 99 additions and 388 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

189
smart-hut/src/components/AutomationModal.js
View file

@ -1,189 +0,0 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { RemoteService } from "../remote";
import { appActions } from "../storeActions";
class AutomationModal extends Component {
constructor(props) {
super(props);
this.state = this.initialState;
this.setInitialState();
this.addAutomationModal = this.addAutomationModal.bind(this);
this.modifyAutomationModal = this.modifyAutomationModal.bind(this);
this.deleteAutomation = this.deleteAutomation.bind(this);
}
get initialState() {
return {
//INITIAL STATE HERE
};
}
setInitialState() {
this.setState(this.initialState);
}
get type() {
return !this.props.id ? "new" : "modify";
}
addAutomationModal = (e) => {
/*let data = {
// DATA HERE
};*/
// TODO CALL TO REMOTE SERVER TO ADD SCENE
/*this.props
.saveRoom(data, null)
.then(() => {
this.setInitialState();
this.closeModal();
})
.catch((err) => console.error("error in creating room", err));*/
};
modifyAutomationModal = (e) => {
/* let data = {
// DATA HERE
};*/
// TODO CALL TO REMOTE SERVER TO MODIFY SCENE
/*this.props
.saveRoom(data, this.props.id)
.then(() => {
this.setInitialState();
this.closeModal();
})
.catch((err) => console.error("error in updating room", err));*/
};
deleteAutomation = (e) => {
// TODO CALL TO REMOTE SERVER TO DELETE SCENE
/*
this.props
.deleteRoom(this.props.id)
.then(() => this.closeModal())
.catch((err) => console.error("error in deleting room", err));*/
};
changeSomething = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
};
closeModal = (e) => {
this.setState({ openModal: false });
};
openModal = (e) => {
this.setState({ openModal: true });
};
render() {
return (
<div>
{/*
{!this.props.nicolaStop ? (
<div>
<Responsive minWidth={768}>
{this.type === "new" ? (
<Button
icon
labelPosition="left"
inverted
onClick={this.openModal}
>
<Icon name="plus" size="small" />
ADD AUTOMATION
</Button>
) : (
<Icon name="pencil" size="small" onClick={this.openModal} />
)}
</Responsive>
<Responsive maxWidth={768}>
{this.type === "new" ? (
<Button
icon
fluid
labelPosition="left"
onClick={this.openModal}
>
<Icon name="plus" size="small" />
ADD AUTOMATION
</Button>
) : (
<Button
icon
fluid
labelPosition="left"
onClick={this.openModal}
>
<Icon name="pencil" size="small" />
EDIT AUTOMATION
</Button>
)}
</Responsive>
</div>
) : null}
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
<Header>
{this.type === "new" ? "Add new automation" : "Modify automation"}
</Header>
<Modal.Content>
{
//TODO FORM TO ADD OR MODIFY SCENE
}
{this.type === "modify" ? (
<Button
icon
labelPosition="left"
inverted
color="red"
onClick={this.deleteAutomation}
>
<Icon name="trash alternate" />
Delete Automation
</Button>
) : null}
</Modal.Content>
<Modal.Actions>
<Button color="red" onClick={this.closeModal}>
<Icon name="remove" />{" "}
{this.type === "new" ? "Cancel" : "Discard changes"}
</Button>
<Button
color="green"
onClick={
this.type === "new"
? this.addAutomationModal
: this.modifyAutomationModal
}
>
<Icon name="checkmark" />{" "}
{this.type === "new" ? "Add automation" : "Save changes"}
</Button>
</Modal.Actions>
</Modal>*/}
</div>
);
}
}
const setActiveAutomation = (activeAutomation) => {
return (dispatch) =>
dispatch(appActions.setActiveAutomation(activeAutomation));
};
const mapStateToProps = (state, ownProps) => ({
automations: ownProps.id ? state.automations[ownProps.id] : null,
});
const AutomationModalContainer = connect(
mapStateToProps,
{ ...RemoteService, setActiveAutomation },
null,
{ forwardRef: true }
)(AutomationModal);
export default AutomationModalContainer;

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

@ -21,7 +21,6 @@ class RoomModal extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = this.initialState; this.state = this.initialState;
this.setInitialState();
this.fileInputRef = React.createRef(); this.fileInputRef = React.createRef();

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

@ -7,13 +7,19 @@ import Device from "../../components/dashboard/devices/Device";
class HostsPanel extends Component { class HostsPanel extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
if (this.props.activeHost !== -1) { }
componentDidUpdate(oldProps) {
if (
oldProps.activeHost !== this.props.activeHost &&
this.props.activeHost !== -1
) {
this.props.fetchDevices(null, this.props.activeHost).catch(console.error); this.props.fetchDevices(null, this.props.activeHost).catch(console.error);
} }
} }
render() { render() {
console.log(this.props); console.log(this.props.hostDevices);
return ( return (
<Card.Group centered style={{ paddingTop: "3rem" }}> <Card.Group centered style={{ paddingTop: "3rem" }}>
{this.props.isActiveDefaultHost && ( {this.props.isActiveDefaultHost && (
@ -42,7 +48,8 @@ class HostsPanel extends Component {
const mapStateToProps = (state, _) => ({ const mapStateToProps = (state, _) => ({
isActiveDefaultHost: state.active.activeHost === -1, isActiveDefaultHost: state.active.activeHost === -1,
activeHost: state.active.activeHost, activeHost: state.active.activeHost,
hostDeviceIds: Object.keys(state.hostDevices[state.activeHost] || {}), hostDevices: state.hostDevices,
hostDeviceIds: Object.keys(state.hostDevices[state.active.activeHost] || {}),
}); });
const HostsPanelContainer = connect(mapStateToProps, RemoteService)(HostsPanel); const HostsPanelContainer = connect(mapStateToProps, RemoteService)(HostsPanel);
export default HostsPanelContainer; export default HostsPanelContainer;

11
smart-hut/src/components/dashboard/devices/Curtain.js
View file

@ -2,6 +2,7 @@ import React, { Component } from "react";
import "./Curtains.css"; import "./Curtains.css";
import { RemoteService } from "../../../remote"; import { RemoteService } from "../../../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
import mapStateToProps from "../../../deviceProps";
class Curtain extends Component { class Curtain extends Component {
constructor(props) { constructor(props) {
@ -112,15 +113,5 @@ class Curtain extends Component {
} }
} }
const mapStateToProps = (state, ownProps) => ({
get stateOrDevice() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} else {
return state.sceneStates[ownProps.id];
}
},
//device: state.devices[ownProps.id],
});
const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain); const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain);
export default CurtainContainer; export default CurtainContainer;

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

@ -11,6 +11,7 @@ import { Header, Button, Icon, Card } from "semantic-ui-react";
import { RemoteService } from "../../../remote"; import { RemoteService } from "../../../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
import DeviceSettingsModal from "./DeviceSettingsModal"; import DeviceSettingsModal from "./DeviceSettingsModal";
import mapStateToProps from "../../../deviceProps";
const centerComponent = { const centerComponent = {
marginLeft: "50%", marginLeft: "50%",
@ -45,66 +46,33 @@ class Device extends React.Component {
} }
renderDeviceComponent() { renderDeviceComponent() {
switch (this.props.type) { const mapKindToComponent = {
case "curtains": curtains: Curtains,
return ( thermostat: Thermostat,
<Curtains regularLight: Light,
tab={this.props.tab} sensor: Sensor,
sceneState={this.props.sceneState} motionSensor: Sensor,
id={this.props.id} buttonDimmer: ButtonDimmer,
/> knobDimmer: KnobDimmer,
); smartPlug: SmartPlug,
case "thermostat": switch: Switcher,
return ( dimmableLight: Light,
<Thermostat securityCamera: Videocam,
tab={this.props.tab} };
sceneState={this.props.sceneStat}
id={this.props.stateOrDevice.id} if (!(this.props.type in mapKindToComponent)) {
/> throw new Error(`device kind ${this.props.type} not known`);
);
case "regularLight":
return (
<Light
tab={this.props.tab}
sceneState={this.props.sceneState}
id={this.props.stateOrDevice.id}
/>
);
case "sensor":
return (
<Sensor
tab={this.props.tab}
sceneState={this.props.sceneState}
id={this.props.stateOrDevice.id}
/>
);
case "motionSensor":
return <Sensor tab={this.props.tab} id={this.props.stateOrDevice.id} />;
case "buttonDimmer":
return (
<ButtonDimmer tab={this.props.tab} id={this.props.stateOrDevice.id} />
);
case "knobDimmer":
return (
<KnobDimmer tab={this.props.tab} id={this.props.stateOrDevice.id} />
);
case "smartPlug":
return (
<SmartPlug tab={this.props.tab} id={this.props.stateOrDevice.id} />
);
case "switch":
return (
<Switcher tab={this.props.tab} id={this.props.stateOrDevice.id} />
);
case "dimmableLight":
return <Light id={this.props.stateOrDevice.id} tab={this.props.tab} />;
case "securityCamera":
return (
<Videocam id={this.props.stateOrDevice.id} tab={this.props.tab} />
);
default:
throw new Error("Device type unknown");
} }
return React.createElement(
mapKindToComponent[this.props.type],
{
tab: this.props.tab,
id: this.props.id,
hostId: this.props.hostId,
},
""
);
} }
deviceDescription() { deviceDescription() {
@ -165,7 +133,7 @@ class Device extends React.Component {
<Card.Content extra> <Card.Content extra>
{this.props.tab === "Devices" {this.props.tab === "Devices"
? this.deviceDescription() ? this.deviceDescription()
: this.stateDescription()} : this.props.tab === "Scenes" && this.stateDescription()}
</Card.Content> </Card.Content>
{this.props.tab === "Devices" ? ( {this.props.tab === "Devices" ? (
<DeviceSettingsModal <DeviceSettingsModal
@ -178,46 +146,5 @@ class Device extends React.Component {
} }
} }
function getStateOrDevice(state, ownProps) {
switch (state.active.activeTab) {
case "Devices":
return state.devices[ownProps.id];
case "Scenes":
return state.sceneStates[ownProps.id];
case "Hosts":
return state.hostDevices[ownProps.hostId][ownProps.id];
default:
throw new Error(
`stateOrDevice has no value in tab "${state.active.activeTab}"`
);
}
}
function getDevice(state, ownProps) {
switch (state.active.activeTab) {
case "Scenes":
return state.devices[getStateOrDevice(state, ownProps).deviceId];
case "Devices":
case "Hosts":
return getStateOrDevice(state, ownProps);
default:
throw new Error(`device has no value in tab "${state.active.activeTab}"`);
}
}
const mapStateToProps = (state, ownProps) => ({
get stateOrDevice() {
return getStateOrDevice(state, ownProps);
},
get device() {
return getDevice(state, ownProps);
},
get roomName() {
return (state.rooms[getDevice(state, ownProps).roomId] || {}).name;
},
get type() {
return getDevice(state, ownProps).kind;
},
});
const DeviceContainer = connect(mapStateToProps, RemoteService)(Device); const DeviceContainer = connect(mapStateToProps, RemoteService)(Device);
export default DeviceContainer; export default DeviceContainer;

10
smart-hut/src/components/dashboard/devices/Dimmer.js
View file

@ -29,6 +29,7 @@ import {
} from "./DimmerStyle"; } from "./DimmerStyle";
import { RemoteService } from "../../../remote"; import { RemoteService } from "../../../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
import mapStateToProps from "../../../deviceProps";
export class ButtonDimmerComponent extends Component { export class ButtonDimmerComponent extends Component {
increaseIntensity = () => { increaseIntensity = () => {
@ -128,15 +129,6 @@ export class KnobDimmerComponent extends Component {
} }
} }
const mapStateToProps = (state, ownProps) => ({
get stateOrDevice() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} else {
return state.sceneStates[ownProps.id];
}
},
});
const conn = connect(mapStateToProps, RemoteService); const conn = connect(mapStateToProps, RemoteService);
export const KnobDimmer = conn(KnobDimmerComponent); export const KnobDimmer = conn(KnobDimmerComponent);

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

@ -31,6 +31,7 @@ import {
} from "./LightStyle"; } from "./LightStyle";
import { RemoteService } from "../../../remote"; import { RemoteService } from "../../../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
import mapStateToProps from "../../../deviceProps";
class Light extends Component { class Light extends Component {
constructor(props) { constructor(props) {
@ -62,7 +63,7 @@ class Light extends Component {
} }
get intensity() { get intensity() {
return this.props.stateOrDevice.intensity || 0; return this.state.intensity || 0;
} }
onClickDevice = () => { onClickDevice = () => {
@ -119,7 +120,6 @@ class Light extends Component {
.saveDevice({ ...this.props.stateOrDevice, intensity }) .saveDevice({ ...this.props.stateOrDevice, intensity })
.catch((err) => console.error("regular light update error", err)); .catch((err) => console.error("regular light update error", err));
} else { } else {
console.log("CIAOOOOOOOOO", this.props.stateOrDevice);
this.props this.props
.updateState( .updateState(
{ id: this.props.stateOrDevice.id, intensity: intensity }, { id: this.props.stateOrDevice.id, intensity: intensity },
@ -153,7 +153,7 @@ class Light extends Component {
<CircularProgress <CircularProgress
style={{ style={{
...KnobProgress, ...KnobProgress,
opacity: this.state.intensity / 100 + 0.3, opacity: this.intensity / 100 + 0.3,
}} }}
/> />
<CircularThumb style={CircularThumbStyle} /> <CircularThumb style={CircularThumbStyle} />
@ -184,22 +184,5 @@ class Light extends Component {
} }
} }
const mapStateToProps = (state, ownProps) => ({
get stateOrDevice() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} else {
return state.sceneStates[ownProps.id];
}
},
get device() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} else {
return state.devices[state.sceneStates[ownProps.id].deviceId];
}
},
});
const LightContainer = connect(mapStateToProps, RemoteService)(Light); const LightContainer = connect(mapStateToProps, RemoteService)(Light);
export default LightContainer; export default LightContainer;

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

@ -38,6 +38,7 @@ import {
import { Image } from "semantic-ui-react"; import { Image } from "semantic-ui-react";
import { RemoteService } from "../../../remote"; import { RemoteService } from "../../../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
import mapStateToProps from "../../../deviceProps";
class Sensor extends Component { class Sensor extends Component {
constructor(props) { constructor(props) {
@ -194,14 +195,5 @@ class Sensor extends Component {
} }
} }
const mapStateToProps = (state, ownProps) => ({
get stateOrDevice() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} else {
return state.sceneStates[ownProps.id];
}
},
});
const SensorContainer = connect(mapStateToProps, RemoteService)(Sensor); const SensorContainer = connect(mapStateToProps, RemoteService)(Sensor);
export default SensorContainer; export default SensorContainer;

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

@ -15,6 +15,7 @@ import {
} from "./SmartPlugStyle"; } from "./SmartPlugStyle";
import { RemoteService } from "../../../remote"; import { RemoteService } from "../../../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
import mapStateToProps from "../../../deviceProps";
class SmartPlug extends Component { class SmartPlug extends Component {
constructor(props) { constructor(props) {
@ -70,21 +71,5 @@ class SmartPlug extends Component {
} }
} }
const mapStateToProps = (state, ownProps) => ({
get stateOrDevice() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} else {
return state.sceneStates[ownProps.id];
}
},
get device() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} else {
return state.devices[state.sceneStates[ownProps.id].deviceId];
}
},
});
const SmartPlugContainer = connect(mapStateToProps, RemoteService)(SmartPlug); const SmartPlugContainer = connect(mapStateToProps, RemoteService)(SmartPlug);
export default SmartPlugContainer; export default SmartPlugContainer;

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

@ -11,6 +11,7 @@ import { Image } from "semantic-ui-react";
import { imageStyle, nameStyle, turnedOnStyle } from "./SwitchStyle"; import { imageStyle, nameStyle, turnedOnStyle } from "./SwitchStyle";
import { RemoteService } from "../../../remote"; import { RemoteService } from "../../../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
import mapStateToProps from "../../../deviceProps";
class Switch extends Component { class Switch extends Component {
constructor(props) { constructor(props) {
@ -55,8 +56,5 @@ class Switch extends Component {
} }
} }
const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id],
});
const SwitchContainer = connect(mapStateToProps, RemoteService)(Switch); const SwitchContainer = connect(mapStateToProps, RemoteService)(Switch);
export default SwitchContainer; export default SwitchContainer;

19
smart-hut/src/components/dashboard/devices/Thermostats.js
View file

@ -5,6 +5,7 @@ import { connect } from "react-redux";
import "./Thermostat.css"; import "./Thermostat.css";
import Slider from "react-rangeslider"; import Slider from "react-rangeslider";
import "react-rangeslider/lib/index.css"; import "react-rangeslider/lib/index.css";
import mapStateToProps from "../../../deviceProps";
import { import {
stateTag, stateTag,
@ -144,24 +145,6 @@ class Thermostats extends Component {
} }
} }
const mapStateToProps = (state, ownProps) => ({
get stateOrDevice() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} else {
return state.sceneStates[ownProps.id];
}
},
get device() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} else {
return state.devices[state.sceneStates[ownProps.id].deviceId];
}
},
activeTab: state.activeTab,
});
const ThermostatContainer = connect( const ThermostatContainer = connect(
mapStateToProps, mapStateToProps,
RemoteService RemoteService

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

@ -7,6 +7,7 @@ import { RemoteService } from "../../../remote";
import { endpointURL } from "../../../endpoint"; import { endpointURL } from "../../../endpoint";
import { connect } from "react-redux"; import { connect } from "react-redux";
import VideocamModal from "./VideocamModal"; import VideocamModal from "./VideocamModal";
import mapStateToProps from "../../../deviceProps";
class Videocam extends Component { class Videocam extends Component {
constructor(props) { constructor(props) {
@ -58,12 +59,5 @@ class Videocam extends Component {
} }
} }
const mapStateToProps = (state, ownProps) => ({
device:
ownProps.tab === "Devices"
? state.devices[ownProps.id]
: state.devices[state.sceneStates[ownProps.id].deviceId],
state: state.sceneStates[ownProps.id],
});
const VideocamContainer = connect(mapStateToProps, RemoteService)(Videocam); const VideocamContainer = connect(mapStateToProps, RemoteService)(Videocam);
export default VideocamContainer; export default VideocamContainer;

51
smart-hut/src/deviceProps.js Normal file
View file

@ -0,0 +1,51 @@
function getStateOrDevice(state, ownProps) {
switch (state.active.activeTab) {
case "Devices":
return state.devices[ownProps.id];
case "Scenes":
return state.sceneStates[ownProps.id];
case "Hosts":
return state.hostDevices[ownProps.hostId][ownProps.id];
default:
throw new Error(
`stateOrDevice has no value in tab "${state.active.activeTab}"`
);
}
}
function getDevice(state, ownProps) {
switch (state.active.activeTab) {
case "Scenes":
return state.devices[getStateOrDevice(state, ownProps).deviceId];
case "Devices":
case "Hosts":
return getStateOrDevice(state, ownProps);
default:
throw new Error(`device has no value in tab "${state.active.activeTab}"`);
}
}
function getRoomName(state, ownProps) {
switch (state.active.activeTab) {
case "Scenes":
case "Devices":
return (state.rooms[getDevice(state, ownProps).roomId] || {}).name;
case "Hosts":
return "Room Name not implemented yet";
}
}
export default function mapStateToProps(state, ownProps) {
return {
get stateOrDevice() {
return getStateOrDevice(state, ownProps);
},
get device() {
return getDevice(state, ownProps);
},
get roomName() {},
get type() {
return getDevice(state, ownProps).kind;
},
};
}

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

@ -3,7 +3,6 @@ import thunk from "redux-thunk";
import update from "immutability-helper"; import update from "immutability-helper";
import reduxWebSocket, { connect } from "@giantmachines/redux-websocket"; import reduxWebSocket, { connect } from "@giantmachines/redux-websocket";
import { socketURL } from "./endpoint"; import { socketURL } from "./endpoint";
import actions from "./storeActions";
function reducer(previousState, action) { function reducer(previousState, action) {
let newState, change; let newState, change;

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

@ -21,7 +21,6 @@ class Dashboard extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = this.initialState; this.state = this.initialState;
this.setInitialState();
this.activeTab = "Devices"; this.activeTab = "Devices";
this.selectTab = this.selectTab.bind(this); this.selectTab = this.selectTab.bind(this);
} }