Commit cfcba0d0 authored by Rafael Monnerat's avatar Rafael Monnerat

slapos_web: Reimplement using declareService for setup loopEventListener

- Reorganise the code to be renderjs and gadget field friendly
parent 7270b9ba
......@@ -132,7 +132,7 @@
<fieldset id="parameter-main"> </fieldset>\n
<fieldset id="parameter-optional"> </fieldset>\n
<fieldset id="parameter-xml"> \n
<input type=hidden name="field_your_instance_xml" class="parameter_xml_output"></input>\n
<input type=hidden name="parameter_hash" class="parameter_hash_output"></input>\n
</fieldset>\n
\n
</div>\n
......@@ -278,7 +278,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>941.46746.34379.16640</string> </value>
<value> <string>941.48617.25119.44288</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -296,7 +296,7 @@
</tuple>
<state>
<tuple>
<float>1426586570.59</float>
<float>1426700926.65</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -110,7 +110,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">\n
<title>ERP5</title>\n
<link rel="shortcut icon" href="favicon.ico">\n
<script src="../RSVP.js" type="text/javascript"></script>\n
<script src="RSVP.js" type="text/javascript"></script>\n
<script src="../renderjs.js" type="text/javascript"></script>\n
<script src="jquery.js" type="text/javascript"></script>\n
<script src="slapos_request_form.js" type="text/javascript"></script>\n
......@@ -118,9 +118,10 @@
</head>\n
<body>\n
<div>\n
<div class="parameter" \n
data-gadget-url="gadget_slapos_parameter_form.html"\n
data-gadget-scope="parameter">\n
<div class="parameter">\n
<div class="loading-parameter-form">\n
<p><img src="ERP5VCS_imgs/wait.gif"></p>\n
</div>\n
</div>\n
\n
<div class="debug"></div>\n
......@@ -264,7 +265,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>941.38508.45475.9659</string> </value>
<value> <string>941.48619.34818.36147</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -282,7 +283,7 @@
</tuple>
<state>
<tuple>
<float>1426092321.48</float>
<float>1426699039.61</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -103,17 +103,26 @@
/*jslint nomen: true, maxlen: 200, indent: 2*/\n
/*global window, rJS, console, RSVP, jQuery, jIO, tv4, URI, JSON, $ */\n
(function (window, rJS, $, URI, RSVP) {\n
(function (window, rJS, $, RSVP) {\n
"use strict";\n
\n
var gk = rJS(window);\n
\n
function getJSON(url) {\n
return jIO.util.ajax({\n
url: url\n
})\n
.then(function (evt) {\n
return evt.target.responseText;\n
var protocol = URI(url).protocol(); \n
if ( protocol === "http" || protocol === "https" ) { \n
if (URI(window.location).protocol() !== protocol) {\n
throw new Error("You cannot mixed http and https calls");\n
}\n
}\n
return RSVP.Queue()\n
.push(function () { \n
return jIO.util.ajax({\n
url: url\n
})\n
.then(function (evt) {\n
return evt.target.responseText;\n
});\n
});\n
}\n
\n
......@@ -278,13 +287,13 @@
\n
function validateJSONSchema(json, base_url) {\n
return getMetaJSONSchema()\n
.then(function (meta_schema) {\n
.push(function (meta_schema) {\n
if (!tv4.validate(json, meta_schema)) {\n
throw new Error("Non valid JSON schema " + json);\n
}\n
return JSON.parse(json);\n
})\n
.then(function (schema) {\n
.push(function (schema) {\n
return expandSchema(schema, schema, base_url);\n
});\n
}\n
......@@ -292,31 +301,36 @@
gk\n
.declareMethod("loadJSONSchema", function (url) {\n
return getJSON(url)\n
.then(function (json) {\n
.push(function (json) {\n
var base_url, url_uri;\n
\n
url_uri = URI(url);\n
base_url = url_uri.path().split("/");\n
base_url.pop();\n
base_url = url.split(url_uri.path())[0] + base_url.join("/");\n
\n
\n
return validateJSONSchema(json, base_url);\n
});\n
})\n
\n
.declareMethod("loadSoftwareJSON", function (url) {\n
return getJSON(url)\n
.then(function (json) {\n
.push(function (json) {\n
return JSON.parse(json);\n
});\n
})\n
\n
.declareMethod("validateJSONForSoftwareType", function (schema_url, software_type, generated_json) {\n
return getJSON(schema_url)\n
.then(function (json) {\n
.push(function (json) {\n
return JSON.parse(json);\n
}).then(function (json_object) {\n
var parameter_schema_url, st;\n
})\n
.push(function (json_object) {\n
var parameter_schema_url,\n
st,\n
base_url,\n
url_uri = URI(schema_url);\n
\n
for (st in json_object["software-type"]) {\n
if (json_object["software-type"].hasOwnProperty(st)) {\n
if (st === software_type) {\n
......@@ -324,16 +338,31 @@
}\n
}\n
}\n
\n
if (URI(parameter_schema_url).protocol() === "") {\n
base_url = url_uri.path().split("/");\n
base_url.pop();\n
base_url = schema_url.split(url_uri.path())[0] + base_url.join("/");\n
if (base_url !== undefined) {\n
parameter_schema_url = base_url + "/" + parameter_schema_url;\n
}\n
}\n
\n
return getJSON(parameter_schema_url)\n
.then(function (json) {\n
return tv4.validateMultiple(generated_json, JSON.parse(json));\n
.push(function (json) {\n
var schema = JSON.parse(json);\n
\n
return expandSchema(schema, schema, base_url)\n
.push(function (loaded_json) {\n
return tv4.validateMultiple(generated_json, loaded_json);\n
});\n
});\n
});\n
});\n
})\n
\n
.declareMethod("validateJSON", function (schema_url, generated_json) {\n
return getJSON(schema_url)\n
.then(function (json) {\n
.push(function (json) {\n
var base_url,\n
url_uri = URI(schema_url),\n
schema = JSON.parse(json);\n
......@@ -349,7 +378,7 @@
});\n
});\n
\n
}(window, rJS, $, RSVP, URI));
}(window, rJS, $, RSVP));
]]></string> </value>
</item>
......@@ -486,7 +515,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>941.46927.41646.58504</string> </value>
<value> <string>941.48697.33489.29337</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -504,7 +533,7 @@
</tuple>
<state>
<tuple>
<float>1426597461.76</float>
<float>1426706745.9</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -197,18 +197,34 @@
function validateForm(gadget, json_url) {\n
return gadget.processValidation(json_url);\n
}\n
\n
function loadEventList(gadget) {\n
var g = gadget,\n
field_list = g.props.element.querySelectorAll(".slapos-parameter"), \n
input_index,\n
promise_list = [];\n
\n
console.log("INITIATING A LOOP EVENT LISTENER");\n
\n
for (input_index = 0; input_index < field_list.length; input_index++) {\n
console.log(input_index);\n
promise_list.push(loopEventListener(\n
field_list[input_index],\n
\'change\',\n
false,\n
validateForm.bind(g, g, g.options.json_url)\n
));\n
}\n
return RSVP.all(promise_list);\n
}\n
\n
function submitForm(gadget, json_url) {\n
return gadget.processValidation(json_url);\n
function getSoftwareTypeFromForm(element) {\n
var software_type;\n
$(element.querySelectorAll(".slapos-software-type")).each(function (key, input) {\n
software_type = input.value;\n
});\n
return software_type;\n
}\n
\n
//function getSoftwareTypeFromForm(element) {\n
// var software_type;\n
// $(element.querySelectorAll(".slapos-software-type")).each(function (key, input) {\n
// software_type = input.value;\n
// });\n
// return software_type;\n
//}\n
\n
gk.ready(function (g) {\n
g.props = {};\n
......@@ -217,7 +233,6 @@
g.props.element = element;\n
});\n
})\n
\n
\n
.declareMethod("loadJSONSchema", function (url) {\n
return this.getDeclaredGadget(\'loadschema\')\n
......@@ -226,10 +241,10 @@
});\n
})\n
\n
.declareMethod("validateJSON", function (schema_url, generated_json) {\n
.declareMethod("validateJSONForSoftwareType", function (schema_url, softwaretype, generated_json) {\n
return this.getDeclaredGadget(\'loadschema\')\n
.push(function (gadget) {\n
return gadget.validateJSON(schema_url, generated_json);\n
return gadget.validateJSONForSoftwareType(schema_url, softwaretype, generated_json);\n
});\n
})\n
\n
......@@ -244,18 +259,19 @@
\n
.declareMethod(\'processValidation\', function (json_url) {\n
var g = this,\n
// software_type = getSoftwareTypeFromForm(g.props.element),\n
software_type = getSoftwareTypeFromForm(g.props.element),\n
json_dict = getFormValuesAsJSONDict(g.props.element);\n
\n
return g.validateJSON(json_url, json_dict)\n
return g.validateJSONForSoftwareType(json_url, software_type, json_dict)\n
.push(function (validation) {\n
var error_index,\n
parameter_input = g.props.element.querySelectorAll(\'.parameter_xml_output\')[0],\n
parameter_hash_input = g.props.element.querySelectorAll(\'.parameter_hash_output\')[0],\n
field_name,\n
div,\n
divm,\n
missing_index,\n
missing_field_name;\n
missing_field_name,\n
xml_output;\n
\n
$(g.props.element.querySelectorAll("span.error")).each(function (i, span) {\n
span.textContent = "";\n
......@@ -265,8 +281,11 @@
div.setAttribute("class", "");\n
});\n
\n
xml_output = jsonDictToParameterXML(json_dict);\n
parameter_hash_input.value = btoa(xml_output);\n
console.log(parameter_hash_input.value);\n
if (validation.valid) {\n
parameter_input.value = jsonDictToParameterXML(json_dict);\n
return xml_output;\n
} else {\n
for (error_index in validation.errors) {\n
if (validation.errors.hasOwnProperty(error_index)) {\n
......@@ -285,10 +304,8 @@
divm.querySelector("span.error").textContent = validation.missing[missing_index].message;\n
}\n
}\n
parameter_input.value = "ERROR";\n
return "ERROR";\n
}\n
console.log(jsonDictToParameterXML(json_dict));\n
return false;\n
});\n
})\n
\n
......@@ -303,7 +320,7 @@
input,\n
div_input,\n
span_error,\n
promise_list = [],\n
field_list = [],\n
span_info,\n
fieldset_list = g.props.element.querySelectorAll(\'fieldset\'),\n
fieldset = document.createElement("fieldset"),\n
......@@ -329,7 +346,7 @@
span_info.textContent = \'(default = \' + json.properties[key].default + \')\';\n
div_input.appendChild(span_info);\n
}\n
\n
field_list.push(input);\n
span_error = document.createElement("span");\n
span_error.setAttribute("class", "error");\n
div_input.appendChild(span_error);\n
......@@ -339,25 +356,11 @@
} else {\n
fieldset.appendChild(div);\n
}\n
promise_list.push(loopEventListener(\n
input,\n
\'change\',\n
false,\n
validateForm.bind(g, g, json_url)\n
));\n
promise_list.push(loopEventListener(\n
input,\n
\'submit\',\n
false,\n
submitForm.bind(g, g, json_url)\n
));\n
}\n
}\n
$(fieldset_list[1]).replaceWith(fieldset);\n
$(fieldset_list[2]).replaceWith(fieldset_optional);\n
return RSVP.all(promise_list);\n
}).push(function () {\n
console.log("LOADED All Promises")\n
return field_list;\n
});\n
})\n
\n
......@@ -400,16 +403,18 @@
if (options.json_url === undefined) {\n
throw new Error("undefined json_url");\n
}\n
\n
console.log("CALLED RENDER");\n
var g = this,\n
softwaretype;\n
\n
this.options = options;\n
\n
function updateParameterForm(evt) {\n
options.parameter.softwaretype = evt.srcElement.value;\n
return g.render(options);\n
}\n
\n
return g.loadSoftwareJSON(options.json_url).push(function (json) {\n
return g.loadSoftwareJSON(g.options.json_url).push(function (json) {\n
var option_index,\n
option,\n
option_selected = options.parameter.softwaretype,\n
......@@ -468,23 +473,49 @@
prefix = options.json_url.split(json_url_uri.path())[0] + prefix.join("/");\n
parameter_json_schema_url = prefix + "/" + parameter_json_schema_url;\n
}\n
\n
console.log("GOING TO RENDER FORM");\n
return g.renderParameterForm(parameter_json_schema_url, parameter_dict);\n
})\n
.push(function () {\n
var element = g.props.element.getElementsByTagName(\'select\')[0];\n
console.log("INITIATING A LOOP EVENT LISTENER FOR OPTION CHANGE");\n
return loopEventListener(\n
element,\n
\'change\',\n
false,\n
updateParameterForm.bind(g)\n
);\n
console.log("FINISHED TO RENDER, RETURNING THE GADGET");\n
return g;\n
})\n
\n
.fail(function (error) {\n
console.log("FAIL CALLED");\n
console.error(error.stack);\n
return g.renderFailoverTextArea(\'\', error.toString());\n
return g.renderFailoverTextArea(\'\', error.toString())\n
.push(function() {\n
return g;\n
});\n
});\n
})\n
.declareService(function () {\n
var g = this,\n
element = g.props.element.getElementsByTagName(\'select\')[0];\n
\n
if (element === undefined) {\n
return true;\n
}\n
\n
function updateParameterForm(evt) {\n
g.options.parameter.softwaretype = evt.srcElement.value;\n
return g.render(g.options)\n
.push(function () {\n
return loadEventList(g);\n
});\n
}\n
\n
console.log("INITIATING A LOOP EVENT LISTENER FOR OPTION CHANGE");\n
return loopEventListener(\n
element,\n
\'change\',\n
false,\n
updateParameterForm.bind(g)\n
);\n
})\n
.declareService(function() {\n
return loadEventList(this);\n
});\n
\n
}(window, document, rJS, loopEventListener, $, XMLSerializer, jQuery, vkbeautify));
......@@ -624,7 +655,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>941.47120.44131.43212</string> </value>
<value> <string>941.48752.57599.9267</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -642,7 +673,7 @@
</tuple>
<state>
<tuple>
<float>1426618698.56</float>
<float>1426707039.92</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -105,7 +105,21 @@
"use strict";\n
\n
var gk = rJS(window),\n
json_url = "sample_schema.json";\n
json_url = "sample_schema.json", \n
parameter_gadget_url = "gadget_slapos_parameter_form.html";\n
\n
\n
gk.declareMethod(\'getContent\', function () {\n
var g = this; \n
console.log("hey cousous");\n
return g.getDeclaredGadget("parameter")\n
.push(function(gadget) {\n
return gadget.processValidation(g.options.json_url);\n
})\n
.push(function (xml_result) {\n
return {"field_your_instance_xml": xml_result};\n
});\n
});\n
\n
gk.declareMethod(\'render\', function (options) {\n
\n
......@@ -113,6 +127,8 @@
\n
options.json_url = "../../renderjs/slapos_load_schema_software_type.json";\n
options.parameter = {};\n
\n
g.options = options;\n
\n
if (options.value !== undefined) {\n
// A JSON where provided via gadgetfield\n
......@@ -130,12 +146,13 @@
options.json_url = options.parameter.json_url;\n
}\n
\n
\n
return g.getDeclaredGadget(\'parameter\')\n
return g.declareGadget(parameter_gadget_url, {\'scope\': \'parameter\'})\n
.push(function (gadget) {\n
return gadget.render(options).push(function () {\n
console.log("FINISH TO LOADED");\n
});\n
return gadget.render(options);\n
}).push(function (gadget) {\n
var div = g.__element.querySelector(".parameter");\n
$(div).replaceWith(gadget.__element)\n
return gadget;\n
});\n
});\n
\n
......@@ -274,7 +291,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>941.47267.50185.4608</string> </value>
<value> <string>941.48482.37552.4164</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -292,7 +309,7 @@
</tuple>
<state>
<tuple>
<float>1426617885.75</float>
<float>1426698399.78</float>
<string>UTC</string>
</tuple>
</state>
......
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