resolved conflict

resources/views/app/current-work.blade.php

@@ -3,7 +3,7 @@
     <div class="current-work-indicator" title="Started: {{ friendly_time($currentWork->start_time) }}">
         <i class="fa fa-folder-open mr-1"></i>
         <a class="text-white font-weight-bold text-sm" href="/patients/view/{{ $currentWork->client->uid }}">
-            {{ $currentWork->client->displayName() }}
+           {{ $currentWork->client->displayName() }}
         </a>
     </div>
 @endif

resources/views/app/patient/partials/mcp-queue.blade.php

@@ -0,0 +1,60 @@
+<div class="border-top patient-queue mcp-theme-1" id="queueComponent" v-cloak>
+    <div class="bg-secondary text-white font-weight-bold text-center py-1" v-if="items.length > 0">
+        @{{ items.length }} patient@{{ items.length > 1 ? 's' : '' }} in the queue
+    </div>
+    <div class="bg-secondary text-white font-weight-bold text-center py-1" v-if="items.length === 0">
+        No patients in the queue
+    </div>
+    <div v-if="items && items.length" class="d-flex align-items-center my-1">
+        <div v-for="item in items">
+            <div class="queue-item border border-primary rounded mx-1" :title="item.name">
+                <div class="patient-avatar mb-1 text-dark">@{{ item.initials }}</div>
+                <div class="font-weight-bold small text-nowrap text-ellipsis">@{{ item.name }}</div>
+            </div>
+            <button class="btn btn-sm btn-primary mt-1 text-white font-weight-bold py-0 mx-auto d-block"
+                    v-on:click.prevent="claim(item.clientUid)">Claim</button>
+        </div>
+    </div>
+</div>
+<script>
+    (function() {
+        window.queueComponent = new Vue({
+            el: '#queueComponent',
+            data: {
+                items: []
+            },
+            mounted: function() {
+                let self = this;
+                this.refresh();
+                window.setInterval(function() {
+                    self.refresh();
+                }, 15000); // once in 15 seconds
+            },
+            methods: {
+                refresh: function() {
+                    let self = this;
+                    $.get('/patients-in-queue', function(_data) {
+                        self.items = _data;
+                    }, 'json');
+                },
+                claim: function(_uid) {
+                    $.post('/api/mcpRequest/claim', {clientUid: _uid}, function(_data) {
+                        if(_data && _data.success) {
+                            // open patient in LHS
+                            window.top.openInLHS('/patients/view/' + _uid);
+                            // open patient video in RHS
+                            window.top.openInRHS('/pro/meet/' + _uid);
+                        }
+                        else {
+                            if (_data.message) {
+                                window.top.toastr.error(_data.message);
+                            } else {
+                                window.top.toastr.error('Unable to claim the patient');
+                            }
+                        }
+                    }, 'json');
+                }
+            }
+        });
+    })();
+</script>

resources/views/app/video/call-agora-v2.blade.php

@@ -117,26 +117,6 @@
         @endif
 
     </div>
-
-    <div class="border-top patient-queue mcp-theme-1" id="queueComponent" v-cloak>
-        <div class="bg-secondary text-white font-weight-bold text-center py-1" v-if="items.length > 0">
-            @{{ items.length }} patient@{{ items.length > 1 ? 's' : '' }} in the queue
-        </div>
-        <div class="bg-secondary text-white font-weight-bold text-center py-1" v-if="items.length === 0">
-            No patients in the queue
-        </div>
-        <div v-if="items && items.length" class="d-flex align-items-center my-1">
-            <div v-for="item in items">
-                <div class="queue-item border border-primary rounded mx-1" :title="item.name">
-                    <div class="patient-avatar mb-1 text-dark">@{{ item.initials }}</div>
-                    <div class="font-weight-bold small text-nowrap text-ellipsis">@{{ item.name }}</div>
-                </div>
-                <button class="btn btn-sm btn-primary mt-1 text-white font-weight-bold py-0 mx-auto d-block"
-                        v-on:click.prevent="claim(item.clientUid)">Claim</button>
-            </div>
-        </div>
-    </div>
-
     <script>
         (function () {
             window.proCallComponent = new Vue({
@@ -716,47 +696,8 @@
             });
         })();
     </script>
