Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
962 lines (803 sloc) 29 KB
<html>
<style>
input{
width: 50%;
}
label {
/* Other styling... */
text-align: right;
clear: both;
float:left;
margin-right:15px;
}
fieldset
{
border:2px solid blue;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}
</style>
<script src="./dist/solid-file-client.bundle.js"></script>
<body>
<a href="../">Return to Spoggy</a><br><br>
<a href="shexy/mocha_browser/moch.html">Es6 module version in dev here </a>
<br><br><br>
Transform shapes to form. / Utilisation des shapes rdf SHEX pour générer des formulaires
(<a href="https://forum.solidproject.org/t/blog-post-shaping-linked-data-apps/1914/11" taget="blank">shex to forms</a>) (<a href="http://shexspec.github.io/primer/">http://shexspec.github.io/primer/</a>)
<a href="http://shex.io/">http://shex.io/</a> <a href="http://rdfshape.herokuapp.com/validate">shex validator</a><br><br>
<select id="mySelect">
<!--<option>https://holacratie.solid.community/public/Schema/circle.shex</option>-->
<!-- <option>http://shex.io/examples/Issue.shex</option>-->
<option> CHOOSE AN HOLACRATIE SHEX </option>
<option>https://holacratie.solid.community/public/Schema/role.shex</option>
<option>https://holacratie.solid.community/public/Schema/tension.shex</option>
<option>https://holacratie.solid.community/public/Schema/ratifier.shex</option>
<option>https://holacratie.solid.community/public/Schema/accountability.shex</option>
<option>https://holacratie.solid.community/public/Schema/capacity.shex</option>
<option>https://holacratie.solid.community/public/Schema/circle.shex</option>
<option>https://holacratie.solid.community/public/Schema/governance.shex</option>
<option> OTHER SHEX </option>
<option selected>https://holacratie.solid.community/public/Schema/post_simple.shex</option>
<option >https://holacratie.solid.community/public/Schema/post.shex</option>
<option>https://holacratie.solid.community/public/Schema/issue.shex</option>
<option>https://holacratie.solid.community/public/Schema/example1.shex</option>
<option>https://jmartin.inrupt.net/public/shapes/book.shex</option>
<option>https://jmartin.inrupt.net/public/shapes/movie.shex</option>
<option>https://jmartin.inrupt.net/public/shapes/data-browser.shex</option>
<option>https://jmartin.inrupt.net/public/shapes/employee.shex</option>
<option>SHEX WITH PROBLEMS</option>
<option>https://holacratie.solid.community/public/Schema/purpose.shex</option>
<option>https://holacratie.solid.community/public/Schema/domain.shex</option>
<option>YOUR SHEX</option>
</select>
<br>
<input id="newShape" placeholder="https://holacratie.solid.community/public/Schema/xxxxxx.shex"></input>
<button onclick="add()"> add yours / ajoutez votre shape to the select (shex)</button>
<br><br>
<button onclick="chargelib()">Charger / Load V2 with shex.js</button>
<button onclick="charge()" disabled>Charger / Load V1</button>
<button onclick="populatePost()">Populate Post_simple Form for Lazy tester</button>
<br>
<div>
<button onclick="login()">Login</button>
<button onclick="logout()">Logout</button>
<div id="webid"></div>
</div>
<br>
<div id="linkToShape"></div>
<hr>
<div id="formMenu"></div>
<div id="footprintMenu"></div>
<hr>
<div id="forms">
</div>
<pre id="result">
</pre>
<fieldset id="formulaire">
<legend id="legend"></legend>
<ul id="formlist">
<li>Select a Shape or add yours and select it after </li>
<li>Click on Load button to load a shape/form </li>
<li>Click sur le bouton "charger" pour charger un shape/form </li>
</ul>
</fieldset>
</body>
<script src="./js/import-export.js"></script>
<!--<script src="./js/shex-browserify.js"></script>-->
<script src="./dist/shex-browserify.min.js"></script>
<script>
var shex = ShEx;
const fileClient = SolidFileClient;
console.log("FC",fileClient)
var dernierForm = "";
var data = {};
function logout(){
fileClient.logout().then( console.log( `Bye now!` ))
}
function login(){
fileClient.popupLogin().then( webId => {
console.log( `Logged in as ${webId}.`)
}, err => console.log(err) );
}
function populatePost(){
//put data to test post_simple form
var test = document.getElementsByName("http://schema.org/name")
console.log(test)
document.getElementsByName("http://schema.org/name")[0].value = "MyPost"
// document.getElementsByName("http://schema.org/name")[0].value = "MyPost"
document.getElementsByName("http://schema.org/dateCreated")[0].value = "2019-08-09"
document.getElementsByName("http://schema.org/creator")[0].value = "David"
document.getElementsByName("https://holacratie.solid.community/public/subject")[0].value = "Fictive Organisation"
document.getElementsByName("https://holacratie.solid.community/public/whatIs")[0].value = "There is a Big Probleme"
document.getElementsByName("https://holacratie.solid.community/public/whatShouldBe")[0].value = "There is a Solution"
document.getElementsByName("https://holacratie.solid.community/public/content")[0].value = "What I think is that we could try to ..."
}
function add(){
var select = document.getElementById("mySelect")
var option = document.createElement("option");
option.text = document.getElementById("newShape").value.trim();
select.add(option);
}
function chargelib(){
var id = document.getElementById("mySelect").options.selectedIndex;
var shapeUrl = document.getElementById("mySelect").options[id].text;
document.getElementById("linkToShape").innerHTML = shapeUrl
//console.log(shapeUrl)
//let url = params.source;
/* fetch(shapeUrl)
.then(res => res.text())
.then((out) => {
console.log('Checkout this shex! ', out);
})
.catch(err => { throw err });*/
// console.log(ShEx)
//var shexc = "https://jmartin.inrupt.net/public/shapes/book.shex";
//var data = "https://jmartin.inrupt.net/public/shapes/book.ttl";
//var node = "https://jmartin.inrupt.net/public/shapes/book";
shex.Loader.load([shapeUrl], [], [], []).then(function (loaded, err) {
console.log("LOADED",loaded)
console.log("ERROR",err)
//console.log("VALID",shex.Validator.construct(loaded.schema))
if (loaded.schema){
schemaToForm(loaded.schema)
}else{
alert("Impossible Error, not a valid schema")
}
// var db = shex.Util.makeN3DB(loaded.data);
// var validator = shex.Validator.construct(loaded.schema, { results: "api" });
// var result = validator.validate(db, [{node: node, shape: shex.Validator.start}]);
// console.log(result);
});
}
function clear(){
document.getElementById("formlist").innerHTML = "";
document.getElementById("forms").innerHTML = ""
document.getElementById("formMenu").innerHTML = ""
document.getElementById("footprintMenu").innerHTML = ""
}
function schemaToForm(schema){
console.log(schema)
clear();
var prefixes = schema.prefixes;
var shapes = schema.shapes;
var start = schema.start;
console.log(shapes)
console.log ("start",start)
for (let [url, constraint] of Object.entries(shapes)) {
var shapeName = localName(url)
console.log("#################\n",url,constraint);
if (!shapeName.endsWith("_Footprint")){
dernierForm = url
console.log("dernierForm ",dernierForm)
regularShape(url,constraint, "formMenu")
}else{
footprintShape(url,constraint)
regularShape(url,constraint, "footprintMenu")
}
}
}
function regularShape(url,constraint, whereMenu){
var shapeName = localName(url)
console.log(whereMenu)
var br = document.createElement("br");
var menu = document.getElementById(whereMenu);
var forms = document.getElementById("forms")
/*var urlDiv = document.createElement("div")
urlDiv.innerHTML = "MENU "+url;
dest.appendChild(urlDiv)*/
var menuitem = document.createElement("BUTTON")
menuitem.innerHTML = shapeName
menuitem.title = url;
menuitem.onclick = function(){
displayForm(url);
return false;
};
menu.appendChild(menuitem)
var formulaire = document.createElement("FORM")
formulaire.setAttribute("id", url);
if (whereMenu == "footprintMenu"){
formulaire.style.display = "none";
}
forms.appendChild(formulaire)
var fieldsetNode = document.createElement("Fieldset")
var x = document.createElement("LEGEND");
var t = document.createTextNode(shapeName);
x.appendChild(t);
fieldsetNode.appendChild(x);
formulaire.appendChild(fieldsetNode);
processExp(constraint,fieldsetNode)
if (whereMenu != "footprintMenu"){
var submitBtn = document.createElement("BUTTON");
var t = document.createTextNode("Submit");
submitBtn.appendChild(t);
submitBtn.onclick = function(){
// alert('here be dragons');
testForm(url);
return false;
};
formulaire.appendChild(submitBtn)
}
}
function footprintShape(url,constraint){
var refersTo = url.substring(0, url.length - 10);
console.log("FOOTPRINT SHAPE ", url, refersTo, constraint)
// var fp = {url:url, refersTo: refersTo, constraint:constraint}
var fp = { }
fp[refersTo] = url
if (!("footprints" in data)){
data["footprints"] = {};
}
console.log(fp)
data["footprints"][refersTo] = url
console.log(data)
}
function localName(uri){
var ln = uri;
if (uri.lastIndexOf("#") != -1) {
// Your code in here accessing the string like this
ln = uri.substr(uri.lastIndexOf("#")).substr(1)
}else{
ln = uri.substr(uri.lastIndexOf("/")).substr(1)
}
return ln
}
function displayForm(id){
console.log("must display",id)
var tousForms = document.querySelectorAll("form");
tousForms.forEach(function(f){
if (f.id == id){
f.style.display = "block"
dernierForm = id
}else{
f.style.display = "none"
}
})
}
function processExp(exp,parent){
var br = document.createElement("br");
// parent.appendChild(br.cloneNode())
// parent.appendChild(br.cloneNode())
// parent.appendChild(document.createTextNode(JSON.stringify(exp, null, 2)));
// parent.appendChild(br.cloneNode())
switch (exp.type) {
case "Shape":
processShape(exp,parent)
break;
case "TripleConstraint":
processTriple(exp,parent)
break;
case "NodeConstraint":
processNode(exp,parent)
break;
case "EachOf":
processEachOf(exp,parent)
break;
case "OneOf":
processOneOf(exp,parent)
break;
case "ShapeRef":
processShapeRef(exp,parent)
break;
case "ShapeOr":
processShapeOr(exp,parent)
break;
case "ShapeAnd":
processShapeAnd(exp,parent)
break;
default:
// parent.appendChild(document.createTextNode("TYPE INCONNU :"+JSON.stringify(exp, null, 2)));
// parent.appendChild(br.cloneNode())
console.log("TYPE INCONNU :"+JSON.stringify(exp, null, 2));
}
parent.appendChild(br.cloneNode())
}
function processShape(exp,parent){
// var br = document.createElement("br");
// parent.appendChild(document.createTextNode("SHAPE "+ JSON.stringify(exp, null, 2)));
// parent.appendChild(br.cloneNode())
processExp(exp.expression,parent)
}
function processTriple(exp,parent){
// var br = document.createElement("br");
// parent.appendChild(document.createTextNode("TRIPLE "+ JSON.stringify(exp, null, 2)));
// parent.appendChild(br.cloneNode())
// parent.appendChild(document.createTextNode("PREDICATE "+ exp.predicate));
// parent.appendChild(br.cloneNode())
var labelInput = document.createElement("LABEL")
labelInput.innerHTML = localName(exp.predicate);
labelInput.title = exp.predicate;
parent.appendChild(labelInput);
exp.valueExpr.elemName = exp.predicate;
console.log("ADD ELEMNAME", exp.valueExpr)
// transmission du predicate à filed concerné pour field.name
processExp(exp.valueExpr,parent)
}
function processEachOf(exp,parent){
var br = document.createElement("hr");
/*var br = document.createElement("br");
parent.appendChild(document.createTextNode("EACHOF "));
parent.appendChild(document.createTextNode( JSON.stringify(exp, null, 2)));
parent.appendChild(br.cloneNode())*/
// parent.appendChild(document.createTextNode("EXPRESSIONS "+ JSON.stringify(exp.expressions, null, 2)));
exp.expressions.forEach(function(e){
processExp(e,parent)
});
}
function processOneOf(exp,parent){
// var br = document.createElement("br");
var group = '_' + Math.random().toString(36).substr(2, 9);
// parent.appendChild(document.createTextNode("one of "));
//parent.appendChild(document.createTextNode( JSON.stringify(exp, null, 2)));
// parent.appendChild(br.cloneNode())
var fieldsetNode = document.createElement("Fieldset")
fieldsetNode.setAttribute("id",group)
parent.appendChild(fieldsetNode);
var x = document.createElement("LEGEND");
var t = document.createTextNode("One of (different predicate)");
x.appendChild(t);
fieldsetNode.appendChild(x);
console.log("ONEOF "+ JSON.stringify(exp, null, 2))
var firstChoice = true;
exp.expressions.forEach(function(e){
// Math.random should be unique because of its seeding algorithm.
// Convert it to base 36 (numbers + letters), and grab the first 9 characters
// after the decimal.
var uuid = '_' + Math.random().toString(36).substr(2, 9);
var radio = document.createElement("INPUT")
// radio.value = uuid
radio.type = "radio"
radio.name = group
radio.value = uuid
fieldsetNode.appendChild(radio);
radio.onclick = function(e){
console.log(e.target.value)
var name = e.target.name
var fieldsets = document.getElementsByName(name);
fieldsets.forEach(function (fs){
if (fs.nodeName == "FIELDSET"){
if (fs.id == e.target.value){
fs.style.borderColor = "green"
}else{
fs.style.borderColor = "red"
}
}
})
}
var fieldsetChild = document.createElement("Fieldset")
fieldsetChild.setAttribute("id",uuid)
fieldsetChild.name = group
fieldsetNode.appendChild(fieldsetChild);
var x = document.createElement("LEGEND");
if (firstChoice == true){ // pour ne pas l'afficher la premiere fois
// fieldsetNode.appendChild(document.createTextNode("Default Choice"));
radio.checked = true
var t = document.createTextNode("Default Choice");
firstChoice = false;
fieldsetChild.style.borderColor = "green"
}else{
var t = document.createTextNode("or");
fieldsetChild.style.borderColor = "red"
//fieldsetChild.style.borderStyle ="solid";
//fieldsetNode.appendChild(document.createTextNode("or"));
}
x.appendChild(t);
fieldsetChild.appendChild(x);
processExp(e,fieldsetChild)
});
}
function processNode(exp,parent){
//var br = document.createElement("br");
// parent.appendChild(br.cloneNode());
// parent.appendChild(document.createTextNode("NODE "+ JSON.stringify(exp, null, 2)));
// console.log("NODE "+ JSON.stringify(exp, null, 2))
console.log("NODE ", exp.elemName)
console.log("datatype ", exp.datatype)
console.log("values ", exp.values)
var elem;
if(exp.datatype != undefined) {
console.log("HAS DATATYPE ",exp.datatype)
switch(exp.datatype) {
case "http://www.w3.org/2001/XMLSchema#dateTime":
case "http://www.w3.org/2001/XMLSchema#date":
elem = document.createElement("input")
elem.setAttribute("type", "date")
break;
case "http://www.w3.org/2001/XMLSchema#string":
elem = document.createElement("input")
elem.setAttribute("placeholder", "xsd:string")
break;
case "http://www.w3.org/2001/XMLSchema#integer":
elem = document.createElement("input")
elem.setAttribute("placeholder", "xsd:integer")
elem.setAttribute("type", "number")
break;
default:
// elem = document.createTextNode(" !!!! DATATYPE INCONNU"+ JSON.stringify(exp, null, 2));
elem = document.createElement("input")
elem.setAttribute("placeholder", exp.datatype)
}
// parent.appendChild(br.cloneNode());
}
// gestion des contraintes autres proprietes
//exemple <input type="number" name="quantity" min="1" max="5">
if (exp.hasOwnProperty("values")){
console.log("HAS VALUES ",exp.values)
// parent.appendChild(br.cloneNode())
elem = document.createElement("select")
parent.appendChild(elem);
exp.values.forEach(function(v){
var optionSet = document.createElement("option");
optionSet.text = v.value || v;
elem.add(optionSet);
});
}
if (exp.hasOwnProperty("minlength")){
console.log("HAS minlength ",exp.minlength)
elem.setAttribute("minlength", exp.minlength)
}
if (exp.hasOwnProperty("nodeKind")){
console.log("HAS nodeKind ",exp.nodeKind)
elem = document.createElement("input")
elem.setAttribute("placeholder", exp.nodeKind)
}
if (exp.hasOwnProperty("elemName")){
console.log("HAS elemName ",exp.elemName)
elem.setAttribute("name", exp.elemName)
}
console.log("NEW NODE",elem)
parent.appendChild(elem);
// var expKeys = Object.keys(exp)
// parent.appendChild(document.createTextNode("NODE KEYS"+ JSON.stringify(expKeys, null, 2)));
// console.log("NODE KEYS"+ JSON.stringify(expKeys, null, 2));
}
function processShapeRef(exp, parent){
dernierForm = parent.id;
var shapeRefBtn = document.createElement("button")
shapeRefBtn.innerHTML = localName(exp.reference);
shapeRefBtn.title = exp.reference;
shapeRefBtn.onclick = function(){
console.log("ID parent",parent.id)
displayForm(exp.reference)
return false;
};
parent.appendChild(shapeRefBtn);
console.log(dernierForm)
}
function processShapeOr(exp, parent){
// PRESQUE COMME processOneOf ??
// var group = '_' + Math.random().toString(36).substr(2, 9);
// parent.appendChild(document.createTextNode("PROCESSSHAPEOR Non géré"+ JSON.stringify(exp, null, 2)));
// parent.appendChild(elem);
/* console.log("PROCESSSHAPEOR Non géré"+ JSON.stringify(exp, null, 2))
var br = document.createElement("br");
parent.appendChild(document.createTextNode(" TODO PROCESSSHAPE OR "));
parent.appendChild(br.cloneNode());
exp.shapeExprs.forEach(function(e){
processExp(e,parent)
});*/
var group = exp.elemName
var fieldsetNode = document.createElement("Fieldset")
fieldsetNode.setAttribute("id",group)
parent.appendChild(fieldsetNode);
var x = document.createElement("LEGEND");
var t = document.createTextNode("Shape OR (same predicate)");
x.appendChild(t);
fieldsetNode.appendChild(x);
console.log("processShapeOr "+ JSON.stringify(exp, null, 2))
var firstChoice = true;
exp.shapeExprs.forEach(function(e){
var uuid = '_' + Math.random().toString(36).substr(2, 9);
var radio = document.createElement("INPUT")
// radio.value = uuid
radio.type = "radio"
radio.name = group
radio.value = uuid
fieldsetNode.appendChild(radio);
radio.onclick = function(e){
console.log(e.target.value)
var name = e.target.name
var fieldsets = document.getElementsByName(name);
fieldsets.forEach(function (fs){
if (fs.nodeName == "FIELDSET"){
if (fs.id == e.target.value){
fs.style.borderColor = "green"
}else{
fs.style.borderColor = "red"
}
}
})
}
var fieldsetChild = document.createElement("Fieldset")
fieldsetChild.setAttribute("id",uuid)
fieldsetChild.name = group
fieldsetNode.appendChild(fieldsetChild);
var x = document.createElement("LEGEND");
if (firstChoice == true){ // pour ne pas l'afficher la premiere fois
// fieldsetNode.appendChild(document.createTextNode("Default Choice"));
radio.checked = true
var t = document.createTextNode("Default Choice");
firstChoice = false;
fieldsetChild.style.borderColor = "green"
}else{
var t = document.createTextNode("or");
fieldsetChild.style.borderColor = "red"
//fieldsetNode.appendChild(document.createTextNode("or"));
}
x.appendChild(t);
fieldsetChild.appendChild(x);
if (e.elemName == undefined){
e.elemName = exp.elemName
}
processExp(e,fieldsetChild)
});
}
function processShapeAnd(exp, parent){
// parent.appendChild(document.createTextNode("PROCESSSHAPEAND Non géré"+ JSON.stringify(exp, null, 2)));
// parent.appendChild(elem);
var br = document.createElement("br");
parent.appendChild(document.createTextNode(" TODO PROCESSSHAPE AND (must satisfy all constraints)"));
parent.appendChild(br.cloneNode());
console.log("PROCESSSHAPEAND Non géré"+ JSON.stringify(exp, null, 2))
exp.shapeExprs.forEach(function(e){
processExp(e,parent)
});
}
function testForm(id) {
var currentFormFields = document.getElementById(id).elements
var currentFormLength = document.getElementById(id).elements.length;
// console.log( "Found " + currentFormFields.length + " elements in the form "+id);
var params = {};
for( var i=0; i<currentFormFields.length; i++ )
{
var field = currentFormFields[i]
var field = currentFormFields[i]
var valid = true;
if (
(field.nodeName == "FIELDSET") ||
(field.nodeName == "BUTTON") ||
((field.type == "radio") && (field.checked == false))
)
{
valid = false
}
console.log(valid)
if (valid == true){ // console.log(field, field.nodeName)
console.log(field, field.nodeName, field.type)
var fieldData = {}
var fieldName = field.name;
fieldData.value = field.value;
fieldData.type = field.type;
fieldData.format = field.placeholder || "unknown";
params[fieldName] = fieldData;
}
}
// console.log("params ",params)
if (!(id in data)){
data[id] = [];
}
data[id].push(params)
console.log(data)
var id_footprint = id+"_Footprint"
console.log("idfootprint",id_footprint)
populateDataFromFootprintForm(id_footprint)
document.getElementById("result").innerHTML = JSON.stringify(data, null, 2)
var ttlData = formateData(id)
sendData(id,ttlData)
displayForm(dernierForm)
dernierForm = id;
}
function formateData(id){
console.log("formate Data from ",id, data)
var ttlString = "# ttlString for "+ id+ "\n\n\n"
// "@prefix : <https://holacratie.solid.community/public/> ."
// "@prefix owl: <http://www.w3.org/2002/07/owl#> ."
// "@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> ."
// "@prefix xml: <http://www.w3.org/XML/1998/namespace> ."
// "@prefix xsd: <http://www.w3.org/2001/XMLSchema#> ."
// "@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> ."
// "@base <https://holacratie.solid.community/public/> ."
var enregistrements = data[id];
console.log(enregistrements)
var randomName = '_' + Math.random().toString(36).substr(2, 9);
var filename = randomName+".ttl"
enregistrements.forEach(function(enreg){
for (let [predicate, object] of Object.entries(enreg)) {
if (predicate == "http://schema.org/name") {
filename = object.value+".ttl";
}
// console.log(predicate, object.value, object.type);
ttlString += '<> <'+predicate+'> "'+object.value+'". # Format :'+object.type+ " "+object.format+ "\n";
}
})
// console.log(ttlString)
var x = document.createElement("PRE");
var t = document.createTextNode(ttlString);
x.appendChild(t);
document.getElementById("result").appendChild(x);
return { filename: filename , content: ttlString};
}
function sendData(id, ttlData){
console.log("Send Data from ",id, ttlData)
fileClient.checkSession().then(
session => {
console.log("Logged in as "+session.webId)
},
err => { console.log(err)
alert(err)}
);
document.getElementById("result").innerHTML += "**** RESULTAT ************"
//var url = "https://holacratie.solid.community/public/Post/post.ttl"
//var url = "https://agora.solid.community/public/post.ttl"
console.log(ttlData)
console.log(data)
var footprints = data.footprints;
console.log("footprints",footprints)
var footprintUrl = footprints[id]
console.log("footprintUrl",footprintUrl)
var footprint = data[footprintUrl]
console.log("footprint", footprint)
var root = footprint["https://footprint.solid.community/public/root"].value
var path = footprint["https://footprint.solid.community/public/path"].value
console.log("PATH",path)
var url = root+path+"/"+ttlData.filename;
// var url = id+"/"+ttlData.filename;
console.log(url)
fileClient.createFile(url,ttlData.content).then( fileCreated => {
console.log(`Created file ${fileCreated}.`);
},
err => console.log(err)
);
}
function populateDataFromFootprintForm(id){
var currentFormFields = document.getElementById(id).elements
var currentFormLength = document.getElementById(id).elements.length;
// console.log( "Found " + currentFormFields.length + " elements in the form "+id);
var params = {};
for( var i=0; i<currentFormFields.length; i++ )
{
var field = currentFormFields[i]
var valid = true;
if (
(field.nodeName == "FIELDSET") ||
(field.nodeName == "BUTTON") ||
((field.type == "radio") && (field.checked == false))
)
{
valid = false
}
console.log(valid)
if (valid == true){
console.log(field, field.nodeName, field.type)
var fieldData = {}
var fieldName = field.name;
fieldData.value = field.value;
fieldData.type = field.type;
params[fieldName] = fieldData;
}
/*var checkedButtons = document.querySelectorAll('input[type="radio"]:checked')
console.log("CHECKEDS",checkedButtons)
var checkedButtons = document.querySelectorAll('input[type="radio"]')
console.log("CHECKEDS all",checkedButtons)*/
}
console.log(params)
// console.log("params ",params)
if (!(id in data)){
data[id] = [];
}
data[id] = params;
}
function charge(){
var id = document.getElementById("mySelect").options.selectedIndex;
var shapeUrl = document.getElementById("mySelect").options[id].text;
var params = {}
console.log(shapeUrl)
params.source = shapeUrl
var destination = {}
destination.headId = "legend"
destination.listeId = "formlist"
params.destination = destination;
fetchShex(params,updateFormsTest);
}
function updateFormsTest(data){
console.log("#################\nUPDATEFORMS TEST",data)
start = data.start;
destination = data.params.destination;
document.getElementById(destination.headId).innerHTML = start
forms = new Map();
data.shapes.forEach(function(s){
f = new Map();
name = s.name;
console.log(s.constraints)
f.set(name, s.constraints)
forms.set(name,f)
})
console.log(forms)
createFormLines(forms,start,destination.listeId)
}
function createFormLines(forms, start,dest){
console.log(forms, start, dest)
clear();
var liste = document.getElementById(dest)
var current = forms.get(start)
console.log("current",current)
var it=current.entries();
var constr = it.next().value[1]
console.log("val", constr)
constr.forEach(function(c){
var numberOf = c.numberOf
var elems = c.elems;
console.log(c)
var br = document.createElement("br");
var li = document.createElement("li");
li.appendChild(document.createTextNode(elems[0]));
// li.appendChild( document.createTextNode( '\u00A0' ) ); // ajout espace
li.appendChild(br.cloneNode())
if (elems[1] != undefined && elems[1].startsWith("[")){
console.log("open set")
var e = elems[1].substring(1);
var selector = document.createElement("select")
li.appendChild(selector);
var optionSet1 = document.createElement("option");
optionSet1.text = e.trim();
selector.add(optionSet1);
for (var i = 1; i < elems.length-1;i ++){
e = elems[i];
console.log("elem",e)
var optionSet2 = document.createElement("option");
optionSet2.text = e.trim();
selector.add(optionSet2);
}
}
else if (elems[1] != undefined && elems[1].endsWith("]")){
console.log("close set")
e = elems[1].slice(0,-1);
var optionSet = document.createElement("option");
optionSet.text = e.trim();
selector.add(optionSet);
}else{
switch(elems[1]) {
case "xsd:dateTime":
case "xsd:date":
// code block
var datepicker = document.createElement("input")
datepicker.setAttribute("type", "date")
li.appendChild(datepicker);
break;
case "xsd:string":
var basicInput = document.createElement("input")
basicInput.setAttribute("placeholder", "xsd:string")
li.appendChild(basicInput);
break;
case "IRI":
var iriInput = document.createElement("input")
iriInput.setAttribute("placeholder", "IRI")
li.appendChild(iriInput);
break;
default:
li.appendChild(document.createTextNode(elems[1]));
}
}
li.appendChild(br.cloneNode())
// li.appendChild( document.createTextNode( '\u00A0' ) );
li.appendChild(document.createTextNode("nombre:"+numberOf));
if (numberOf =="*"){
li.appendChild(br.cloneNode())
var addBtn = document.createElement("button");
addBtn.innerHTML = "add one / ajouter un "+elems[1]
li.appendChild(addBtn);
}
liste.appendChild(li);
li.appendChild(br.cloneNode())
li.appendChild(br.cloneNode())
})
var submitBtn =document.createElement("button");
submitBtn.innerHTML = "submit"
liste.appendChild(submitBtn);
/* creer tous les formulaires et les passer en display=none ?
forms.forEach(function (f){
console.log(f)
})*/
}
</script>
</html>
You can’t perform that action at this time.