From 100cb6d32a4466d8def113e568dadc09daa0da32 Mon Sep 17 00:00:00 2001
From: Eric F <eric.fayolle.77@gmail.com>
Date: Mon, 25 Oct 2021 22:19:15 +0200
Subject: [PATCH] gestion fancy+ajax

---
 testFlask/connectEficas.py           |   4 +-
 testFlask/mdm.py                     |   9 +-
 testFlask/templates/base.html        |  42 +++++-
 testFlask/templates/commandes_2.html | 197 ++++++++++++++++++++-------
 4 files changed, 192 insertions(+), 60 deletions(-)
diff --git a/testFlask/connectEficas.py b/testFlask/connectEficas.py
index ad0a05d5..c87057e5 100644
--- a/testFlask/connectEficas.py
+++ b/testFlask/connectEficas.py
@@ -151,9 +151,9 @@ if __name__ == "__main__":
     #print ( 'voici le connecteur', monEficasConnecteur)
     #print ( 'et les commandes', monEficasConnecteur.getListeCommandes(),'\n')
 
-    monEficasConnecteur.litFichierComm('../WebTest/web_tres_simple_avec_2Fact.comm')
+    monEficasConnecteur.litFichierComm('../WebTest/web_tres_simple_avec_2Procs.comm')
     d=monEficasConnecteur.getDicoForFancy(monEficasConnecteur.monEditeur.tree.racine)
-    #pprint.pprint(d)
+    pprint.pprint(d)
     print ('\n')
 
     print ('\n')
diff --git a/testFlask/mdm.py b/testFlask/mdm.py
index a93abc7e..4501c786 100755
--- a/testFlask/mdm.py
+++ b/testFlask/mdm.py
@@ -138,8 +138,8 @@ def index():
     # etape  = str(escape(request.args.get("etape", "")))
 
 # @app.route('/post/<uuid:post_id>')
-@app.route("/test1", methods=['POST'])
-def test1():
+@app.route("/updateSimp", methods=['POST'])
+def updateSimp():
     # Validate the request body contains JSON
     if request.is_json:
         # Parse the JSON into a Python dictionary
@@ -147,7 +147,10 @@ def test1():
         # Print the dictionary
         print(req)
         print(req['id'])
-
+        id,data=req.values()
+        data=str(data) #Oups PN
+        r=monConnecteur.changeValeur(id,data);
+        print (r)    
         # myTreeDico=monConnecteur.getDicoObjetsCompletsPourTree(req['id'])
         # print("myTreeDico :",myTreeDico) 
         # return jsonify([myTreeDico])
diff --git a/testFlask/templates/base.html b/testFlask/templates/base.html
index 18948288..65df47a8 100644
--- a/testFlask/templates/base.html
+++ b/testFlask/templates/base.html
@@ -3,11 +3,23 @@
   <head>
     <title>{% block title %} MDM {{titre}} {% endblock %}</title>
     <meta charset="utf-8">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     
     <!-- <script src="{{ url_for('static', filename='jquery/dist/jquery.js') }}"></script> -->
+
     <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
     <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
+    <!-- jQuery library -->
+    <!-- <script src="//code.jquery.com/jquery-3.6.0.js"></script> -->
+    <!-- <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> -->
+
+    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
+    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
+    <!-- Popper JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 
+    
     <!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap.min.css') }}" > -->
     <!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap-theme.min.css') }}" > -->
     <!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap-glyphicons.min.css') }}" > -->
@@ -15,10 +27,18 @@
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
+    <!-- Latest compiled and minified CSS -->
+    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> -->
+    <!-- Latest compiled JavaScript -->
+    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->
+
+
+
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jquery.fancytree/dist/skin-bootstrap/ui.fancytree.css') }}">
     <!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jquery.fancytree/dist/skin-win8/ui.fancytree.min.css') }}"> -->
     <script src="{{ url_for('static', filename='jquery.fancytree/dist/jquery.fancytree-all-deps.js') }}"></script>
-
+    <script src="{{ url_for('static', filename='jquery.fancytree/dist/modules/jquery.fancytree.ariagrid.js') }}"></script>
+ 
     <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
     
     <meta name="description" content={{description}}>
