Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Updated TheTool Frontend Framework & Table

Browse Source
This commit is contained in:
Luca Haid
2024-05-08 12:54:26 +00:00
parent 1e57d983b7
commit 58e124a461
46 changed files with 1364 additions and 2535 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Layout/default/DocumentationCheck/DeviceTest.php
+101
View File
@@ -0,0 +1,101 @@
<?php /** @noinspection PhpUndefinedClassInspection
* @var string $mfLayoutPackage
* @var TYPE_NAME $git_merge_ts
*/
$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")]
],
"DEVICE_API_URL" => self::getUrl("Device/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']['DEVICE_API_URL'] + '?do=getDevices'" :config="DeviceTableConfig" small
ref="table">
<template v-slot:top-buttons>
<button type="button" class="btn btn-primary" @click="window.alert(1)">
<i class="fas fa-plus"></i>Neues Device anlegen
</button>
</template>
<template v-slot:actions="{row}">
<a @click="window.alert(row.id)"><i class="far fa-edit text-primary" title="Bearbeiten"></i></a>
<a @click="window.alert(row.id)"><i class="fas fa-trash text-danger" title="Löschen"></i></a>
</template>
<template v-slot:power="{row}">
{{ parseInt(row.power) }} Watt
</template>
<template v-slot:price="{row}">
{{ parseInt(row.price) }} €
</template>
<template v-slot:locationText="{row}">
<a :title="row.locationText" :href="row.locationUrl" v-text="row.locationText" target="_blank"></a>
</template>
</tt-table>
</div>
<script>
new Vue({
el: '#app',
data: {
window: window,
DeviceTableConfig: {
headers: [
{text: "Device Name", key: "name"},
{text: "Geräte Typ", key: "devicetype"},
{text: "Hersteller", key: "devicemanufactor"},
{text: "Pop/Adresse", key: "locationText"},
{text: "IP-Adresse", key: "ip"},
{text: "MAC-Adresse", key: "mac"},
{text: "Seriennummer", key: "serial"},
{text: "Preis", key: "price", filter: "numberRange"},
{text: "max. Leistung", key: "power", filter: "numberRange"},
{
text: "Backup", key: "backup", filter: "iconSelect", filterOptions: [
{value: "ok", text: "Letztes Backup jünger als 48 Stunden", icon: "fa-regular fa-circle-check text-success"},
{value: "aged", text: "Letztes Backup älter als 48 Stunden", icon: "fa-regular fa-circle-xmark text-danger"},
{value: "na", text: "Kein Backup", icon: "fa-regular fa-ban text-primary"}
]},
{text: "Aktionen", key: "actions"},
],
tableHeader: 'Devices',
key: 'Device',
},
},
})
</script>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>
Layout/default/DocumentationCheck/Index.php
+66
View File
@@ -0,0 +1,66 @@
<?php /** @noinspection PhpUndefinedClassInspection
* @var string $mfLayoutPackage
* @var TYPE_NAME $git_merge_ts
*/
//additional css /css/views/RaspberryDisplay.css
$JSGlobals = ["BASE_URL" => self::getUrl("DocumentationCheck"),
"DASHBOARD_URL" => self::getUrl("Dashboard"),
"MFAPPNAME" => MFAPPNAME_SLUG,
"PAGE_TITLE" => "Documentation Check",
"PATH" => [
["text" => MFAPPNAME_SLUG, "href" => self::getUrl("Dashboard")],
["text" => "Documentation Check", "href" => self::getUrl("DocumentationCheck")]
],
"DOCUMENTATION_CHECK_API_URL" => self::getUrl("DocumentationCheck/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']['DOCUMENTATION_CHECK_API_URL'] + '?do=getDocumentationFails'" :table-config="DocumentationCheckTableConfig" small ref="table">
</tt-table>
</div>
<script>
new Vue({
el: '#app',
data: {
window: window,
DocumentationCheckTableConfig: {
headers: [
{text: 'Device Name', key: 'deviceName', filter: false},
{text: 'Device IP', key: 'deviceIP', filter: false},
{text: 'Zabbix Host Name', key: 'zabbixHostName', filter: false},
{text: 'Zabbix Host IP', key: 'zabbixHostIP', filter: false},
{text: 'Device In Zabbix', key: 'checkDeviceInZabbix', filter: false},
{text: 'Device Has ICMP Ping', key: 'checkDeviceHasICMPPing', filter: false},
{text: 'Device Has Same Name', key: 'checkDeviceHasSameName', filter: false},
{text: 'Device Has Same IP', key: 'checkDeviceHasSameIP', filter: false},
],
tableHeader: 'Monitoring Dokumentations Check',
},
refreshLoading: false,
autoRefresh: null,
},
mounted() {
$('[data-toggle="tooltip"]').tooltip();
},
})
</script>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>
Layout/default/Domain/Index.php
+33 -28
View File
@@ -17,12 +17,23 @@ $JSGlobals = ["BASE_URL" => self::getUrl("Domain"),
"DOMAIN_API_URL" => self::getUrl("Domain/api"),
];
$additionalJS = ["plugins/vue/vue.js",
$additionalJS = [
"plugins/vue/vue.js",
"plugins/axios/axios.min.js",
"plugins/vue/tt-components/tt-page-title.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',
];
@@ -32,8 +43,8 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
<!-- start page title -->
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
<tt-table :fetch-url="window['TT_CONFIG']['DOMAIN_API_URL'] + '?do=getDomains'" :table-config="domainsTableConfig"
small ref="table">
<tt-table :fetch-url="window['TT_CONFIG']['DOMAIN_API_URL'] + '?do=getDomains'" :config="domainsTableConfig"
small ssr ref="table">
<template v-slot:top-buttons>
<button type="button" class="btn btn-primary" @click="reloadDomains">
<template v-if="reloadDomainsLoading">
@@ -70,18 +81,6 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
</button>
</template>
<!-- Slot to show if Domain is in Plesk -->
<template v-slot:pleskid="{ row }">
<i v-if="row.pleskId !== null" class="fas fa-check text-success"></i>
<i v-else class="fas fa-times text-danger"></i>
</template>
<!-- Convert all Dates to human readable format -->
<template v-slot:crdate="{ row }">{{ new Date(row.crDate * 1000).toLocaleDateString() }}</template>
<template v-slot:exdate="{ row }">{{ new Date(row.exDate * 1000).toLocaleDateString() }}</template>
<template v-slot:redate="{ row }">{{ new Date(row.reDate * 1000).toLocaleDateString() }}</template>
<template v-slot:update="{ row }">{{ new Date(row.upDate * 1000).toLocaleDateString() }}</template>
<!-- Registrant Admin Tech Billing from domainContacts -->
<template v-slot:registrant="{ row }">
{{ domainContacts[row.registrant] ? domainContacts[row.registrant]["name"] : '' }}
@@ -159,19 +158,25 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
domainsTableConfig() {
const base = {
headers: [
{text: "ID", key: "inwxRoId", "filter": false},
{text: "DNS", key: "inwxRoId", filter: false, sortable: false},
{text: "Domain", key: "domain"},
{text: "Plesk", key: "pleskId", filter: false},
{text: "Created Date", key: "crDate", filter: false},
{text: "Expiration Date", key: "exDate", filter: false},
{text: "Renewal Date", key: "reDate", filter: false},
{text: "Updated Date", key: "upDate", filter: false},
{text: "Transfer Lock", key: "transferLock"},
{text: "Authorization Code", key: "authCode"},
{text: "Registrant ID", key: "registrant"},
{text: "Admin ID", key: "admin"},
{text: "Tech ID", key: "tech"},
{text: "Billing ID", key: "billing"},
{text: "Plesk", key: "pleskId", filter: 'iconSelect', filterOptions: [
{value: 1, text: 'Yes', icon: 'fas fa-check text-success'},
{value: 0, text: 'No', icon: 'fas fa-times text-danger'}
], sortable: false},
{text: "Created Date", key: "crDate", filter: "date"},
{text: "Expiration Date", key: "exDate", filter: "date"},
{text: "Renewal Date", key: "reDate", filter: "date"},
{text: "Updated Date", key: "upDate", filter: "date"},
{text: "Transfer Lock", key: "transferLock", filter: 'iconSelect', filterOptions: [
{value: 1, text: 'Locked', icon: 'fas fa-lock text-danger'},
{value: 0, text: 'Unlocked', icon: 'fas fa-unlock text-success'}
]},
{text: "Authorization Code", key: "authCode", sortable: false},
{text: "Registrant ID", key: "registrant", sortable: false},
{text: "Admin ID", key: "admin", sortable: false},
{text: "Tech ID", key: "tech", sortable: false},
{text: "Billing ID", key: "billing", sortable: false},
{text: "Name Servers", key: "ns"}
],
tableHeader: 'Bestellungen',
Layout/default/HistoricTicket/Index.php
+54 -17
View File
@@ -16,12 +16,23 @@ $JSGlobals = ["BASE_URL" => self::getUrl("Domain"),
"HISTORIC_TICKET_API_URL" => self::getUrl("HistoricTicket/api"),
];
$additionalJS = ["plugins/vue/vue.js",
$additionalJS = [
"plugins/vue/vue.js",
"plugins/axios/axios.min.js",
"plugins/vue/tt-components/tt-page-title.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',
];
@@ -32,8 +43,8 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
<tt-table :fetch-url="window['TT_CONFIG']['HISTORIC_TICKET_API_URL'] + '?do=getHistoricTickets'"
:table-config="historicTicketTableConfig"
small ref="table">
:config="historicTicketTableConfig"
small ssr ref="table">
<template v-slot:top-buttons>
<!-- add input for global search with label and bootstrap class-->
<div class="input-group mb-3">
@@ -74,11 +85,11 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
<div class="modal-body">
<tt-table
:fetch-url="`${window['TT_CONFIG']['HISTORIC_TICKET_API_URL']}?do=findHistoricTicket&query=${globalSearch}`"
:table-config="globalSearchModalTableConfig"
:config="globalSearchModalTableConfig"
small ref="table">
<template v-slot:ctime="{ row }">
{{ new Date(row.ctime * 1000).toLocaleString() }}
{{ window.moment(row.ctime * 1000).format('DD.MM.YYYY HH:mm') }}
</template>
<template v-slot:ticket_number="{ row }">
@@ -136,26 +147,52 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
globalSearchModal: false,
globalSearchModalTableConfig: {
headers: [
{text: 'Ticket Number', key: 'ticket_number', filter: false},
{text: 'Erstellt', key: 'ctime', filter: false},
{text: 'Subject', key: 'ticket_subject', filter: false},
{text: 'Message', key: 'ticket_message', filter: false},
{text: 'Ticket Number', key: 'ticket_number', filter: false, sortable: false},
{text: 'Erstellt', key: 'ctime', filter: false, sortable: false},
{text: 'Subject', key: 'ticket_subject', filter: false, sortable: false},
{text: 'Message', key: 'ticket_message', filter: false, sortable: false},
],
tableHeader: 'Suchergebnisse',
key: 'HistoricTicketGlobalSearch',
},
historicTicketTableConfig: {
headers: [
{text: 'Ticket Number', key: 'ticket_number', filter: 'search'},
{text: 'Erstellt', key: 'ctime', filter: false},
{text: 'Subject', key: 'subject', filter: 'search'},
{text: 'Type', key: 'type', filter: 'search'},
{text: 'Status', key: 'status', filter: 'search'},
{text: 'Name', key: 'first_name', filter: 'search'},
{text: 'Email', key: 'email', filter: 'search'},
{text: 'Phone', key: 'phone', filter: 'search'},
{text: 'Subject', key: 'subject', filter: 'search', sortable: false},
{text: 'Type', key: 'type', filter: 'select', filterOptions: [
{value: 'BACKOFFICE', text: 'BACKOFFICE'},
{value: 'KUNDENANFRAGEN', text: 'KUNDENANFRAGEN'},
{value: 'STÖRUNGEN', text: 'STÖRUNGEN'},
{value: 'ALLGEMEINES', text: 'ALLGEMEINES'},
{value: 'TERMIN VEREINBART', text: 'TERMIN VEREINBART'},
{value: 'VERRECHNEN AB DATUM', text: 'VERRECHNEN AB DATUM'},
{value: 'ONLINE-TICKETS', text: 'ONLINE-TICKETS'},
{value: 'KÜNDIGUNG', text: 'KÜNDIGUNG'},
{value: 'BESTELLUNGEN', text: 'BESTELLUNGEN'},
{value: 'PORTIERUNG', text: 'PORTIERUNG'},
{value: 'KABEL-TV', text: 'KABEL-TV'},
{value: 'TIEFBAU', text: 'TIEFBAU'},
{value: 'ENERGIE STEIERMARK', text: 'ENERGIE STEIERMARK'},
{value: 'INTERN', text: 'INTERN'},
{value: 'FELIX', text: 'FELIX'},
{value: '0', text: '0'},
{value: 'JETTEN', text: 'JETTEN'},
]},
{text: 'Status', key: 'status', filter: 'select', filterOptions: [
{value: 'Geschlossen', text: 'Geschlossen'},
{value: 'In Evidenz', text: 'In Evidenz'},
{value: 'In Bearbeitung', text: 'In Bearbeitung'},
{value: 'Business In Bearbeitung', text: 'Business In Bearbeitung'},
{value: 'Business Angebot gelegt', text: 'Business Angebot gelegt'},
]},
{text: 'Name', key: 'first_name', filter: 'search', sortable: false},
{text: 'Email', key: 'email', filter: 'search', sortable: false},
{text: 'Phone', key: 'phone', filter: 'search', sortable: false},
],
defaultPageSize: 25,
tableHeader: 'Bestellungen',
tableHeader: 'Historische Tickets',
key: 'HistoricTicket',
}
},
methods: {
Layout/default/VoiceCallActive/Index.php
+26 -23
View File
@@ -16,12 +16,23 @@ $JSGlobals = ["BASE_URL" => self::getUrl("VoiceCallActive"),
"VOICE_CALL_ACTIVE_API_URL" => self::getUrl("VoiceCallActive/api"),
];
$additionalJS = ["plugins/vue/vue.js",
$additionalJS = [
"plugins/vue/vue.js",
"plugins/axios/axios.min.js",
"plugins/vue/tt-components/tt-page-title.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',
];
@@ -30,8 +41,8 @@ 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">
<tt-table :fetch-url="window['TT_CONFIG']['VOICE_CALL_ACTIVE_API_URL'] + '?do=getActiveCalls'" :config="VoiceCallActiveTableConfig"
small ssr 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.">
@@ -57,7 +68,7 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
</template>
<template v-slot:answer_time="{ row }">
{{ !isNaN(new Date(row.answer_time)) ? new Date(row.answer_time).toLocaleString() : 'Call is not running' }}
{{ !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 }">
@@ -71,15 +82,6 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
</tt-table>
</div>
<!-- TODO: download from cdn to local -->
<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
@@ -114,15 +116,15 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
}
},
headers: [
{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},
{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},
{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',
},
@@ -130,6 +132,7 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
autoRefresh: null,
},
mounted() {
//TODO: create vue tooltip component
$('[data-toggle="tooltip"]').tooltip();
const _this = this;
Layout/default/VoiceCallHistory/Index.php
+21 -13
View File
@@ -16,12 +16,23 @@ $JSGlobals = ["BASE_URL" => self::getUrl("Domain"),
"VOICE_CALL_HISTORY_API_URL" => self::getUrl("VoiceCallHistory/api"),
];
$additionalJS = ["plugins/vue/vue.js",
$additionalJS = [
"plugins/vue/vue.js",
"plugins/axios/axios.min.js",
"plugins/vue/tt-components/tt-page-title.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',
];
@@ -30,8 +41,8 @@ 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'" :table-config="VoiceCallHistoryTableConfig"
small ref="table">
<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">
@@ -47,13 +58,6 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
</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',
@@ -63,13 +67,17 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
headers: [
{text: "Call-ID", key: "uid"},
{text: "Voice Account", key: "voice_account"},
{text: "Time Range", key: "start", filter: "dateRange"},
{text: "Time Range", key: "start", filter: "date"},
{text: "Source", key: "source"},
{text: "Destination", key: "destination"},
{text: "Billable", key: "billable"},
{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,
},