Commit 7d07dfdd authored by Rafael Monnerat's avatar Rafael Monnerat

slapos_jio: Drop jquery from parameter editor

See merge request nexedi/slapos.core!452
parents 8c9d2d38 eb538f1d
...@@ -190,7 +190,6 @@ url_list = [ ...@@ -190,7 +190,6 @@ url_list = [
"leaflet.css", "leaflet.css",
"leaflet.js", "leaflet.js",
"vkbeautify.js", "vkbeautify.js",
"jquery.js",
"URI.js", "URI.js",
"ref-parser.min.js", "ref-parser.min.js",
"cfworker-jsonschema-validator.js", "cfworker-jsonschema-validator.js",
......
...@@ -9,11 +9,8 @@ ...@@ -9,11 +9,8 @@
<script src="rsvp.js" type="text/javascript"></script> <script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script> <script src="renderjs.js" type="text/javascript"></script>
<script src="URI.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="ref-parser.min.js" type="text/javascript"></script>
<script src="cfworker-jsonschema-validator.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="jiodev.js" type="text/javascript"></script>
<script src="gadget_erp5_page_slap_load_schema.js" type="text/javascript"></script> <script src="gadget_erp5_page_slap_load_schema.js" type="text/javascript"></script>
</head> </head>
......
...@@ -238,7 +238,7 @@ ...@@ -238,7 +238,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>1003.47746.47713.61474</string> </value> <value> <string>1004.26774.61847.10410</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -256,7 +256,7 @@ ...@@ -256,7 +256,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1666203779.53</float> <float>1668794347.71</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
display: inline-block; display: inline-block;
} }
button.hidden-button { .display-none {
display: none; display: none;
} }
...@@ -68,29 +68,14 @@ margin: 5px 0 10px; max-height: 250px; width: 80%;} ...@@ -68,29 +68,14 @@ margin: 5px 0 10px; max-height: 250px; width: 80%;}
.subfield { .subfield {
padding-left: 20px; 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; padding-top: 3px;
} }
textarea.slapos-parameter { textarea.slapos-parameter {
width: 400px; width: 400px;
height: 100px; height: 100px;
} }
button.hidden-button {
display: none;
}
label.slapos-parameter-dict-key::before { label.slapos-parameter-dict-key::before {
content: "\25BC Parameter Entry: "; content: "\25BC Parameter Entry: ";
} }
......
...@@ -267,7 +267,7 @@ ...@@ -267,7 +267,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>977.18105.11982.10410</string> </value> <value> <string>1004.33923.4937.19370</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -285,7 +285,7 @@ ...@@ -285,7 +285,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1563920275.64</float> <float>1669223474.78</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
<script src="rsvp.js" type="text/javascript"></script> <script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script> <script src="renderjs.js" type="text/javascript"></script>
<script src="URI.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="vkbeautify.js" type="text/javascript"></script>
<script src="domsugar.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> <script src="gadget_erp5_page_slap_parameter_form.js" type="text/javascript"></script>
...@@ -31,7 +30,7 @@ ...@@ -31,7 +30,7 @@
</div> </div>
<div class="field" title="hide_show_button"> <div class="field" title="hide_show_button">
<div class="input"> <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> <button type="button" class="slapos-show-raw-parameter"> Show Parameter XML</button>
</div> </div>
</div> </div>
......
...@@ -238,7 +238,7 @@ ...@@ -238,7 +238,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>998.21971.45138.37495</string> </value> <value> <string>1004.26625.54107.30429</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -256,7 +256,7 @@ ...@@ -256,7 +256,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1649668690.43</float> <float>1669223665.45</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
/*jslint nomen: true, maxlen: 200, indent: 2, unparam: true*/ /*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 */ DOMParser, URI, vkbeautify, domsugar, Boolean */
(function (window, document, rJS, $, XMLSerializer, DOMParser, vkbeautify, (function (window, document, rJS, XMLSerializer, DOMParser, vkbeautify,
domsugar, Boolean) { domsugar, Boolean, URI) {
"use strict"; "use strict";
var DISPLAY_JSON_FORM = 'display_json_form', var DISPLAY_JSON_FORM = 'display_json_form',
...@@ -230,8 +230,6 @@ ...@@ -230,8 +230,6 @@
default_value, default_value,
default_used_list = [], default_used_list = [],
default_div, default_div,
span_error,
span_info,
is_required; is_required;
if (default_dict === undefined) { if (default_dict === undefined) {
...@@ -324,14 +322,10 @@ ...@@ -324,14 +322,10 @@
for (key in json_field.properties) { for (key in json_field.properties) {
if (json_field.properties.hasOwnProperty(key)) { if (json_field.properties.hasOwnProperty(key)) {
div = document.createElement("div"); label = domsugar("label", {
div.setAttribute("class", "subfield"); 'text': json_field.properties[key].title
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");
is_required = false; is_required = false;
if ((Array.isArray(json_field.required)) && (json_field.required.includes(key))) { if ((Array.isArray(json_field.required)) && (json_field.required.includes(key))) {
is_required = true; is_required = true;
...@@ -340,7 +334,7 @@ ...@@ -340,7 +334,7 @@
label.setAttribute("class", "slapos-parameter-dict-key"); label.setAttribute("class", "slapos-parameter-dict-key");
div_input = render_subform(json_field.properties[key], div_input = render_subform(json_field.properties[key],
default_dict[key], default_dict[key],
div_input, domsugar("div", {"class": "input"}),
path + "/" + key); path + "/" + key);
} else { } else {
input = render_field( input = render_field(
...@@ -351,57 +345,58 @@ ...@@ -351,57 +345,58 @@
input.name = path + "/" + key; input.name = path + "/" + key;
input.setAttribute("class", "slapos-parameter"); input.setAttribute("class", "slapos-parameter");
input.setAttribute("placeholder", " "); input.setAttribute("placeholder", " ");
div_input.appendChild(input); div_input = domsugar("div", {"class": "input"}, [input]);
} }
default_used_list.push(key); default_used_list.push(key);
if (json_field.properties[key]['default'] !== undefined) { if (json_field.properties[key]['default'] !== undefined) {
span_info = document.createElement("span"); div_input.appendChild(
span_info.textContent = '(default = ' + json_field.properties[key]['default'] + ')'; domsugar("span",
div_input.appendChild(span_info); {'text': '(default = ' + json_field.properties[key]['default'] + ')'})
);
} }
span_error = document.createElement("span"); div_input.appendChild(domsugar("span", {'class': 'error'}));
span_error.setAttribute("class", "error"); root.appendChild(
div_input.appendChild(span_error); domsugar("div", {
div.appendChild(div_input); "class": "subfield",
root.appendChild(div); title: json_field.properties[key].description
}, [label, div_input])
);
} }
} }
for (key in default_dict) { for (key in default_dict) {
if (default_dict.hasOwnProperty(key)) { 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 (typeof default_dict[key] === 'object') { if (typeof default_dict[key] === 'object') {
div_input = document.createElement("div"); div = domsugar("div", {title: key}, [
div_input.setAttribute("class", "input"); domsugar("label", {
label.setAttribute("class", "slapos-parameter-dict-key"); text: key,
div_input = render_subform({}, "class": "slapos-parameter-dict-key"
default_dict[key], }),
div_input, render_subform({},
path + "/" + key); default_dict[key],
domsugar("div", {"class": "input"}),
path + "/" + key,
editable)
]);
} else { } 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 = render_field({"type": "string", "textarea": true}, default_dict[key], false);
input.name = path + "/" + key; input.name = path + "/" + key;
input.setAttribute("class", "slapos-parameter"); input.setAttribute("class", "slapos-parameter");
input.setAttribute("placeholder", " "); input.setAttribute("placeholder", " ");
div_input.appendChild(input); div = domsugar("div", {
span_info = document.createElement("span"); title: key,
span_info.textContent = '(Not part of the schema)'; "class": "subfield"
div_input.appendChild(span_info); }, [
span_error = document.createElement("span"); domsugar("label", {text: key}),
span_error.setAttribute("class", "error"); domsugar("div", {"class": "input"}, [
div_input.appendChild(span_error); input,
domsugar("span", {text: '(Not part of the schema)'}),
domsugar("span", {'class': 'error'})
])
]);
} }
default_used_list.push(key); default_used_list.push(key);
div.appendChild(div_input);
root.appendChild(div); root.appendChild(div);
} }
} }
} }
...@@ -413,7 +408,7 @@ ...@@ -413,7 +408,7 @@
entry, entry,
entry_list, entry_list,
multi_level_dict = {}; 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"); var index_e, data_format = input.getAttribute("data-format");
if (input.value !== "") { if (input.value !== "") {
if (input.type === 'number') { if (input.type === 'number') {
...@@ -491,18 +486,15 @@ ...@@ -491,18 +486,15 @@
} }
function collapseParameter(element) { function collapseParameter(element) {
$(element).parent().children("div").toggle(300); element.parentNode.querySelectorAll("div.subfield").forEach(function (div, i) {
if ($(element).hasClass("slapos-parameter-dict-key-colapse")) { div.classList.toggle("display-none");
$(element).removeClass("slapos-parameter-dict-key-colapse"); });
} else { element.classList.toggle("slapos-parameter-dict-key-colapse");
$(element).addClass("slapos-parameter-dict-key-colapse");
}
console.log("COLLAPSED");
return element; return element;
} }
function removeSubParameter(element) { function removeSubParameter(element) {
$(element).parent().parent().remove(); element.parentNode.parentNode.remove();
return false; return false;
} }
...@@ -522,11 +514,8 @@ ...@@ -522,11 +514,8 @@
text: input_text.value 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.insertBefore(div, element.parentNode.parentNode.children[1]);
// element.parentNode.parentNode.appendChild(div);
return div; return div;
} }
...@@ -566,8 +555,8 @@ ...@@ -566,8 +555,8 @@
throw new Error("Select not found."); throw new Error("Select not found.");
} }
$(to_hide).addClass("hidden-button"); to_hide.classList.add("display-none");
$(to_show).removeClass("hidden-button"); to_show.classList.remove("display-none");
return g.changeState({ return g.changeState({
display_step: DISPLAY_JSON_FORM, display_step: DISPLAY_JSON_FORM,
...@@ -581,8 +570,8 @@ ...@@ -581,8 +570,8 @@
var e = g.element.querySelector("button.slapos-show-raw-parameter"), var e = g.element.querySelector("button.slapos-show-raw-parameter"),
to_show = g.element.querySelector("button.slapos-show-form"); to_show = g.element.querySelector("button.slapos-show-form");
$(e).addClass("hidden-button"); e.classList.add("display-none");
$(to_show).removeClass("hidden-button"); to_show.classList.remove("display-none");
return g.changeState({ return g.changeState({
display_step: DISPLAY_RAW_XML, display_step: DISPLAY_RAW_XML,
...@@ -637,11 +626,11 @@ ...@@ -637,11 +626,11 @@
input_field, input_field,
error_dict; error_dict;
$(g.element.querySelectorAll("span.error")).each(function (i, span) { g.element.querySelectorAll("span.error").forEach(function (span, i) {
span.textContent = ""; 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", ""); div.setAttribute("class", "");
}); });
...@@ -699,11 +688,11 @@ ...@@ -699,11 +688,11 @@
if (error_text) { if (error_text) {
if (show_raw_button !== null) { if (show_raw_button !== null) {
$(show_raw_button).addClass("hidden-button"); show_raw_button.classList.add("display-none");
} }
if (show_form_button !== null) { if (show_form_button !== null) {
$(show_form_button).removeClass("hidden-button"); show_form_button.classList.remove("display-none");
} }
div_error = domsugar('div', { div_error = domsugar('div', {
...@@ -742,9 +731,11 @@ ...@@ -742,9 +731,11 @@
]); ]);
// Do not hide the Software type, let the user edit it. // 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 = ''; fieldset_list[2].innerHTML = '';
return fieldset; return fieldset;
} }
...@@ -765,11 +756,11 @@ ...@@ -765,11 +756,11 @@
} }
if (to_hide !== null) { if (to_hide !== null) {
$(to_hide).addClass("hidden-button"); to_hide.classList.add("display-none");
} }
if (to_show !== null) { if (to_show !== null) {
$(to_show).removeClass("hidden-button"); to_show.classList.remove("display-none");
} }
return gadget.loadSoftwareJSON(json_url) return gadget.loadSoftwareJSON(json_url)
.push(function (json) { .push(function (json) {
...@@ -934,12 +925,12 @@ ...@@ -934,12 +925,12 @@
if (parameter_entry !== null) { if (parameter_entry !== null) {
throw new Error("The current parameter values should NOT contains _ parameter (xml)."); throw new Error("The current parameter values should NOT contains _ parameter (xml).");
} }
$(parseDocumentStringOrFail( parseDocumentStringOrFail(
parameter_xml, parameter_xml,
'text/xml' 'text/xml'
).querySelectorAll("parameter")) ).querySelectorAll("parameter")
.each(function (key, p) { .forEach(function (element, index) {
parameter_dict[p.id] = p.textContent; parameter_dict[element.id] = element.textContent;
}); });
} else { } else {
throw new Error("Unknown serialisation: " + serialisation); throw new Error("Unknown serialisation: " + serialisation);
...@@ -960,7 +951,10 @@ ...@@ -960,7 +951,10 @@
fieldset = document.createElement("fieldset"); fieldset = document.createElement("fieldset");
fieldset = render_subform(json, parameter_dict, fieldset, undefined); 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; return fieldset_list;
}); });
}) })
...@@ -969,7 +963,8 @@ ...@@ -969,7 +963,8 @@
label_list = gadget.element.querySelectorAll('label.slapos-parameter-dict-key'); label_list = gadget.element.querySelectorAll('label.slapos-parameter-dict-key');
for (i = 0; i < div_list.length; i = i + 1) { 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) { for (i = 0; i < label_list.length; i = i + 1) {
...@@ -1081,7 +1076,8 @@ ...@@ -1081,7 +1076,8 @@
return collapseParameter(evt.target); 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); return removeSubParameter(evt.target);
} }
...@@ -1111,6 +1107,7 @@ ...@@ -1111,6 +1107,7 @@
} }
if ((tag_name === 'BUTTON') && if ((tag_name === 'BUTTON') &&
// @ts-ignore
(evt.target.className.indexOf("add-sub-form") !== -1)) { (evt.target.className.indexOf("add-sub-form") !== -1)) {
return queue return queue
.push(function () { .push(function () {
...@@ -1153,5 +1150,5 @@ ...@@ -1153,5 +1150,5 @@
}); });
}, {mutex: 'statechange'}); }, {mutex: 'statechange'});
}(window, document, rJS, $, XMLSerializer, DOMParser, vkbeautify, }(window, document, rJS, XMLSerializer, DOMParser, vkbeautify,
domsugar, Boolean)); domsugar, Boolean, URI));
\ No newline at end of file
...@@ -280,7 +280,7 @@ ...@@ -280,7 +280,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>1003.61829.49064.29661</string> </value> <value> <string>1004.33938.61743.7680</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -298,7 +298,7 @@ ...@@ -298,7 +298,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1666975592.36</float> <float>1669224195.85</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<script src="rsvp.js" type="text/javascript"></script> <script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script> <script src="renderjs.js" type="text/javascript"></script>
<script src="URI.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="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> <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"/> <link href="gadget_erp5_page_slap_parameter_form.css" rel="stylesheet" type="text/css"/>
</head> </head>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment