113 lines
4.7 KiB
JavaScript
113 lines
4.7 KiB
JavaScript
Vue.component('VoiceCallActive', {
|
|
//language=Vue
|
|
template: `
|
|
<div>
|
|
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
|
|
|
|
<tt-table :fetch-url="window['TT_CONFIG']['VOICE_CALL_ACTIVE_API_URL'] + '?do=getActiveCalls'"
|
|
:config="VoiceCallActiveTableConfig"
|
|
small ref="table">
|
|
|
|
<template v-slot:top-buttons>
|
|
<button type="button" class="btn btn-primary" @click="refresh" data-toggle="tooltip" data-placement="bottom"
|
|
title="Refreshing too 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>
|
|
<template v-else>
|
|
<i class="fas fa-sync-alt"></i>
|
|
Refresh
|
|
</template>
|
|
</button>
|
|
|
|
<div class="d-flex">
|
|
<label style="margin-bottom: 0 !important;">
|
|
<input type="checkbox" id="autoRefresh" data-toggle="toggle" data-size="lg">
|
|
<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>
|
|
|
|
<template v-slot:answer_time="{ row }">
|
|
{{ !isNaN(new Date(row.answer_time)) ? window.moment(row.answer_time, 'YYYY-MM-DD HH:mm:ss Z').format('DD.MM.YYYY HH:mm:ss') : 'Call is not running' }}
|
|
</template>
|
|
|
|
<template v-slot:status="{ row }">
|
|
<i v-if="!row.dst_device_extension && row.status !== 'Ringing'" class="fas fa-phone-arrow-up-right"></i>
|
|
<i v-else-if="!row.dst_device_extension && row.status === 'Ringing'"
|
|
class="fas fa-phone-arrow-up-right fa-shake"></i>
|
|
<i v-else-if="row.status === 'Ringing'" class="fas fa-phone-arrow-down-left fa-shake"></i>
|
|
<i v-else class="fas fa-phone-arrow-down-left"></i>
|
|
{{ row.status }}
|
|
</template>
|
|
|
|
</tt-table>
|
|
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
window: window,
|
|
VoiceCallActiveTableConfig: {
|
|
customRowClass: function (row) {
|
|
if (row.status.toLowerCase() === 'ringing') {
|
|
return 'voice-yellow';
|
|
}
|
|
if (!row.dst_device_extension) {
|
|
return 'voice-red';
|
|
}
|
|
if (row.status.toLowerCase() === 'answered') {
|
|
return 'voice-green';
|
|
}
|
|
},
|
|
headers: [
|
|
{text: 'Call ID', key: 'id', filter: false, sortable: false},
|
|
{text: 'Status', key: 'status', filter: false, sortable: false},
|
|
{text: 'Answer Time', key: 'answer_time', filter: false, sortable: false},
|
|
{text: 'Duration', key: 'duration', filter: false, sortable: false},
|
|
{text: 'Source', key: 'src', filter: false, sortable: false},
|
|
{text: 'Device Type', key: 'device_type', filter: false, sortable: false},
|
|
{text: 'Destination', key: 'localized_dst', filter: false, sortable: false},
|
|
{text: 'Destination User', key: 'dst_user', filter: false, sortable: false},
|
|
{text: 'Destination Device Extension', key: 'dst_device_extension', filter: false, sortable: false},
|
|
],
|
|
tableHeader: 'Active Voice Calls',
|
|
key: 'VoiceCallActive',
|
|
},
|
|
refreshLoading: false,
|
|
autoRefresh: null,
|
|
}
|
|
},
|
|
mounted() {
|
|
//TODO: create vue tooltip component
|
|
$('[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);
|
|
}
|
|
})
|
|
},
|
|
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;
|
|
},
|
|
}
|
|
|
|
})
|