From e0275ed612c5b10882bfcec3e07c708649983ddc Mon Sep 17 00:00:00 2001
From: Eric Fayolle <eric.fayolle@edf.fr>
Date: Fri, 28 Jan 2022 18:45:46 +0100
Subject: [PATCH] Correction interaction entre les menus et les barres de
 navigation

---
 testFlask/templates/base.html        | 237 ++++++++++++++++++---------
 testFlask/templates/commandes_2.html |   9 +-
 2 files changed, 158 insertions(+), 88 deletions(-)

diff --git a/testFlask/templates/base.html b/testFlask/templates/base.html
index c866ab8e..5abca9e2 100644
--- a/testFlask/templates/base.html
+++ b/testFlask/templates/base.html
@@ -9,35 +9,36 @@
     <!-- Include glyph font definitions, for example matching `preset: "awesome5"` -->
     <!-- <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"> -->
     
+    <!-- jQuery local library -->    
     <!-- <script src="{{ url_for('static', filename='jquery/dist/jquery.js') }}"></script> -->
 
-    <!-- jQuery library -->
+    <!-- jQuery library : 1.12 -->
     <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 -->
+    <!-- jQuery library : 3.6  -->
     <!-- <script src="//code.jquery.com/jquery-3.6.0.js"></script> -->
     <!-- <script src="//code.jquery.com/ui/3.6.0/jquery-ui.js"></script> -->
-
+    <!-- jQuery library : 3.5  -->
     <!-- <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>
 
-    
+    <!-- Bootstrap : local -->
     <!-- <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') }}" > -->
 
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+    <!-- Bootstrap 3 : cdn netdna -->
+    <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 -->
+    <!-- Bootstrap 4 : 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>
@@ -49,13 +50,13 @@
     <!-- <link rel="shortcut icon" href="../images/favicon-32x32.png"> -->
     <!-- <script src="{{ url_for('static', filename='jquery-ui/jquery-ui.js') }}"></script> -->
 
-    <script>
-      $(document).ready(function(){
-      $("#bt1").click(function(){
-      $("#div1").load("{{ url_for('static', filename='demo_test.txt') }}")
-      });
-      });
-    </script>
+    <!-- <script> -->
+    <!--   $(document).ready(function(){ -->
+    <!--   $("#bt1").click(function(){ -->
+    <!--   $("#div1").load("{{ url_for('static', filename='demo_test.txt') }}") -->
+    <!--   }); -->
+    <!--   }); -->
+    <!-- </script> -->
 
     <style type="text/css">
       table.fancytree-cell-mode > tbody > tr.fancytree-active > td {
@@ -69,54 +70,81 @@
       }  
     </style>
     
-    <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>
+    <!-- <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> -->
     
   </head>
-
-  <style>
-    .affix {
-    top: 0;
-    width: 100%;
-    z-index: 9999 !important;
-    }
-    
-    .affix + .container-fluid {
-    padding-top: 100px;
-    }
-  </style>
   
-  <nav class="navbar navbar-inverse flex-column flex-md-row" data-spy="affix" >
-    <!-- <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="10"> -->
-    <!-- <nav class="navbar navbar-inverse" > -->
-    <div class="container-fluid">
-      <div class="row">
+<!-- .navbar.navbar-static-top + .navbar.navbar-static-top { -->
+<!--     margin-top: -20px; -->
+<!--     z-index: auto; -->
+<!-- } -->
+
+<!-- .navbar.navbar-static-top + .jumbotron { -->
+<!--     margin-top: -20px; -->
+<!-- } -->
+
+
+<!-- .affix + .container-fluid { -->
+<!-- padding-top: 100px; -->
+<!-- } -->
+
+    <!-- html body div.container-fluid div.row nav.navbar.flex-column.flex-md-row.affix -->
+    <!-- row.nav + row.nav div.row:nth-child(2) > nav:nth-child(1) -->
+    <style>
+      .affix {
+      top: 0;
+      width: 100%;
+      z-index: 8000;
+      }
+    </style>
+
+  <div class="container-fluid">
+
+    <div class="row">
+      <nav class="navbar navbar-inverse flex-column flex-md-row" data-spy="affix" >
+	<!-- <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="10"> -->
+	<!-- <nav class="navbar navbar-inverse" > -->
+	<!-- <div class="container-fluid"> -->
+	<!-- <div class="row"> -->
+	
 	<div class="navbar-header">
 	  <a class="navbar-brand" href="#">MDM/Eficas</a>
 	</div>
