ospaz-site/templates/index.html

{% extends 'base.html' %}
{% load static %}

{% block head %}
<meta name="description" content="Состояние резервуара, насосной станции и график резервуара">

<script src="{% static 'js/chart-4.4.1.umd.js' %}"></script>
<script src="{% static 'js/moment-2.js' %}"></script>
<script src="{% static 'js/chartjs-adapter-moment.js' %}"></script>

<script src="{% static 'js/index-main.js' %}"></script>
{% endblock %}

{% block styles %}
<style>
    /* родительский блок для всех групп параметров */
    .params-wrapper, .multiply-params-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* блок с заголовком и группой параметров */
    .params-wrapper > div {
        margin: 0.5em;
    }
    .multiply-params-wrapper > .params-group {
        margin-right: 1em;
    }

    /* блок непосредственно с параметрами */
    .params-group {
        /*border: red 1px dashed;*/
    }

    #canvas-wrapper {
        max-width: 1000px;
    }

    .error-message {
        border: 2px var(--text-bad) solid;
        border-radius: 8px;
        margin: 0.5em 0;
        padding: 0.5em;
        color: var(--text-bad);
        text-align: center;
    }
</style>
{% endblock %}

{% block content %}
<div id="stats-update-error" class="error-message" hidden>Ошибка обновления состояния</div>
<div id="chart-update-error" class="error-message" hidden>Ошибка обновления графика</div>
<div class="params-wrapper">
    <div>
        {% if perms.logs_service.view_pump_stats %}
        <h2>Состояние насосной станции</h2>
        <div class="params-group">
            <p>Последнее обновление: <span id="pump-last-update"></span></p>
            <p>Регистр аварий: <span id="pump-alarms"></span></p>
            <p>Состояние КА: <span id="pump-stage"></span></p>
            <p>Текущий расход: <span id="pump-flow-meter"></span>м³/ч</p>
        </div>
        {% endif %}
    </div>
    <div>
        <h2>Состояние резервуара</h2>
        <div class="params-group">
            <p>Последнее обновление: <span id="tank-last-update"></span></p>
            <p>Текущий уровень воды: <span id="tank-level-now"></span>%</p>
            <p>Уровень воды <span id="tank-level-dir"></span></p>
            <p>Статус: <span id="tank-status"></span></p>
        </div>
    </div>
</div>

<div class="content-block chart">
    <div id="canvas-wrapper"><canvas id="water_level"></canvas></div>
</div>

{% if perms.logs_service.view_pump_stats %}
<div class="params-wrapper">
    <div>
        <h2>Прочие показатели</h2>
        <div class="multiply-params-wrapper">
            <div class="params-group">
                <p>Частота ПЧ: <span id="pump-vfd-freq"></span>Гц</p>
                <p>Ток ПЧ: <span id="pump-vfd-curr"></span>А</p>
                <p>Ошибка ПЧ: <span id="pump-vfd-error"></span></p>
                <p>Текущее значение с радара: <span id="tank-raw-now"></span>м</p>
            </div>
            <div class="params-group">
                <p>Запущенный насос: <span id="pump-running"></span></p>
                <p>Моточасы насоса 1: <span id="pump-moto-watch-1"></span></p>
                <p>Моточасы насоса 2: <span id="pump-moto-watch-2"></span></p>
                <p>Дистанционный режим: <span id="pump-remote-mode"></span></p>
            </div>
        </div>
    </div>
</div>
{% endif %}



<div class="params-wrapper">
    <div>
        <h2>Настройки</h2>
        <div class="params-group">
            <p>
                <label for="settings-chart-time">Период на графике (дней): </label>
                <input id="settings-chart-time" type="number" min="1" max="31">
            </p>
            <p>Просмотр профиля: <a href="{% url 'account-view' %}">{{ user.login }}</a></p>
            {% if perms.users.view_user %}
            <p><a href="{% url 'accounts-list' %}"> Просмотр всех аккаунтов </a></p>
            {% endif %}
        </div>
    </div>
</div>

<script>
    moment.locale('ru')

    const bodyStyles = window.getComputedStyle(document.body);

    const chart_dataset = {
        label: "Резервуар, уровень в %",
        color: bodyStyles.getPropertyValue('--brand-text'),
        data: [],
        pointRadius: 0
    }

    Chart.defaults.color = bodyStyles.getPropertyValue('--text-color2');

    const chart = new Chart("water_level", {
        type: "line",
        data: {
            datasets: [chart_dataset]
        },
        options: {
            responsive: true,
            legend: { display: false },
            scales: {
                // y: { min: 0, max: 100 }, // раскомментировать, если хочется шкалу от 0 до 100, а так она будет автоматической
                x: {
                    type: 'time',
                    time: {
                        unit: 'day',
                        tooltipFormat: DATETIME_FORMAT,
                    },
                    scaleLabel: {
                        labelString: 'Timestamp'
                    }
                }
            }
        }
    });

    document.addEventListener("DOMContentLoaded", (event) => {
        // получаем элементы настроек
        const settingsChartTime = document.getElementById('settings-chart-time')

        // устанавливаем поле settings-chart-time
        let chartTime = localStorage.getItem("settings-chart-time")
        if (chartTime === null) {
            // по умолчанию 7 дней
            localStorage.setItem('settings-chart-time', '7')
            settingsChartTime.value = 7
        } else {
            settingsChartTime.value = chartTime
        }

        // запуск обновления статистики
        updateStatus().then(() => {
            setInterval(() => {
                updateStatus().then()
            }, RELOAD_STATS_INTERVAL)
        })

        function updateChart(data) {
            chart_dataset.data = data.map((e) => {
                return {x: new Date(e[0] * 1000), y: e[1]}
            })
            chart.update();
        }

        let chartUpdateTimer = null
        loadChartData().then((data) => {
            updateChart(data)

            // интервал обновления графика - 1% показываемого времени (2 недели)

            const RELOAD_CHART_INTERVAL = (3600 * 1000 * 24 * parseInt(chartTime)) / 100

            chartUpdateTimer = setInterval(() => {
                loadChartData().then((d) => {
                    updateChart(d)
                })
            }, RELOAD_CHART_INTERVAL)
        })

        settingsChartTime.onchange = (event) => {
            chartTime = settingsChartTime.value
            localStorage.setItem('settings-chart-time', chartTime)

            // TODO сделать динамическое обновление графика без перезагрузки страницы
            window.location.reload()
        };
    });
</script>
{% endblock %}