From 3ff6efb7299ede6aec8b79b0d8640fe383778dba Mon Sep 17 00:00:00 2001 From: r1bb3t Date: Fri, 20 Jul 2018 23:11:28 -0700 Subject: [PATCH] updated socket so endpoint is no longer needed and will use the current server and port by default. updated readme to reflect changes --- README.md | 44 +++++++++---------- .../components/flightboard/FlightboardRow.js | 8 ++-- ui-react/src/components/global/Socket.js | 36 +++------------ ui-react/src/config/flightboard.config.js | 14 ++---- 4 files changed, 37 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index ed581a9..98ecfb5 100644 --- a/README.md +++ b/README.md @@ -63,20 +63,15 @@ This application assumes you have: ``` $ npm install ``` -3. Navigate to `ui-react/`. In the `package.json` file, change: - ``` - "proxy" : "http://localhost:8080" - ``` - to whatever the IP of where express is running. Typically you can use something similar to the default but you can change the IP and port as long as it coincides with what is in `server.js`. -4. In the root directory, open a terminal or cmd: +3. In the root directory, open a terminal or cmd: ``` $ npm run build ``` -5. In the root directory, open a terminal or cmd: +4. In the root directory, open a terminal or cmd: ``` $ npm start ``` -6. If you want to start the react development server, in the root directory run: +5. If you want to start the react development server, in the root directory run: ``` $ npm start-ui-dev ``` @@ -86,7 +81,8 @@ This application assumes you have: ## Root Folder Structure Explained * `app/` : Routes for EWS APIs -* `config/` : All EWS functionality +* `app/ews/` : All EWS functionality +* `confg/` : All server side configuration settings * `scss/` : All styles * `static/` : All global static files * `ui-react/` : Front end React routes and components @@ -161,17 +157,25 @@ There are three main directories in the `ui-react/src/` folder: export DOMAIN=domain.com ``` +* In `/config/room-blacklist.js`, add any room by email to exclude it from the list of rooms: + + ```javascript + module.exports = { + 'roomEmails' : [ + 'ROOM_EMAIL@DOMAIN.com' + ] + }; + ``` + * In `/ui-react/src/config/flightboard.config.js`, manage your customizations: ```javascript module.exports = { 'board' : { - 'text' : { - 'nextUp' : 'Next Up', - 'statusAvailable' : 'Open', - 'statusBusy' : 'Busy', - 'statusError' : 'Error' - } + 'nextUp' : 'Next Up', + 'statusAvailable' : 'Open', + 'statusBusy' : 'Busy', + 'statusError' : 'Error' }, 'navbar' : { @@ -182,10 +186,6 @@ There are three main directories in the `ui-react/src/` folder: 'filterTitle' : 'Locations', 'filterAllTitle' : 'All Conference Rooms', }, - - 'socket' : { - 'endpoint' : 'http://localhost:8080', - } }; ``` @@ -193,11 +193,11 @@ There are three main directories in the `ui-react/src/` folder: ### Advanced -* All EWS functionality is located in `config/ews`. -* To change the interval in which the web socket emits, edit the interval time in `config/controller.js`. By default, it is set to 1 minute. +* All EWS functionality is located in `app/ews`. +* To change the interval in which the web socket emits, edit the interval time in `app/socket-controller.js`. By default, it is set to 1 minute. * To update styles, make sure you install grunt first with `npm install -g grunt-cli`. Then run `grunt` in the root directory to watch for SCSS changes. Use the `.scss` files located in the `/scss` folder. * All React components can be locally styled by adding a new `.css` file and importing it into the component itself if you'd prefer to do it that way. -* In `config/ews/rooms.js`, there is a block of code that may not be necessary but were added as a convenience. Feel free to use it, comment it out, or remove it completely. It was designed for a use case where the email addresses (ex: jsmith@domain.com) do not match the corporate domain (ex: jsmith-enterprise). +* In `app/ews/rooms.js`, there is a block of code that may not be necessary but were added as a convenience. Feel free to use it, comment it out, or remove it completely. It was designed for a use case where the email addresses (ex: jsmith@domain.com) do not match the corporate domain (ex: jsmith-enterprise). ```javascript // if the email domain != your corporate domain, // replace email domain with domain from auth config diff --git a/ui-react/src/components/flightboard/FlightboardRow.js b/ui-react/src/components/flightboard/FlightboardRow.js index 7f5e52d..73bee03 100644 --- a/ui-react/src/components/flightboard/FlightboardRow.js +++ b/ui-react/src/components/flightboard/FlightboardRow.js @@ -24,7 +24,7 @@ class FlightboardRow extends Component { }); if (item.Appointments[0].Start < now && now < item.Appointments[0].End) { } else { this.setState({ - nextUp: fbConfig.board.text.nextUp + ': ' + nextUp: fbConfig.board.nextUp + ': ' }); } } @@ -58,10 +58,10 @@ class FlightboardRow extends Component { ? 'meeting-busy' : 'meeting-open'; let statusText = item.ErrorMessage - ? fbConfig.board.text.statusError + ? fbConfig.board.statusError : item.Busy - ? fbConfig.board.text.statusBusy - : fbConfig.board.text.statusAvailable; + ? fbConfig.board.statusBusy + : fbConfig.board.statusAvailable; return (
diff --git a/ui-react/src/components/global/Socket.js b/ui-react/src/components/global/Socket.js index 59c59f5..fc1e886 100644 --- a/ui-react/src/components/global/Socket.js +++ b/ui-react/src/components/global/Socket.js @@ -1,63 +1,41 @@ import React, { Component } from 'react'; - import socketIOClient from 'socket.io-client'; -let fbConfig = require('../../config/flightboard.config.js'); - class Socket extends Component { constructor(props) { super(props); this.state = { response: false, now: new Date(), - rooms: [], - endpoint: fbConfig.socket.endpoint + rooms: [] } } - componentDidMount() { - const { endpoint } = this.state; - const socket = socketIOClient(endpoint); - - console.log("socket connect at: " + endpoint); - console.log("====================================="); + componentDidMount = () => { + const socket = socketIOClient(); socket.on('updatedRooms', (rooms) => { let time = new Date(); - for (var i = 0; i < rooms.length; i++) { - var meetingRoom = rooms[i].Name; - console.log("updating: " + meetingRoom); + for (let i = 0; i < rooms.length; i++) { + let meetingRoom = rooms[i].Name; } - console.log(" "); - console.log("time: " + time.toLocaleTimeString()); - console.log("====================================="); this.props.response({ response: true, now: new Date(), rooms: rooms - }) - - this.setState({ - response: true, - now: new Date(), - rooms: rooms }); }); - } - componentWillUnmount () { - const { endpoint } = this.state; - const socket = socketIOClient(endpoint); + componentWillUnmount = () => { + const socket = socketIOClient(); socket.close(); } - render() { return null; } - } export default Socket; diff --git a/ui-react/src/config/flightboard.config.js b/ui-react/src/config/flightboard.config.js index 2124866..aff8e55 100644 --- a/ui-react/src/config/flightboard.config.js +++ b/ui-react/src/config/flightboard.config.js @@ -1,11 +1,9 @@ module.exports = { 'board' : { - 'text' : { - 'nextUp' : 'Next Up', - 'statusAvailable' : 'Open', - 'statusBusy' : 'Busy', - 'statusError' : 'Error' - } + 'nextUp' : 'Next Up', + 'statusAvailable' : 'Open', + 'statusBusy' : 'Busy', + 'statusError' : 'Error' }, 'navbar' : { @@ -16,8 +14,4 @@ module.exports = { 'filterTitle' : 'Locations', 'filterAllTitle' : 'All Conference Rooms', }, - - 'socket' : { - 'endpoint' : 'http://localhost:8080', - } };