Implemented move event pusher

src/components/WorkspaceDrawerContent.vue

@@ -2,11 +2,13 @@
   <div>
     <md-toolbar class="md-transparent" md-elevation="0">
       <span class="md-title">VideON</span>
-
-
     </md-toolbar>
 
     <md-list>
+
+
+      <md-subheader>You</md-subheader>
+
       <md-list-item>
         <md-avatar class="md-avatar-icon">{{ avatarText }}</md-avatar>
         <span class="md-list-item-text">{{ $store.state.auth.name }}</span>
@@ -16,6 +18,18 @@
         <md-button class="md-raised md-accent" @click="performLogout">Logout</md-button>
       </md-list-item>
 
+
+      <md-subheader>Pending tasks</md-subheader>
+
+      <md-list-item>
+
+        <table>
+          <tr><th>Creations:</th><td>0</td></tr>
+          <tr><th>Updates:</th><td>0</td></tr>
+          <tr><th>Deletions:</th><td>0</td></tr>
+        </table>
+      </md-list-item>
+
     </md-list>
 
   </div>
@@ -24,6 +38,18 @@
 <script>
 export default {
   name: "WorkspaceDrawerContent",
+  props: {
+    pendingChanges: {
+      type: Object,
+      default() {
+        return {
+          created: [],
+          updated: [],
+          deleted: []
+        }
+      }
+    }
+  },
   methods: {
     performLogout() {
       this.$store.dispatch("auth/performLogout").then(() => {
@@ -33,7 +59,7 @@ export default {
   },
   computed: {
     avatarText() {
-      return this.$store.state.auth.name.slice(0,2);
+      return this.$store.state.auth.name.slice(0, 2);
     }
   }
 }

src/main.js

@@ -19,6 +19,8 @@ import {
     MdRipple,
     MdDialog,
     MdSpeedDial,
+    MdDivider,
+    MdSubheader
 } from 'vue-material/dist/components'
 
 import 'vue-material/dist/vue-material.min.css'
@@ -40,6 +42,8 @@ Vue.use(MdAvatar);
 Vue.use(MdRipple);
 Vue.use(MdDialog);
 Vue.use(MdSpeedDial);
+Vue.use(MdDivider);
+Vue.use(MdSubheader);
 
 Vue.prototype.$api = axios.create({
     baseURL: process.env.VUE_APP_API_LOCATION
@@ -61,9 +65,10 @@ new Vue({
             });
         });
         this.$api.interceptors.request.use((config) => {
-            if (this.$store && this.$store.getters.isLoggedIn) {
+            if (this.$store && this.$store.getters["auth/isLoggedIn"]) {
                 config.headers["Authorization"] = "Bearer " + this.$store.state.auth.token;
             }
+            return config;
         })
     }
 }).$mount('#app')

src/views/Dashboard.vue

@@ -2,12 +2,15 @@
   <div class="page-container md-layout-column" id="dashboard-container">
 
     <!-- toolbar -->
-    <toolbar @showDrawerClicked="showDrawer = true" @applyClicked="performApply" :processing="false"
+    <toolbar @showDrawerClicked="showDrawer = true"
-             :model-changed="modelChanged"/>
+             @applyClicked="performApply"
+             :processing="anyPendingNodeMoves"
+             :model-changed="modelChanged"
+    />
 
     <!-- drawer -->
     <md-drawer :md-active.sync="showDrawer" md-swipeable>
-      <workspace-drawer-content/>
+      <workspace-drawer-content :pending-changes="pendingChanges"/>
     </md-drawer>
 
     <!-- workspace -->
@@ -51,6 +54,7 @@ export default {
       updated: [],
       deleted: [] // Stores apiId instead of localId
     },
+    pendingNodeMoves: 0, // count of inflight coord modifications
     model: {
       centerX: 0,
       centerY: 0,
@@ -132,8 +136,24 @@ export default {
       this.pendingChanges.created = Array.from(pending_creations);
     },
     // --- end of magic hack
-    handleNodeMove() {
+    handleNodeMove(id) {
-      // TODO
+      console.log(id);
+      const moved_node = this.model.nodes.find((node) => node.id === id);
+      console.log(moved_node);
+      if ((!moved_node) || (!moved_node.apiId)) {
+        return;
+      }
+      console.log("Anyád")
+      this.pendingNodeMoves++;
+      this.$api.put(`objects/streamerobjects/coordmodify/${moved_node.apiId}`, {
+        x: moved_node.x,
+        y: moved_node.y
+      }).then(() => {
+        this.pendingNodeMoves--;
+      }).catch(() => {
+        this.pendingNodeMoves--;
+      });
+
     },
     handleLinkBreak({from, to}) {
       this.enqueuePendingNodeUpdate(from);
@@ -157,6 +177,9 @@ export default {
   computed: {
     modelChanged() {
       return some(this.pendingChanges, (o) => o.length > 0);
+    },
+    anyPendingNodeMoves() {
+      return this.pendingNodeMoves > 0;
     }
   }