From af3f83841fafeac164d7018dd190dec3c6d648e8 Mon Sep 17 00:00:00 2001
From: Maxim Prokhorov <prokhorov.max@outlook.com>
Date: Sat, 3 Aug 2024 01:17:17 +0300
Subject: [PATCH] emon: side-by-side current and expected values

---
 code/html/src/index.css         | 16 +++++++++++-----
 code/html/src/sensor.mjs        |  8 ++++----
 code/html/src/template-sns.html | 33 ++++++++++++++++++++++++---------
 3 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/code/html/src/index.css b/code/html/src/index.css
index 640ac4c882..b1ce232b7b 100644
--- a/code/html/src/index.css
+++ b/code/html/src/index.css
@@ -123,6 +123,14 @@ div.center {
     margin: .5em 0 1em;
 }
 
+span.hidden {
+    content-visibility: hidden;
+}
+
+span.visible {
+    content-visibility: visible;
+}
+
 .webmode {
     display: none;
 }
@@ -189,11 +197,9 @@ label {
     text-align: left;
 }
 
-.emon-expected-pwrP,
-.emon-expected-volt,
-.emon-expected-curr,
-.emon-expected-ene {
-    content-visibility: hidden;
+.emon-expected {
+    border-bottom: 1px solid #e5e5e5;
+    margin-bottom: 1.6em;
 }
 
 /* -----------------------------------------------------------------------------
diff --git a/code/html/src/sensor.mjs b/code/html/src/sensor.mjs
index 7de62a5697..de71e20761 100644
--- a/code/html/src/sensor.mjs
+++ b/code/html/src/sensor.mjs
@@ -427,10 +427,10 @@ function initMagnitudesExpected(id) {
     expected.id = expected.name;
     expected.dataset["id"] = info.id.toString();
 
-    const messageClass = `emon-visible-${info.prefix}`;
-    if (!container.querySelector(`.emon-expected.${messageClass}`)) {
-        const [top] = template.querySelectorAll("div");
-        top.classList.add(messageClass);
+    const [message] = /** @type {NodeListOf<HTMLSpanElement>} */
+        (template.querySelectorAll(`span.emon-expected-${info.prefix}`));
+    if (message) {
+        message.classList.replace("hidden", "visible");
     }
 
     mergeTemplate(container, template);
diff --git a/code/html/src/template-sns.html b/code/html/src/template-sns.html
index 301f8c39e0..b757ba7880 100644
--- a/code/html/src/template-sns.html
+++ b/code/html/src/template-sns.html
@@ -1,7 +1,7 @@
-<template id="template-magnitude-info">
+<template id="template-magnitude-status">
     <div class="pure-control-group">
         <label></label>
-        <input readonly class="pure-input-1-3" type="text" name="magnitude">
+        <input name="magnitude:" type="text" class="pure-input-1-3" readonly >
         <span class="pure-form-message-inline magnitude-info"></span>
         <span class="pure-form-message-inline magnitude-description"></span>
     </div>
@@ -15,14 +15,29 @@
 </template>
 
 <template id="template-emon-expected">
-    <div class="pure-control-group">
-        <label></label>
-        <div class="pure-u-1 pure-u-lg-1-4">
+    <div class="pure-form pure-form-aligned emon-expected">
+        <div class="pure-control-group">
+            <label></label>
+            <input name="magnitude:" type="text" class="emon-magnitude-value" readonly >
+            <span class="pure-form-message-inline"></span>
+        </div>
+        <div class="pure-control-group">
+            <label>Ratio</label>
+            <input name="result:" type="text" class="emon-expected-result" readonly >
+            <span class="pure-form-message-inline"></span>
+        </div>
+        <div class="pure-control-group">
+            <label>Expected value</label>
             <input name="expected:" type="text" class="emon-expected-input">
-            <input readonly name="result:" type="text" class="emon-expected-result">
+            <span class="pure-form-message-inline hidden emon-expected-pwrP">
+                In Watts (W). Calibrate your sensor connecting a pure resistive load (like a bulb) and enter here its nominal power or use a multimeter.
+            </span>
+            <span class="pure-form-message-inline hidden emon-expected-volt">
+                In Volts (V). Enter your the nominal AC voltage for your household or facility, or use multimeter to get this value.
+            </span>
+            <span class="pure-form-message-inline hidden emon-expected-curr">
+                In Amperes (A). If you are using a pure resistive load like a bulb, this will be the ratio between the two previous values, i.e. power / voltage. You can also use a current clamp around one of the power wires to get this value.
+            </span>
         </div>
-        <span class="pure-form-message-inline emon-expected-pwrP">In Watts (W). Calibrate your sensor connecting a pure resistive load (like a bulb) and enter here its nominal power or use a multimeter.</span>
-        <span class="pure-form-message-inline emon-expected-volt">In Volts (V). Enter your the nominal AC voltage for your household or facility, or use multimeter to get this value.</span>
-        <span class="pure-form-message-inline emon-expected-curr">In Amperes (A). If you are using a pure resistive load like a bulb, this will be the ratio between the two previous values, i.e. power / voltage. You can also use a current clamp around one of the power wires to get this value.</span>
     </div>
 </template>