slapos_jio: Backport close buttom to remove subforms on parameter editor

This code was originally written by Alain Takoudjou, I'm just porting and updating to this new code base.

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_css.css

@@ -39,7 +39,7 @@
   border-radius: 2px;
 }
 .bt_close:hover {
-  background: #81afab;
+  background: #c9c9c9;
   color: #fff;
 }
 
@@ -175,12 +175,12 @@ label.slapos-parameter-dict-key ~ div.input label {
 }
 .input .add-sub-form {
   position: absolute;
-  right: 0;
+  right: 10px;
   top: 0;
   bottom: 0;
   text-decoration: none;
   cursor: pointer;
-  color: #fff;
+  color: #000;
   margin: 0;
 }
 .add-sub-form:before {

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_css.xml

@@ -261,7 +261,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>970.64989.39558.61508</string> </value>
+                <value> <string>977.18105.11982.10410</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -279,7 +279,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1542806911.82</float>
+                        <float>1563920275.64</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_js.js

@@ -184,6 +184,7 @@
       key,
       div,
       label,
+      close_span,
       input,
       default_value,
       default_used_list = [],
@@ -213,6 +214,8 @@
 
           input = document.createElement("input");
           input.type = "text";
+          // Name is only meaningfull to automate tests
+          input.name = "ADD" + path;
           div_input.appendChild(input);
 
           input = document.createElement("button");
@@ -220,7 +223,7 @@
           input.setAttribute("class", "add-sub-form");
           input.type = "button";
           input.name = path;
-          input.textContent = "Add";
+          input.textContent = "+";
           div_input.appendChild(input);
 
           div.appendChild(div_input);
@@ -234,6 +237,11 @@
             label = document.createElement("label");
             label.textContent = default_value;
             label.setAttribute("class", "slapos-parameter-dict-key");
+            close_span = document.createElement("span");
+            close_span.textContent = "×";
+            close_span.setAttribute("class", "bt_close");
+            close_span.setAttribute("title", "Remove this parameter section.");
+            label.appendChild(close_span);
             default_div.appendChild(label);
             default_div = render_subform(
               json_field.patternProperties['.*'],
@@ -262,7 +270,7 @@
         div_input = document.createElement("div");
         div_input.setAttribute("class", "input");
         if (json_field.properties[key].type === 'object') {
-          label.setAttribute("class", "slapos-parameter-dict-key");
+           label.setAttribute("class", "slapos-parameter-dict-key");
           div_input = render_subform(json_field.properties[key],
             default_dict[key],
             div_input,
@@ -290,7 +298,7 @@
     }
     for (key in default_dict) {
       if (default_dict.hasOwnProperty(key)) {
-        if (default_used_list.indexOf(key) < 0) {
+        if (default_used_list.indexOf(key) < 0 ) {
           div = document.createElement("div");
           div.title = key;
           if (restricted === true) {
@@ -308,7 +316,7 @@
             div.appendChild(label);
             div_input = document.createElement("div");
             div_input.setAttribute("class", "input");
-            input = render_field({"type": "string", "textarea": true}, default_dict[key]);
+            input = render_field({"type": "string"}, default_dict[key]);
             input.name = path + "/" + key;
             input.setAttribute("class", "slapos-parameter");
             input.setAttribute("placeholder", " ");
@@ -395,6 +403,11 @@
     return element;
   }
 
+  function removeSubParameter(element) {
+    $(element).parent().parent().remove();
+    return false;
+  }
+
   function addSubForm(element) {
     var subform_json = JSON.parse(atob(element.value)),
       input_text = element.parentNode.querySelector("input[type='text']"),
@@ -424,6 +437,7 @@
       field_list = g.element.querySelectorAll(".slapos-parameter"),
       button_list = g.element.querySelectorAll('button.add-sub-form'),
       label_list = g.element.querySelectorAll('label.slapos-parameter-dict-key'),
+      close_list = g.element.querySelectorAll(".bt_close"),
       i,
       promise_list = [];
 
@@ -454,6 +468,15 @@
       ));
     }
 
+    for (i = 0; i < close_list.length; i = i + 1) {
+      promise_list.push(loopEventListener(
+        close_list[i],
+        'click',
+        false,
+        removeSubParameter.bind(g, close_list [i])
+      ));
+    }
+
     return RSVP.all(promise_list);
   }
 

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_js.xml

@@ -274,7 +274,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>976.40089.29410.21896</string> </value>
+                <value> <string>977.17940.31340.8669</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -292,7 +292,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1561393541.64</float>
+                        <float>1563920050.33</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_slapos_appcache.xml

@@ -108,7 +108,7 @@
             <value> <string encoding="cdata"><![CDATA[
 
 CACHE MANIFEST\n
-# generated on Fri, 9 JuL 2019 10:00:07 GMT+0200\n
+# generated on Fri, 10 JuL 2019 11:00:11 GMT+0200\n
 CACHE:\n
 favicon.ico\n
 font-awesome/font-awesome-webfont.eot?v=4.6.3\n
@@ -579,7 +579,7 @@ NETWORK:\n
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>976.63583.28202.43076</string> </value>
+                <value> <string>977.18103.707.375</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -597,7 +597,7 @@ NETWORK:\n
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1562716840.37</float>
+                        <float>1563920292.41</float>
                         <string>UTC</string>
                       </tuple>
                     </state>