111 lines
4.2 KiB
PHP
111 lines
4.2 KiB
PHP
<?php /** @noinspection PhpUndefinedClassInspection
|
|
* @var string $mfLayoutPackage
|
|
* @var TYPE_NAME $git_merge_ts
|
|
*/
|
|
|
|
//additional css /css/views/RaspberryDisplay.css
|
|
|
|
$JSGlobals = ["BASE_URL" => self::getUrl("VoiceCallActive"),
|
|
"DASHBOARD_URL" => self::getUrl("Dashboard"),
|
|
"MFAPPNAME" => MFAPPNAME_SLUG,
|
|
"PAGE_TITLE" => "Active Voice Calls",
|
|
"PATH" => [
|
|
["text" => MFAPPNAME_SLUG, "href" => self::getUrl("Dashboard")],
|
|
["text" => "Active Voice Calls", "href" => self::getUrl("VoiceCallActive")]
|
|
],
|
|
"VOICE_CALL_ACTIVE_API_URL" => self::getUrl("VoiceCallActive/api"),
|
|
];
|
|
|
|
$additionalJS = ["plugins/vue/vue.js",
|
|
"plugins/axios/axios.min.js",
|
|
"plugins/vue/tt-components/tt-page-title.js",
|
|
"plugins/vue/tt-components/tt-table.js",
|
|
];
|
|
$additionalCSS = [
|
|
'plugins/vue/tt-components/css/tt-table.css',
|
|
];
|
|
|
|
include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php"); ?>
|
|
|
|
<div id="app">
|
|
<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'" :table-config="VoiceCallActiveTableConfig"
|
|
small ref="table">
|
|
|
|
<template v-slot:top-buttons>
|
|
<button type="button" class="btn btn-primary" @click="refresh">
|
|
<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>
|
|
</template>
|
|
|
|
<!-- Slot to show DNS records button -->
|
|
<template v-slot:answer_time="{ row }">
|
|
{{ new Date(row.answer_time).toLocaleString() }}
|
|
</template>
|
|
|
|
<!-- dst_device_extension -->
|
|
|
|
</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">
|
|
|
|
<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" />
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
window: window,
|
|
VoiceCallActiveTableConfig: {
|
|
customRowClass: function (row) {
|
|
if (!row.dst_device_extension) {
|
|
return 'bg-danger';
|
|
}
|
|
if (row.status.toLowerCase() === 'ringing') {
|
|
return 'bg-warning';
|
|
}
|
|
if (row.status.toLowerCase() === 'answered') {
|
|
return 'bg-success';
|
|
}
|
|
},
|
|
headers: [
|
|
{text: '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},
|
|
{text: 'Source', key: 'src', filter: false},
|
|
{text: 'Device Type', key: 'device_type', filter: false},
|
|
{text: 'Destination', key: 'localized_dst', filter: false},
|
|
{text: 'Destination User', key: 'dst_user', filter: false},
|
|
{text: 'Destination Device Extension', key: 'dst_device_extension', filter: false},
|
|
],
|
|
tableHeader: 'Active Voice Calls',
|
|
},
|
|
refreshLoading: false,
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
async refresh() {
|
|
this.refreshLoading = true;
|
|
this.$refs.table.loading = true;
|
|
await this.$refs.table.fetchData();
|
|
this.$refs.table.loading = false;
|
|
this.refreshLoading = false;
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>
|
|
|