Bug fix smartboard updating issues

Adding the Vue router convlicted with how properties were being passed to the smartboard component. This change updates the property passing to correctly receive the office_number and update accordingly via websocket.
sjrumsby · Dec 10, 2018 · b351a5d · b351a5d
1 parent ec986ea
commit b351a5d
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 36 deletions.
diff --git a/frontend/src/router.js b/frontend/src/router.js
@@ -50,7 +50,7 @@ export default new Router({
       ]
     },
     {
-      path:'/smartboard/:id',
+      path:'/smartboard/:office_number',
       component: Smartboard,
       props: true,
     },

diff --git a/frontend/src/smartboard/board-socket.vue b/frontend/src/smartboard/board-socket.vue
@@ -24,6 +24,7 @@ limitations under the License.*/
 
   export default {
     name: 'BoardSocket',
+    props: ['smartboardData'],
     created() {
       this.$root.$on('boardConnect', (data) => {
         this.connect(data)
@@ -32,15 +33,12 @@ limitations under the License.*/
 
     data() {
       return {
-        reconnectInterval: null,
-        data: '',
-        office_id: ''
+        reconnectInterval: null
       }
     },
 
     methods: {
       connect(data) {
-        this.office_id = data
         socket = io(process.env.SOCKET_URL, {
           path: '/api/v1/socket.io'
         })
@@ -50,10 +48,9 @@ limitations under the License.*/
         this.addListeners()
       },
       join() {
-        console.log(socket.connected)
         socket.emit(
           'joinSmartboardRoom',
-          {office_id: this.office_id},
+          {office_id: this.smartboardData.office_number},
           () => {console.log('socket emit: "joinSmartboardRoom"')}
         )
       },

diff --git a/frontend/src/smartboard/call-by-name.vue b/frontend/src/smartboard/call-by-name.vue
@@ -40,7 +40,7 @@ const Axios = axios.create({
 
 export default {
   name: 'CallByName',
-  props: ['id'],
+  props: ['smartboardData'],
   mounted() {
     this.$root.$on('addToBoard',( data) => { this.updateBoard(data) })
     this.initializeBoard()
@@ -59,14 +59,8 @@ export default {
   },
 
   computed: {
-    office_id() {
-      if (this.id) {
-        return this.id
-      }
-      return 'notfound'
-    },
     url() {
-      return `/smartboard/?office_number=${this.office_id}`
+      return `/smartboard/?office_number=${this.smartboardData.office_number}`
     },
     waiting() {
       if (this.citizens && this.citizens.length > 0) {
@@ -79,7 +73,6 @@ export default {
   methods: {
     initializeBoard() {
       Axios.get(this.url).then( resp => {
-      console.log(resp.data)
         this.officeType = resp.data.office_type
         this.citizens = resp.data.citizens
         this.$root.$emit('boardConnect', this.office_id)

diff --git a/frontend/src/smartboard/call-by-ticket.vue b/frontend/src/smartboard/call-by-ticket.vue
@@ -78,7 +78,7 @@ export default {
     this.$root.$on('addToBoard',() => { this.updateBoard() })
     this.initializeBoard()
   },
-  props: ['id'],
+  props: ['smartboardData'],
   components: { Video },
   data() {
     return {
@@ -124,14 +124,8 @@ export default {
       }
       return 'lg-boardtable-body pr-3'
     },
-    office_id() {
-      if (this.id) {
-        return this.id
-      }
-      return 'notfound'
-    },
     url() {
-      return `/smartboard/?office_number=${this.office_id}`
+      return `/smartboard/?office_number=${this.smartboardData.office_number}`
     },
     invited() {
       if (this.citizens && this.citizens.length > 0) {

diff --git a/frontend/src/smartboard/index.vue b/frontend/src/smartboard/index.vue
@@ -17,11 +17,13 @@ limitations under the License.*/
     <div class="top-flex-div">
       <div class="flex-title">{{ date }} {{ time }}</div>
     </div>
-    <CallByTicket v-if="officetype==='callbyticket'"></CallByTicket>
-    <CallByName v-else-if="officetype==='callbyname' || officetype==='reception'"></CallByName>
+    <CallByTicket v-if="officetype==='callbyticket'"
+                  :smartboardData="{office_number}"></CallByTicket>
+    <CallByName v-else-if="officetype==='callbyname' || officetype==='reception'"
+                :smartboardData="{office_number}"></CallByName>
     <NonReception v-else-if="officetype==='nocallonsmartboard'"></NonReception>
     <div v-else>Please stand by...</div>
-    <BoardSocket></BoardSocket>
+    <BoardSocket :smartboardData="{office_number}"></BoardSocket>
   </div>
 </template>
 
@@ -51,6 +53,8 @@ export default {
     setInterval( () => { this.now() }, 3000)
   },
 
+  props: ['office_number'],
+
   components: { CallByName, CallByTicket, BoardSocket, NonReception },
 
   data() {
@@ -79,14 +83,6 @@ export default {
   },
 
   computed: {
-    office_number() {
-      let path = window.location.pathname.split('/')
-      if (path.length >= 3) {
-        return path[2]
-      } else {
-        return 'notfound'
-      }
-    },
     url() {
       return `/smartboard/?office_number=${this.office_number}`
     }
@@ -105,7 +101,7 @@ export default {
       this.time = d.toLocaleTimeString('en-CA', this.timeOpts)
     },
     getParameterByName(name, url) {
-      if (!url) url = window.location.href;
+      url = window.location.href;
 
       name = name.replace(/[\[\]]/g, '\\$&');
       var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url);