еще косметические исправления, на страницу теперь приятно смотреть

templates/index.html

@@ -22,15 +22,15 @@
     }
 
     #canvas-wrapper {
-        width: 100%;
+        max-width: 1000px;
     }
 
     .value-good {
-        color: green;
+        color: var(--text-good);
     }
 
     .value-bad {
-        color: red;
+        color: var(--text-bad);
     }
 </style>
 {% endblock %}
@@ -49,9 +49,6 @@
         <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>
@@ -60,24 +57,36 @@
             <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 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')
 
-    let bodyStyles = window.getComputedStyle(document.body);
+    const bodyStyles = window.getComputedStyle(document.body);
 
     const chart_dataset = {
-        label: "Резервуар",
+        label: "Резервуар, уровень в %",
         color: bodyStyles.getPropertyValue('--brand-text'),
         data: [],
         pointRadius: 0
@@ -94,7 +103,7 @@
             responsive: true,
             legend: { display: false },
             scales: {
-                y: { min: 0, max: 100 },
+                // y: { min: 0, max: 100 }, // раскомментировать, если хочется шкалу от 0 до 100, а так она будет автоматической
                 x: {
                     type: 'time',
                     time: {
@@ -109,6 +118,19 @@
     });
 
     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(() => {
@@ -123,15 +145,28 @@
             chart.update();
         }
 
+        let chartUpdateTimer = null
         loadChartData().then((data) => {
             updateChart(data)
 
-            setInterval(() => {
+            // интервал обновления графика - 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 %}