igs-slm 0.1.0b0__py3-none-any.whl

slm/templates/slm/widgets/filelist.html

@@ -0,0 +1,258 @@
+<!--
+
+Template for stations list.
+
+-->
+<!-- Select Station -->
+{% load slm %}
+
+<div id="slm-file-container" class="p-2">
+    
+    <div class="pt-3 px-3">
+        <div class="d-flex flex-wrap justify-content-between align-items-center"> 
+            <h5 class="text-center mb-0"><b><span id="slm-num-files">{{ num_files }}</span></b> Files</h5>
+            <a id="filter-files" class="btn btn-outline-primary filter-popover" role="button" tabindex="0" data-bs-toggle="modal" data-bs-target="#file-filter" data-backdrop="false">
+                Filter <i class="bi bi-filter"></i>
+            </a>
+        </div>
+
+        <!-- Search bar -->
+        <form class="d-flex my-2 w-100">
+            <input
+                class="form-control"
+                type="search"
+                placeholder="Search"
+                aria-label="Search"
+                id="file-search"
+            >
+        </form>
+    </div>
+
+    <hr/>
+
+    <!-- List of files -->
+    <div
+        id='slm-file-list'
+        class="list-group overflow-auto vh-100"
+        data-slm-page=0
+        data-slm-page-size={{page_size|default:30}}
+    >
+        {% if file %}
+        <button
+            class="btn mono active {{ file.status.css }}"
+            id="select-file-{{ file.id }}"
+            name="file"
+            value="{{ file.id }}"
+            data-bs-toggle="pill"
+            type="submit"
+            role="tab"
+            data-slm-file-status={{ file.status.value }}
+            aria-selected="true"><i class="{{ file.mimetype|file_icon }}"></i><span class="slm-file-name">{{ file.name }}</span></button>
+        {% endif %}
+        <div class="p-2 p-lg-5 d-flex justify-content-center" style="display: none">
+            <div class="slm-loader"></div>
+        </div>
+    </div>
+</div>
+
+<!-- Filter Modal -->
+<div class="modal fade" id="file-filter" tabindex="-1" aria-labelledby="filter-label" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="file-filter-label">Filter File List</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="slm-file-filter">
+                    <div class="row px-3 pb-3">
+                        <div class="col-6">
+                            <fieldset>
+                                <legend class="form-label px-0"><span class="fs-6 fw-bold">File Status:</span></legend>
+                                {% for status in SiteFileUploadStatus %}
+                                <div class="form-check">
+                                    <input id="slm-file-status-{{status.value}}" class="form-check-input" type="checkbox" name="status" value="{{status.value}}">
+                                    <label class="form-check-label d-flex" for="slm-file-status-{{status.value}}">
+                                        <i class="bi bi-square-fill me-2" style="font-size: 1rem; color: {{status.color}};"></i>
+                                        <p class="mb-1">{{status.label}}</p>
+                                    </label>
+                                </div>
+                                {% endfor %}
+                            </fieldset>
+                        </div>
+                        <div class="col-6">
+                            <fieldset>
+                                <legend class="form-label px-0"><span class="fs-6 fw-bold">File Type:</span></legend>
+                                {% for type in SLMFileType %}
+                                <div class="form-check">
+                                    <input id="slm-file-type-{{type.value}}" class="form-check-input" type="checkbox" name="fileType" value="{{type.value}}">
+                                    <label class="form-check-label d-flex" for="slm-file-type-{{type.value}}">
+                                        <i class="bi bi-square-fill me-2" style="font-size: 1rem; color: {{status.color}};"></i>
+                                        <p class="mb-1">{{type.label}}</p>
+                                    </label>
+                                </div>
+                                {% endfor %}
+                            </fieldset>
+                            <fieldset id="slm-file-filter-log" disabled>
+                                <legend class="form-label px-0"><span class="fs-6 fw-bold">Log Format:</span></legend>
+                                {% for type in SiteLogFormat %}
+                                <div class="form-check">
+                                    <input id="slm-file-log-{{type.value}}" class="form-check-input" type="checkbox" name="logType" value="{{type.value}}">
+                                    <label class="form-check-label d-flex" for="slm-file-log-{{type.value}}">
+                                        <i class="bi bi-square-fill me-2" style="font-size: 1rem; color: {{status.color}};"></i>
+                                        <p class="mb-1">{{type.label}}</p>
+                                    </label>
+                                </div>
+                                {% endfor %}
+                            </fieldset>
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
+                <button id="clear-file-filter" type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Clear Filters</button>
+                <button id="apply-file-filter" type="button" class="btn btn-success" data-bs-dismiss="modal">Apply Filters</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+{% load compress %}
+
+{% compress js inline %}
+<script>
+    const fileFilter = $('#slm-file-filter');
+    const filterFiles = $('#filter-files');
+    $('input#slm-file-type-{{SLMFileType.SITE_LOG.value}}').change(function() {
+        if ($(this).is(':checked')) {
+            $('fieldset#slm-file-filter-log').prop('disabled', false);
+        } else {
+            $('fieldset#slm-file-filter-log').prop('disabled', true);
+            $("fieldset#slm-file-filter-log input[type='checkbox']:checked").prop("checked", false)
+        }
+    });
+
+    let fileKeyupTimeoutID = 0;
+    function drawFiles(position, data, filtered, total) {
+
+        if (filtered !== null) {
+            $('#slm-num-files').html(filtered);
+        }
+
+        for (const file of data) {
+            //if (file.name === '{{ file }}') continue;
+            let active = '';
+            let selected = 'false';
+            const editLink = slm.urls.reverse(
+                'slm:upload',
+                {
+                    kwargs: {
+                        station: '{{ station }}',
+                        file: file.id
+                    }
+                }
+            );
+            const status = slm.SiteFileUploadStatus.get(file.status);
+            let pos = position;
+            {% if file %}
+            if (file.id === {{ file.id }}) {
+                if (
+                    position.parent().children(
+                        `#select-file-${ file.id }`
+                    ).length)
+                { continue; }
+                active = 'active';
+                selected = 'true';
+                pos = position.parent().children().first();
+            }
+            {% endif %}
+            $(
+                `<button onclick="window.location.href='${editLink}'"
+                    class="btn mono ${active} ${status.css}"
+                    id="select-file-${file.id}"
+                    name="file"
+                    value="${file.id}"
+                    data-bs-toggle="pill"
+                    type="submit"
+                    role="tab"
+                    data-slm-file-status=${status.val}
+                    aria-selected="${selected}"><i class="${slm.fileIcon(file.mimetype)}"></i><span class="slm-file-name">${file.name}</span></button>`
+            ).insertBefore(pos);
+        }
+    }
+
+    const initFileList = function(fileList) {
+        fileList.find('button').remove();
+        fileList.data('slmPage', 0);
+        slm.initInfiniteScroll(
+            fileList,
+            fileList,
+            $('#slm-file-list .slm-loader'),
+            "slm_edit_api:files-list",
+            {'site': '{{ station }}'},
+            {},
+            drawFiles,
+            //true // enable caching
+        );
+    }
+
+    $(document).ready(function() {
+        const fileList = $("#slm-file-list");
+        const searchInput = $('#file-search');
+        const filterInput = $("#apply-file-filter");
+        const clearFilter = $('#clear-file-filter');
+
+        searchInput.keypress(function (event) {
+            if (event.key === "Enter") {
+                searchInput.blur();
+                return false;
+            }
+        });
+        searchInput.on('input', function() {
+            clearTimeout(fileKeyupTimeoutID);
+            fileKeyupTimeoutID = setTimeout(function() {
+                let query = fileList.data('slmQuery') || {};
+                if (searchInput.val()) {
+                    query.name = searchInput.val();
+                } else {
+                    if (query.hasOwnProperty('name')) {
+                        delete query.name;
+                    }
+                }
+                fileList.data('slmQuery', query);
+                initFileList(fileList);
+            }, 500);
+        });
+
+        const applyFilter = function() {
+            let query = fileList.data('slmQuery') || {};
+            query.status = fileFilter.find('input[name="status"]:checked').map(function () {
+                return this.value;
+            }).get();
+            query.file_type = fileFilter.find('input[name="fileType"]:checked').map(function () {
+                return this.value;
+            }).get();
+            query.log_format = fileFilter.find('input[name="logType"]:checked').map(function () {
+                return this.value;
+            }).get();
+            if (slm.hasParameters(query)) {
+                filterFiles.removeClass("btn-outline-primary").addClass("btn-primary");
+            } else {
+                filterFiles.removeClass("btn-primary").addClass("btn-outline-primary");
+            }
+            fileList.data('slmQuery', query);
+            initFileList(fileList);
+        };
+        filterInput.click(applyFilter);
+        clearFilter.on('click', function() {
+            fileFilter.find("input[type='checkbox']:checked").prop("checked", false);
+            fileFilter.find("input[type='radio']:checked").prop("checked", false);
+            applyFilter();
+        });
+        initFileList(fileList);
+    });
+
+</script>
+{% endcompress %}

