From 96acd59ff187848d2a6194567c06598bba075394 Mon Sep 17 00:00:00 2001
From: VladislavOstapov <vlados.ost.31@yandex.ru>
Date: Mon, 15 Jan 2024 17:00:57 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BC=D0=BE=D1=82=D0=BE=D1=87=D0=B0=D1=81=D1=8B=20=D0=B8=20?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=BF=D1=83=D1=89=D0=B5=D0=BD=D0=BD=D1=8B=D0=B9=20?=
 =?UTF-8?q?=D0=BD=D0=B0=D1=81=D0=BE=D1=81=20=D0=B2=20=D0=BF=D1=80=D0=BE?=
 =?UTF-8?q?=D1=87=D0=B8=D0=B5=20=D0=BF=D0=BE=D0=BA=D0=B0=D0=B7=D0=B0=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BB=D0=B8,=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BD=D0=B5=D0=BC=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=B2?=
 =?UTF-8?q?=D0=B5=D1=80=D1=81=D1=82=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/css/style.css |  2 +-
 templates/index.html | 71 +++++++++++++++++++++++++++++++-------------
 2 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 77d0eb2..20cc692 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -45,7 +45,7 @@ body {
 }
 
 #content {
-  margin: 0.2em;
+  margin: 0.5em;
 }
 
 /* ========== MAIN STYLES ========== */
diff --git a/templates/index.html b/templates/index.html
index 7c5339a..a62fcfd 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,15 +11,25 @@
 
 {% block styles %}
 <style>
-    .content-wrapper {
+    /* родительский блок для всех групп параметров */
+    .params-wrapper, .multiply-params-wrapper {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
     }
 
-    .content-block {
+    /* блок с заголовком и группой параметров */
+    .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;
@@ -28,38 +38,59 @@
 {% endblock %}
 
 {% block content %}
-<div>
-    <div class="content-wrapper">
-        <div class="content-block">
-            <h2>Состояние насосной станции</h2>
+<div class="params-wrapper">
+    <div>
+        <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>
-        <div class="content-block">
-            <h2>Состояние резервуара</h2>
+    </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 class="content-block chart">
-        <div id="canvas-wrapper"><canvas id="water_level"></canvas></div>
-    </div>
-    <div class="content-block">
+</div>
+
+<div class="content-block chart">
+    <div id="canvas-wrapper"><canvas id="water_level"></canvas></div>
+</div>
+
+<div class="params-wrapper">
+    <div>
         <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 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" class="value-bad">NI</span></p>
+                <p>Моточасы насоса 1: <span id="pump-moto-watch-1" class="value-bad">NI</span></p>
+                <p>Моточасы насоса 2: <span id="pump-moto-watch-2" class="value-bad">NI</span></p>
+            </div>
+        </div>
     </div>
-    <div class="content-block">
+</div>
+
+
+<div class="params-wrapper">
+    <div>
         <h2>Настройки</h2>
-        <div>
-            <label for="settings-chart-time">Период на графике (дней): </label>
-            <input id="settings-chart-time" type="number" min="1" max="31">
+        <div class="params-group">
+            <p>
+                <label for="settings-chart-time">Период на графике (дней): </label>
+                <input id="settings-chart-time" type="number" min="1" max="31">
+            </p>
         </div>
     </div>
 </div>