<!doctype html>
-<html lang="en">
+<html lang="en" >
<head>
<title>{% block title %} MDM {{titre}} {% endblock %}</title>
<meta charset="utf-8">
</head>
+ <style>
+ /* Note: Try to remove the following lines to see the effect of CSS positioning */
+ .affix {
+ top: 0;
+ width: 100%;
+ z-index: 9999 !important;
+ }
+
+ .affix + .container-fluid {
+ padding-top: 70px;
+ }
+ </style>
+
+ <nav class="navbar navbar-inverse" data-spy="affix" >
<!-- <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="10"> -->
- <nav class="navbar navbar-inverse" >
+ <!-- <nav class="navbar navbar-inverse" > -->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MDM/Eficas</a>
<ul class="dropdown-menu">
<!-- <li class="active"><a href="#">File</a></li> -->
<li>
- <form action="">
+ <!-- <form action=""> -->
<div class="input-group">
- <input type="file" class="form-control" name="toto">
- <div class="input-group-btn">
- <button class="btn btn-default" type="submit">Set the current catalog</button>
- </div>
+ <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
+ <input type="file" class="form-control " name="toto">
+ <!-- <div class="input-group-btn"> -->
+ <!-- <button class="btn btn-default" type="submit">Set the current catalog</button> -->
+ <!-- </div> -->
</div>
- </form>
+ <!-- </form> -->
<!-- <form action=""> -->
<!-- <div class="form-group"> -->
<!-- <\!-- <label for="catalog">Set the current catalog </label> -\-> -->
<li><a href="#">Dataset</a></li>
<li><a href="#">Help</a></li>
</ul>
+ <form class="navbar-form navbar-right" action="">
+ <div class="form-group">
+ <input type="text" class="form-control" placeholder="Search">
+ </div>
+ <button type="submit" class="btn btn-default">Submit</button>
+ </form>
</div>
</nav>
<!-- <div id="tree2"></div> -->
- <div class="row">
+ <!-- <div class="row"> -->
<!-- <hr> -->
<!-- <h2>MyDataModel : Testing the WebAPP approach</h2> -->
<!-- <h2>Results</h2> -->
<!-- <div id="search-output"></div> -->
<!-- </div> -->
- </div>
+ <!-- </div> -->
<div class="row">
- <div class="col-sm-12">
+ <div class="col-sm-12 panel panel-default">
<!-- <h2>Choose Object to add</h2> -->
<!-- <h1>Choose command to add </h1> -->
<!-- {% 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" onclick="clickOnCommand( '#tree1','#tree1-messages', '{{ commande }}' )">
</div>
{% endfor %}
</div>
- <div class="col-sm-12">
- <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">
- <!-- 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>
- <tbody>
- <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>
- </tbody>
- <!-- </div> -->
- </table>
- </div>
- </div>
- <div class="row">
- <h2>Messages</h2>
- <div id="tree1-messages" class="col-sm-12 alert alert-success" >....</div>
- <!-- alert alert-success alert-info alert-warning alert-danger -->
- </div>
- <!-- <style type="text/css"> -->
- <!-- #treetable { -->
- <!-- table-layout: fixed; -->
- <!-- } -->
- <!-- #treetable tr td:nth-of-type(1) { -->
- <!-- text-align: right; -->
- <!-- } -->
- <!-- #treetable tr td:nth-of-type(2) { -->
- <!-- text-align: center; -->
- <!-- } -->
- <!-- #treetable tr td:nth-of-type(3) { -->
- <!-- min-width: 100px; -->
- <!-- white-space: nowrap; -->
- <!-- overflow: hidden; -->
- <!-- text-overflow: ellipsis; -->
- <!-- } -->
- <!-- </style> -->
+ </div>
+ <!-- <div class="row panel panel-default"> -->
+ <!-- <h2> </h2> -->
+ <!-- <\!-- <div id="treeview-searchable" class=""></div> -\-> -->
+ <!-- </div> -->
+ <div class="row">
+ <div class="col-sm-8 panel panel-default">
+ <div class="panel-heading">DatasetName : {{titre}}</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">
+ <!-- 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="60px"></col>
+ <col width="*"></col>
+ </colgroup>
+ <thead>
+ <tr> <th></th> <th></th> <th>Mot Clé</th> <th>Value</th> <th></th> <th></th> </tr>
+ </thead>
+ <tbody>
+ <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>
+ </tbody>
+ <!-- </div> -->
+ </table>
+ </div>
+ <!-- <div class="col-sm-4" ><table class="fancytree-ext-table"><tr>Optionals :</tr></table> -->
+ <div class="col-sm-4 panel panel-default" >
+ <div class="panel-heading">Optionals</div>
+ <div class="panel-body">Essai</div>
+ </div>
+ </div>
+ <div class="row">
+ <!-- <footer class="footer"> -->
+ <!-- <nav class="navbar navbar-inverse navbar-fixed-bottom"> -->
+ <!-- <nav class="navbar navbar-inverse"> -->
+ <!-- <div class="container-fluid"> -->
+ <!-- <div class="navbar-header" > -->
+ <!-- <a class="navbar-brand" href="#">Messages</a> -->
+ <!-- </div> -->
+ <!-- <h2>Messages</h2> -->
+ <!-- <span id="tree1-messages" class="nav navbar-nav col-sm-12 navbar-right alert alert-success" >....</span> -->
+ <footer id="tree1-messages" class="container-fluid footer col-sm-12 alert alert-success" >....</footer>
+ <!-- alert alert-success alert-info alert-warning alert-danger -->
+ <!-- </div> -->
+ <!-- </nav> -->
+ <!-- </footer> -->
+ </div>
+ </div> <!-- fin container-fluid principal-->
<script>
+ //Créer une fonction pour désactiver toutes les classes d'alert pour positionner une seule
+ let treeMessage=function(msgCssSelStr,messageClass,message) {
+ const messageClasses = new Set(["alert-success","alert-info","alert-warning","alert-danger"]);
+ if (messageClasses.has(messageClass)) {
+ $(msgCssSelStr).text(message);
+ $(msgCssSelStr).removeClass("alert-success alert-info alert-warning alert-danger");
+ $(msgCssSelStr).addClass(messageClass);
+ } else {
+ alert("The messageClass : |"+messageClass+"| is not in "+messageClasses);
+ };
+ }
+
// APPELS EXPLICITES AU SERVER
+ //TODO : Il faudrai s'assurer que si une requête de ce type est envoyée au serveur
+ // on récupère bien l'evenement appendChild --> validation, promise...
function clickOnCommand(treeCssSelStr, msgCssSelStr, cmdName ) {
tree = $.ui.fancytree.getTree("#tree1");
activeNode = tree.activeNode;
if ( activeNode == null) {
- index=0;
+ index=0; pos=0;
} else {
- parentList = activeNode.getParentList();
+ parentList = activeNode.getParentList();
console.log("clickOnCommand : parentList "+parentList)
if ( parentList.length == 0 ) {
console.log("clickOnCommand : index is forced = 0");
- index=0; // le root node est actuellement le nom de code !
- pos =0;
+ index=0; pos=0; // le root node est actuellement le nom de code !
} else {
if ( parentList.length == 1 ) {
activeCommandKey = activeNode.key;
}
console.log("clickOnCommand : index = "+index);
+
+
let success=function(data, status) {
- console.log("Successfully appendChild message for command " + cmdName + " sent: " + "\nStatus: " + status +"\ndata :" +data );
+ console.log("Successfully appendChild message for command " + cmdName + " sent: " + "\nStatus: " + status);
// rChangeIsAccepted = data.changeIsAccepted;
rId = data['id'];
// rValidite = data['validite'];
var message = data.message;
console.log("The server says " + data.message);
- $(_msgCssSelStr).text(message);
+ //$(_msgCssSelStr).text(message);
+ treeMessage(_msgCssSelStr,"alert-success",message);
//var activeNode = tree.getActiveNode();
- console.log("_tree : "+ _tree); //?
+ console.log("_tree : "+ _tree); //?Expliquer pourquoi null: à cause de $.?
var tree = $.ui.fancytree.getTree(_treeCssSelStr);
node = tree.getNodeByKey(id);
countChildren = node.countChildren(false);
<!-- return {{ mcTraiteJson|tojson }}; -->
<!-- } -->
-<!-- $('#tree1').treeview({ data: getTree1() }) -->
-
<!-- $("#tree1").fancytree({ source: [ {title: "Node 1", key: "1000"},{title: "Folder 2", key: "2", folder: true, children: [ {title: "Node 2.1", key: "3000"},{title: "Node 2.2", key: "44"} ]} ], }) -->
<!-- $("#tree1").fancytree({ source: JSON.parse(getTree1()), }) -->
} else {
return "glyphicon glyphicon-list-alt";
}
- 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)
)
.addClass(_attr)
.find("input").css('color','black'); //TODO : A placer ds le CSS
- } else {
+ $tdList.eq(4)
+ .html("<span class='glyphicon glyphicon-plus' onclick='alert(\"glyphicon-plus : "+node.key+"\")'></span>"+
+ "<span class='glyphicon glyphicon-trash'></span>"+
+ "<span class='glyphicon glyphicon-book''></span>");
+
+ } else { // Not an SIMP
$tdList.eq(2).prop("colspan", 4).nextAll().remove(); //Merge unused columns for easy keyboard navigation
return;
}
