From: Eric Fayolle <eric.fayolle@edf.fr>
Date: Mon, 17 Jan 2022 22:40:48 +0000 (+0100)
Subject: Amélioration du template et Ajout +-?
X-Git-Url: http://git.salome-platform.org/gitweb/?a=commitdiff_plain;h=51cb259a34d5c76e5d36ac2e13bf03a5522894fb;p=tools%2Feficas.git

Amélioration du template et Ajout +-?
---

diff --git a/testFlask/templates/base.html b/testFlask/templates/base.html
index 2bd6dd72..61bb3c9e 100644
--- a/testFlask/templates/base.html
+++ b/testFlask/templates/base.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" >
   <head>
     <title>{% block title %} MDM {{titre}} {% endblock %}</title>
     <meta charset="utf-8">
@@ -155,8 +155,22 @@
   
   </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>
@@ -168,14 +182,15 @@
           <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> -\-> -->
@@ -191,6 +206,12 @@
 	<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>
   
diff --git a/testFlask/templates/commandes_2.html b/testFlask/templates/commandes_2.html
index 3666c00c..b1f06e9d 100644
--- a/testFlask/templates/commandes_2.html
+++ b/testFlask/templates/commandes_2.html
@@ -23,7 +23,7 @@
 
 <!-- <div id="tree2"></div> -->
 
-       <div class="row">
+       <!-- <div class="row"> -->
         <!-- <hr> -->
        <!-- <h2>MyDataModel : Testing the WebAPP approach</h2> -->
     
@@ -60,9 +60,9 @@
        <!--    <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> -->
@@ -73,7 +73,7 @@
            <!--   {% 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 }}' )">
@@ -88,68 +88,87 @@
              </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;
@@ -164,8 +183,10 @@
       }
       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'];
@@ -244,9 +265,10 @@
         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);
@@ -306,8 +328,6 @@
     <!-- 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()), }) -->
@@ -358,7 +378,7 @@
         } 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)
@@ -427,7 +447,12 @@
               )
             .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;
 	}
