Poll for next-patient and alert via UI

public/css/meeting.css

@@ -186,3 +186,22 @@ body .OT_fit-mode-cover .OT_video-element {
     height: 50px;
     font-size: 120%;
 }
+
+.patient-in-q-alert {
+    -webkit-animation: blink 1s linear infinite;
+    -moz-animation: blink 1s linear infinite;
+    animation: blink 1s linear infinite;
+    opacity: 0;
+}
+@-moz-keyframes blink {
+    50% { opacity: 1; }
+    100% { opacity: 0; }
+}
+@-webkit-keyframes blink {
+    50% { opacity: 1; }
+    100% { opacity: 0; }
+}
+@keyframes blink {
+    50% { opacity: 1; }
+    100% { opacity: 0; }
+}

resources/views/meet.blade.php

@@ -15,15 +15,21 @@
         </h5>--}}
 
         @if(!$guest)
-            <div v-if="!started" class="d-flex align-items-center justify-content-center py-3 border-bottom">
+            <div class="d-flex align-items-center justify-content-center py-3 border-bottom">
                 <span class="mr-3">
                     {{ $pro->name_display }} | {{ $pro->is_video_visit_assistant ? 'ASSISTANT' : 'MCP' }}
                 </span>
                 <button class="btn btn-sm btn-primary px-4 font-weight-bold"
                         v-on:click.prevent="nextPatient()"
-                        :disabled="client || checkingForNextPatient">Next Patient</button>
+                        :disabled="client || checkingForNextPatient || started">Next Patient</button>
+                <span v-if="patientInQueue && !started" class="patient-in-q-alert text-warning text-sm ml-2 small">
+                    <i class="fa fa-circle"></i>
+                </span>
+                <span v-if="!patientInQueue && !started" class="text-success text-sm ml-2 small">
+                    <i class="fa fa-circle"></i>
+                </span>
             </div>
-            <div v-if="!started && noNextPatient" class="bg-light rounded text-center py-1 font-weight-bold text-sm">@{{ noNextPatient }}</div>
+            <div v-if="!started && noNextPatient" class="bg-light rounded text-center py-1 font-weight-bold text-sm my-3 mx-3">@{{ noNextPatient }}</div>
         @endif
 
         <div class="">
@@ -90,33 +96,44 @@
                 otSession: false,
 
                 selfUserType: false,
+                patientInQueue: false,
             },
             methods: {
-                nextPatient: function() {
+                pollForNextPatient: function() {
+                    if(!this.started) {
+                        this.nextPatient(true);
+                    }
+                },
+                nextPatient: function(_pollOnly = false) {
                     var self = this;
-                    this.checkingForNextPatient = true;
+                    if(!_pollOnly) this.checkingForNextPatient = true;
                     $.post('/api/client/getNextClientForVideoVisit', {}, function(_data) {
-                        self.checkingForNextPatient = false;
-                        if(!_data.success) {
-                            self.noNextPatient = _data.message;
-                            window.setTimeout(function() {
-                                self.noNextPatient = false;
-                            }, 2000);
+                        if(_pollOnly) {
+                            self.patientInQueue = _data.success;
                         }
                         else {
-                            // get ot session key from client record
-                            self.client = true;
-                            self.clientUid = _data.data;
-                            self.getOpenTokSessionId(function() {
-                                self.selfName = 'Pro'; // TODO: replace with name of authed pro
-                                $.post('/api/openTok/getClientToken', {
-                                    opentokSessionId: self.otSessionId,
-                                    name: self.selfName
-                                }, function (_data) {
-                                    self.selfToken = _data.data;
-                                    self.initOpenTok();
+                            self.checkingForNextPatient = false;
+                            if(!_data.success) {
+                                self.noNextPatient = _data.message;
+                                window.setTimeout(function() {
+                                    self.noNextPatient = false;
+                                }, 2000);
+                            }
+                            else {
+                                // get ot session key from client record
+                                self.client = true;
+                                self.clientUid = _data.data;
+                                self.getOpenTokSessionId(function() {
+                                    self.selfName = 'Pro'; // TODO: replace with name of authed pro
+                                    $.post('/api/openTok/getClientToken', {
+                                        opentokSessionId: self.otSessionId,
+                                        name: self.selfName
+                                    }, function (_data) {
+                                        self.selfToken = _data.data;
+                                        self.initOpenTok();
+                                    });
                                 });
-                            });
+                            }
                         }
                     }, 'json');
                 },
@@ -452,6 +469,15 @@
                     return false;
                 });
 
+                @if(!$guest)
+
+                // poll for new patients and alert
+                window.setInterval(function() {
+                    self.pollForNextPatient();
+                }, 5000);
+
+                @endif
+
             }
         });
     </script>