From 091ab50c0eda9c18fa41ee77b463928784c786c5 Mon Sep 17 00:00:00 2001 From: "Claudio Maggioni (maggicl)" Date: Sat, 2 May 2020 16:40:29 +0200 Subject: [PATCH] WIP --- smart-hut/src/components/HostModal.js | 154 ++++-------------- .../src/components/dashboard/HostsPanel.js | 5 +- .../src/components/dashboard/ScenesPanel.js | 9 +- .../dashboard/devices/Thermostat.css | 2 +- smart-hut/src/remote.js | 24 +-- smart-hut/src/store.js | 51 ++---- smart-hut/src/storeActions.js | 23 ++- smart-hut/src/views/Dashboard.js | 5 +- smart-hut/src/views/HostsNavbar.js | 121 +++----------- smart-hut/src/views/Navbar.js | 4 +- smart-hut/src/views/ScenesNavbar.js | 4 +- 11 files changed, 109 insertions(+), 293 deletions(-) diff --git a/smart-hut/src/components/HostModal.js b/smart-hut/src/components/HostModal.js index 55f4e4b..8867b47 100644 --- a/smart-hut/src/components/HostModal.js +++ b/smart-hut/src/components/HostModal.js @@ -9,11 +9,8 @@ class HostModal extends Component { constructor(props) { super(props); this.state = this.initialState; - this.setInitialState(); - this.addHostModal = this.addHostModal.bind(this); - this.modifyHostModal = this.modifyHostModal.bind(this); - this.deleteHost = this.deleteHost.bind(this); + this.saveGuestSettings = this.saveGuestSettings.bind(this); } get initialState() { @@ -26,47 +23,6 @@ class HostModal extends Component { this.setState(this.initialState); } - get type() { - return !this.props.id ? "new" : "modify"; - } - - addHostModal = (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));*/ - }; - - modifyHostModal = (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));*/ - }; - - deleteHost = (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; @@ -81,101 +37,55 @@ class HostModal extends Component { this.setState({ openModal: true }); }; + saveGuestSettings() {} + render() { return ( -
- {!this.props.nicolaStop ? ( -
- - {this.type === "new" ? ( - - ) : ( - - )} - - - {this.type === "new" ? ( - - ) : ( - - )} - -
- ) : null} + + + + + + {this.type === "new" ? ( + + ) : ( + + )} + -
- {this.type === "new" ? "Add new hosts" : "Modify hosts"} -
+
Select guests
- { - //TODO FORM TO ADD OR MODIFY SCENE - } - - {this.type === "modify" ? ( - - ) : null} + +

Spaghetti!

+ - -
+ ); } } const setActiveHost = (activeHost) => { - return (dispatch) => - dispatch(appActions.setActiveHost(activeHost)); + return (dispatch) => dispatch(appActions.setActiveHost(activeHost)); }; const mapStateToProps = (state, ownProps) => ({ diff --git a/smart-hut/src/components/dashboard/HostsPanel.js b/smart-hut/src/components/dashboard/HostsPanel.js index 5421fc9..9f75294 100644 --- a/smart-hut/src/components/dashboard/HostsPanel.js +++ b/smart-hut/src/components/dashboard/HostsPanel.js @@ -41,8 +41,5 @@ const mapStateToProps = (state, _) => ({ activeHost: state.active.activeHost, hostDevices: state.hostDevices, }); -const HostsPanelContainer = connect( - mapStateToProps, - RemoteService -)(HostsPanel); +const HostsPanelContainer = connect(mapStateToProps, RemoteService)(HostsPanel); export default HostsPanelContainer; diff --git a/smart-hut/src/components/dashboard/ScenesPanel.js b/smart-hut/src/components/dashboard/ScenesPanel.js index 1950f6b..7a69fc5 100644 --- a/smart-hut/src/components/dashboard/ScenesPanel.js +++ b/smart-hut/src/components/dashboard/ScenesPanel.js @@ -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, Card, Segment, Header } from "semantic-ui-react"; +import { Button, Card, Segment, Header, Icon } from "semantic-ui-react"; class ScenesPanel extends Component { constructor(props) { @@ -42,7 +42,12 @@ class ScenesPanel extends Component { ) : ( - Welcome to the Scene View, you add a Scene + +
+ + Please select a scene on the left or add a new one. +
+ )} {!this.props.isActiveDefaultScene ? this.props.sceneStates.map((e, i) => { diff --git a/smart-hut/src/components/dashboard/devices/Thermostat.css b/smart-hut/src/components/dashboard/devices/Thermostat.css index 15c4314..cf6fa0b 100644 --- a/smart-hut/src/components/dashboard/devices/Thermostat.css +++ b/smart-hut/src/components/dashboard/devices/Thermostat.css @@ -28,4 +28,4 @@ background: white; border-radius: 5px; } -*/ \ No newline at end of file +*/ diff --git a/smart-hut/src/remote.js b/smart-hut/src/remote.js index 42081d8..8b41831 100644 --- a/smart-hut/src/remote.js +++ b/smart-hut/src/remote.js @@ -353,7 +353,7 @@ export const RemoteService = { */ fetchAllHosts: () => { return (dispatch) => { - return Endpoint.get(`/user`) + return Endpoint.get(`/user/hosts`) .then((res) => void dispatch(actions.getHosts(res.data))) .catch((err) => { console.error(`Fetch hosts error`, err); @@ -362,21 +362,21 @@ export const RemoteService = { }; }, -/** - * Adds the current user as a guest to another user - * identified through a host id. - * @param {Number} hostId the host to add. - * @param {String} username the username of the guest to add. - * @returns {Promise} promise that resolves to void and rejects - * with user-fiendly errors as a RemoteError - */ + /** + * Adds the current user as a guest to another user + * identified through a host id. + * @param {Number} hostId the host to add. + * @param {String} username the username of the guest to add. + * @returns {Promise} promise that resolves to void and rejects + * with user-fiendly errors as a RemoteError + */ addUserAsGuest: (hostId, username) => { return (dispatch) => { - return Endpoint.post(`/user/guest`) + return Endpoint.post(`/user/guest`) .then((res) => void dispatch(actions.guestSave(res.data))) .catch((err) => { - console.error(`Guest save error`, err); - throw new RemoteError(["Network Error"]); + console.error(`Guest save error`, err); + throw new RemoteError(["Network Error"]); }); }; }, diff --git a/smart-hut/src/store.js b/smart-hut/src/store.js index 62b34be..ef6c1cd 100644 --- a/smart-hut/src/store.js +++ b/smart-hut/src/store.js @@ -469,15 +469,15 @@ function reducer(previousState, action) { }, }); break; - case "SET_ACTIVE_HOST": - newState = update(previousState, { - active: { - activeHost: { - $set: action.activeHost, - }, + case "SET_ACTIVE_HOST": + newState = update(previousState, { + active: { + activeHost: { + $set: action.activeHost, }, - }); - break; + }, + }); + break; case "REDUX_WEBSOCKET::MESSAGE": const devices = JSON.parse(action.payload.message); //console.log("socket", JSON.stringify(devices, null, 2)); @@ -488,32 +488,15 @@ function reducer(previousState, action) { devices, }); break; - case "GET_HOSTS": - change = {}; - for (const host of action.hosts) { - change.$add = host; - } - newState = update(previousState, change); - break; - case "GET_HOST_DEVICES": - change = {}; - // TODO ACTUAL WORKING CODE - break; - case "GUEST_SAVE": - change = {}; - // TODO ACTUAL WORKING CODE - newState = update(previousState, change); - break; - case "GUEST_UPDATE": - change = {}; - // TODO ACTUAL WORKING CODE - newState = update(previousState, change); - break; - case "GUEST_DELETE": - change = {}; - // TODO ACTUAL WORKING CODE - newState = update(previousState, change); - break; + case "HOSTS_UPDATE": + change = { + hosts: {}, + }; + for (const host of action.hosts) { + change.hosts[host.id] = { $set: host }; + } + newState = update(previousState, change); + break; default: console.warn(`Action type ${action.type} unknown`, action); return previousState; diff --git a/smart-hut/src/storeActions.js b/smart-hut/src/storeActions.js index cf18ebb..ec56c13 100644 --- a/smart-hut/src/storeActions.js +++ b/smart-hut/src/storeActions.js @@ -92,31 +92,30 @@ const actions = { deviceId, }), - getHosts: (hosts) => ({ - type: "GET_HOSTS", - hosts, + hostsUpdate: (hosts) => ({ + type: "HOSTS_UPDATE", + hosts, }), getHostDevices: (host) => ({ - type: "GET_HOST_DEVICES", - host, + type: "GET_HOST_DEVICES", + host, }), guestSave: (guest) => ({ - type: "GUEST_SAVE", - guest, + type: "GUEST_SAVE", + guest, }), guestUpdate: (guest) => ({ - type: "GUEST_UPDATE", - guest, + type: "GUEST_UPDATE", + guest, }), guestDelete: (guest) => ({ - type: "GUEST_DELETE", - guest, + type: "GUEST_DELETE", + guest, }), - }; export const appActions = { diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js index 17772e6..6912248 100644 --- a/smart-hut/src/views/Dashboard.js +++ b/smart-hut/src/views/Dashboard.js @@ -5,7 +5,6 @@ import AutomationsPanel from "../components/dashboard/AutomationsPanel"; import HostsPanel from "../components/dashboard/HostsPanel"; import Navbar from "./Navbar"; import ScenesNavbar from "./ScenesNavbar"; -import AutomationsNavbar from "./AutomationsNavbar"; import HostsNavbar from "./HostsNavbar"; import MyHeader from "../components/HeaderController"; import { Grid, Responsive, Button, Menu } from "semantic-ui-react"; @@ -71,8 +70,6 @@ class Dashboard extends Component { return ; case "Scenes": return ; - case "Automations": - return ; case "Hosts": return ; default: @@ -96,7 +93,7 @@ class Dashboard extends Component { - + ({ editMode: !prevState.editMode })); - } - render() { return (
- - - - + - - - - - - AUTOMATIONS - - + Hosts {Object.values(this.props.hosts).map((e, i) => { - return ( - - - - {e.name} - - {this.state.editMode ? ( - - ) : null} - - - - - ); + return ( + + {e.name} + + ); })} - - - - - + @@ -122,14 +87,7 @@ class HostsNavbar extends Component { active={this.activeItemHost === -1} onClick={this.selectHosts} > - - - - - - Hosts - - + Hosts {Object.values(this.props.hosts).map((e, i) => { @@ -141,43 +99,13 @@ class HostsNavbar extends Component { active={this.activeItemHost === e.id} onClick={this.selectHosts} > - - - {e.name} - - {this.state.editMode ? ( - - ) : null} - - - + {e.name} ); })} -
- - - - - - {this.activeItemHost !== -1 ? ( - - - - ) : null} - - ); @@ -185,17 +113,12 @@ class HostsNavbar extends Component { } const setActiveHost = (activeHost) => { - return (dispatch) => - dispatch(appActions.setActiveHost(activeHost)); + return (dispatch) => dispatch(appActions.setActiveHost(activeHost)); }; const mapStateToProps = (state, _) => ({ hosts: state.hosts, activeHost: state.active.activeHost, - hostModalRefs: Object.keys(state.hosts).reduce( - (acc, key) => ({ ...acc, [key]: React.createRef() }), - {} - ), }); const HostsNavbarContainer = connect(mapStateToProps, { ...RemoteService, diff --git a/smart-hut/src/views/Navbar.js b/smart-hut/src/views/Navbar.js index ede6748..a716173 100644 --- a/smart-hut/src/views/Navbar.js +++ b/smart-hut/src/views/Navbar.js @@ -82,7 +82,9 @@ class Navbar extends Component { - House View + + Home view + diff --git a/smart-hut/src/views/ScenesNavbar.js b/smart-hut/src/views/ScenesNavbar.js index 76661bb..e4b3b89 100644 --- a/smart-hut/src/views/ScenesNavbar.js +++ b/smart-hut/src/views/ScenesNavbar.js @@ -86,7 +86,7 @@ class ScenesNavbar extends Component { active={this.activeItemScene === -1} onClick={this.selectScene} > - SCENES + Scenes {Object.values(this.props.scenes).map((e, i) => { @@ -137,7 +137,7 @@ class ScenesNavbar extends Component { > - Scene + Scenes