alert-log.html

{% extends "bmsapp/base.html" %}

{% block pagetitle %}Alert Logs{% endblock %}

{% block title %}Alert notifications that have been sent{% endblock %}

{% block content %}

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.24/b-1.7.0/b-html5-1.7.0/sl-1.3.3/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.24/b-1.7.0/b-html5-1.7.0/sl-1.3.3/datatables.min.js"></script>

<script>
    var cookies = document.cookie
        .split(';')
        .map(v => v.split('='))
        .reduce((acc, v) => {
        acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim());
        return acc;
        }, {});

    $(function () {
        $.fn.dataTable.Buttons.defaults.dom.button.className = 'btn';

        var alert_table = $('#Alerts').DataTable({
            paging: false,
            scrollY: '80vh',
            scrollCollapse: true,
            columnDefs: [ {
                orderable: false,
                className: 'select-checkbox',
                targets:   0
            } ],
            dom: 'Bfrtip',
            buttons: [
                {
                    text: 'Select all',
                    className: 'btn-secondary',
                    action: function (e, dt, node, config) {
                        dt.rows().deselect();
                        dt.rows( { search: 'applied' } ).select();
                    }
                },
                'selectNone',
                'excel'
            ],
            select: {
                style:    'multi',
                selector: 'td:first-child'
            },
            order: [[ 1, 'asc' ]]
        });
            
    });
</script>

<div style="background-color: white; width: fit-content; padding: 5px;">
    <table id="Alerts" class="table table-sm table-striped">
        <thead><tr>
            <th>&nbsp;&nbsp;&nbsp;&nbsp;</th>
            <th  scope="col" class="text-center">Sensor ID</th>
            <th  scope="col" class="text-center">Timestamp</th>
            <th  scope="col" class="text-center">Message</th>
        </tr></thead>
        <tbody style="background-color: white">
        {% for alert in alert_list %}
            <tr id="{{ alert.id }}">
                <td></td>
                <td class="bmon-sensor-id">{{ alert.id }}</td>
                <td>{{ alert.when }}</td>
                <td>{{ alert.message }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}