<!-- <button id="bt1">Get External Content</button> -->
-<!-- <h1>Choose command to add </h1> -->
-<!-- <h2>Commandes en ligne </h2> -->
-<!-- <ul> -->
-<!-- {% for commande in listeCommandes %} -->
-<!-- <li>{{ commande|e }}</li> -->
-<!-- {% endfor %} -->
-<!-- </ul> -->
-<!-- <h2>Commandes en checkbutton </h2> -->
-
-<!-- <\!-- erreurs de placement -\-> -->
-<!-- <\!-- <ul> -\-> -->
-
-<!-- {% for commande in listeCommandes %} -->
-<!-- <ul> -->
-<!-- <\!-- <p> -\-> -->
-<!-- <\!-- PN : pourquoi peut-il avoir plusieurs cheched -> à cause de name -\-> -->
-<!-- <div class="btn-group" data-toggle="buttons"> -->
-<!-- <\!-- <input type="radio" name={{ commande }} id={{ commande }} > -\-> -->
-<!-- <input type="radio" class="form-check-input" name='Etapes' id={{ commande }} > -->
-<!-- <label class="btn btn-primary activate" for={{ commande }}> {{ commande }}</label><\!-- <br> -\-> -->
-
-<!-- <\!-- <label class="btn btn-primary" for={{ commande }}> -\-> -->
-<!-- <\!-- <input class="form_check_input" type="radio" name='Etapes' id={{ commande }} > {{ commande }} -\-> -->
-<!-- <\!-- </label> -\-> -->
-
-<!-- </div> -->
-<!-- <\!-- </p> -\-> -->
-<!-- </ul> -->
-<!-- {% endfor %} -->
<!-- {%- for key, value in mcTraite.items() recursive %} -->
<!-- </div> -->
</div>
<div class="row">
+ <div class="col-sm-12">
+ <h2>Choose Object to add</h2>
+ <!-- <h1>Choose command to add </h1> -->
+ <!-- <h2>Commandes en ligne </h2> -->
+ <!-- <ul> -->
+ <!-- {% for commande in listeCommandes %} -->
+ <!-- <li>{{ commande|e }}</li> -->
+ <!-- {% endfor %} -->
+ <!-- </ul> -->
+ <!-- <h2>Commandes en checkbutton </h2> -->
+
+ {% for commande in listeCommandes %}
+ <!-- PN : pourquoi peut-il avoir plusieurs cheched -> à cause de name -->
+ <div class="btn-group" data-toggle="buttons">
+ <!-- <input type="radio" name={{ commande }} id={{ commande }} > -->
+ <!-- <input type="radio" class="form-check-input" name='Etapes' id={{ commande }} > -->
+ <label class="btn btn-primary activate" for={{ commande }}> {{ commande }}</label><!-- <br> -->
+
+ <!-- <label class="btn btn-primary" for={{ commande }}> -->
+ <!-- <input class="form_check_input" type="radio" name='Etapes' id={{ commande }} > {{ commande }} -->
+ <!-- </label> -->
+
+ </div>
+ {% endfor %}
+ </div>
<div class="col-sm-12">
- <h2>My dataset</h2>
+ <h2>My Current dataset : {{titre}} </h2>
<!-- <div id="treeview-searchable" class=""></div> -->
<!-- <div id="tree1" class="table table-condensed table-hover table-striped fancytree-fade-expander"> -->
<table id="tree1" class="table table-condensed table-hover table-striped fancytree-fade-expander">
- <!-- <colgroup> -->
- <!-- <col width="80px"></col> -->
- <!-- <col width="30px"></col> -->
- <!-- <col width="*"></col> -->
- <!-- <col width="100px"></col> -->
- <!-- <col width="100px"></col> -->
- <!-- <col width="100px"></col> -->
- <!-- </colgroup> -->
+ <!-- TODO : Manage the space between Title and Value while choosing a Value size adapted to the value -->
+ <colgroup>
+ <col width="80px"></col>
+ <col width="30px"></col>
+ <col width="300px"></col>
+ <col width="300px"></col>
+ <col width="20px"></col>
+ <col width="*"></col>
+ </colgroup>
<thead>
<tr> <th></th> <th></th> <th>Mot Clé</th> <th>Value</th> <th></th> <th></th> </tr>
</thead>
var source = new EventSource("{{ url_for('sse.stream') }}");
- source.addEventListener('propageValide', function(event) {
- var data = JSON.parse(event.data);
- var message = data.message;
+ source.addEventListener('propageValide', function(event) {
+ const data = JSON.parse(event.data);
+ var id = data.id;
+ var valid = data.valid;
+ var message = data.message;
// alert("The server says " + data.message);
- console.log("The server says " + data.message);
+ console.log("The server says " + data.message +" , id: "+id);
$("#tree1-messages").text(message);
var tree=$.ui.fancytree.getTree("#tree1");
- var activeNode = tree.getActiveNode();
- //p1=tree.getNodeByKey('8304986a334211ec853cac220bca9aa6')
+ //var activeNode = tree.getActiveNode();
+ node=tree.getNodeByKey(id);
+ node.data.validite=valid; //Pas encore réussi à tester ...
+ node.render(true,false); //force rendering the node (not parents nor descendants)
+ //node.renderStatus(); //CSS element updates
+
//activeNode.addChildren({
// title: "Document using a custom icon",
// icon: "customdoc1.gif"
//});
}, false);
- source.addEventListener('appendChildren', function(event) {
- var data = JSON.parse(event.data);
- var id = data.id;
- var nodeList = data.nodeList;
- var pos = data.pos;
- var message = data.message;
+ (function (treeCssSelStr, msgCssSelStr) {
+ let _treeCssSelStr = treeCssSelStr; //inutile
+ let _msgCssSelStr = msgCssSelStr; //inutile
+ var _tree = $.ui.fancytree.getTree(_treeCssSelStr);
+ source.addEventListener('appendChildren', function(event) {
+ const data = JSON.parse(event.data);
+ var id = data.id;
+ const source = data.fcyTreeSrc;
+ var pos = data.pos;
+ var message = data.message;
//alert("The server says " + data.message);
console.log("The server says " + data.message);
- $("#tree1-messages").text(message);
- var tree = $.ui.fancytree.getTree("#tree1");
+ $(_msgCssSelStr).text(message);
//var activeNode = tree.getActiveNode();
+ console.log("_tree : "+ _tree); //?
+ var tree = $.ui.fancytree.getTree(_treeCssSelStr);
node=tree.getNodeByKey(id)
- node.addChildren(nodeList,pos);
+ node.addChildren(source,pos);
<!-- node.addChildren({ -->
<!-- title: "Document using a custom icon", -->
<!-- icon: "customdoc1.gif" -->
<!-- }); -->
- }, false);
-
- source.addEventListener('deleteChildren', function(event) {
- var data = JSON.parse(event.data);
- <!-- const keySet = new Set(data.idList); -->
- var keyList = data.idList;
- var message = data.message;
- <!-- const nodeAsKey = function (node,keys) { -->
- <!-- //?keySet = _isFunction(match) ? keys : _makeNodeTitleMatcher(match); -->
- <!-- if (node.key === key ) return true; -->
- <!-- return false; -->
- <!-- }; -->
- <!-- var myNodeAsKey= function(n) {return nodeAsKey(n,'efbab07c5d8e11ecbd14ac220bca9aa6');} -->
- //alert("The server says " + data.message);
- console.log("The server says " + data.message);
- $("#tree1-messages").text(message);
- var tree = $.ui.fancytree.getTree("#tree1");
- nodeList = keyList.map( (x) => { return tree.getNodeByKey(x) } );
- nodeList.map( (x) => { x.remove()} );
-
- //tree.findAll(match);
- //var activeNode = tree.getActiveNode();
- //activeNode.addChildren({
- // title: "Document using a custom icon",
- // icon: "customdoc1.gif"
- //});
+ }, false);
+ })('#tree1','#tree1-messages');
+
+ source.addEventListener('deleteChildren', function(event) {
+ const data = JSON.parse(event.data);
+ <!-- const keySet = new Set(data.idList); -->
+ const keyList = data.idList;
+ var message = data.message;
+ <!-- const nodeAsKey = function (node,keys) { -->
+ <!-- //?keySet = _isFunction(match) ? keys : _makeNodeTitleMatcher(match); -->
+ <!-- if (node.key === key ) return true; -->
+ <!-- return false; -->
+ <!-- }; -->
+ <!-- var myNodeAsKey= function(n) {return nodeAsKey(n,'efbab07c5d8e11ecbd14ac220bca9aa6');} -->
+ //alert("The server says " + data.message);
+ console.log("The server says " + data.message);
+ $("#tree1-messages").text(message);
+ var tree = $.ui.fancytree.getTree("#tree1");
+ nodeList = keyList.map( (x) => { return tree.getNodeByKey(x) } );
+ nodeList.map( (x) => { x.remove()} );
+
+ //tree.findAll(match);
+ //var activeNode = tree.getActiveNode();
+ //activeNode.addChildren({
+ // title: "Document using a custom icon",
+ // icon: "customdoc1.gif"
+ //});
}, false);
return {{ tree|tojson }};
}
- function getTree2() {
- // Some logic to retrieve, or generate tree structure
- return {{ mcTraiteJson|tojson }};
- }
+ <!-- function getTree2() { -->
+ <!-- // Some logic to retrieve, or generate tree structure -->
+ <!-- return {{ mcTraiteJson|tojson }}; -->
+ <!-- } -->
<!-- $('#tree1').treeview({ data: getTree1() }) -->
// levelOfs: "1.5em" // Adjust this if ul padding != "16px"
//},
icon: function(event, data) {
- if( data.node.isFolder() ) {
- return "glyphicon glyphicon-book";
- }
+ <!-- if( data.node.isFolder() ) { -->
+ <!-- return "glyphicon glyphicon-book"; -->
+ <!-- } -->
+ if( data.node.data.classeAccas == "MCSIMP") {
+ return "glyphicon glyphicon-leaf";
+ } else {
+ return "glyphicon glyphicon-list-alt";
+ }
+ return "glyphicon glyphicon-list-alt";
},
table: { // Options for the table extension
checkboxColumnIdx: 1, // Tree Nodes Checkboxes are rendered at column #1 (numbered from #0)
//VALIDATION STATES - Bootstrap includes validation styles for error, warning, and success messages.
//To use, add .has-warning, .has-error, or .has-success to the parent element
if( node.data.validite ) {
- _attr='has-success';
+ _attr='has-success has-feedback';
// $(".fancytree-exp-n > td:nth-child(2) span").filter(".fancytree-checkbox").css('background-color','blue')
$tdList.eq(1).find("span").filter(".fancytree-checkbox").css('background-color','#00ff00'); // Update the checkbox validation state TODO: create a CSS class
} else {
- _attr='has-error';
+ _attr='has-error has-feedback';
//$tdList.eq(1).css('background-color','red'); // Update the checkbox validation state TODO: create a CSS class
$tdList.eq(1).find("span").filter(".fancytree-checkbox").css('background-color','#ff0000'); // Update the checkbox validation state TODO: create a CSS class
} //TODO: paramétrer l'attribut/framework
- //console.log("node.data.validite, _attr :"+node.data.validite+" , "+_attr);
+ console.log("node.data.validite, _attr :"+node.data.validite+" , "+_attr);
// $tdList.eq(3).html("<simp><input type='input' class='form-control-sm' id='simp1' placeholder='"+node.data.wValue+"' value='"+node.data.wValue+"'></simp>");
$tdList.eq(3)
.html(
"<div class='form-group'>" +
// "<div class='form-group "+ _attr + "'>" +
// "<div class='form-group has-error'>" +
- "<input type='input' class='form-control' id='simp1' placeholder='" + node.data.wValue + //TODO:intosugg
+ "<input type='input' class='form-control input-sm' id='simp1' placeholder='" + node.data.wValue + //TODO:intosugg
"' value='"+node.data.wValue+"' required>"+
//"<div class='valid-feedback'>Valid.</div>"+
//"<div class='invalid-feedback'>Please fill out this field.</div>"+
.addClass(_attr)
.find("input").css('color','black'); //TODO : A placer ds le CSS
} else {
- $tdList.eq(2).prop("colspan", 3).nextAll().remove(); //Merge unused columns for easy keyboard navigation
+ $tdList.eq(2).prop("colspan", 4).nextAll().remove(); //Merge unused columns for easy keyboard navigation
return;
}
},
dataType : "json",
// The callback function when the web service return success.
success: function(data, status) {
- alert("Successfully Value Sent: " + value + "\nStatus: " + status +"\ndata.changeIsAccepted :" +data.changeIsAccepted );
+ <!-- alert("Successfully Value Sent: " + value + "\nStatus: " + status +"\ndata.changeIsAccepted :" +data.changeIsAccepted ); -->
+ console.log("Successfully Value Sent: " + value + "\nStatus: " + status +"\ndata.changeIsAccepted :" +data.changeIsAccepted );
rChangeIsAccepted = data.changeIsAccepted;
rValue = data.source['wValue'];
rValidite = data.source['validite'];