-	<ul class="nav navbar-nav">
-	  <!-- <li class="active"><a href="#">File</a></li> -->
+	
+	<ul class="nav navbar-nav">  
+	  <!-- <\!-- Dropdown -\-> -->
+    	  <!-- <li class="nav-item dropdown"> -->
+    	  <!--   <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> -->
+          <!--     Dropdown link -->
+    	  <!--   </a> -->
+    	  <!--   <div class="dropdown-menu"> -->
+          <!--     <a class="dropdown-item" href="#">Link 1</a> -->
+          <!--     <a class="dropdown-item" href="#">Link 2</a> -->
+          <!--     <a class="dropdown-item" href="#">Link 3</a> -->
+    	  <!--   </div> -->
+    	  <!-- </li> -->
+	  
 	  <li class="dropdown">
-            <a class="dropdown-toggle" data-toggle="dropdown" href="#">File<span class="caret"></span></a>
+            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">File<span class="caret"></span></a>
             <ul class="dropdown-menu">
 	      <li class="dropdown-header">Server Side</li> 
-              <!-- <li class="active"><a href="#">File</a></li> -->
-	      <li>
+	      <li class="dropdown-item">
 		<form method="POST" enctype="multipart/form-data" action="{{ url_for('upload') }}">
 		  <div class="form-group">
 		    <!-- <input type="file" style="position:relative;opacity:0;z-index:2;" name="Set_Catalog_name" -->
@@ -134,7 +162,7 @@
 		    <!-- <div class="input-group-btn"> -->
 		    <!--   <button class="btn btn-default" type="submit">Set the current catalog</button> -->
 		    <!-- </div> -->
-		  </div>
+		  </div> <!-- form-group -->
 		  <!-- </form> -->
 		  <!-- <form action=""> -->
 		  <!-- 	<div class="form-group"> -->
@@ -142,49 +170,96 @@
 		  <!-- 	  <button type="file" class="btn btn-default"  multiple="false" id="catalog" value="Set the current catalog"></button> -->
 		  <!-- 	</div> -->
 		</form>
-	      </li>
+	      </li> <!-- dropdown-item -->
 	      <li role="presentation" class="divider"></li>
 	      <li class="dropdown-header">Local Side</li> 
-              <li><a href="#">Set Catalog</a></li>
-              <li><a href="#">Open Dataset</a></li>
-            </ul>
-	  </li>
-	  <li><a href="#">Editor</a></li>
-	  <li><a href="#">Dataset</a></li>
-	  <li><a href="#">Help</a></li>
-
-	</ul>
+              <li class="dropdown-item"><a class="nav-link" href="#">Set Catalog</a></li>
+              <li class="dropdown-item"><a class="nav-link" href="#">Open Dataset</a></li>
+            </ul> <!-- dropdown-menu -->
+	  </li>   <!-- dropdown      -->
+	  <li class="nav-item"><a class="nav-link" href="#">Editor</a></li>
+	  <li class="nav-item"><a class="nav-link" href="#">Dataset</a></li>
+	  <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
+
+	</ul> <!-- nav navbar-nav -->
 	<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> <!-- row -->
-
-    </div> <!-- container-fluid -->
-  </nav>
+      </nav>
+    </div>
 
-  <div class="container-fluid">
 
     {% block commands_menu %} {% endblock %}
 
-    <div class="affix" style="top: 50px;">                                                             <!-- TODO : style -> CSS -->
-	<div class="row"                             style="margin-top: 0px;">                        <!-- TODO : style -> CSS -->
-	  <div class="col-sm-12 panel panel-default" style="padding-top: 10px;padding-bottom: 10px;">  <!-- TODO : style -> CSS -->
+    <div class="row" style="margin-top: 110px;">                        <!-- TODO : style -> CSS -->
+      <!-- le data-spy="affix" sur un deuxième nav n'ajoute pas la class .affix !! -->
+      <nav class="navbar flex-column flex-md-row" data-spy="affix" style="top: 52px;z-index: 7999;width:100%;">
+      <!-- <nav class="navbar flex-column flex-md-row" data-spy="affix" style="top: 52px;z-index: 7999;width:100%;background-color:white"> -->
+	  <ul class="nav navbar-nav">
+	  
+	    <!-- <div class="col-12 panel panel-default" style="padding-top: 10px;padding-bottom: 10px;">  <\!-- TODO : style -> CSS -\-> -->
+	    <!-- <li class="nav-item"><a class="nav-link" href="#" z-index="0">AAAAAAA</a></li> -->
+	    <!-- <li class="nav-item"><a class="nav-link" href="#" z-index="0">BBBBBBB</a></li> -->
+	    <!-- <li class="nav-item"><a class="nav-link" href="#">CCC</a></li> -->
 	    
 	    {% for commande in listeCommandes %}
