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

Merge branch 'dev' of https://lab.si.usi.ch/sa4-2020/the-sanmarinoes/frontend into dev

Browse source
This commit is contained in:
britea 2020-05-02 17:01:39 +02:00
commit 87922f689d
14 changed files with 84 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,8 +17,6 @@ class SceneModal extends Component {
constructor(props) {
super(props);
this.state = this.initialState;
this.setInitialState();
this.addSceneModal = this.addSceneModal.bind(this);
this.modifySceneModal = this.modifySceneModal.bind(this);
this.deleteScene = this.deleteScene.bind(this);

1
smart-hut/src/components/dashboard/AutomationsPanel.js
View file

@ -71,6 +71,7 @@ const Automation = ({ automation, devices, scenes, removeAutomation }) => {
const sceneData = scenes.filter(
(s) => s.id === sp.sceneId
)[0];
if (!sceneData) return "";
return (
<Menu key={sceneData.id} compact>
<Menu.Item as="span">{sceneData.name}</Menu.Item>

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

@ -26,7 +26,7 @@ class DevicePanel extends Component {
return (
<Card.Group centered style={{ paddingTop: "3rem" }}>
{this.props.devices.map((e, i) => {
return <Device tab={this.props.tab} id={e.id} />;
return <Device key={i} tab={this.props.tab} id={e.id} />;
})}
{!this.props.isActiveRoomHome ? (
<Card style={{ height: "23em" }}>

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

@ -63,7 +63,6 @@ class NewSceneDevice extends Component {
createState() {
for (let i = 0; i < this.state.devicesAttached.length; i++) {
console.log("DIOPORCO", i, this.state.devicesAttached[i]);
let device = this.props.devices.filter(
(e) => this.state.devicesAttached[i] === e.id
);
@ -98,7 +97,14 @@ class NewSceneDevice extends Component {
open={this.state.openModal}
onClose={this.resetState}
trigger={
<StyledDiv onClick={this.handleOpen}>
<StyledDiv
onClick={this.handleOpen}
style={{
position: "relative",
top: "calc(50% - 5rem)",
left: "calc(50% - 5rem)",
}}
>
<Image src="/img/add.svg" style={{ filter: "invert()" }} />
</StyledDiv>
}

57
smart-hut/src/components/dashboard/ScenesPanel.js
View file

@ -3,7 +3,7 @@ import { connect } from "react-redux";
import { RemoteService } from "../../remote";
import Device from "./devices/Device";
import NewSceneDevice from "./NewSceneDevice";
import { Grid, Button } from "semantic-ui-react";
import { Grid, Button, Card, Segment, Header } from "semantic-ui-react";
class ScenesPanel extends Component {
constructor(props) {
@ -12,39 +12,44 @@ class ScenesPanel extends Component {
}
applyScene() {
console.log(this.props.activeScene);
this.props.sceneApply(this.props.activeScene).then(() => {
alert("Scene applied.");
});
this.props
.sceneApply(this.props.activeScene)
.then(() => {
alert("Scene applied.");
})
.catch(console.error);
}
render() {
return (
<Grid doubling columns={2} divided="vertically">
<Card.Group centered style={{ paddingTop: "3rem" }}>
{!this.props.isActiveDefaultScene ? (
<Grid.Row centered>
<Button color="blue" onClick={this.applyScene}>
Apply Scene
</Button>
</Grid.Row>
) : null}
{!this.props.isActiveDefaultScene
? this.props.sceneStates.map((e, i) => {
return (
<Grid.Column key={i}>
<Device tab={this.props.tab} id={e.id} />
</Grid.Column>
);
})
: null}
{!this.props.isActiveDefaultScene ? (
<Grid.Column>
<NewSceneDevice />
</Grid.Column>
<Card style={{ height: "27em" }}>
<Card.Content>
<Card.Header textAlign="center">
<Header as="h3">Add devices - Apply Scene</Header>
</Card.Header>
<Segment basic style={{ width: "100%", height: "100%" }}>
<NewSceneDevice />
</Segment>
</Card.Content>
<Card.Content extra>
<div className="ui two buttons">
<Button color="blue" onClick={this.applyScene}>
Apply Scene
</Button>
</div>
</Card.Content>
</Card>
) : (
<Grid.Column>Welcome to the Scene View, you add a Scene</Grid.Column>
)}
</Grid>
{!this.props.isActiveDefaultScene
? this.props.sceneStates.map((e, i) => {
return <Device key={i} tab={this.props.tab} id={e.id} />;
})
: null}
</Card.Group>
);
}
}

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

@ -41,8 +41,8 @@ class Device extends React.Component {
}
deleteState() {
//console.log("alpaca "+this.props);
this.props.deleteState(this.props.id, this.props.type);
console.log("alpaca ", this.props);
this.props.deleteState(this.props.id, this.props.stateOrDevice.kind);
}
renderDeviceComponent() {
@ -136,7 +136,7 @@ class Device extends React.Component {
stateDescription() {
return (
<div class="ui one button">
<div className="ui two buttons">
<Button
color="red"
icon
@ -159,7 +159,9 @@ class Device extends React.Component {
render() {
{
return (
<Card style={{ height: "23em" }}>
<Card
style={{ height: this.props.tab === "Devices" ? "23em" : "27em" }}
>
<Card.Content>
<Card.Header textAlign="center">
<Header as="h3">{this.deviceName}</Header>

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

@ -46,7 +46,7 @@ class Light extends Component {
this.setIntensity = this.setIntensity.bind(this);
}
componentDidUpdate(prevProps, prevState) {
componentDidUpdate(prevProps) {
if (
this.props.stateOrDevice.intensity !== prevProps.stateOrDevice.intensity
) {

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

@ -28,7 +28,7 @@ class SmartPlug extends Component {
}
get energyConsumed() {
return (this.props.stateOrDevice.totalConsumption / 1000).toFixed(3);
return (this.props.device.totalConsumption / 1000).toFixed(3);
}
onClickDevice = () => {
@ -78,6 +78,13 @@ const mapStateToProps = (state, ownProps) => ({
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);
export default SmartPlugContainer;

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

@ -15,39 +15,21 @@ import {
stateTagContainer,
} from "./ThermostatStyle";
//not quite working yet
class Thermostats extends Component {
constructor(props) {
super(props);
this.state = {
targetTemperature: this.props.stateOrDevice.targetTemperature,
mode: this.props.stateOrDevice.mode,
measuredTemperature: this.props.stateOrDevice.measuredTemperature,
useExternalSensors: this.props.stateOrDevice.useExternalSensors,
timeout: null,
targetTemperature: this.props.device.targetTemperature,
mode: this.props.device.mode,
measuredTemperature: this.props.device.measuredTemperature,
useExternalSensors: this.props.device.useExternalSensors,
};
console.log(this.state);
this.setMode = this.setMode.bind(this);
this.setTargetTemperature = this.setTargetTemperature.bind(this);
this.setTargetTemperature = this.setTargetTemperature.bind(this);
}
//getters
get getMode() {
return this.props.stateOrDevice.mode;
}
get getTargetTemperature() {
return this.props.stateOrDevice.targetTemperature;
}
get getMeasuredTemperature() {
return this.props.stateOrDevice.measuredTemperature;
}
get getUseExternalSensors() {
return this.props.stateOrDevice.useExternalSensors;
}
setMode(mode) {
if (this.state.timeout) {
clearTimeout(this.state.timeout);
@ -85,7 +67,6 @@ class Thermostats extends Component {
}
};
//It seems to work
saveTargetTemperature(targetTemperature) {
const turn = this.props.stateOrDevice.mode !== "OFF";
if (this.props.tab === "Devices") {
@ -124,8 +105,6 @@ class Thermostats extends Component {
});
}
//I have no idea why it doesn't want to update the temperature
// Maybe ask yourself some questions
saveTargetTemperature(targetTemperature) {
if (this.props.tab === "Devices") {
this.props
@ -160,7 +139,11 @@ class Thermostats extends Component {
<h3 style={deviceName}>
Thermostat
<Checkbox
checked={this.props.stateOrDevice.mode !== "OFF" ? true : false}
checked={
this.props.tab === "Devices"
? this.props.device.mode !== "OFF"
: this.props.stateOrDevice.on
}
slider
style={toggle}
onChange={(e, val) => this.setMode(val.checked)}
@ -185,7 +168,13 @@ class Thermostats extends Component {
/>
) : null}
<div style={stateTagContainer}>
<span style={stateTag}>{this.props.stateOrDevice.mode}</span>
<span style={stateTag}>
{this.props.tab === "Devices"
? this.props.device.mode
: this.props.stateOrDevice.on
? "WILL TURN ON"
: "WILL TURN OFF"}
</span>
</div>
</div>
);

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

@ -59,7 +59,11 @@ class Videocam extends Component {
}
const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id],
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);
export default VideocamContainer;

6
smart-hut/src/remote.js
View file

@ -13,7 +13,11 @@ class RemoteError extends Error {
messages;
constructor(messages) {
super(messages.join(" - "));
super(
messages && Array.isArray(messages)
? messages.join(" - ")
: JSON.stringify(messages, null, 2)
);
this.messages = messages;
}
}

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

@ -301,7 +301,6 @@ function reducer(previousState, action) {
break;
case "AUTOMATION_SAVE":
console.log("ID: ", action.automation.id);
change = {
automations: { [action.automation.id]: { $set: action.automation } },
};
@ -316,7 +315,6 @@ function reducer(previousState, action) {
};
if (previousState.scenes[action.sceneState.sceneId]) {
console.log("PREVSTATE", change, previousState);
change.scenes = {
[action.sceneState.sceneId]: {
sceneStates: {
@ -334,7 +332,6 @@ function reducer(previousState, action) {
};
}
newState = update(previousState, change);
console.log("NEWSTATE ", newState);
break;
case "ROOM_DELETE":
if (!(action.roomId in previousState.rooms)) {
@ -365,13 +362,9 @@ function reducer(previousState, action) {
automations: { $unset: [action.id] },
};
console.log("CHANGE ", change);
console.log("Action id: ", action.id);
newState = update(previousState, change);
console.log("NEW STATE ", newState);
break;
case "SCENE_DELETE":
console.log("SCENE", action.sceneId);
if (!(action.sceneId in previousState.scenes)) {
console.warn(`Scene to delete ${action.sceneId} does not exist`);
break;
@ -417,15 +410,6 @@ function reducer(previousState, action) {
newState = update(previousState, change);
break;
case "SCENE_APPLY":
console.log(action);
//checking that the scene actually exists
/*if (!(action.sceneId in previousState.scenes)) {
console.warn(`Scene ${action.sceneId} does not exist`);
break;
}*/
break;
case "DEVICE_DELETE":
if (!(action.deviceId in previousState.devices)) {
console.warn(`Device to delete ${action.deviceId} does not exist`);
@ -487,6 +471,7 @@ function reducer(previousState, action) {
break;
case "REDUX_WEBSOCKET::MESSAGE":
const devices = JSON.parse(action.payload.message);
//console.log("socket", JSON.stringify(devices, null, 2));
newState = reducer(previousState, {
type: "DEVICES_UPDATE",

4
smart-hut/src/storeActions.js
View file

@ -62,10 +62,6 @@ const actions = {
type: "STATE_DELETE",
stateId,
}),
sceneApply: (sceneId) => ({
type: "SCENE_APPLY",
sceneId,
}),
deviceOperationUpdate: (devices) => ({
type: "DEVICES_UPDATE",
devices,

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

@ -89,14 +89,12 @@ class Dashboard extends Component {
<Grid.Column textAlign="center" width={16}>
<Menu fluid widths={3} inverted color="grey">
<Menu.Item
basic
name="Devices"
content="Devices"
active={this.activeTab === "Devices"}
onClick={this.selectTab}
/>
<Menu.Item
basic
name="Scenes"
content="Scenes"
active={this.activeTab === "Scenes"}