output edit now works as intended

Arduino/CanGrow/include/Webserver/Common.h

@@ -163,7 +163,7 @@ String Html_SelectOpt_bool(byte selectVal = 255, String trueStr = "Yes", String
   html += "<option value='0'";
   html += (selectVal == false) ? " selected" : ""; 
   html += ">";
-  html += trueStr;
+  html += falseStr;
   html += "</option>";
   return html;
 }

Arduino/CanGrow/include/Webserver/File_cangrow_CSS.h

@@ -223,6 +223,11 @@ input[type=text], input[type=date], input[type=number], input[type=password], se
   display: none;
 }
 
+.visible {
+  display: inline-block!important;
+  /*justify-content: center!important;*/
+}
+
  @media only screen and (min-width: 1820px) {
   /*.center, .nav {
     width: 60; min-width: 420px;

Arduino/CanGrow/include/Webserver/Page_system.h

@@ -499,24 +499,39 @@ String Proc_WebPage_system_output_add(const String& var) {
   } else if(Test_WebPage_system_SUBNAV(var)) {
     return Proc_WebPage_system_SUBNAV(var, 1);
   } else if(var == "ACTION") {
-    return String("Add");
+    return String("➕ Add");
     
   } else if(var == "OUTPUT_ID") {
     // we check which id is free. A free ID as type == 0
     return String(Give_Free_OutputId());
     
-    /* OUTPUT_TYPE */
+    
   } else if(var == "OUTPUT_TYPE") {
     return Html_SelOpt_type_WebPage_system_output_add();
     
-    /* OUTPUT_DEVICE */
   } else if(var == "OUTPUT_DEVICE") {
     return Html_SelOpt_device_WebPage_system_output_add();
     
-    /* GPIO_INDEX */
+  } else if(var == "OUTPUT_ENABLED") {
+    return Html_SelectOpt_bool();
+    
   } else if(var == "GPIO_INDEX") {
     return Html_SelectOpt_GPIOindex();
     
+  } else if(var == "GPIO_PWM") {
+    return Html_SelectOpt_bool();
+    
+  } else if(var == "GPIO_INVERT") {
+    return Html_SelectOpt_bool();
+    
+  //} else if(
+           //(var == "CLASS_TYPE_1") ||
+           //(var == "CLASS_TYPE_2") ||
+           //(var == "CLASS_TYPE_3")) {
+     /* all type div container are hidden when adding */
+    //return String("hidden");
+    
+  //} 
   } else {
     return String();
   }
@@ -532,25 +547,61 @@ String Proc_WebPage_system_output_addEdit(const String& var) {
   } else if(Test_WebPage_system_SUBNAV(var)) {
     return Proc_WebPage_system_SUBNAV(var, 1);
   } else if(var == "ACTION") {
-    return String("Edit");
+    return String("✏️ Edit");
     
   } else if(var == "OUTPUT_ID") {
     // return the outputId we got from GET .../add?edit=ID
     // dirty workaround to put this in a global variable
     return String(tmpParam_editOutputId);
     
-    /* OUTPUT_TYPE */
   } else if(var == "OUTPUT_TYPE") {
     return Html_SelOpt_type_WebPage_system_output_add(config.system.output.type[tmpParam_editOutputId]);
     
-    /* OUTPUT_DEVICE */
   } else if(var == "OUTPUT_DEVICE") {
     return Html_SelOpt_device_WebPage_system_output_add(config.system.output.device[tmpParam_editOutputId]);
     
-    /* GPIO_INDEX */
+  } else if(var == "OUTPUT_NAME") {
+    // "escape" % character, because it would break the template processor.
+    // tasmote webcall for example has percentage char in its path
+    String outputName = config.system.output.name[tmpParam_editOutputId];;
+    outputName.replace("%", "%");
+    return outputName;
+    
+  } else if(var == "OUTPUT_ENABLED") {
+    return Html_SelectOpt_bool(config.system.output.enabled[tmpParam_editOutputId]);
+    
   } else if(var == "GPIO_INDEX") {
     return Html_SelectOpt_GPIOindex(config.system.output.gpio[tmpParam_editOutputId]);
     
+  } else if(var == "GPIO_PWM") {
+    return Html_SelectOpt_bool(config.system.output.gpio_pwm[tmpParam_editOutputId]);
+    
+  } else if(var == "GPIO_INVERT") {
+    return Html_SelectOpt_bool(config.system.output.gpio_invert[tmpParam_editOutputId]);
+    
+  } else if(var == "I2C") {
+    return String(config.system.output.i2c[tmpParam_editOutputId]);
+    
+  } else if(var == "WEBCALL_HOST") {
+    return String(config.system.output.webcall_host[tmpParam_editOutputId]);
+    
+  } else if(var == "WEBCALL_PATH_ON") {
+    String webcallPathOn = config.system.output.webcall_path_on[tmpParam_editOutputId];
+    webcallPathOn.replace("%", "%");
+    return webcallPathOn;
+    
+  } else if(var == "WEBCALL_PATH_OFF") {
+    String webcallPathOff = config.system.output.webcall_path_off[tmpParam_editOutputId];
+    webcallPathOff.replace("%", "%");
+    return webcallPathOff;
+    
+  } else if(
+           ((var == "CLASS_TYPE_1") && (config.system.output.type[tmpParam_editOutputId] == 1)) ||
+           ((var == "CLASS_TYPE_2") && (config.system.output.type[tmpParam_editOutputId] == 2)) ||
+           ((var == "CLASS_TYPE_3") && (config.system.output.type[tmpParam_editOutputId] == 3))) {
+    // add class 'visible' which overwrites display with flex!important and justify center
+    return String("visible");
+    
   } else {
     return String();
   }