slm/templates/slm/widgets/legend.html

@@ -0,0 +1,12 @@
+<div hidden>
+    <div id="quick-help-info" class="bg-white">
+        {% for status in SiteLogStatus %}
+        <div class="d-flex py-0">
+            <i class="bi bi-square-fill me-2" style="font-size: 1rem; color: {{ status.color }}"></i>
+            <p class="mb-1"><strong>{{ status.label }}</strong></p>
+        </div>
+        <p style="margin-left: 2em;">{{ status.help }}</p>
+        {% endfor %}
+        <a class="btn btn-primary mt-2" href="{% url 'slm:help' %}#process" role="button">4-step process</a>
+    </div>
+</div>

slm/templates/slm/widgets/log_scroll.html

@@ -0,0 +1,88 @@
+{% load compress %}
+
+<div class="slm-scroll-container">
+    <div
+        id='slm-log-scroll'
+        class="list-group overflow-auto vh-100 w-100 no-scrollbar"
+        data-slm-page=0
+        data-slm-page-size={{page_size|default:30}}
+    >
+        <div class="p-2 p-lg-5 d-flex justify-content-center" style="display: none">
+            <div class="slm-loader"></div>
+        </div>
+    </div>
+</div>
+
+{% compress js inline %}
+<script>
+    $(document).ready(function() {
+        let reinitialize = true;
+        const scrollDiv = $("#slm-log-scroll");
+        const drawLogs = function(position, data) {
+            if (reinitialize) {
+                console.log(reinitialize);
+                scrollDiv.find('.slm-log-item').remove();
+                scrollDiv.find('h3').remove();
+            }
+            reinitialize = false;
+            function getName(entry) {
+                if (entry.hasOwnProperty('user') && entry.user !== null) {
+                    return slm.mailToUser(entry.user);
+                }
+                return '';
+            }
+            for (const entry of data) {
+                const type = slm.LogEntryType.get(entry.type);
+                const timestamp = new Date(entry.timestamp);
+                $(`<div class="slm-log-item d-flex py-2 mt-1 ${type.css}" aria-current="true" tabindex="0" onclick="window.location='${entry.link}'">` +
+                        `<div class="d-flex w-100 justify-content-between align-items-center">` +
+                            `<div class="d-flex justify-content-evenly align-items-center">` +
+                                `<span class="m-0 me-2 p-0 mono fw-bold"><a href="${slm.urls.reverse('slm:edit', {kwargs: {station: entry.station}})}">${entry.station}</a></span>` +
+                                `<span class="badge ${type.css} me-2">${type.label}</span>` +
+                                `<span>${entry.hasOwnProperty('section') && entry.section ? entry.section : ''}</span>` +
+                            `</div>` +
+                            `<div class="d-flex justify-content-evenly align-items-center">` +
+                                `<div class="opacity-75 me-2">${getName(entry)}</div>` +
+                                `<small class="text-nowrap opacity-75">${timestamp.toLocaleString()}</small>` +
+                                // `<small class="d-flex justify-content-end">${entry.ip ? entry.ip : ''}</small>` +
+                            `<div/>` +
+                        `</div>` +
+                    `</div>`
+                ).insertBefore(position);
+            }
+            let div = $("#slm-log-scroll");
+            if (data.length === 0 && div.data('slmPage') === 0) {
+                $(`<h3 class="text-center text-secondary">No Recent Activity</h3>`
+                ).insertBefore(position);
+            }
+        }
+
+        const init = function() {
+            reinitialize = true;
+            slm.initInfiniteScroll(
+                scrollDiv,
+                scrollDiv,
+                $('#slm-log-scroll .slm-loader'),
+                "slm_edit_api:logentries-list",
+                {},
+                {% if station %}{site: '{{ station }}'}{% elif log_user %}{user: '{{ log_user.email }}'}{% else %}{}{% endif %},
+                (position, data) => { drawLogs(position, data); }
+            );
+        };
+
+        const stationsFiltered = function(queryParams) {
+            scrollDiv.data('slmPage', 0);
+            scrollDiv.data('slmQuery', queryParams);
+            init();
+        }
+        /* this is a little clunky - avoid double init when station
+         * filter is present on the page
+         */
+        if ($('#filter-stations').length === 0) {
+            init();
+        } else {
+            slm.stationFilterCallbacks.push(stationsFiltered);
+        }
+    });
+</script>
+{% endcompress %}

