Finalized Active Calls View

Layout/default/VoiceCallActive/Index.php

@@ -34,7 +34,7 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
               small ref="table">
 
         <template v-slot:top-buttons>
-            <button type="button" class="btn btn-primary" @click="refresh">
+            <button type="button" class="btn btn-primary" @click="refresh" data-toggle="tooltip" data-placement="bottom" title="Refreshing to often will run into API-Rate Limits and will cause errors">
                 <template v-if="refreshLoading">
                     <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                 </template>
@@ -43,25 +43,57 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
                     Refresh
                 </template>
             </button>
+
+            <div class="d-flex">
+                <label style="margin-bottom: 0 !important;">
+                    <input type="checkbox" id="autoRefresh" data-toggle="toggle" data-size="lg" @change="clickedCheckBox(this.checked)">
+                    <span class="ml-2">Auto Refresh (5sec)</span>
+                </label>
+                <span style="width: 50px"></span>
+                <div class="voice-yellow p-2">Ringing</div>
+                <div class="voice-red p-2">Outgoing</div>
+                <div class="voice-green p-2">Ingoing</div>
+            </div>
         </template>
 
-        <!-- Slot to show DNS records button -->
         <template v-slot:answer_time="{ row }">
-            {{ new Date(row.answer_time).toLocaleString() }}
+            {{ !isNaN(new Date(row.answer_time)) ? new Date(row.answer_time).toLocaleString() : 'Call is not running' }}
         </template>
 
-        <!-- dst_device_extension -->
+        <template v-slot:status="{ row }">
+            <i v-if="!row.dst_device_extension" class="fas fa-phone-arrow-up-right"></i>
+            <i v-else class="fas fa-phone-arrow-down-left"></i>
+            {{ row.status }}
+        </template>
 
     </tt-table>
 </div>
 
 <!-- TODO: download from cdn to local -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
+
+<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
 
 <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
 
+<style>
+    .voice-green {
+        background-color: #6CAE75 !important
+    }
+    .voice-yellow {
+        background-color: #E8E288 !important
+    }
+    .voice-red {
+        background-color: #FF8360 !important
+    }
+
+    .table-sm td {
+        padding: 4px !important;
+    }
+</style>
+
 <script>
     new Vue({
         el: '#app',
@@ -69,18 +101,18 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
             window: window,
             VoiceCallActiveTableConfig: {
                 customRowClass: function (row) {
-                    if (!row.dst_device_extension) {
-                        return 'bg-danger';
-                    }
                     if (row.status.toLowerCase() === 'ringing') {
-                        return 'bg-warning';
+                        return 'voice-yellow';
+                    }
+                    if (!row.dst_device_extension) {
+                        return 'voice-red';
                     }
                     if (row.status.toLowerCase() === 'answered') {
-                        return 'bg-success';
+                        return 'voice-green';
                     }
                 },
                 headers: [
-                    {text: 'ID', key: 'id', filter: false},
+                    {text: 'Call ID', key: 'id', filter: false},
                     {text: 'Status', key: 'status', filter: false},
                     {text: 'Answer Time', key: 'answer_time', filter: false},
                     {text: 'Duration', key: 'duration', filter: false},
@@ -93,13 +125,29 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
                 tableHeader: 'Active Voice Calls',
             },
             refreshLoading: false,
+            autoRefresh: null,
+        },
+        mounted() {
+            $('[data-toggle="tooltip"]').tooltip();
+
+            const _this = this;
+            $('#autoRefresh').change(function () {
+                console.log(this.checked);
+                if (this.checked) {
+                    _this.autoRefresh = setInterval(function () {
+                        _this.refresh();
+                    }, 5000);
+                } else {
+                    clearInterval(_this.autoRefresh);
+                }
+            })
         },
-        mounted() {},
         methods: {
             async refresh() {
                 this.refreshLoading = true;
                 this.$refs.table.loading = true;
                 await this.$refs.table.fetchData();
+                $('.tooltip').tooltip('hide');
                 this.$refs.table.loading = false;
                 this.refreshLoading = false;
             },