slapos_jio: Drop jquery from parameter editor

See merge request !452

master/bt5/slapos_erp5/SkinTemplateItem/portal_skins/slapos_base/WebSection_getHostingJSPrecacheManifestList.py

@@ -190,7 +190,6 @@ url_list = [
   "leaflet.css",
   "leaflet.js",
   "vkbeautify.js",
-  "jquery.js",
   "URI.js",
   "ref-parser.min.js",
   "cfworker-jsonschema-validator.js",

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_load_schema_html.html

@@ -9,11 +9,8 @@
     <script src="rsvp.js" type="text/javascript"></script>
     <script src="renderjs.js" type="text/javascript"></script>
     <script src="URI.js" type="text/javascript"></script>
-    <script src="jquery.js" type="text/javascript"></script>
-
     <script src="ref-parser.min.js" type="text/javascript"></script>
     <script src="cfworker-jsonschema-validator.js" type="text/javascript"></script>
-    <script src="URI.js" type="text/javascript"></script>
     <script src="jiodev.js" type="text/javascript"></script>
     <script src="gadget_erp5_page_slap_load_schema.js" type="text/javascript"></script>
   </head>

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

@@ -238,7 +238,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>1003.47746.47713.61474</string> </value>
+                      <value> <string>1004.26774.61847.10410</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -256,7 +256,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1666203779.53</float>
+                              <float>1668794347.71</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

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

@@ -51,7 +51,7 @@
   display: inline-block;
 }
 
-button.hidden-button {
+.display-none {
   display: none;
 }
 
@@ -68,29 +68,14 @@ margin: 5px 0 10px; max-height: 250px; width: 80%;}
 
 .subfield {
   padding-left: 20px;
-}
-
-label.slapos-parameter-dict-key::before {
-  content: "Parameter Entry: ";
-}
-
-
-div.slapos-parameter-dict-key {
-  margin-top: 10px;
-  margin-left: 6px;
-}
-
-.subfield {
   padding-top: 3px;
 }
+
 textarea.slapos-parameter {
   width: 400px;
   height: 100px;
 }
 
-button.hidden-button {
-  display: none;
-}
 label.slapos-parameter-dict-key::before {
   content: "\25BC  Parameter Entry: ";
 }

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

@@ -267,7 +267,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>977.18105.11982.10410</string> </value>
+                      <value> <string>1004.33923.4937.19370</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -285,7 +285,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1563920275.64</float>
+                              <float>1669223474.78</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_html.html

@@ -8,7 +8,6 @@
     <script src="rsvp.js" type="text/javascript"></script>
     <script src="renderjs.js" type="text/javascript"></script>
     <script src="URI.js" type="text/javascript"></script>
-    <script src="jquery.js" type="text/javascript"></script>
     <script src="vkbeautify.js" type="text/javascript"></script>
     <script src="domsugar.js" type="text/javascript"></script>
     <script src="gadget_erp5_page_slap_parameter_form.js" type="text/javascript"></script>
@@ -31,7 +30,7 @@
             </div>
             <div class="field" title="hide_show_button">
               <div class="input">
-                <button type="button" class="slapos-show-form hidden-button"> Show Parameter Form </button>
+                <button type="button" class="slapos-show-form display-none"> Show Parameter Form </button>
                 <button type="button" class="slapos-show-raw-parameter"> Show Parameter XML</button>
               </div>
             </div>

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

@@ -238,7 +238,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>998.21971.45138.37495</string> </value>
+                      <value> <string>1004.26625.54107.30429</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -256,7 +256,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1649668690.43</float>
+                              <float>1669223665.45</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

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

 /*jslint nomen: true, maxlen: 200, indent: 2, unparam: true*/
-/*global rJS, console, window, document, RSVP, btoa, atob, $, XMLSerializer,
+/*global rJS, console, window, document, RSVP, btoa, atob, XMLSerializer,
          DOMParser, URI, vkbeautify, domsugar, Boolean */
 
