ospaz-site/templates/index.html

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

{% block head %}
<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>
    .content-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .content-block {
        margin: 0.5em;
    }

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

    .value-good {
        color: var(--text-good);
    }

    .value-bad {
        color: var(--text-bad);
    }
</style>
{% endblock %}

{% block content %}
<div>
    <div class="content-wrapper">
        <div class="content-block">
            <h2>Состояние насосной станции</h2>
            <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>
        <div class="content-block">
            <h2>Состояние резервуара</h2>
            <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 class="content-block chart">
        <div id="canvas-wrapper"><canvas id="water_level"></canvas></div>
    </div>
    <div class="content-block">
        <h2>Прочие показатели</h2>
        <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="content-block">
        <h2>Настройки</h2>
        <div>
            <label for="settings-chart-time">Период на графике (дней): </label>
            <input id="settings-chart-time" type="number" min="1" max="31">
        </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'
                    },
                    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 %}