Pro ringer on/off feature

resources/views/app/video/call.blade.php

@@ -25,10 +25,9 @@
             </a>
         </div>
         @endif
+
+        {{--
         <div v-show="!videoActive" class="align-items-center justify-content-center py-3 border-bottom" style="display: flex;">
-{{--            <span class="mr-3">--}}
-{{--                {{ $pro->name_display }} | PRO--}}
-{{--            </span>--}}
             <button class="btn btn-sm btn-primary px-4 font-weight-bold stag-primary-bg stag-primary-border"
                     v-on:click.prevent="nextPatient()"
                     :disabled="client || checkingForNextPatient || started || !(patientInQueue && !started)">Next Patient</button>
@@ -39,6 +38,21 @@
                 <i class="fa fa-circle"></i>
             </span>
         </div>
+        --}}
+
+        <div class="py-2 d-flex align-items-center justify-content-center border-bottom">
+            <a href="#" v-if="ringer" v-on:click.prevent="toggleRinger()"
+               class="font-weight-bold btn btn-sm btn-success">
+                Ringer
+                <i class="ml-1 fa fa-volume-up"></i>
+            </a>
+            <a href="#" v-if="!ringer" v-on:click.prevent="toggleRinger()"
+               class="font-weight-bold btn btn-sm btn-warning">
+                Ringer
+                <i class="ml-1 fa fa-volume-mute"></i>
+            </a>
+        </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>
 
         <div class="" v-show="videoActive">
@@ -98,8 +112,26 @@
                 videoActive: false,
 
                 heartbeatTimer: false,
+
+                ringer: {{ $pro->is_ring_on ? 'true' : 'false' }},
             },
             methods: {
+                toggleRinger: function() {
+                    let self = this, endPoint = this.ringer ? 'turnOffRing' : 'turnOnRing';
+                    $.post('/api/pro/' + endPoint, function(_data) {
+                        if(_data && _data.success) {
+                            self.ringer = !self.ringer;
+                        }
+                        else {
+                            if(_data.message) {
+                                toastr.error(_data.message);
+                            }
+                            else {
+                                toastr.error('Unable to change ringer status');
+                            }
+                        }
+                    }, 'json');
+                },
                 pollForNextPatient: function() {
                     if(!this.started) {
                         this.nextPatient(true);