-(function (window, document, rJS, $, XMLSerializer, DOMParser, vkbeautify,
-      domsugar, Boolean) {
+(function (window, document, rJS, XMLSerializer, DOMParser, vkbeautify,
+      domsugar, Boolean, URI) {
   "use strict";
 
   var DISPLAY_JSON_FORM = 'display_json_form',
@@ -230,8 +230,6 @@
       default_value,
       default_used_list = [],
       default_div,
-      span_error,
-      span_info,
       is_required;
 
     if (default_dict === undefined) {
@@ -324,14 +322,10 @@
 
     for (key in json_field.properties) {
       if (json_field.properties.hasOwnProperty(key)) {
-        div = document.createElement("div");
-        div.setAttribute("class", "subfield");
-        div.title = json_field.properties[key].description;
-        label = document.createElement("label");
-        label.textContent = json_field.properties[key].title;
-        div.appendChild(label);
-        div_input = document.createElement("div");
-        div_input.setAttribute("class", "input");
+        label = domsugar("label", {
+          'text': json_field.properties[key].title
+        });
+
         is_required = false;
         if ((Array.isArray(json_field.required)) && (json_field.required.includes(key))) {
           is_required = true;
@@ -340,7 +334,7 @@
           label.setAttribute("class", "slapos-parameter-dict-key");
           div_input = render_subform(json_field.properties[key],
             default_dict[key],
-            div_input,
+            domsugar("div", {"class": "input"}),
             path + "/" + key);
         } else {
           input = render_field(
@@ -351,57 +345,58 @@
           input.name = path + "/" + key;
           input.setAttribute("class", "slapos-parameter");
           input.setAttribute("placeholder", " ");
-          div_input.appendChild(input);
+          div_input = domsugar("div", {"class": "input"}, [input]);
         }
         default_used_list.push(key);
         if (json_field.properties[key]['default'] !== undefined) {
-          span_info = document.createElement("span");
-          span_info.textContent = '(default = ' + json_field.properties[key]['default'] + ')';
-          div_input.appendChild(span_info);
+          div_input.appendChild(
+            domsugar("span",
+              {'text': '(default = ' + json_field.properties[key]['default'] + ')'})
+          );
         }
-        span_error = document.createElement("span");
-        span_error.setAttribute("class", "error");
-        div_input.appendChild(span_error);
-        div.appendChild(div_input);
-        root.appendChild(div);
+        div_input.appendChild(domsugar("span", {'class': 'error'}));
+        root.appendChild(
+          domsugar("div", {
+            "class": "subfield",
+            title: json_field.properties[key].description
+          }, [label, div_input])
+        );
       }
     }
     for (key in default_dict) {
       if (default_dict.hasOwnProperty(key)) {
         if (default_used_list.indexOf(key) < 0) {
-          div = document.createElement("div");
-          div.title = key;
           if (typeof default_dict[key] === 'object') {
-            div_input = document.createElement("div");
-            div_input.setAttribute("class", "input");
-            label.setAttribute("class", "slapos-parameter-dict-key");
-            div_input = render_subform({},
-              default_dict[key],
-              div_input,
-              path + "/" + key);
+            div = domsugar("div", {title: key}, [
+              domsugar("label", {
+                text: key,
+                "class": "slapos-parameter-dict-key"
+              }),
+              render_subform({},
+                default_dict[key],
+                domsugar("div", {"class": "input"}),
+                path + "/" + key,
+                editable)
+            ]);
           } else {
-            div.setAttribute("class", "subfield");
-            label = document.createElement("label");
-            label.textContent = key;
-            div.appendChild(label);
-            div_input = document.createElement("div");
-            div_input.setAttribute("class", "input");
             input = render_field({"type": "string", "textarea": true}, default_dict[key], false);
             input.name = path + "/" + key;
             input.setAttribute("class", "slapos-parameter");
             input.setAttribute("placeholder", " ");
-            div_input.appendChild(input);
-            span_info = document.createElement("span");
-            span_info.textContent = '(Not part of the schema)';
-            div_input.appendChild(span_info);
-            span_error = document.createElement("span");
-            span_error.setAttribute("class", "error");
-            div_input.appendChild(span_error);
+            div = domsugar("div", {
+              title: key,
+              "class": "subfield"
+            }, [
+              domsugar("label", {text: key}),
+              domsugar("div", {"class": "input"}, [
+                input,
+                domsugar("span", {text: '(Not part of the schema)'}),
+                domsugar("span", {'class': 'error'})
+              ])
+            ]);
           }
           default_used_list.push(key);
-          div.appendChild(div_input);
           root.appendChild(div);
-
         }
       }
     }
@@ -413,7 +408,7 @@
       entry,
       entry_list,
       multi_level_dict = {};
-    $(element.querySelectorAll(".slapos-parameter")).each(function (key, input) {
+    element.querySelectorAll(".slapos-parameter").forEach(function (input, index) {
       var index_e, data_format = input.getAttribute("data-format");
       if (input.value !== "") {
         if (input.type === 'number') {
@@ -491,18 +486,15 @@
   }
 
   function collapseParameter(element) {
-    $(element).parent().children("div").toggle(300);
-    if ($(element).hasClass("slapos-parameter-dict-key-colapse")) {
-      $(element).removeClass("slapos-parameter-dict-key-colapse");
-    } else {
-      $(element).addClass("slapos-parameter-dict-key-colapse");
-    }
-    console.log("COLLAPSED");
+    element.parentNode.querySelectorAll("div.subfield").forEach(function (div, i) {
+      div.classList.toggle("display-none");
+    });
+    element.classList.toggle("slapos-parameter-dict-key-colapse");
     return element;
   }
 
   function removeSubParameter(element) {
-    $(element).parent().parent().remove();
+    element.parentNode.parentNode.remove();
     return false;
   }
 
@@ -522,11 +514,8 @@
       text: input_text.value
     })]);
 
-    div = render_subform(subform_json, {}, div, element.name + "/" + input_text.value);
-
+    div = render_subform(subform_json, {}, div, element.name + "/" + input_text.value, gadget.state.editable);
     element.parentNode.parentNode.insertBefore(div, element.parentNode.parentNode.children[1]);
-    // element.parentNode.parentNode.appendChild(div);
-
     return div;
   }
 
@@ -566,8 +555,8 @@
       throw new Error("Select not found.");
     }
 
-    $(to_hide).addClass("hidden-button");
-    $(to_show).removeClass("hidden-button");
+    to_hide.classList.add("display-none");
+    to_show.classList.remove("display-none");
 
     return g.changeState({
       display_step: DISPLAY_JSON_FORM,
@@ -581,8 +570,8 @@
     var e = g.element.querySelector("button.slapos-show-raw-parameter"),
       to_show = g.element.querySelector("button.slapos-show-form");
 
-    $(e).addClass("hidden-button");
-    $(to_show).removeClass("hidden-button");
+    e.classList.add("display-none");
+    to_show.classList.remove("display-none");
 
     return g.changeState({
       display_step: DISPLAY_RAW_XML,
@@ -637,11 +626,11 @@
           input_field,
           error_dict;
 
-        $(g.element.querySelectorAll("span.error")).each(function (i, span) {
+        g.element.querySelectorAll("span.error").forEach(function (span, i) {
           span.textContent = "";
         });
 
-        $(g.element.querySelectorAll("div.error-input")).each(function (i, div) {
+        g.element.querySelectorAll("div.error-input").forEach(function (div, i) {
           div.setAttribute("class", "");
         });
 
@@ -699,11 +688,11 @@
 
     if (error_text) {
       if (show_raw_button !== null) {
-        $(show_raw_button).addClass("hidden-button");
+        show_raw_button.classList.add("display-none");
       }
 
       if (show_form_button !== null) {
-        $(show_form_button).removeClass("hidden-button");
+        show_form_button.classList.remove("display-none");
       }
 
       div_error = domsugar('div', {
@@ -742,9 +731,11 @@
     ]);
 
     // Do not hide the Software type, let the user edit it.
-    $(fieldset_list[1]).replaceWith(fieldset);
+    fieldset_list[1].parentNode.replaceChild(
+      fieldset,
+      fieldset_list[1]
+    );
     fieldset_list[2].innerHTML = '';
-
     return fieldset;
   }
 
@@ -765,11 +756,11 @@
     }
 
     if (to_hide !== null) {
-      $(to_hide).addClass("hidden-button");
+      to_hide.classList.add("display-none");
     }
 
     if (to_show !== null) {
-      $(to_show).removeClass("hidden-button");
+      to_show.classList.remove("display-none");
     }
     return gadget.loadSoftwareJSON(json_url)
       .push(function (json) {
@@ -934,12 +925,12 @@
             if (parameter_entry !== null) {
               throw new Error("The current parameter values should NOT contains _ parameter (xml).");
             }
-            $(parseDocumentStringOrFail(
+            parseDocumentStringOrFail(
               parameter_xml,
               'text/xml'
-            ).querySelectorAll("parameter"))
-                .each(function (key, p) {
-                parameter_dict[p.id] = p.textContent;
+            ).querySelectorAll("parameter")
+                .forEach(function (element, index) {
+                parameter_dict[element.id] = element.textContent;
               });
           } else {
             throw new Error("Unknown serialisation: " + serialisation);
@@ -960,7 +951,10 @@
               fieldset = document.createElement("fieldset");
 
             fieldset = render_subform(json, parameter_dict, fieldset, undefined);
-            $(fieldset_list[1]).replaceWith(fieldset);
+            fieldset_list[1].parentNode.replaceChild(
+              fieldset,
+              fieldset_list[1]
+            );
             return fieldset_list;
           });
       })
@@ -969,7 +963,8 @@
           label_list = gadget.element.querySelectorAll('label.slapos-parameter-dict-key');
 
         for (i = 0; i < div_list.length; i = i + 1) {
-          $(div_list[i]).hide();
+          // This should be replaced by a proper class hidden-div
+          div_list[i].classList.add('display-none');
         }
 
         for (i = 0; i < label_list.length; i = i + 1) {
@@ -1081,7 +1076,8 @@
         return collapseParameter(evt.target);
       }
 
-      if (evt.target.className.indexOf("bt_close") !== -1) {
+      if ((tag_name === 'SPAN') &&
+          (evt.target.className.indexOf("bt_close") !== -1)) {
         return removeSubParameter(evt.target);
       }
 
@@ -1111,6 +1107,7 @@
       }
 
       if ((tag_name === 'BUTTON') &&
+          // @ts-ignore
           (evt.target.className.indexOf("add-sub-form") !== -1)) {
         return queue
           .push(function () {
@@ -1153,5 +1150,5 @@
         });
     }, {mutex: 'statechange'});
 
-}(window, document, rJS, $, XMLSerializer, DOMParser, vkbeautify,
-    domsugar, Boolean));
\ No newline at end of file
+}(window, document, rJS, XMLSerializer, DOMParser, vkbeautify,
+    domsugar, Boolean, URI));

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

@@ -280,7 +280,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>1003.61829.49064.29661</string> </value>
+                      <value> <string>1004.33938.61743.7680</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -298,7 +298,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1666975592.36</float>
+                              <float>1669224195.85</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_zh_html.html

@@ -8,8 +8,8 @@
     <script src="rsvp.js" type="text/javascript"></script>
     <script src="renderjs.js" type="text/javascript"></script>
     <script src="URI.js" type="text/javascript"></script>
-    <script src="jquery.js" type="text/javascript"></script>
     <script src="vkbeautify.js" type="text/javascript"></script>
+    <script src="domsugar.js" type="text/javascript"></script>
     <script src="gadget_erp5_page_slap_parameter_form.js" type="text/javascript"></script>
     <link href="gadget_erp5_page_slap_parameter_form.css" rel="stylesheet" type="text/css"/>
   </head>