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

Fixed bugs and Initial Scene Navbar

Browse source
This commit is contained in:
britea 2020-04-18 16:26:12 +02:00
parent d219716526
commit 9c2a16732f
12 changed files with 266 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -53,7 +53,6 @@ class RoomModal extends Component {
}
get type() {
console.log(this.props.id);
return !this.props.id ? "new" : "modify";
}

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

@ -26,7 +26,7 @@ class SceneModal extends Component {
get initialState() {
return {
name: this.type === "new" ? "New Scene" : this.props.room.name,
name: this.type === "new" ? "New Scene" : this.props.scene.name,
openModal: false,
};
}
@ -40,40 +40,38 @@ class SceneModal extends Component {
}
addSceneModal = (e) => {
/*let data = {
// DATA HERE
};*/
// TODO CALL TO REMOTE SERVER TO ADD SCENE
/*this.props
.saveRoom(data, null)
let data = {
name: this.state.name,
};
this.props
.saveScene(data, null)
.then(() => {
this.setInitialState();
this.closeModal();
})
.catch((err) => console.error("error in creating room", err));*/
.catch((err) => console.error("error in creating room", err));
};
modifySceneModal = (e) => {
/*let data = {
// DATA HERE
};*/
// TODO CALL TO REMOTE SERVER TO MODIFY SCENE
/*this.props
.saveRoom(data, this.props.id)
let data = {
name: this.state.name,
};
this.props
.saveScene(data, this.props.id)
.then(() => {
this.setInitialState();
this.closeModal();
})
.catch((err) => console.error("error in updating room", err));*/
.catch((err) => console.error("error in updating room", err));
};
deleteScene = (e) => {
// TODO CALL TO REMOTE SERVER TO DELETE SCENE
/*
this.props
.deleteRoom(this.props.id)
.deleteScene(this.props.id)
.then(() => this.closeModal())
.catch((err) => console.error("error in deleting room", err));*/
.catch((err) => console.error("error in deleting room", err));
};
changeSomething = (event) => {

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

@ -26,7 +26,7 @@ class DevicePanel extends Component {
{this.props.devices.map((e, i) => {
return (
<Grid.Column key={i}>
<Device id={e.id} />
<Device tab={this.props.tab} id={e.id} />
</Grid.Column>
);
})}

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

@ -7,7 +7,6 @@ import { Grid } from "semantic-ui-react";
class ScenesPanel extends Component {
constructor(props) {
super(props);
console.log(this.props.activeScene);
}
render() {

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

@ -32,21 +32,21 @@ class Device extends React.Component {
renderDeviceComponent() {
switch (this.props.device.kind) {
case "regularLight":
return <Light id={this.props.id} />;
return <Light tab={this.props.tab} id={this.props.id} />;
case "sensor":
return <Sensor id={this.props.id} />;
return <Sensor tab={this.props.tab} id={this.props.id} />;
case "motionSensor":
return <Sensor id={this.props.id} />;
return <Sensor tab={this.props.tab} id={this.props.id} />;
case "buttonDimmer":
return <ButtonDimmer id={this.props.id} />;
return <ButtonDimmer tab={this.props.tab} id={this.props.id} />;
case "knobDimmer":
return <KnobDimmer id={this.props.id} />;
return <KnobDimmer tab={this.props.tab} id={this.props.id} />;
case "smartPlug":
return <SmartPlug id={this.props.id} />;
return <SmartPlug tab={this.props.tab} id={this.props.id} />;
case "switch":
return <Switcher id={this.props.id} />;
return <Switcher tab={this.props.tab} id={this.props.id} />;
case "dimmableLight":
return <Light id={this.props.id} />;
return <Light tab={this.props.tab} id={this.props.id} />;
default:
throw new Error("Device type unknown");
}

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

@ -36,12 +36,12 @@ const SettingsForm = (props) => {
return (
<Form>
<Form.Field>
<label>New Name: </label>
<label>Edit Name: </label>
<input
autoComplete="off"
name="name"
onChange={handleInputChange}
value={values.name}
value={props.name}
placeholder="Device name"
// {this.props.device.name}
/>
@ -112,6 +112,7 @@ class DeviceSettingsModal extends Component {
<Modal.Header>Settings of {this.props.device.name}</Modal.Header>
<Modal.Content>
<SettingsForm
name={this.props.device.name}
type={this.props.device.type}
removeDevice={this.deleteDevice}
saveFunction={this.updateDevice}

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

@ -37,6 +37,7 @@ class Light extends Component {
constructor(props) {
super(props);
this.state = { intensity: this.props.device.intensity, timeout: null };
console.log(this.props);
this.iconOn = "/img/lightOn.svg";
this.iconOff = "/img/lightOff.svg";

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

@ -271,6 +271,23 @@ export const RemoteService = {
};
},
/**
* Fetches all scenes that belong to this user. This call does not
* populate the devices attribute in scenes.
* @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
* with user-fiendly errors as a RemoteError
*/
fetchAllScenes: () => {
return (dispatch) => {
return Endpoint.get("/scene")
.then((res) => void dispatch(actions.scenesUpdate(res.data)))
.catch((err) => {
console.error("Fetch all scenes error", err);
throw new RemoteError(["Network error"]);
});
};
},
/**
* Fetches all devices in a particular room, or fetches all devices.
* This also updates the devices attribute on values in the map rooms.
@ -290,6 +307,25 @@ export const RemoteService = {
};
},
/**
* Fetches all devices in a particular scene, or fetches all devices.
* This also updates the devices attribute on values in the map scenes.
* @param {Number} sceneId the scene to which fetch devices
* from, null to fetch from all scenes
* @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
* with user-fiendly errors as a RemoteError
*/
fetchStates: (sceneId) => {
return (dispatch) => {
return Endpoint.get(`/scene/${sceneId}/states`)
.then((res) => void dispatch(actions.statesUpdate(sceneId, res.data)))
.catch((err) => {
console.error(`Fetch devices sceneId=${sceneId} error`, err);
throw new RemoteError(["Network error"]);
});
};
},
/**
* Creates/Updates a room with the given data
* @param {String} data.name the room's name,
@ -316,6 +352,28 @@ export const RemoteService = {
};
},
/**
* Creates/Updates a scene with the given data
* @param {String} data.name the scene's name,
* @param {Number|null} sceneId the scene's id if update, null for creation
* @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
* with user-fiendly errors as a RemoteError
*/
saveScene: (data, sceneId = null) => {
return (dispatch) => {
data = {
name: data.name,
};
return (sceneId
? Endpoint.put(`/scene/${sceneId}`, {}, data)
: Endpoint.post(`/scene`, {}, data)
)
.then((res) => void dispatch(actions.sceneSave(res.data)))
.catch(parseValidationErrors);
};
},
/**
* Creates/Updates a device with the given data. If
* data.id is truthy, then a update call is performed,
@ -496,6 +554,23 @@ export const RemoteService = {
};
},
/**
* Deletes a scene
* @param {Number} sceneId the id of the scene to delete
* @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
* with user-fiendly errors as a RemoteError
*/
deleteScene: (sceneId) => {
return (dispatch) => {
return Endpoint.delete(`/scene/${sceneId}`)
.then((_) => dispatch(actions.sceneDelete(sceneId)))
.catch((err) => {
console.warn("Scene deletion error", err);
throw new RemoteError(["Network error"]);
});
};
},
/**
* Deletes a device
* @param {Device} device the device to delete

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

@ -38,6 +38,35 @@ function reducer(previousState, action) {
}
};
const createOrUpdateScene = (scene) => {
if (!newState.scenes[scene.id]) {
newState = update(newState, {
scenes: { [scene.id]: { $set: { ...scene, states: new Set() } } },
});
} else {
newState = update(newState, {
scenes: {
[scene.id]: {
name: { $set: scene.name },
},
},
});
}
if (newState.pendingJoins.scenes[scene.id]) {
newState = update(newState, {
pendingJoins: { scenes: { $unset: [scene.id] } },
scenes: {
[scene.id]: {
states: {
$add: [...newState.pendingJoins.scenes[scene.id]],
},
},
},
});
}
};
const updateDeviceProps = (device) => {
// In some updates the information regarding a device is incomplete
// due to a fault in the type system and JPA repository management
@ -63,6 +92,13 @@ function reducer(previousState, action) {
createOrUpdateRoom(room);
}
break;
case "SCENES_UPDATE":
newState = previousState;
console.log(action.scenes);
for (const scene of action.scenes) {
createOrUpdateScene(scene);
}
break;
case "DEVICES_UPDATE":
change = null;
@ -156,6 +192,10 @@ function reducer(previousState, action) {
newState = previousState;
createOrUpdateRoom(action.room);
break;
case "SCENE_SAVE":
newState = previousState;
createOrUpdateScene(action.scene);
break;
case "DEVICE_SAVE":
change = {
devices: { [action.device.id]: { $set: action.device } },
@ -201,6 +241,30 @@ function reducer(previousState, action) {
change.active = { activeRoom: { $set: -1 } };
}
newState = update(previousState, change);
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;
}
// This update does not ensure the consistent update of switchId/dimmerId properties
// on output devices connected to an input device in this room. Please manually request
// all devices again if consistent update is desired
change = { states: { $unset: [] } };
for (const id of previousState.scenes[action.sceneId].states) {
change.states.$unset.push(id);
}
change.scenes = { $unset: [action.sceneId] };
if (previousState.active.activeScene === action.sceneId) {
change.active = { activeScene: { $set: -1 } };
}
newState = update(previousState, change);
break;
case "DEVICE_DELETE":
@ -280,7 +344,6 @@ function reducer(previousState, action) {
}
const initState = {
errors: {},
pendingJoins: {
rooms: {},
scenes: {},
@ -299,9 +362,9 @@ const initState = {
userInfo: null,
/** @type {[integer]Room} */
rooms: {},
/** @type {[integer]Scenes} */
/** @type {[integer]Scene} */
scenes: {},
/** @type {[integer]Automations} */
/** @type {[integer]Automation} */
automations: {},
/** @type {[integer]Device} */
devices: {},

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

@ -17,6 +17,10 @@ const actions = {
type: "ROOM_SAVE",
room,
}),
sceneSave: (scene) => ({
type: "SCENE_SAVE",
scene,
}),
deviceSave: (device) => ({
type: "DEVICE_SAVE",
device,
@ -40,6 +44,14 @@ const actions = {
type: "ROOM_DELETE",
roomId,
}),
sceneDelete: (sceneId) => ({
type: "SCENE_DELETE",
sceneId,
}),
scenesUpdate: (scenes) => ({
type: "SCENES_UPDATE",
scenes,
}),
deviceDelete: (deviceId) => ({
type: "DEVICE_DELETE",
deviceId,

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

@ -19,10 +19,22 @@ import { appActions } from "../storeActions";
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = this.initialState;
this.setInitialState();
this.selectTab = this.selectTab.bind(this);
}
get initialState() {
return {
activeTab: this.activeTab,
};
}
setInitialState() {
this.setState(this.initialState);
}
get activeTab() {
return this.props.activeTab;
}
@ -32,13 +44,14 @@ class Dashboard extends Component {
}
selectTab(e, { name }) {
this.setState({ activeTab: name });
this.activeTab = name;
}
renderTab(tab) {
switch (tab) {
case "Devices":
return <DevicePanel />;
return <DevicePanel tab={this.state.activeTab} />;
case "Scenes":
return <ScenesPanel />;
case "Automations":
@ -148,7 +161,7 @@ class Dashboard extends Component {
</Grid.Row>
<Grid.Row color="black">
<Grid.Column color="black">
<Navbar />
{this.renderNavbar(this.activeTab)}
</Grid.Column>
</Grid.Row>
<Grid.Row>

91
smart-hut/src/views/ScenesNavbar.js
View file

@ -2,8 +2,8 @@ import React, { Component } from "react";
import {
Menu,
Button,
Grid,
Icon,
Grid,
Responsive,
Dropdown,
} from "semantic-ui-react";
@ -19,9 +19,12 @@ class ScenesNavbar extends Component {
this.state = {
editMode: false,
};
console.log(this.props.scenes);
this.toggleEditMode = this.toggleEditMode.bind(this);
this.openCurrentModalMobile = this.openCurrentModalMobile.bind(this);
this.selectScene = this.selectScene.bind(this);
this.getScenes();
}
get activeItemScene() {
@ -33,13 +36,21 @@ class ScenesNavbar extends Component {
}
get activeItemSceneName() {
if (this.props.activeScene === -1) return "Home";
if (this.props.activeScene === -1) return "Scene";
return this.props.scenes[this.props.activeScene].name;
}
getScenes() {
this.props
.fetchAllScenes()
.then(() => console.log(this.props.scenes))
.catch(console.error);
}
openCurrentModalMobile() {
console.log(this.activeItem, this.props.roomModalRefs);
const currentModal = this.props.roomModalRefs[this.activeItem].current;
console.log(this.activeItemScene, this.props.sceneModalRefs);
const currentModal = this.props.sceneModalRefs[this.activeItemScene]
.current;
currentModal.openModal();
}
@ -47,6 +58,10 @@ class ScenesNavbar extends Component {
this.setState((prevState) => ({ editMode: !prevState.editMode }));
}
selectScene(e, { id }) {
this.activeItemScene = id || -1;
}
render() {
return (
<div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
@ -66,18 +81,32 @@ class ScenesNavbar extends Component {
active={this.activeItemScene === -1}
onClick={this.selectScene}
>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small" />
</Grid.Column>
<Grid.Column>SCENES</Grid.Column>
</Grid.Row>
</Grid>
SCENES
</Menu.Item>
{
//INSERT LIST OF SCENES HERE
}
{Object.values(this.props.scenes).map((e, i) => {
return (
<Menu.Item
id={e.id}
key={i}
name={e.name}
active={this.activeItemScene === e.id}
onClick={this.selectScene}
>
<Grid>
<Grid.Row>
<Grid.Column width={12}>{e.name}</Grid.Column>
<Grid.Column floated="right">
{this.state.editMode ? (
<SceneModal id={e.id} />
) : null}
</Grid.Column>
</Grid.Row>
</Grid>
</Menu.Item>
);
})}
<Menu.Item name="newM">
<Grid>
<Grid.Row centered name="new">
@ -103,17 +132,33 @@ class ScenesNavbar extends Component {
>
<Grid>
<Grid.Row>
<Grid.Column>
<Icon name="home" size="small" />
</Grid.Column>
<Grid.Column>Scene</Grid.Column>
</Grid.Row>
</Grid>
</Dropdown.Item>
{
//INSERT LIST OF SCENES HERE
}
{Object.values(this.props.scenes).map((e, i) => {
return (
<Dropdown.Item
id={e.id}
key={i}
name={e.name}
active={this.activeItemScene === e.id}
onClick={this.selectScene}
>
<Grid>
<Grid.Row>
<Grid.Column>{e.name}</Grid.Column>
</Grid.Row>
</Grid>
<SceneModal
ref={this.props.sceneModalRefs[e.id]}
nicolaStop={true}
id={e.id}
/>
</Dropdown.Item>
);
})}
</Dropdown.Menu>
</Dropdown>
</Menu>
@ -131,7 +176,7 @@ class ScenesNavbar extends Component {
onClick={this.openCurrentModalMobile}
>
<Icon name="pencil" size="small" />
EDIT ROOM
EDIT SCENE
</Button>
</Grid.Column>
) : null}