add JS for formular Powermeter-DropDown

show all DIVs and remove only what is not necessary

src/web/html/setup.html

@@ -1288,6 +1288,7 @@
             }
 
             /*IF_PLUGIN_ZEROEXPORT*/
+
             function apiCbBattOnOff(obj) {
 //                var e = document.getElementById("battSwitch");
 //                e.value = "88";
@@ -1382,13 +1383,16 @@
                     ]),
                     // Powermeter
                     ml("div", {id: "div{#ZE_GROUP_TAB_POWERMETER}", class: "tab-content hide"}, [
-                        divRow("{#ZE_GROUP_TAB_POWERMETER_REFRESH}",
-                            ml("input", {name: "pm_refresh", class: "text", type: "number", min: "1", max: "30", step: "1", value: obj.pm_refresh}, null),
-                        ),
                         divRow("{#ZE_GROUP_TAB_POWERMETER_TYPE}",
                             ml("select", {name: "pm_type", class: "text", id: "pm_type"}, null),
                         ),
+                        divRow("{#ZE_GROUP_TAB_POWERMETER_REFRESH}",
+                            ml("input", {name: "pm_refresh", class: "text", type: "number", min: "1", max: "30", step: "1", value: obj.pm_refresh}, null),
+                        ),
 // TODO: URL -> IP
+                        divRow("{#ZE_GROUP_TAB_POWERMETER_TARGET}",
+                            ml("select", {name: "pm_target", class: "text", id: "pm_target"}, null),
+                        ),
                         divRow("{#ZE_GROUP_TAB_POWERMETER_IP}", [
                             ml("input", {name: "pm_url", class: "text", type: "text", value: obj.pm_url, maxlength: "100"}, null),
                         ]),
@@ -1401,8 +1405,8 @@
                         divRow("{#ZE_GROUP_TAB_POWERMETER_PASS}",
                             ml("input", {name: "pm_pass", class: "text", type: "password", value: "****"}, null),
                         ),
-                        divRow("{#ZE_GROUP_TAB_POWERMETER_TARGET}",
-                            ml("select", {name: "pm_target", class: "text", id: "pm_target"}, null),
+                        divRow("{#ZE_GROUP_TAB_POWERMETER_TOPIC}",
+                            ml("input", {id: 3, name: "pm_topic", class: "text", type: "text", value: ""}, null),
                         ),
 // TODO: Uebersetzen mit lang.json und auf die entsprechende Dokuseite verlinken
                         divRow("Hinweis: ",
@@ -1482,7 +1486,6 @@
 // Inhalt fuer pm_type aus config laden und in eine Funktion ausgliedern
                 var e = document.getElementById("pm_type");
                 selDelAllOpt(e);
-// TODO: uebersetzen?
                 e.appendChild(opt("0", "---"));
                 e.appendChild(opt("1", "Shelly"));
                 //e.appendChild(opt("2", "Tasmota"));
@@ -1495,6 +1498,7 @@
                         e.selectedIndex = i;
                     }
                 }
+
                 // - pm_target
                 var e = document.getElementById("pm_target");
                 selDelAllOpt(e);
@@ -1508,6 +1512,14 @@
                     }
                 }
 
+                // add addEventListener
+                const selectElement = document.querySelector("#pm_type");
+                //selectElement.addEventListener("change", (event) => { pm_type_dropdown() });
+                selectElement.addEventListener("change", (event) => { pm_type_dropdown() });
+
+                // run event one time
+                pm_type_dropdown();
+
                 // Tab_Inverters
                 // - Enabled
                 for (var inv = 0; inv < maxInv; inv++) {
@@ -1559,6 +1571,33 @@
                     }
                 }
 
+                function pm_type_dropdown()
+                {
+                    var e = document.getElementsByName("pm_type")[0];
+                    var value = e.options[e.selectedIndex].text;
+
+                    var divsToHide = document.getElementById("divPowermeter");
+
+                    // Formular for Powermeter-DropDown
+                    // show all DIVs and remove only what is not necessary
+                    for(var i = 0; i < divsToHide.childElementCount; i++) divsToHide.childNodes[i].style.display = '';
+
+                    if(value == "---") for(var i = 1; i < divsToHide.childElementCount; i++) divsToHide.childNodes[i].style.display = 'none';
+                    else if(value == "Shelly") {
+                        divsToHide.childNodes[7].style.display = 'none';
+                    }
+                    else if(value == "Mqtt") {
+                        divsToHide.childNodes[3].style.display = 'none';
+                        divsToHide.childNodes[4].style.display = 'none';
+                        divsToHide.childNodes[5].style.display = 'none';
+                        divsToHide.childNodes[6].style.display = 'none';
+                    }
+                    else if(value == "Tibber") {
+                        divsToHide.childNodes[4].style.display = 'none';
+                        divsToHide.childNodes[7].style.display = 'none';
+                    }
+                }
+
                 function save() {
                     var o = new Object();
                     o.cmd  = "ze_save_group"
@@ -1567,6 +1606,7 @@
                     o.id = obj.id
                     o.enabled  = document.getElementsByName("enabled")[0].checked;
                     o.name = document.getElementsByName("name")[0].value;
+
                     // Powermeter
                     o.pm_refresh = document.getElementsByName("pm_refresh")[0].value;
                     var e = document.getElementsByName("pm_type")[0];