Update plot_week.html

plot_week.html

@@ -17,42 +17,36 @@ body {
     margin: 0;
     padding: 0;
 }
-
 .container {
     width: 100%;
     max-width: 100%;
 }
-
 /* Шапка */
 .header {
     width: 100%;
-    padding: 5px 0; /* Убраны отступы справа и слева */
+    padding: 5px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #f8f9fa;
     border-bottom: 1px solid #ddd;
 }
-
 /* Кнопки и лейбл в шапке */
 .header .buttons, 
 .header .label {
-    margin: 0; /* Полностью убраны отступы */
+    margin: 0;
 }
-
 /* Контейнер графика */
 .graph-container {
     width: 100%;
     margin-bottom: 30px;
 }
-
 /* График */
 .graph {
     width: 100%;
     height: 500px;
     max-width: 100%;
 }
-
 /* Сообщение "нет данных" */
 .no-data-message {
     font-size: 18px;
@@ -60,38 +54,32 @@ body {
     text-align: center;
     margin-top: 20px;
 }
-
 /* Кнопки переключения недель */
 .week-buttons {
     display: flex;
     justify-content: center;
     margin: 20px 0;
 }
-
 /* Адаптивность для телефонов (до 768px) */
 @media (max-width: 768px) {
     .header {
-        flex-direction: column; /* Кнопки и лейбл станут в колонку */
+        flex-direction: column;
         align-items: center;
     }
-
     .graph-container {
-        margin-bottom: 45px; /* Увеличен отступ между графиками */
+        margin-bottom: 45px;
     }
-
     .graph {
-        height: 330px; /* Увеличена высота графика */
+        height: 330px;
     }
 }
-
 /* Адаптивность для маленьких телефонов (до 480px) */
 @media (max-width: 480px) {
     .graph-container {
-        margin-bottom: 50px; /* Ещё больше отступ между графиками */
+        margin-bottom: 50px;
     }
-
     .graph {
-        height: 280px; /* Ещё немного увеличил высоту */
+        height: 280px;
     }
 }
 </style>
@@ -155,52 +143,57 @@ body {
                 showlegend: false
             });
         }
-
-        createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
-        createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
-        createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
-        createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
-        createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
-        createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
-
-        Plotly.newPlot("pump_chart", [
-            {
-                x: data.dates,
-                y: data.onA,
-                type: "scatter",
-                mode: "lines+markers",
-                line: { color: "green" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
-                )
-            },
-            {
-                x: data.dates,
-                y: data.onB,
-                type: "scatter",
-                mode: "lines+markers",
-                line: { color: "brown" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
-                )
-            },
-            {
-                x: data.dates,
-                y: data.onC,
-                type: "scatter",
-                mode: "lines+markers",
-                line: { color: "orange" },
-                hovertemplate: data.days_of_week.map((day, index) =>
-                    `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
-                )
-            }
-        ], {
-            title: `Интервал дозирования насосов для ${data.week}-ой недели`,
-            xaxis: { title: "", showticklabels: false },
-            yaxis: { title: "Время ВКЛ(сек.)" },
-            hovermode: "closest",
-            showlegend: false
-        });
+        function updateCharts() {
+            $.get("/plot_week?week=" + {{ week_number }}, function(data) {
+                // Обновление графиков с новыми данными
+                createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
+                createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
+                createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
+                createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
+                createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
+                createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
+                Plotly.newPlot("pump_chart", [
+                    {
+                        x: data.dates,
+                        y: data.onA,
+                        type: "scatter",
+                        mode: "lines+markers",
+                        line: { color: "green" },
+                        hovertemplate: data.days_of_week.map((day, index) =>
+                            `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
+                        )
+                    },
+                    {
+                        x: data.dates,
+                        y: data.onB,
+                        type: "scatter",
+                        mode: "lines+markers",
+                        line: { color: "brown" },
+                        hovertemplate: data.days_of_week.map((day, index) =>
+                            `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
+                        )
+                    },
+                    {
+                        x: data.dates,
+                        y: data.onC,
+                        type: "scatter",
+                        mode: "lines+markers",
+                        line: { color: "orange" },
+                        hovertemplate: data.days_of_week.map((day, index) =>
+                            `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
+                        )
+                    }
+                ], {
+                    title: `Интервал дозирования насосов для ${data.week}-ой недели`,
+                    xaxis: { title: "", showticklabels: false },
+                    yaxis: { title: "Время ВКЛ(сек.)" },
+                    hovermode: "closest",
+                    showlegend: false
+                });
+            });
+        }
+        
+        setInterval(updateCharts, 10000); // Обновление графиков каждые 10 секунд
     </script>
 {% else %}
     <div class="no-data-message">
@@ -217,36 +210,25 @@ body {
         }
     }
 </script>
-  
-
 
 <script>
     document.getElementById("st_onl").addEventListener("click", function() {
-        // Получаем основной URL без пути и параметров
         var baseUrl = window.location.origin;
-        // Добавляем необходимый путь к основному URL
         var targetUrl = baseUrl + "/online";
-        // Переходим по сформированному URL
         window.location.href = targetUrl;
     });
 </script>
 <script>
     document.getElementById("st_set").addEventListener("click", function() {
-        // Получаем основной URL без пути и параметров
         var baseUrl = window.location.origin;
-        // Добавляем необходимый путь к основному URL
         var targetUrl = baseUrl + "/settings";
-        // Переходим по сформированному URL
         window.location.href = targetUrl;
     });
 </script>
 <script>
     document.getElementById("st_plot").addEventListener("click", function() {
-        // Получаем основной URL без пути и параметров
         var baseUrl = window.location.origin;
-        // Добавляем необходимый путь к основному URL
         var targetUrl = baseUrl + "/plot_week";
-        // Переходим по сформированному URL
         window.location.href = targetUrl;
     });
 </script>