-	    <div class="btn-group" data-toggle="buttons" onclick="clickOnCommand( '#tree1','#tree1-messages', '{{ commande }}' , '' )">
-	      <label class="btn btn-primary activate" for={{ commande }}> {{ commande }}</label>
-	    </div>
+	    <li class="nav-item">
+	      <div class="btn-group nav-link" data-toggle="buttons" onclick="clickOnCommand( '#tree1','#tree1-messages', '{{ commande }}' , '' )">
+		<!-- <label class="btn btn-primary activate" for={{ commande }}> {{ commande }}</label> -->
+		<button class="btn btn-primary navbar-btn" for={{ commande }}> {{ commande }}</button>
+	      </div>
+	    </li>
 	    {% endfor %}
 	  
-	  </div>
-	</div> <!-- row -->
-      </div> <!-- affix -->
-  </div> <!-- container-fluid -->
+	  </ul>
+      </nav>
+    </div> <!-- row -->
 
-  <div class="container-fluid">
+    <!-- <div class="row"> -->
+    <!--   <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> -->
+    <!-- 	<\!-- Links -\-> -->
+    <!-- 	<ul class="navbar-nav"> -->
+	  
+    <!-- 	  <li class="nav-item"> -->
+    <!-- 	    <a class="nav-link" href="#">Link 1</a> -->
+    <!-- 	  </li> -->
+    <!-- 	  <li class="nav-item"> -->
+    <!-- 	    <a class="nav-link" href="#">Link 2</a> -->
+    <!-- 	  </li> -->
+
+    <!-- 	  <\!-- Dropdown -\-> -->
+    <!-- 	  <li class="nav-item dropdown"> -->
+    <!-- 	    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> -->
+    <!--           Dropdown link -->
+    <!-- 	    </a> -->
+    <!-- 	    <div class="dropdown-menu"> -->
+    <!--           <a class="dropdown-item" href="#">Link 1</a> -->
+    <!--           <a class="dropdown-item" href="#">Link 2</a> -->
+    <!--           <a class="dropdown-item" href="#">Link 3</a> -->
+    <!-- 	    </div> -->
+    <!-- 	  </li> -->
+    <!-- 	</ul> -->
+    <!--   </nav> -->
+    <!-- </div> -->
+    
+    <!-- <div class="row"                             style="margin-top: 100px;">                        <\!-- TODO : style -> CSS -\-> -->
+    <!-- <nav class="navbar navbar-inverse flex-column flex-md-row" data-spy="affix" style="top: 52px;"> -->
+    <!--   <\!-- <div class="affix" style="top: 52px;">                                                             <\\!-- TODO : style -> CSS -\\-> -\-> -->
+    <!-- 	<div class="col-12 panel panel-default" style="padding-top: 10px;padding-bottom: 10px;">  <\!-- TODO : style -> CSS -\-> -->
+	  
+    <!-- 	  {% for commande in listeCommandes %} -->
+    <!-- 	  <div class="btn-group" data-toggle="buttons" onclick="clickOnCommand( '#tree1','#tree1-messages', '{{ commande }}' , '' )"> -->
+    <!-- 	    <label class="btn btn-primary activate" for={{ commande }}> {{ commande }}</label> -->
+    <!-- 	  </div> -->
+    <!-- 	  {% endfor %} -->
+	  
+    <!-- 	</div> -->
+    <!-- 	<\!-- </div> <\\!-- affix -\\-> -\-> -->
+    <!-- </nav> -->
+    <!-- </div> <\!-- row -\-> -->
 
     {% block content %} {% endblock %}
 
diff --git a/testFlask/templates/commandes_2.html b/testFlask/templates/commandes_2.html
index b45f144c..16dae1a3 100644
--- a/testFlask/templates/commandes_2.html
+++ b/testFlask/templates/commandes_2.html
@@ -1,12 +1,6 @@
 {% extends 'base.html' %}
 
-
 {% block content %}
-   
-<!--     <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> -->
-<!--     <button id="bt1">Get External Content</button> -->
-
-
 
 
 <!--     {%- for key, value in mcTraite.items() recursive %} -->
@@ -67,6 +61,7 @@
 <!--     <h2> </h2> -->
 <!--     <\!-- <div id="treeview-searchable" class=""></div> -\-> -->
 <!-- </div> -->
+    
 <div class="row">	   
   <div class="col-sm-8 panel panel-default"> <!-- Panel Arbre Principal -->
     <div class="panel-heading">DatasetName : {{titre}}</div>
@@ -99,7 +94,7 @@
     <div class="panel-heading">Optionals</div>
     <div class="panel-body">
       <div id="Optionals"></div>
-      <div id="bebe"></div>
+      <div id="Opt-testing"></div>
     </div>
   </div>
   
-- 
2.39.2