Update templates/proposed-GUI.html

templates/proposed-GUI.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="static/MenuStyle.css">
     <link rel="stylesheet" href="static/LegendPageStyle.css">
     <link rel="stylesheet" href="static/popups.css">
+    <link rel="stylesheet" href="static/IMG-Larger.css">
     <meta charset="utf-8">
     <title>ADR Console</title>
     <link rel = "icon"  type = "image/png"  sizes = "180x154" href = "static/images/TSAlogoCropped180x154.png">
@@ -42,11 +43,11 @@
     </div>
 
   
-    <div id="slider"  class="slide-out">
-     <div id="menuOptions">
-      <li onclick="openTab(event, 'home')" >Measure Plans </li>
-      <li onclick="redirectAlaaSearch()">Search in Documents</li>
-      </div>
+    <div id="mySidebar"  class="slide-out">
+        <div id="menuOptions">
+          <li onclick="openTab(event, 'home')" >Measure Plans </li>
+          <li><a href="{{ url_for('searchDocument') }}">Search in Documents</a></li>
+        </div>
     </div>
 
     <div id="home" class="tabcontent" >
@@ -67,6 +68,13 @@
         <div id="backgroundimg" > </div>
         <div id="underimgbuttons"></div>
     </div>
+        
+    <div id="myModal" class="modal" >
+      <span class="close">&times;</span>
+      <img class="modal-content" id="img01">
+      <div id="caption"></div>
+    </div>
+
      
     <form method="post"  id="myForm" >
 
@@ -198,7 +206,7 @@
     </div>
     
     <div id="legends" class="tabcontent">
-        <ul class="graynavbarLegend">
+        <ul class="graynavbarLegend" >
           <label class="label1">Project Name / Project Part / NRM Section /</label> <label class="label2">Legend</label>
           <div class="legendtime"> 
             <div style="display: inline-flex;">
@@ -213,6 +221,7 @@
             </div>
           </div>
         </ul>
+        
     </div>
     
     <div class="dropdown-content">
@@ -276,9 +285,9 @@
                   <br>  &emsp;&emsp;   a. (1.0 Substructure) Ground Beam or Pile Cap
                   <br> &emsp;&emsp; b. (3.2 Floor Finishes) Floor or Wall
               </li>
-              <li style="list-style-type:square;">  In the second dropdown, you will find the first part of the MC-T Name. Ex: Ground Beams: m2.</li>
-              <li style="list-style-type:square;"> The third dropdown menu has the options (Area-perimeter-Length-Count).</li>
-              <br> Ex: If you selected Ground Beams: m2 , You are currently obtaining the total area value from the legend. If you selected Ground Beams: m, you may choose whether to extract perimeter or length data from the third selection.
+              <li style="list-style-type:square;">  In the second dropdown, you will find a list of MC-T Names. Choose Accordingly.</li>
+              <li style="list-style-type:square;"> The third dropdown menu has the unit of the MC-T Name you have chosen.</li>
+              <br> Note: If the unit was (m), choose whether you wish to extract perimeter or length data from the third selection.
               <br><br><label  style="font-style: italic;"> Regarding the MC-T naming process: </label>
               Then add the relevant detail and depth to the rows underneath the dropdowns.
               You can add/ subtract rows by using the + and - button.
@@ -461,14 +470,20 @@ function displayprojsections(projectName,PartName){
 }
 
 
-/*Menu bar icon Slider and Toggle*/
-var $slider = document.getElementById('slider');
+/*Menu bar icon mySidebar and Toggle*/
+var $mySidebar = document.getElementById('mySidebar');
 var $toggle = document.getElementById('toggle');
 $toggle.addEventListener('click', function() {
-    var isOpen = $slider.classList.contains('slide-in');
-
-    $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
+ 
+  var isOpen = $mySidebar.classList.contains('slide-in');
+    w3_open();
+    $mySidebar.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
     $toggle.classList.toggle("change");
+  
+
+  if ($mySidebar.classList.contains('slide-out')){
+    w3_close()
+}
 
 });
 
@@ -506,7 +521,24 @@ document.getElementById('firstpage').addEventListener('click',function(){
   document.getElementById('textsecondpage').setAttribute('hidden',true)
 
 });
+function w3_open() {
+  document.getElementById("home").style.marginLeft = "25%";
+  document.getElementById("legends").style.marginLeft = "25%";
+  
+  document.getElementById("home").style.transition= '0.8s';
+  document.getElementById("legends").style.transition= '0.8s';
 
+  document.getElementById("mySidebar").style.width = "25%";
+  document.getElementById("mySidebar").style.display = "block";
+ }
+ 
+function w3_close() {
+  document.getElementById("home").style.marginLeft = "0%";
+  document.getElementById("legends").style.marginLeft = "0%";
+  document.getElementById("home").style.transition= '1.5s'
+  document.getElementById("legends").style.transition= '1.5s'
+  document.getElementById("mySidebar").style.display = "none";
+}
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
 /*Red Alert to fill in the first 3 dropdowns: prj name, part, section*/
@@ -556,9 +588,9 @@ function openTab(evt, tabname) {
   // Show the current tab, and add an "active" class to the button that opened the tab
   document.getElementById(tabname).style.display = "block";
   evt.currentTarget.className += " active";
-  var isOpen = $slider.classList.contains('slide-in');
-  if ($slider.classList.contains('slide-in'))
-  {$slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
+  var isOpen = $mySidebar.classList.contains('slide-in');
+  if ($mySidebar.classList.contains('slide-in'))
+  {$mySidebar.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
   document.getElementById("pagetitle").style.backgroundColor='rgb(0, 60, 255)';
 
   $toggle.classList.toggle("change"); 
@@ -566,9 +598,6 @@ function openTab(evt, tabname) {
 }
 // Start with the first page (Home)
 document.getElementById("pagetitle").click();
-function redirectAlaaSearch(){
-  window.open('https://alaaadr-searchdocuments.hf.space/');
-}
 
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
@@ -942,6 +971,29 @@ var ratioPunit=1;
 }
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
+
+function ImgLarger(id, src){
+// Get the modal
+    var modal = document.getElementById('myModal');
+
+    // Get the image and insert it inside the modal - use its "alt" text as a caption
+    var img = document.getElementById(id);
+    var modalImg = document.getElementById('img01');
+    var captionText = document.getElementById("caption");
+        modal.style.display = "block";
+        modalImg.src = src;
+        captionText.innerHTML = 'Preview';
+
+
+    // Get the <span> element that closes the modal
+    var span = document.getElementsByClassName("close")[0];
+
+    // When the user clicks on <span> (x), close the modal
+    span.onclick = function() { 
+        modal.style.display = "none";
+    }
+}
+
 var spreadsheetId='';
 var spreadsheetURL='';
 var colorsUsed='';
@@ -1094,10 +1146,12 @@ function getData(form) {
             //  imgcanvas.width=700;
             imgcanvas.height=600;
             console.log(imgcanvas.width)
-            imgcanvas.id='imgcanvas';
+            imgcanvas.id=data[0];
             imgcanvas.alt="Larry";
             imgcanvas.style.zIndex=999;
-
+            imgcanvas.addEventListener('click',function(){
+              ImgLarger(imgcanvas.id,imgcanvas.src)
+            })
             backimg.style.backgroundColor="transparent";
             backimg.style.opacity="1";
             getlegendstoDirectory()