@@ -672,7 +723,7 @@ void WebPage_system_output_add(AsyncWebServerRequest *request) {
         
         const AsyncWebParameter* p_edit = request->getParam("edit");
         Serial.println("DB [Webserver:system:output:add?edit] ");
-        //Serial.printf(":: [Webserver:system] POST[%s]: %s\n", p_edit->name().c_str(), p_edit->value().c_str());
+        Serial.printf(":: [Webserver:system] POST[%s]: %d\n", p_edit->name().c_str(), p_edit->value().toInt());
         
         tmpParam_editOutputId = p_edit->value().toInt();
         

Arduino/CanGrow/include/Webserver/Page_system_HTML.h

@@ -157,10 +157,10 @@ const char* Page_system_output_HTML PROGMEM = R"(%HEADER%
  */
 const char* Page_system_output_add_HTML PROGMEM = R"(%HEADER%
 %SUBNAV%
-<h3>&#10133; %ACTION% output ID %OUTPUT_ID%</h3>
+<h3>%ACTION% output ID %OUTPUT_ID%</h3>
 %SAVE_MSG%
 
-<p>%ACTION% CanGrow output.</p>
+<p>Add/Edit CanGrow output.</p>
 <form method='post' action='/system/output/add'>
 <input type='hidden' name='outputId' value='%OUTPUT_ID%' />
 <u>Type</u>:<br>
@@ -176,16 +176,15 @@ const char* Page_system_output_add_HTML PROGMEM = R"(%HEADER%
 </select><br>
 
 <u>Name</u>:<br>
-<input type='text' name='name' maxlength='16' value='' required><br>
+<input type='text' name='name' maxlength='16' value='%OUTPUT_NAME%' required><br>
 
 <u>Enable</u>:<br>
 <select name='enabled' required>
   <option disabled value='' selected hidden>---</option>
-  <option value='1'>Yes</option>
+  %OUTPUT_ENABLED%
-  <option value='0'>No</option>
 </select><br>
 
-<div class='hidden' id='type_1'>
+<div class='hidden %CLASS_TYPE_1%' id='type_1'>
   <u>GPIO</u>:<br>
   <select name='gpio'>
     <option disabled value='' selected hidden>---</option>
@@ -195,33 +194,31 @@ const char* Page_system_output_add_HTML PROGMEM = R"(%HEADER%
   <u>GPIO PWM</u>:<br>
   <select name='gpio_pwm' >
     <option disabled value='' selected hidden>---</option>
-    <option value='1'>Enable</option>
+    %GPIO_PWM%
-    <option value='0'>Disable</option>
   </select><br>
   
   <u>GPIO invert</u>:<br>
   <select name='gpio_invert' >
     <option disabled value='' selected hidden>---</option>
-    <option value='1'>Yes</option>
+    %GPIO_INVERT%
-    <option value='0'>No</option>
   </select><br>
 </div>
 
 
-<div class='hidden' id='type_2'>
+<div class='hidden %CLASS_TYPE_2%' id='type_2'>
 <u>I2C</u>:<br>
-  <input type='text' name='i2c' maxlength='16' value='' ><br>
+  <input type='text' name='i2c' maxlength='16' value='%I2C%' ><br>
 </div>
 
-<div class='hidden' id='type_3'>
+<div class='hidden %CLASS_TYPE_3%' id='type_3'>
   <u>Webcall host</u>:<br>
-  <input type='text' name='webcall_host' maxlength='32' value='' ><br>
+  <input type='text' name='webcall_host' maxlength='32' value='%WEBCALL_HOST%' ><br>
   
   <u>Webcall path 'on'</u>:<br>
-  <input type='text' name='webcall_path_on' maxlength='32' value='' ><br>
+  <input type='text' name='webcall_path_on' maxlength='32' value='%WEBCALL_PATH_ON%' ><br>
   
   <u>Webcall path 'off'</u>:<br>
-  <input type='text' name='webcall_path_off' maxlength='32' value='' ><br>
+  <input type='text' name='webcall_path_off' maxlength='32' value='%WEBCALL_PATH_OFF%' ><br>
 </div>
 
 <br>

playground/html/root/cangrow.css

@@ -183,6 +183,11 @@ input[type=text], input[type=date], input[type=number], input[type=password], se
   display: none;
 }
 
+.visible {
+  display: flex;
+  justify-content: center;  
+}
+
  @media only screen and (min-width: 1820px) {
   /*.center, .nav {
     width: 60; min-width: 420px;

playground/html/root/index.html

@@ -36,7 +36,7 @@
   <li><a class='' href='/system/wipe' >&#x1F4A3; Factory reset</a></li>
 </ul>
 <a class='button' href='/system/output/add'>&#10133; Add output</a>
-<table class='centered'>
+<table class='centered hidden visible'>
   <tr>
     <th>ID</th>
     <th>Name</th>