#945 Updating charts on websocket events

metasfresh · Jun 27, 2017 · 0424c8e · 0424c8e
1 parent 3d4ec7a
commit 0424c8e
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 2 deletions.
diff --git a/src/components/dashboard/DndWidget.js b/src/components/dashboard/DndWidget.js
@@ -32,6 +32,8 @@ const cardTarget = {
     drop(props, monitor) {
         if(monitor.getItem().isNew && props.addCard){
             props.addCard(props.entity, monitor.getItem().id);
+        }else{
+            props.onDrop && props.onDrop(props.entity, monitor.getItem().id)
         }
     }
 };

diff --git a/src/components/dashboard/DraggableWrapper.js b/src/components/dashboard/DraggableWrapper.js
@@ -22,14 +22,24 @@ import {
     removeDashboardWidget
 } from '../../actions/BoardActions';
 
+import {
+    connectWS,
+    disconnectWS
+} from '../../actions/WindowActions';
+
+import {
+    patchRequest
+} from '../../actions/GenericActions';
+
 export class DraggableWrapper extends Component {
     constructor(props) {
         super(props);
         this.state = {
             cards: [],
             indicators: [],
             sidenav: null,
-            idMaximized: null
+            idMaximized: null,
+            websocketEndpoint: null
         };
     }
 
@@ -38,6 +48,31 @@ export class DraggableWrapper extends Component {
         this.getIndicators();
     }
 
+    componentDidUpdate = (prevProps, prevState) => {
+        const {websocketEndpoint} = this.state;
+        if(
+            websocketEndpoint !== null &&
+            prevState.websocketEndpoint !== websocketEndpoint
+        ){
+            connectWS.call(this, websocketEndpoint, msg => {
+                msg.events.map(event => {
+                    switch(event.widgetType){
+                        case 'TargetIndicator':
+                            this.getIndicators();
+                            break;
+                        case 'KPI':
+                            this.getDashboard();
+                            break;
+                    }
+                })
+            })
+        }
+    }
+
+    componentWillUnmount = () => {
+        disconnectWS.call(this);
+    }
+
     getType = (entity) => entity === 'cards' ? 'kpis' : 'targetIndicators';
 
     getIndicators = () => {
@@ -51,7 +86,8 @@ export class DraggableWrapper extends Component {
     getDashboard = () => {
         getKPIsDashboard().then(response => {
             this.setState({
-                cards: response.data.items
+                cards: response.data.items,
+                websocketEndpoint: response.data.websocketEndpoint
             });
         });
     }
@@ -67,6 +103,15 @@ export class DraggableWrapper extends Component {
         });
     }
 
+    onDrop = (entity, id) => {
+        console.log(entity, id);
+        const tmpItemIndex = this.state[entity].findIndex(i => i.id === id);
+        patchRequest(
+            'dashboard', null, null, null, null, 'position',
+            tmpItemIndex, this.getType(entity), id
+        );
+    }
+
     moveCard = (entity, dragIndex, hoverIndex, item) => {
         const draggedItem = this.state[entity][dragIndex];
         if(draggedItem){
@@ -149,6 +194,7 @@ export class DraggableWrapper extends Component {
                         index={id}
                         moveCard={this.moveCard}
                         addCard={this.addCard}
+                        onDrop={this.onDrop}
                         removeCard={this.removeCard}
                         entity={'indicators'}
                         transparent={!editmode}
@@ -200,6 +246,7 @@ export class DraggableWrapper extends Component {
                             id={item.id}
                             moveCard={this.moveCard}
                             addCard={this.addCard}
+                            onDrop={this.onDrop}
                             removeCard={this.removeCard}
                             entity={'cards'}
                             className={