slm/templates/slm/widgets/stationlist.html

@@ -0,0 +1,233 @@
+{% load i18n static crispy_forms_tags %}
+
+<div id="slm-station-container" class="slm-scroll-container p-2">
+    
+    <div class="pt-3 px-3">
+        <div class="d-flex flex-wrap justify-content-between align-items-center"> 
+            <h5 class="text-center mb-0"><b><span id="slm-num-stations">{{ num_sites }}</span></b> Stations</h5>
+            <a id="filter-stations" class="btn btn-{% if not station_filter %}outline-{% endif %}primary filter-popover" role="button" tabindex="0" data-bs-toggle="modal" data-bs-target="#filter" data-backdrop="false">
+                Filter <i class="bi bi-filter"></i>
+            </a>
+        </div>
+
+        <!-- Search bar -->
+        <form class="d-flex my-2 w-100">
+            <input
+                class="form-control"
+                type="search"
+                placeholder="Search"
+                aria-label="Search"
+                id="station-search"
+            >
+        </form>
+    </div>
+
+    <hr/>
+
+    <!-- List of stations -->
+    <div
+        id='slm-station-list'
+        class="list-group overflow-auto vh-100 no-scrollbar"
+        data-slm-page=0
+        data-slm-page-size={{page_size|default:30}}
+    >
+        {% if station %}
+        <button
+            class="btn mono active {{ site.status.css }}"
+            id="select-{{ station }}"
+            name="station"
+            value="{{ station }}"
+            data-bs-toggle="pill"
+            type="submit"
+            role="tab"
+            data-slm-flags={{ site.num_flags }}
+            data-slm-status={{ site.status.value }}
+            data-slm-alert={{ station_alert_level.value }}
+            aria-selected="true"><span>{{ station }}</span> <span class="badge rounded-pill bg-danger slm-error-badge" {% if not site.num_flags %}style="display: none"{% endif %}>{{site.num_flags}}</span> <i class="bi bi-bell-fill slm-alert-bell {{ station_alert_level.css }}" {% if station_alert_level is None %}style="display: none"{% endif %}></i></button>
+        {% endif %}
+        <div class="p-2 p-lg-5 d-flex justify-content-center" style="display: none">
+            <div class="slm-loader"></div>
+        </div>
+    </div>
+</div>
+
+<!-- Filter Modal -->
+<div class="modal fade" id="filter" tabindex="-1" aria-labelledby="filter-label" aria-hidden="true">
+    <div class="modal-dialog modal-xl modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="filter-label">Filter Station List</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body ui-front">
+                {% crispy filter_form %}
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary me-auto" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
+                <button id="clear-filter" type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">{% trans "Clear Filters" %}</button>
+                <button id="apply-filter" type="button" class="btn btn-success" data-bs-dismiss="modal">{% trans "Apply Filters" %}</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% load compress %}
+
+{% compress js inline %}
+
+<script type="module">
+
+    import { Form } from '{% static "slm/js/form.js" %}';
+    const filterForm = new Form($('div#filter form'));
+
+    let keyupTimeoutID = 0;
+    const stationFilter = $('#slm-station-filter');
+    function drawStations(position, data, filtered, total) {
+
+        if (filtered !== null) {
+            $('#slm-num-stations').html(filtered);
+        }
+
+        function getBadge(station) {
+            if (station.hasOwnProperty('num_flags') && station.num_flags) {
+                return `<span class="badge rounded-pill bg-danger slm-error-badge">${station.num_flags}</span>`;
+            }
+            return `<span class="badge rounded-pill bg-danger slm-error-badge" style="display: none">${station.num_flags}</span>`;
+        }
+
+        function getAlertBell(station) {
+            if (station.hasOwnProperty('max_alert') && station.max_alert !== null) {
+                let alert = slm.AlertLevel.get(station.max_alert);
+                return `<i class="bi bi-bell-fill slm-alert-bell ${ alert.css }"></i>`
+            }
+            return `<i class="bi bi-bell-fill slm-alert-bell" style="display: none"></i>`
+        }
+
+        for (const station of data) {
+            //if (station.name === '{{ station }}') continue;
+            let active = '';
+            let selected = 'false';
+            const editLink = slm.urls.reverse("{{ link_view }}", {kwargs: {station: station.name}});
+            const status = slm.SiteLogStatus.get(station.status);
+            const level = station.max_alert !== null ? slm.AlertLevel.get(station.max_alert) : null;
+            let pos = position;
+            if (station.name === '{{ station }}') {
+                if (
+                    position.parent().children(
+                        `#select-${ station.name }`
+                    ).length)
+                { continue; }
+                active = 'active';
+                selected = 'true';
+                pos = position.parent().children().first();
+            }
+            $(
+                `<button onclick="window.location.href='${editLink}'"
+                    class="btn mono ${active} ${status.css}"
+                    id="select-${station.name}" name="station"
+                    value="${station.name}"
+                    data-bs-toggle="pill"
+                    type="submit"
+                    role="tab"
+                    data-slm-flags=${station.num_flags}
+                    data-slm-status=${status.val}
+                    data-slm-alert=${level ? level.val : null}
+                    aria-selected="${selected}"><span>${station.name}</span> ${getBadge(station)} ${getAlertBell(station)}</button>`
+            ).insertBefore(pos);
+        }
+    }
+    $(document).ready(function() {
+
+        const stationList = $("#slm-station-list");
+        const searchInput = $('#station-search');
+        const filterInput = $("#apply-filter");
+        const filterStations = $("#filter-stations");
+        const clearFilter = $('#clear-filter');
+
+        function init() {
+            slm.initInfiniteScroll(
+                stationList,
+                stationList,
+                $('#slm-station-list .slm-loader'),
+                "slm_edit_api:stations-list",
+                {},
+                {},
+                drawStations
+            );
+            slm.stationFilterChanged(stationList.data('slmQuery'));
+        }
+
+        searchInput.keypress(function (event) {
+            if (event.key === "Enter") {
+                searchInput.blur();
+                return false;
+            }
+        });
+        searchInput.on('input', function() {
+            clearTimeout(keyupTimeoutID);
+            keyupTimeoutID = setTimeout(function() {
+                stationList.find('button').not('.active').remove();
+                // replace below line with above one to keep current station in the
+                // list regardless of filter
+                //stationList.find('button').not(`#select-{{ station }}`).remove();
+                let query = stationList.data('slmQuery') || {};
+                if (searchInput.val()) {
+                    query.name = searchInput.val();
+                } else {
+                    if (query.hasOwnProperty('name')) {
+                        delete query.name;
+                    }
+                }
+                stationList.data('slmPage', 0);
+                stationList.data('slmQuery', query);
+                init();
+            }, 500);
+        });
+
+        const getQuery = function() {
+            const query = filterForm.data;
+            if (searchInput.val()) {
+                query.name = searchInput.val();
+            }
+            if (query.hasOwnProperty('csrfmiddlewaretoken')) {
+                delete query['csrfmiddlewaretoken'];
+            }
+            return query;
+        }
+
+        const applyFilter = function() {
+            stationList.find('button').not('.active').remove();
+            let query = getQuery();
+            if (filterForm.hasChanged()) {
+                filterStations.removeClass("btn-outline-primary").addClass("btn-primary");
+            } else {
+                filterStations.removeClass("btn-primary").addClass("btn-outline-primary");
+            }
+            // uncomment to keep current station in the list regardless of filter
+            //{% if site %}query.id = [{{site.pk}}];{% endif %}
+            stationList.data('slmPage', 0);
+            stationList.data('slmQuery', query);
+            filterForm.persist();
+            init();
+        }
+
+        filterInput.click(applyFilter);
+
+        clearFilter.on('click', function() {
+            filterForm.clear();
+            applyFilter();
+        });
+
+        if (!filterForm.hasChanged()) {
+            /**
+             * If the form differs from its clear state, then url parameters
+             * set values on it and we should not revive it from session
+             * storage.
+             */
+            filterForm.revive();
+        }
+        applyFilter();
+    });
+
+</script>
+{% endcompress %}

slm/templatetags/jinja2.py

@@ -0,0 +1,9 @@
+from jinja2 import Environment, Undefined
+
+from slm.templatetags import slm
+
+
+def compat(**options):
+    env = Environment(**{**options, "undefined": Undefined})
+    env.filters.update(slm.register.filters)
+    return env