-    <script>
-        (function() {
-            window.queueComponent = new Vue({
-                el: '#queueComponent',
-                data: {
-                    items: []
-                },
-                mounted: function() {
-                    let self = this;
-                    this.refresh();
-                    window.setInterval(function() {
-                        self.refresh();
-                    }, 15000); // once in 15 seconds
-                },
-                methods: {
-                    refresh: function() {
-                        let self = this;
-                        $.get('/patients-in-queue', function(_data) {
-                            self.items = _data;
-                        }, 'json');
-                    },
-                    claim: function(_uid) {
-                        $.post('/api/mcpRequest/claim', {clientUid: _uid}, function(_data) {
-                            if(_data && _data.success) {
-                                // open patient in LHS
-                                window.top.openInLHS('/patients/view/' + _uid);
-                                // open patient video in RHS
-                                window.top.openInRHS('/pro/meet/' + _uid);
-                            }
-                            else {
-                                if (_data.message) {
-                                    window.top.toastr.error(_data.message);
-                                } else {
-                                    window.top.toastr.error('Unable to claim the patient');
-                                }
-                            }
-                        }, 'json');
-                    }
-                }
-            });
-        })();
-    </script>
+
+    @include('app/patient/partials/mcp-queue')
+
 </body>
 </html>

resources/views/layouts/patient.blade.php

@@ -593,7 +593,6 @@
                     </div>
                     {{--<div class="text-container border-bottom d-flex align-items-center mcp-theme-1 px-3">
 
-
                         @if($patient->mcp_pro_id !== $pro->id && $patient->active_mcp_request_id)
                             <div moe relative class="ml-2">
                                 <a href="" start show class="btn btn-sm btn-success text-white font-weight-bold small">Claim as MCP</a>

resources/views/layouts/template.blade.php

@@ -61,6 +61,14 @@
     {{-- pdfjs --}}
     <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
 
+    {{-- WebSockets --}}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"
+            integrity="sha512-5yJ548VSnLflcRxWNqVWYeQZnby8D8fJTmYRLyvs445j1XmzR8cnWi85lcHx3CUEeAX+GrK3TqTfzOO6LKDpdw=="
+            crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"
+            integrity="sha512-iKDtgDyTHjAitUDdLljGhenhPwrbBfqTKWO1mkhSFH3A7blITC9MhYon6SjnMhp4o0rADGw9yAC6EW4t5a4K3g=="
+            crossorigin="anonymous"></script>
+
     @yield('head')
 </head>
 
@@ -265,38 +273,38 @@
                 fastLoad('/patients/view/' + $(this).attr('data-target-uid'), true, false, false);
                 return false;
             });
-
-            window.setInterval(function() {
-                $.get('/current-work', function(_data) {
-                    $('.current-work').html(_data);
-                    initFastLoad($('.current-work'));
-                });
-            }, 15000); // once in 15 seconds
         });
     </script>
     <script src="/js/stag-popup.js"></script>
     <script src="/js/option-list.js"></script>
     @include('app/pdf/viewer')
     <script>
-        // connect to WS
-        self.socket = new SockJS('http://localhost:8080/ws');
-        self.socketClient = Stomp.over(self.socket);
-        self.socketClient.connect({}, function(frame) {
-            console.log('Connected: ' + frame);
-
-            self.socketClient.subscribe("/user/topic/registration", function(message) {
-                console.log("Receiving message")
-                console.log("registration result:", message.body);
-            });
+        let socket = new SockJS("{{ config('app.backend_ws_url') }}");
+        window.socketClient = Stomp.over(socket);
+        window.socketClient.connect({}, (frame) => {
 
-            // join self
-            console.log("Sending message")
-            self.socketClient.send("/app/register", {},
+            window.socketClient.send("/app/register", {},     // register self
                 JSON.stringify({
                     sessionKey: '{{$performer->session_key}}'
                 })
             );
 
+            window.socketClient.subscribe("/user/topic/newMcpRequest", function(message) {
+                console.log("Received new mcp request: ", message);
+            }); // once in 15 seconds
+
+            window.socketClient.subscribe("/user/topic/removeMcpRequest", function(message) {
+                console.log("An mcp request has been removed: ", message);
+            }); 
+
+            window.socketClient.subscribe("/user/topic/myCurrentProClientWork", function(message) {
+                console.log("You have a client pro work: ", message);
+                $.get('/current-work', function(_data) {
+                    $('.current-work').html(_data);
+                    initFastLoad($('.current-work'));
+                });
+            });   
+
         });
     </script>
 </body>