<?php

$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/components/check.php";
include_once($path);

?>
<!--
 =========================================================
* Black Dashboard PRO - v1.1.1
=========================================================

* Product Page: https://themes.getbootstrap.com/product/black-dashboard-pro-premium-bootstrap-4-admin/
* Copyright 2019 Creative Tim (https://www.creative-tim.com)

* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->


<!DOCTYPE html>
<html lang="en">

<head>

    <?php

    $path = $_SERVER['DOCUMENT_ROOT'];
    $path .= "/components/header.php";
    include_once($path);

    ?>
    <script type="text/javascript" src="/js/allPurpose/dataObject/dataobject.js"></script>

    <!-- datatables -->
	<link href="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.0.5/datatables.min.css" rel="stylesheet">
	<script src="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.0.5/datatables.min.js"></script>

    <script>
        const COIN_TYPE_SMALL = 1;
        const COIN_TYPE_LARGE = 2;

        // TODO BTS data object

        // small coin data object 
        class Coin1DataObject extends DataObject {
            constructor(name, initialValues) {
                const coin2props = ["name", "batt", "acc", "snr", "rot", "state", "charger", "system_v", "b_system_v", "signal_q", "temp", "temp1", "stress", "fall", "last_comm"];

                let newInitialValues = {};
                for (const key of coin2props) {
                    newInitialValues[key] = initialValues[key] ?? null;
                }

                super(name, newInitialValues);
            }
        }

        // large coin data object
        class Coin2DataObject extends DataObject {
            constructor(name, initialValues) {
                const coin2props = ["name", "hr", "batt", "acc", "snr", "rot", "spo2", "state", "charger", "system_v", "b_system_v", "signal_q", "resp", "resp1", "rr", "temp", "temp1", "stress", "fall", "last_comm"];

                let newInitialValues = {};
                for (const key of coin2props) {
                    newInitialValues[key] = initialValues[key] ?? null;
                }

                super(name, newInitialValues);
            }
        }

        // class to hold all coins and their current values
        class DeviceDashboard extends EventProducer {
            constructor(name) {
                super(["deviceCreated", "valueChanged"]) // events
                this._name = name;
                this.devices = {};

            }

            _deviceValueChangedHandler(e) {

                this._eventHandlers["valueChanged"].forEach((c) => c(coinId, key, newValue, dataObject));
            }

            addCoin(type, id, initialValues = {}) {
                if (type === COIN_TYPE_SMALL) {
                    this.devices[id] = new Coin1DataObject(`Coin ${id} (small)`, initialValues);
                } else if (type === COIN_TYPE_LARGE) {
                    this.devices[id] = new Coin2DataObject(`Coin ${id} (large)`, initialValues);
                } else {
                    throw new TypeError(`[${this._name}] Invalid coin type ${type}`);
                }

                this.devices[id].addEventHandler("change", (e) => {
                    e["id"] = id;
                    this.createEvent("valueChanged", e);
                });

                this.createEvent("deviceCreated", {
                    "type": type,
                    "id": id,
                    "deviceObject": this.devices[id],
                });
            }

            updateCoin(id, modifiedValues = {}) {
                if(!(id in this.devices)) return false;

                for(const k in modifiedValues) {
                    this.devices[id].update(k, modifiedValues[k]);
                }
            }

            processCoinMessage(msgType, deviceType, data, coinId, time) {

                msgType = parseInt(msgType);
                deviceType = parseInt(deviceType);

                if ((deviceType !== COIN_TYPE_SMALL) && (deviceType !== COIN_TYPE_LARGE)) {
                    throw new TypeError(`[${this._name}] Invalid device type ${deviceType}`);
                }

                if (!(coinId in this.devices)) {
                    this.addCoin(deviceType, coinId);
                }

                this.devices[coinId].update("last_comm", time);

                if (deviceType === COIN_TYPE_LARGE) {
                    if (msgType == 2) {
                        //report data
                        this.devices[coinId].update("batt", parseInt(data["battery"] * 25));
                        this.devices[coinId].update("charger", data["charger"]);
                        this.devices[coinId].update("system_v", data["system_v"]);
                        this.devices[coinId].update("system_v", data["b_system_v"]);
                        this.devices[coinId].update("state", data["state"]);
                    }

                    if (msgType == 1) {
                        // ignore messages with no actual light/accelerometer data
                        if (data["g_1"].length > 0) {
                            // main_window.pushGraphDataToDevice(coin_id, "graph1", data);
                        }
                    }

                    if (msgType == 5) {
                        // calculated values
                        this.devices[coinId].update("hr", parseInt(data["hr"]));

                        // TODO move to presentation layer
                        // let spo2 = parseInt(data["spo2"]);
                        // if (spo2 > 100) {
                        //   spo2 = 100;
                        // } else if (spo2 < 90) {
                        //   spo2 = 90;
                        // }

                        this.devices[coinId].update("spo2", parseInt(data["spo2"]));
                        this.devices[coinId].update("rr", parseInt(data["rr"]));
                        this.devices[coinId].update("resp1", parseInt(data["resp"]));
                        this.devices[coinId].update("stress", parseInt(data["stress"]));
                        this.devices[coinId].update("signal_q", data["signal_q"]);
                    }

                    if (msgType == 7) {
                        //markers
                        // main_window.setDeviceMarker(coin_id);

                    }

                    if (msgType == 6) {
                        //memory type
                    }
                    if (msgType == 4) {
                        //acc
                        this.devices[coinId].update("rot", data["rotation"]);
                        this.devices[coinId].update("acc", data["acc"]);
                        this.devices[coinId].update("fall", parseInt(data["fall"]));
                    }

                    if (msgType == 8) {

                    }

                    if (msgType == 9) {
                        this.devices[coinId].update("temp", parseFloat(data["temp"]));
                        this.devices[coinId].update("temp1", parseFloat(data["temp1"]));

                        // TODO move to presentation layer
                        // $("#temp-" + coin_id).html(parseInt(data["temp"] * 100) / 100);

                        // let temp1 = parseInt(data["temp1"] * 100) / 100;
                        // if (temp1 <= 36) {
                        //   temp1 = "--";
                        // }
                        // main_window.setDeviceValue(coin_id, "temp1", temp1);
                        //errors
                    }
                } else if (deviceType === COIN_TYPE_SMALL) {
                    if (msgType == 0) {

                    }

                    if (msgType == 9) {
                        this.devices[coinId].update("temp1", parseFloat(data["temp1"]));

                        // TODO move to presentation layer
                        // let temp1 = parseInt(data["temp1"] * 100) / 100;
                        // if (temp1 <= 36) {
                        //   temp1 = "--";
                        // }
                        // main_window.setDeviceValue(coin_id, "temp1", temp1);
                    }

                    if (msgType == 2) {
                        this.devices[coinId].update("batt", data["battery"] * 25);
                        // main_window.setDeviceBattery(coin_id, data["battery"] * 25);
                    }

                    if (msgType == 7) {
                        // var t = data["temp"];
                        // var t1 = data["temp1"];
                    }

                    if (msgType == 8) {

                    }

                    if (msgType == 10) {}
                }

            }
        }


        class CoinTable {
            constructor(tableElemId) {
                this._table = new DataTable(`#${tableElemId}`, {
                    // data: [],
                    columns: [
                        { data: "id", title: "ID"},
                        { data: "name", title: "Name"},
                        // { data: "loc", title: "Loc"},
                        { data: "last_comm", title: "Last communication", render: (data, type, row, meta) => {                           
                            if ((type !== "display") || (!data)) {
                                return data;
                            }
                            const d = new Date(parseInt(data) * 1000);
                            return `${d.toLocaleTimeString()}<br>${d.toLocaleDateString()}`;
                        }},
                        { data: "state", title: "State", render: (data, type, row, meta) => {
                            if((type !== "display") || (data === null)) return data;

                            const STATE_NAMES = {
                                0: "STORAGE",
                                2: "ON",
                                3: "ACTIVE_MEAS",
                                4: "LP",
                                5: "ERROR"
                            };

                            return STATE_NAMES[data] ?? "--";
                        }},
                        { data: "temp", title: "Temp", render: (data) => (data === null) ? null : parseFloat(data).toFixed(2) + " \u2103"},
                        { data: "temp1", title: "Real temp", render: (data) => (data === null) ? null : parseFloat(data).toFixed(2) + " \u2103"},
                        { data: "batt", title: "Batt", render: (data) => (data == null) ? null : `${data} mV`},
                        { data: "snr", title: "SNR"},
                        { data: "acc", title: "Activity", render: (data, type, row) => {
                            if(type !== "display" || (data === null)) return data;
                            
                            const ACTIVITY_NAMES = {
                                1: "malá",
                                2: "stredná",
                                3: "veľká"
                            };

                            const text = `${ACTIVITY_NAMES[data] ?? "--"} (${data})`;
                            return text;
                        }},
                        { data: "rot", title: "Rotation", render: (data, type, row) => {
                            if(type !== "display" || (data === null)) return data;

                            const ROT_NAMES = {
                                0: "Sedí/Stojí",
                                1: "Leží",
                                2: "Leží na boku",
                                3: "Sedí/Stojí",
                            };

                            return ROT_NAMES[data] ?? "--";
                        }},
                        { data: "signal_q", title: "Signal_Q", render: (data, type, row ) => {
                            if(type !== "display" || (data === null)) return data;
                            
                            const Q_NAMES = {
                                3: "Dobrý",
                                2: "Dostatočný",
                                1: "Slabý",
                                4: "Žiadny" 
                            };

                            return Q_NAMES[data] ?? "--";
                        }},
                        { data: "spo2", title: "SPO2", render: (data) => (data == null) ? null : `${data} %`},
                        { data: "hr", title: "HR", render: (data) => (data == null) ? null : `${data} \u2764`},
                        { title: "Operation", render: () => "---"},
                    ],
                    paging: false,
                    columnDefs: [
                        {targets: "_all", className: "dt-right"}, // right-justify all columns
                    ]
                });

                setInterval(() => this._table.draw(false), 500);
            }

            addRow(values) {
                // this._table.row.add(values).draw(false);
                this._table.row.add(values);
            }

            updateRow(id, modifiedValues) {
                const row = this._table.row((idx, data) => data.id === id);
                let rowData = row.data();

                if(rowData) {
                    for(const k in modifiedValues) {
                        rowData[k] = modifiedValues[k];
                    }

                    // row.data(rowData).draw(false);
                    row.data(rowData);
                }
            }
        }





        // google.charts.load('current', {'packages':['timeline']});
        // google.charts.setOnLoadCallback(drawChart);
        // function drawChart( name, interval_start, interval_length ) {
        //   return;
        //   $( "#example3.1" ).empty();
        //   var datas = [];

        //   datas.append( ['Activity', 'Start Time', 'End Time'] );

        //   for( var x = 0; x <arr.length; x++ ) {

        //         var l = [name,
        //          			new Date(interval_start),
        //          			new Date(interval_start + interval_length)];
        // 	    datas.append( l );
        //   }

        //   }

        // function saveDone() {
        //     showInfoMsg("Data saved", 2);

        // }

        // function sendData(id) {
        //     var dats = $("#textbox-" + id).val();
        //     console.log(dats);
        //     var timestamp = Date.now() / 1000;
        //     createNewCommands("task", {
        //         "task_name": "GetData",
        //         "params": {
        //             "query": "INSERT INTO public.\"TestCoin\"( \"val\", \"timestamp\", \"type\", coin_id  ) VALUES( '" + dats + "', " + timestamp + ", 0, " + id + " )"
        //         }
        //     }, saveDone);
        //     showInfoMsg("Saving data...", 2);

        // }

        // function createGraphTable(data) {
        //     var dataset = [data];

        //     var options = {
        //         id_div_container: "visavail_container",
        //         id_div_graph: "visavail_graph",

        //         icon: {
        //             class_has_data: 'fas fa-fw fa-check',
        //             class_has_no_data: 'fas fa-fw fa-exclamation-circle'
        //         },
        //         zoom: {
        //             enabled: true,
        //         },
        //         responsive: {
        //             enabled: true,
        //         },
        //         tooltip: {
        //             date_plus_time: true
        //         },
        //         date_in_utc: true,
        //     };

        //     var chart = visavail.generate(options, dataset)
        // }

        function liveUpdate() {

            this.handleLive = function(data) {

                for (msg in data["data"]) {
                    if ("type" in data["data"][msg]) {

                    } else {
                        continue;
                    }

                    deviceDashboard.processCoinMessage(data["data"][msg]["type"], data["device_type"], data["data"][msg], data["coin_id"], data["time"]);
                    // handleMsgs( data["data"][msg]["type"], data["device_type"], data["data"][msg], data["coin_id"]  );
                }

                //pushNewRow( data, RowMagCradleMain );
            }

        }

        // function liveUpdate1() {

        //     this.handleLive = function(data) {
        //         console.log(data);
        //     }

        // }

        var datasource = 0;
        // var data_table = 0;
        // var global_tables = {};
        // var id_settings_table = {};

        // function createNewTableDataSet(data) {
        //     var d = (data);
        //     global_tables["global_main_table"].processData(d["result"]);
        //     for (const x of d["result"]) {
        //         id_settings_table[x[0]] = x[11];

        //     }

        //     try {
        //         $("#loaderf").hide();
        //     } catch (err) {

        //     }

        // }


        // function createNewTableData1(data) {
        //     console.log("asdasdasd");
        //     var d = (data);
        //     console.log(data);

        //     if (data["result"].length == 0) {
        //         global_tables["global_main_table1"].addEmptyMsg();
        //         return 0;
        //     }

        //     global_tables["global_main_table1"].processData(d["result"]);

        //     try {
        //         $("#loaderf").hide();
        //     } catch (err) {

        //     }
        //     load.clear();

        // }

        // function getAllCoins() {
        //     createNewCommands("task", {
        //         "task_name": "GetData",
        //         "params": {
        //             "query": "SELECT name, id, registration_time, note, core_id, loc, type \
		// 																			  From public.\"Coins\""
        //         }
        //     }, createNewTableDataSet);

        // }

        var wss_port = 18892;
        var addr = "wss://rbf.nanodesign.sk:" + wss_port + "/websocket/";
        var global_socket_wrapper = new SocketWrapper(addr);
        
        let deviceDashboard = null;
        let coinTable = null;

        function updateCoinNames() {
            createNewCommands("task", {
                "task_name": "GetData",
                "params": {
                    "query": "SELECT id, name FROM public.\"Coins\""
                }
            }, (data) => {
                const d = data["result"];
                for (const row of d) {
                    const coinId = row[0];
                    const coinName = row[1]
                    deviceDashboard.updateCoin(coinId, {name: coinName});
                }
            });

        }

        function start() {
            //load.init();
            var ff = new liveUpdate();
            // var ff1 = new liveUpdate1();

            deviceDashboard = new DeviceDashboard("Device Dash");
            coinTable = new CoinTable('datatable');

            deviceDashboard.addEventHandler("deviceCreated", (e) => {
                const c = e.deviceObject;
                
                if (e.type === COIN_TYPE_LARGE) {
                    coinTable.addRow({
                        id: parseInt(e.id),
                        name: c.get("name"),
                        loc: null,
                        state: c.get("state"),
                        last_comm: c.get("last_comm"),
                        temp: c.get("temp"),
                        temp1: c.get("temp1"),
                        batt: c.get("batt"),
                        snr: c.get("snr"),
                        acc: c.get("acc"),
                        rot: c.get("rot"),
                        signal_q: c.get("signal_q"),
                        spo2: c.get("spo2"),
                        hr: c.get("hr"),
                    });
                }
                else {
                    coinTable.addRow({
                        id: parseInt(e.id),
                        name: c.get("name"),
                        state: c.get("state"),
                        loc: null,
                        last_comm: c.get("last_comm"),
                        temp: c.get("temp"),
                        temp1: c.get("temp1"),
                        batt: c.get("batt"),
                        snr: c.get("snr"),
                        acc: c.get("acc"),
                        rot: c.get("rot"),
                        signal_q: null,
                        spo2: null,
                        hr: null,
                    });
                }
            });

            deviceDashboard.addEventHandler("valueChanged", (e) => {
                let modifiedValues = {};
                modifiedValues[e.key] = e.newValue;

                coinTable.updateRow(e.id, modifiedValues);
            });   

            global_socket_wrapper.init();
            global_socket_wrapper.registerLiveUpdater("new_coin_data", ff);

            createNewCommands( "task", { "task_name": "GetDataFromModel", "params": {"model": 'LiveViewStorage' } }, (d) => {
                
                const devices = JSON.parse(d["result"]);

                for (const coinId in devices) {
                    if (coinId < 0) continue;

                    const dev = devices[coinId];
                    if ([COIN_TYPE_LARGE, COIN_TYPE_SMALL].includes(dev["type"]) == false) continue;

                    deviceDashboard.addCoin(dev["type"], coinId, {
                        acc:        dev?.acc?.[1],
                        b_system_v: dev?.b_system_v?.[1],
                        batt:       dev?.bat?.[1] * 25,
                        charger:    dev?.charger?.[1],
                        hr:         dev?.hr?.[1] ,
                        name:       dev?.name?.[1],
                        resp:       dev?.resp?.[1] ,
                        rot:        dev?.rot?.[1] ,
                        rr:         dev?.rr?.[1],
                        signal_q:   dev?.signal_q?.[1],
                        snr:        dev?.snr?.[1],
                        spo2:       dev?.spo2?.[1],
                        state:      dev?.state?.[1],
                        system_v:   dev?.system_v?.[1],
                        temp:       dev?.temp?.[1],
                        temp1:      dev?.temp1?.[1],
                    });
                }
                
                console.log(JSON.parse(d["result"])) 
            }); 

            setInterval(updateCoinNames, 5000);

            // TODO getAllCoins();
            // setInterval(getAllCoins, 16000);
        }
    </script>
</head>

<body class="sidebar-mini" onload="start()">
    <div class="wrapper">
        <div class="navbar-minimize-fixed">
            <button class="minimize-sidebar btn btn-link btn-just-icon">
                <i class="tim-icons icon-align-center visible-on-sidebar-regular text-muted"></i>
                <i class="tim-icons icon-bullet-list-67 visible-on-sidebar-mini text-muted"></i>
            </button>
        </div>
        <?php

        $path = $_SERVER['DOCUMENT_ROOT'];
        $path .= "/components/sidebar.php";
        include_once($path);

        ?>
        <div class="main-panel">
            <!-- Navbar -->
            <?php

            $path = $_SERVER['DOCUMENT_ROOT'];
            $path .= "/components/plugin.php";
            include_once($path);

            ?>
            <?php

            $path = $_SERVER['DOCUMENT_ROOT'];
            $path .= "/components/navbar.php";
            include_once($path);

            ?>

            <!-- End Navbar -->
            <div class="content">
                <div class="col-md-8 ml-auto mr-auto">
                    <h4 class="text-center">Informácie o zariadení</h4>
                    <p class="text-center">Podrobné informácie o stave a fungovaní zariadenia. Plná dokumentácia ku zariadeniu je na stránke
                        <a href="https://datatables.net/" target="_blank">dokumentácia.</a>
                    </p>
                </div>
                <div class="row mt-5">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="toolbar">
                                    <!--        Here you can write extra buttons/actions for the toolbar              -->
                                </div>
                                <h4 class="text-left">Tabuľka zariadení IoTemp</h4>
                                <span style="width:100%;border-bottom:1px solid rgba(255, 255, 255, 0.8);display:block;margin-top:20px;margin-bottom:20px;"> </span>
                                <table id="datatable" class="table table-striped">
                                    
                                </table>
                            </div>
                            <!-- end content-->
                        </div>
                        <!--  end card  -->
                    </div>
                    <!-- end col-md-12 -->
                </div>

                <div class="row mt-5">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="toolbar">
                                    <!--        Here you can write extra buttons/actions for the toolbar              -->
                                </div>
                                <h4 class="text-left">Tabuľka zariadení IoTemp v2</h4>
                                <span style="width:100%;border-bottom:1px solid rgba(255, 255, 255, 0.8);display:block;margin-top:20px;margin-bottom:20px;"> </span>
                                <table id="datatable2" class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Loc</th>
                                            <th>Last Communication</th>
                                            <th>Timestamp</th>
                                            <th>Last Temp</th>
                                            <th>Real Temp</th>
                                            <th>Last Bat</th>
                                            <th>Last Snr</th>
                                            <th>Last acc</th>
                                            <th>Last rot</th>
                                            <th>Last spo2</th>
                                            <th class="sorting_desc_disabled sorting_asc_disabled">Operation</th>
                                        </tr>
                                    </thead>
                                    <tbody id="datatabl2_body">

                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Loc</th>
                                            <th>Last Communication</th>
                                            <th>Timestamp</th>
                                            <th>Last Temp</th>
                                            <th>Real Temp</th>
                                            <th>Last Bat</th>
                                            <th>Last Snr</th>
                                            <th>Last acc</th>
                                            <th>Last rot</th>
                                            <th>Last spo2</th>
                                            <th class="sorting_desc_disabled sorting_asc_disabled">Operation</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <!-- end content-->
                        </div>
                        <!--  end card  -->
                    </div>
                    <!-- end col-md-12 -->
                </div>

                <div class="row mt-5">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="toolbar">
                                    <!--        Here you can write extra buttons/actions for the toolbar              -->
                                </div>
                                <h4 class="text-left">Tabuľka zariadení IoTemp v3</h4>
                                <span style="width:100%;border-bottom:1px solid rgba(255, 255, 255, 0.8);display:block;margin-top:20px;margin-bottom:20px;"> </span>
                                <table id="datatable3" class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Loc</th>
                                            <th>Last Communication</th>
                                            <th>Timestamp</th>
                                            <th>Last Temp</th>
                                            <th>Real Temp</th>
                                            <th>Last Bat</th>
                                            <th>Last Snr</th>
                                            <th>Last acc</th>
                                            <th>Last rot</th>
                                            <th>Last spo2</th>
                                            <th class="sorting_desc_disabled sorting_asc_disabled">Operation</th>
                                        </tr>
                                    </thead>
                                    <tbody id="datatable3_body">

                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Loc</th>
                                            <th>Last Communication</th>
                                            <th>Timestamp</th>
                                            <th>Last Temp</th>
                                            <th>Real Temp</th>
                                            <th>Last Bat</th>
                                            <th>Last Snr</th>
                                            <th>Last acc</th>
                                            <th>Last rot</th>
                                            <th>Last spo2</th>
                                            <th class="sorting_desc_disabled sorting_asc_disabled">Operation</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <!-- end content-->
                        </div>
                        <!--  end card  -->
                    </div>
                    <!-- end col-md-12 -->
                </div>
                <div class="row mt-5">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="toolbar">
                                    <!--        Here you can write extra buttons/actions for the toolbar              -->
                                </div>
                                <h4 class="text-left">Tabuľka zariadení BTS</h4>
                                <table id="bts_datatable" class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Last communication</th>
                                            <th>Timestamp</th>
                                            <th>Core ID</th>
                                            <th>Note</th>
                                            <th>Registration_time</th>
                                            <th>Loc</th>
                                            <th class="sorting_desc_disabled sorting_asc_disabled text-right">Operation</th>
                                        </tr>
                                    </thead>
                                    <tbody id="bts_datatable_body">

                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Last communication</th>
                                            <th>Timestamp</th>
                                            <th>Core ID</th>
                                            <th>Note</th>
                                            <th>Registration time</th>
                                            <th>Loc</th>
                                            <th class="sorting_desc_disabled sorting_asc_disabled text-right">Operation</th>
                                        </tr>
                                    </tfoot>
                                </table>

                            </div>
                            <!-- end content-->
                        </div>
                        <!--  end card  -->
                    </div>
                    <!-- end col-md-12 -->
                </div>
                <!-- end row -->
            </div>

        </div>

        <?php

        $path = $_SERVER['DOCUMENT_ROOT'];
        $path .= "/components/footer.php";
        include_once($path);

        ?>

    </div>
    </div>
    <!--   Core JS Files   -->

    <?php

    $path = $_SERVER['DOCUMENT_ROOT'];
    $path .= "/components/code_footer.php";
    include_once($path);

    ?>
</body>

</html>