thetool/Layout/default/VoiceCallActive/Index.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" 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" @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>

        <template v-slot:answer_time="{ row }">
            {{ !isNaN(new Date(row.answer_time)) ? new Date(row.answer_time).toLocaleString() : 'Call is not running' }}
        </template>

        <template v-slot:status="{ row }">
            #bind class fa-shake if status is ringing
            <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>

<!-- 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
    }
    .voice-yellow {
        background-color: #E8E288 !important
    }
    .voice-red {
        background-color: #FF8360 !important
    }

    .table-sm td {
        padding: 4px !important;
    }
</style>

<script>
    new Vue({
        el: '#app',
        data: {
            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},
                    {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,
            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);
                }
            })
        },
        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;
            },
        }
    })
</script>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>