{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TeSLA CE Test Activity</title>
    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/apple-touch-icon.png' %}">
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/favicon-32x32.png' %}">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/favicon-16x16.png' %}">
    <link rel="manifest" href="{% static 'img/site.webmanifest' %}">
    <link rel="mask-icon" href="{% static 'img/safari-pinned-tab.svg' %}" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#00aba9">
    <meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
    <script type="application/javascript" src="{{ connector_url }}" ></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <p id="alerts-table-desc">List of alerts</p>
                <table id="alerts" class="table table-striped table-bordered" style="width:100%" data-server-side="true" data-ajax="/dashboards/session/{{ session_id }}/alert/?format=datatables" aria-describedby="alerts-table-desc">
                    <thead>
                        <tr>
                            <th data-data="id" scope="col">Id</th>
                            <th data-data="get_level_display" scope="col">Level</th>
                            <th data-data="data" scope="col">Type</th>
                            <th data-data="raised_at" scope="col">Raised At</th>
                        </tr>
                    </thead>
                </table>
                <p id="requests-table-desc">List of requests</p>
                <table id="requests" class="table table-striped table-bordered" style="width:100%" data-server-side="true" data-ajax="/dashboards/session/{{ session_id }}/request/?format=datatables" aria-describedby="requests-table-desc">
                    <thead>
                        <tr>
                            <th rowspan="2" data-data="id" scope="col">Id</th>
                            <th rowspan="2" data-data="get_status_display" scope="col">Status</th>
                            <th rowspan="2" data-data="created_at" scope="col">Created At</th>
                            <th rowspan="2" data-data="updated_at" scope="col">Updated At</th>
                            <th colspan="2" scope="col">Results</th>
                        </tr>
                        <tr>
                            <th data-data="results" scope="col">Summary</th>
                            <th data-data="providers" scope="col">Providers</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div>
                <form action="" method="POST">
                    {% csrf_token %}
                    <input type="hidden" name="session_id" value="{{ session_id }}"/>
                    <button type="submit">FINISH</button>
                </form>
            </div>
        </div>
    </div>
    <script src="//code.jquery.com/jquery-3.5.1.js"></script>
    <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
    <script type="application/javascript">
        $(document).ready(function() {
            var alerts_table = $('#alerts').DataTable(
                {
                    "columnDefs": [
                        {
                            "render": function (data, type, row) {
                                if (data != null) {
                                    let obj = JSON.parse(data);
                                    if (obj.hasOwnProperty('data') && obj['data'].hasOwnProperty('info')) {
                                        let info = obj['data']['info'];
                                        if (info.hasOwnProperty('type')) {
                                            return info['type'];
                                        } else if (info.hasOwnProperty('status')) {
                                            return obj['data']['info']['module'] + ' -> ' + obj['data']['info']['status']
                                        }
                                    }
                                }
                                return '';
                            },
                            "targets": 2
                        }
                    ]
                }
            );
            setInterval( function () {
                alerts_table.ajax.reload();
            }, 15 * 1000 );
            var requests_table = $('#requests').DataTable(
                {
                    "columnDefs": [
                        {
                            "render": function ( data, type, row ) {
                                let result_inst = [];
                                result_inst.push('<ul>');
                                for (let i=0; i< data.length; i++) {
                                    result_inst.push('<li>' + data[i]['instrument'] + '- [' + data[i]['get_status_display'] + '] => ' + data[i]['result'] + ' (' + data[i]['get_code_display'] + ')</li>')
                                }
                                result_inst.push('</ul>');
                                return result_inst.join('\n')
                            },
                            "targets": 4
                        },
                        {
                            "render": function ( data, type, row ) {
                                let result_inst = [];
                                result_inst.push('<ul>');
                                for (let i=0; i< data.length; i++) {
                                    result_inst.push('<li>' + data[i]['provider'] + '(' + data[i]['instrument'] + ')- [' + data[i]['get_status_display'] + '] => ' + data[i]['result'] + ' (' + data[i]['get_code_display'] + ')</li>')
                                }
                                result_inst.push('</ul>');
                                return result_inst.join('\n')
                            },
                            "targets": 5
                        }
                    ]
                }
            );
            setInterval( function () {
                requests_table.ajax.reload();
            }, 15 * 1000 );
        });
    </script>
</body>
</html>
