{% 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 {
        width: 100%;
    }

    .value-good {
        color: green;
    }

    .value-bad {
        color: red;
    }
</style>
{% endblock %}

{% block header %}
<h1> Мониторинг водозаборного узла </h1>
{% if user.is_superuser %}
<a href="/admin">Админка</a>
{% endif %}
{% 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-vfd-freq"></span>Гц</p>
            <p>Ток ПЧ: <span id="pump-vfd-curr"></span>А</p>
            <p>Ошибка ПЧ: <span id="pump-vfd-error"></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-raw-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">
        <h2> Уровень воды в резервуаре, %</h2>
        <div id="canvas-wrapper"><canvas id="water_level"></canvas></div>
    </div>
</div>

<script>
    moment.locale('ru')

    let 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 },
                x: {
                    type: 'time',
                    time: {
                        unit: 'day'
                    },
                    scaleLabel: {
                        labelString: 'Timestamp'
                    }
                }
            }
        }
    });

    document.addEventListener("DOMContentLoaded", (event) => {
        // запуск обновления статистики
        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();
        }

        loadChartData().then((data) => {
            updateChart(data)

            setInterval(() => {
                loadChartData().then((d) => {
                    updateChart(d)
                })
            }, RELOAD_CHART_INTERVAL)
        })
    });
</script>
{% endblock %}