Files
thetool/Layout/default/VoiceCallHistory/Index.php
2024-05-08 12:54:26 +00:00

98 lines
3.8 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("Domain"),
"DASHBOARD_URL" => self::getUrl("Dashboard"),
"MFAPPNAME" => MFAPPNAME_SLUG,
"PAGE_TITLE" => "Domains",
"PATH" => [
["text" => MFAPPNAME_SLUG, "href" => self::getUrl("Dashboard")],
["text" => "Voice Calls History", "href" => self::getUrl("VoiceCallHistory")]
],
"VOICE_CALL_HISTORY_API_URL" => self::getUrl("VoiceCallHistory/api"),
];
$additionalJS = [
"plugins/vue/vue.js",
"plugins/axios/axios.min.js",
"plugins/moment/moment.min.js",
"plugins/daterangepicker/daterangepicker.js",
"plugins/xlsx/xlsx.min.js",
"plugins/vue/tt-components/tt-table.js",
"plugins/vue/tt-components/tt-page-title.js",
"plugins/vue/tt-components/tt-select.js",
"plugins/vue/tt-components/tt-datepicker.js",
"plugins/vue/tt-components/tt-input.js",
"plugins/vue/tt-components/tt-autocomplete.js",
"plugins/vue/tt-components/tt-icon-select.js",
"plugins/vue/tt-components/tt-number-range.js",
];
$additionalCSS = [
"plugins/daterangepicker/daterangepicker.css",
'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_HISTORY_API_URL'] + '?do=getCalls'" :config="VoiceCallHistoryTableConfig"
small ssr ref="table">
<template v-slot:top-buttons>
<button type="button" class="btn btn-primary" @click="importCallsFromToday">
<template v-if="importCallsFromTodayLoading">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
</template>
<template v-else>
<i class="fas fa-sync-alt"></i>
Re-Import Calls from Today
</template>
</button>
</template>
</tt-table>
</div>
<script>
new Vue({
el: '#app',
data: {
window: window,
VoiceCallHistoryTableConfig: {
headers: [
{text: "Call-ID", key: "uid"},
{text: "Voice Account", key: "voice_account"},
{text: "Time Range", key: "start", filter: "date"},
{text: "Source", key: "source"},
{text: "Destination", key: "destination"},
{text: "Billable", key: "billable", filter: "iconSelect", filterOptions: [
{value: 1, text: 'Yes', icon: 'fas fa-check text-success'},
{value: 0, text: 'No', icon: 'fas fa-times text-danger'}
]},
{text: "Duration", key: "duration"},
],
tableHeader: 'Voice Call History',
key: 'VoiceCallHistory',
},
importCallsFromTodayLoading: false,
},
mounted() {},
methods: {
async importCallsFromToday() {
this.importCallsFromTodayLoading = true;
const response = await axios.get(window['TT_CONFIG']['VOICE_CALL_HISTORY_API_URL'] + '?do=importCallsFromToday');
window.notify(response.data.status === 'success' ? 'success' : 'error', response.data.message);
await this.$refs.table.fetchData();
this.importCallsFromTodayLoading = false;
},
}
})
</script>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>