feat: ability to reset fault on the dashboard

src_data/locales/en.json

@@ -87,6 +87,18 @@
         "turbo": "Turbo mode"
       },
 
+      "notify": {
+        "fault": {
+          "title": "Boiler Fault state is active!",
+          "note": "It is recommended to inspect the boiler and study the documentation to interpret the fault code:"
+        },
+        "diag": {
+          "title": "Boiler Diagnostic state is active!",
+          "note": "Perhaps your boiler needs inspection? It is recommended study the documentation to interpret the diag code:"
+        },
+        "reset": "Try reset"
+      },
+
       "states": {
         "mNetworkConnected": "Network connection",
         "mMqttConnected": "MQTT connection",

src_data/locales/ru.json

@@ -87,6 +87,18 @@
         "turbo": "Турбо"
       },
 
+      "notify": {
+        "fault": {
+          "title": "Состояние неисправности котла активно!",
+          "note": "Рекомендуется осмотреть котел и изучить документацию котла для расшифровки кода неисправности:"
+        },
+        "diag": {
+          "title": "Состояние диагностики котла активно!",
+          "note": "Возможно, вашему котлу требуется проверка? Рекомендуется изучить документацию котла для расшифровки кода диагностики:"
+        },
+        "reset": "Сбросить"
+      },
+
       "states": {
         "mNetworkConnected": "Подключение к сети",
         "mMqttConnected": "Подключение к MQTT",

src_data/pages/dashboard.html

@@ -71,6 +71,36 @@
                 </div>
               </div>
             </div>
+            
+            <div class="notify notify-error notify-fault hidden">
+              <div class="notify-icon">
+                <i class="icons-error"></i>
+              </div>
+              <div class="notify-content">
+                <b data-i18n>dashboard.notify.fault.title</b><br />
+                <small>
+                  <span data-i18n>dashboard.notify.fault.note</span> <b class="sFaultCode"></b>
+                </small>
+              </div>
+              <div class="notify-actions">
+                <button class="reset" data-i18n>dashboard.notify.reset</button>
+              </div>
+            </div>
+
+            <div class="notify notify-alarm notify-diag hidden">
+              <div class="notify-icon">
+                <i class="icons-alarm"></i>
+              </div>
+              <div class="notify-content">
+                <b data-i18n>dashboard.notify.diag.title</b><br />
+                <small>
+                  <span data-i18n>dashboard.notify.diag.note</span> <b class="sDiagCode"></b>
+                </small>
+              </div>
+              <div class="notify-actions">
+                <button class="reset" data-i18n>dashboard.notify.reset</button>
+              </div>
+            </div>
           </details>
 
           <hr />
@@ -358,6 +388,60 @@
           newSettings.dhw.enabled = event.currentTarget.checked;
         });
 
+        document.querySelector('.notify-fault .reset').addEventListener('click', async (event) => {
+          const resetBtn = document.querySelector(".notify-fault .reset");
+          if (!resetBtn.disabled) {
+            resetBtn.disabled = true;
+          }
+
+          let response = await fetch("/api/vars", {
+            method: "POST",
+            cache: "no-cache",
+            credentials: "include",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+              "actions": {
+                "resetFault": true
+              }
+            })
+          });
+
+          setTimeout(() => {
+            if (resetBtn.disabled) {
+              resetBtn.disabled = false;
+            }
+          }, 10000);
+        });
+
+        document.querySelector('.notify-diag .reset').addEventListener('click', async (event) => {
+          const resetBtn = document.querySelector(".notify-diag .reset");
+          if (!resetBtn.disabled) {
+            resetBtn.disabled = true;
+          }
+
+          let response = await fetch("/api/vars", {
+            method: "POST",
+            cache: "no-cache",
+            credentials: "include",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+              "actions": {
+                "resetDiagnostic": true
+              }
+            })
+          });
+
+          setTimeout(() => {
+            if (resetBtn.disabled) {
+              resetBtn.disabled = false;
+            }
+          }, 10000);
+        });
+
         setTimeout(async function onLoadPage() {
           let unitSystem = null;
 
@@ -494,6 +578,13 @@
                 : "-"
             );
 
+            if (result.slave.fault.active) {
+              show(".notify-fault");
+
+            } else {
+              hide('.notify-fault');
+            }
+
             setStatus(
               '.sDiagActive',
               result.slave.diag.active ? "success" : "error",
@@ -506,6 +597,13 @@
                 : "-"
             );
 
+            if (result.slave.diag.active) {
+              show(".notify-diag");
+
+            } else {
+              hide('.notify-diag');
+            }
+
 
             // MASTER
             setState('.mHeatEnabled', result.master.heating.enabled);

src_data/styles/app.css

@@ -115,6 +115,7 @@ tr.network:hover {
   font-family: var(--pico-font-family-monospace);
 }
 
+
 .thermostat {
   display: grid;
   grid-template-columns: 0.5fr 2fr 0.5fr;
@@ -193,6 +194,92 @@ tr.network:hover {
   margin: 1.25rem 0;
 }
 
+
+@media (max-width: 575px) {
+  .notify {
+    display: grid; 
+    grid-template-columns: 1fr; 
+    grid-template-rows: 1fr 0.5fr; 
+    gap: 0.5rem 0.5rem;
+    grid-template-areas: 
+      "notify-content"
+      "notify-actions"; 
+  }
+
+  .notify-icon {
+    display: none;
+  }
+
+  .notify-content {
+    justify-self: center;
+    align-self: center;
+    grid-area: notify-content; 
+  }
+
+  .notify-actions {
+    justify-self: center; 
+    align-self: center; 
+    grid-area: notify-actions; 
+  }
+}
+
+@media (min-width: 576px) {
+  .notify {
+    display: grid;
+    grid-template-columns: 5rem 1fr 10rem;
+    grid-template-rows: 1fr;
+    gap: 0rem 0.5rem;
+    grid-auto-flow: row;
+    grid-template-areas:
+      "notify-icon notify-content notify-actions";
+  }
+
+  .notify-icon {
+    justify-self: center;
+    align-self: center;
+    grid-area: notify-icon;
+  }
+
+  .notify-content {
+    justify-self: center;
+    align-self: center;
+    grid-area: notify-content;
+  }
+  
+  .notify-actions {
+    justify-self: center;
+    align-self: center;
+    grid-area: notify-actions;
+  }
+}
+
+.notify {
+  margin: 1rem;
+  padding: 0.5rem;
+  border: .25rem solid var(--pico-blockquote-border-color);
+}
+
+.notify-error {
+  border-color: var(--pico-form-element-invalid-border-color);
+}
+
+.notify-error .notify-icon {
+  color: var(--pico-form-element-invalid-border-color);
+}
+
+.notify-alarm {
+  border-color: #c89048;
+}
+
+.notify-alarm .notify-icon {
+  color: #c89048;
+}
+
+.notify-icon i {
+  font-size: 2.5rem;
+}
+
+
 [class*=" icons-"],
 [class=icons],
 [class^=icons-] {