@@ -33,6 +53,18 @@
       });
     </script>
 
+    <style type="text/css">
+    table.fancytree-cell-mode > tbody > tr.fancytree-active > td {
+      background-color: #eee;
+    }
+    table.fancytree-cell-mode > tbody > tr > td.fancytree-active-cell {
+      background-color: #cbe8f6;
+    }
+    table.fancytree-cell-mode.fancytree-cell-nav-mode > tbody > tr > td.fancytree-active-cell {
+      background-color: #3875d7;
+    }  
+    </style>
+    
     <style type="text/css">
       #treetable {
       table-layout: fixed;
@@ -95,17 +127,17 @@
     });
   </script>
   
-    <!-- <script> -->
+    <!-- <script>  -->
     <!--  $(document).ready(function(){ -->
     <!--  <\!-- $(".MCSIMPValide").hover(function(){ -\-> -->
     <!--  $("[data-nodeid]").change(function(){ -->
     <!--    alert("-6-- :"+ $(this).text() + $(this).attr("class") + $(this).attr("id") ); -->
     <!--    $.ajax({ -->
     <!--        type: "POST", -->
-    <!--        url: "{{ url_for('test1') }}", -->
+    <!--        url: "{-----{ url_for('updateSimp) }-----}", -->
     <!--        data: JSON.stringify({id: $(this).attr("id")}), -->
     <!--        contentType: "application/json; charset=utf-8", -->
-    <!--        dataType: "json",  -->
+    <!--        dataType: "json", -->
     <!--        // The callback function when the web service return success. -->
     <!--        success: function(data, status) { -->
     <!--           alert("Data: " + data + "\nStatus: " + status +"\nId :", $(this).attr("id") ); -->
@@ -122,7 +154,7 @@
   
   </head>
 
-  <div class="container">
+  <div class="container-fluid">
     {% block content %} {% endblock %}
   </div>
 
diff --git a/testFlask/templates/commandes_2.html b/testFlask/templates/commandes_2.html
index db112f2b..affad4b5 100644
--- a/testFlask/templates/commandes_2.html
+++ b/testFlask/templates/commandes_2.html
@@ -3,54 +3,54 @@
 
 {% block content %}
    
-    <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
-    <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 id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> -->
+<!--     <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 %}
+<!--         </div> -->
+<!--         <\!-- </p> -\-> -->
+<!--       </ul> -->
+<!--       {% endfor %} -->
   
 
-    {%- for key, value in mcTraite.items() recursive %}
-	<h3>{{ key }} </h3>
-	{%- if value %}
-	    {% if value is mapping %}
-	      <ul>{{ loop(value.items())}}</ul>
-	    {%- else %}
-	      type {{value[0]}} valeur{{value[1]}}
-	    {%- endif %}
-	{%- endif %}
-	 <!-- </li> -->
-    {%- endfor %}                                 
+<!--     {%- for key, value in mcTraite.items() recursive %} -->
+<!-- 	<h3>{{ key }} </h3> -->
+<!-- 	{%- if value %} -->
+<!-- 	    {% if value is mapping %} -->
+<!-- 	      <ul>{{ loop(value.items())}}</ul> -->
+<!-- 	    {%- else %} -->
+<!-- 	      type {{value[0]}} valeur{{value[1]}} -->
+<!-- 	    {%- endif %} -->
+<!-- 	{%- endif %} -->
+<!-- 	 <\!-- </li> -\-> -->
+<!--     {%- endfor %}                                  -->
 
-<div id="tree2"></div>
+<!-- <div id="tree2"></div> -->
 
        <div class="row">
         <hr>
@@ -87,7 +87,24 @@
         <div class="col-sm-4">
           <h2>Tree</h2>
           <!-- <div id="treeview-searchable" class=""></div> -->
-          <div id="tree1" 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> -->
+             <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">
           <h2>Results</h2>
@@ -141,9 +158,11 @@ return  {{ mcTraiteJson|tojson }};
    
     $(function(){
       $("#tree1").fancytree({
-        extensions: ["dnd5", "edit", "glyph", "wide"],
+        //extensions: ["dnd5", "edit", "glyph", "wide", "table", "gridnav"],
+        extensions: [ "glyph", "table", "ariagrid"],
         checkbox: true,
-        selectMode: 3,
+        <!-- selectMode: 3, -->
+        selectMode: 1,
         dnd5: {
            dragStart: function(node, data) { return true; },
            dragEnter: function(node, data) { return true; },
@@ -162,9 +181,87 @@ return  {{ mcTraiteJson|tojson }};
            return "glyphicon glyphicon-book";
         }
       },
+      table: {
+        checkboxColumnIdx: 1,
+        nodeColumnIdx: 2
+      },
+      gridnav: {
+		autofocusInput:   true, // Focus first embedded input if node gets activated
+		handleCursorKeys: true   // Allow UP/DOWN in inputs to move to prev/next node
+      },
       //lazyLoad: function(event, data) {
       //  data.result = {url: "ajax-sub2.json", debugDelay: 1000};
       //}
+      renderColumns: function(event, data) {
+//var tree=$.ui.fancytree.getTree("#tree1")
+//p1=tree.getNodeByKey('8304986a334211ec853cac220bca9aa6')
+//$(p1.tr).find(">td")
+        var node = data.node,
+        $tdList = $(node.tr).find(">td");
+        $tdList.eq(0).text(node.getIndexHier());
+        //$tdList.eq(3).text(!!node.folder);
+//$tdList.eq(3).text(node.data.wValue);
+//if ( $tdList.eq(3).hasClass("EFC_SIMP") )
+	//if ( node.data.class ~ "EFC_SIMP" )
+//        if ( node.title === "param1" ) {
+        if (node.data.classeAccas ==  "MCSIMP") {
+	$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).css('color','black') //td
+//KO:	$tdList.eq(3).find(">input").css('color','black')
+<!-- $tdList.eq(3).html("<simp>"+node.data.wValue+"</simp>"); -->
+        }
+      },
+      icon: function(event, data) {
+        if( data.node.type ) {
+          return "ft-ico-" + data.node.type;
+        }
+      },
+      activate: function(event, data) {
+          console.log("event.type, data :"+event.type+" , "+data);
+      },
+      activateCell: function(event, data) {
+          console.log("event.type, data :"+event.type+" , "+data);
+      },
+      defaultGridAction: function( event, data ) {
+          var node = data.node
+          // Called when ENTER is pressed in cell-mode.
+          // Return false to prevent default
+          console.log("event.type, data :"+event.type+" , "+data);
+          if( !data.activeTd ) {
+            alert( "Custom default action for row: " + data.node.title );
+            // we don't return false, so default action is applied:
+          } else if ( data.colIdx != 3 ) {
+            // eslint-disable-next-line no-alert
+            alert( "Custom default action: " + data.node.title );
+            return false;
+          };
+          $.ajax({
+               type: "POST",
+               url: "{{ url_for('updateSimp') }}",
+               data: JSON.stringify({id: node.key, data:45 }),
+//               data: JSON.stringify({id: 5}),
+               contentType: "application/json; charset=utf-8",
+               dataType: "json", 
+               // The callback function when the web service return success.
+               success: function(data, status) {
+                  alert("Data: " + data + "\nStatus: " + status +"\nId :", $(this).attr("id") );
+                  console.log( {'data': data } );
+               },
+               // The callback function when the web service return fail.
+               failure: function(errMsg) {
+                   alert(errMsg);
+               }
+           });
+      },
+      lazyLoad: function(event, data) {
+         var node = data.node;
+         console.log("event.type, data :"+event.type+" , "+data);
+        // Issue an Ajax request to load child nodes
+        data.result = {
+          url: "/getBranchData",
+          data: {key: node.key}
+        }
+      },
      });
     });
 
@@ -200,9 +297,9 @@ return  {{ mcTraiteJson|tojson }};
        </script>
        
 <!-- <div id="tree1"></div> -->
---------------
-{{ mcTraiteJson }}
-----------
+<!-- -------------- -->
+<!-- {{ mcTraiteJson }} -->
+<!-- ---------- -->
     <script>
       
 <!-- var tree = [ -->
-- 
2.39.2

