Update templates/proposed-GUI.html

templates/proposed-GUI.html

@@ -76,7 +76,7 @@
       <div id="caption"></div>
     </div>
 
-     
+
     <form method="post"  id="myForm" >
 
       <!-- <div class="projnamedp">
@@ -99,20 +99,25 @@
 
   
       <div id ="tomeasurediv">
-        <label id="measureLabel">Document To Measure</label>  
-          <input type="search" onkeyup=filterFunction(this.id) id="tomeasureSearchInput">
-        <br>
-        <div id="measureCheckbox">
-          <select style="margin-left: -1%;" hidden name="measureselectname"  id="measureselectid"  multiple size="5" required>   </select>
-          <select id='selectunitA' hidden>
-            <option id="m2" value="m2" >m&#xb2; </option>
-            <option id="mm2" value="mm2" >mm&#xb2;  </option>
-          </select>
-          <select id='selectunitP' hidden>
-            <option id="m" value="m" >m </option>
-            <option id="mm"value="mm" >mm  </option>
-          </select>
-        </div>
+          <div>
+            <label id="measureLabel">Document To Measure</label>  
+              <input type="search" onkeyup=filterFunction(this.id) id="tomeasureSearchInput">
+              <!-- <button id="refreshDropboxButtonID"></button>  -->
+              <i class="fa fa-dropbox fa-lg" id="refreshDropboxButtonID" > 
+                <span class="dropboxtip">The console updates projects retrieved from Dropbox automatically at 9:00 am and 9:00 p.m. If you need to access any projects in between, just click on this button.</span> </i>
+             
+          </div>
+          <div id="measureCheckbox">
+            <select style="margin-left: -1%;" hidden name="measureselectname"  id="measureselectid"  multiple size="5"></select>
+            <select id='selectunitA' hidden>
+              <option id="m2" value="m2" >m&#xb2; </option>
+              <option id="mm2" value="mm2" >mm&#xb2;  </option>
+            </select>
+            <select id='selectunitP' hidden>
+              <option id="m" value="m" >m </option>
+              <option id="mm"value="mm" >mm  </option>
+            </select>
+          </div>
       </div>
   
       <div id ="relvDocdiv">
@@ -240,25 +245,26 @@
               <br><br>
               <li id="userguideheadings">   First Part  </li>
               <label id="underlinedLables"> - Inputs: </label>
-              <br>There are three dropdowns available that will allow you to select the name of the project you wish to measure, along with the project part, and the project section.
+              <br>There are three dropdowns available that will allow you to select the name of the project you wish to measure, the project part, and the project section.
  
               <br > <br>
-              <label style="font-style: italic;"> Please make sure the “Project Section” you select is correct because it will affect the code that will be applied to the plan.   </label>
+              <label style="font-style: italic;"> Please ensure that the 'Project Section' you select is correct, as it will affect the code applied to the plan.  </label>
               <br>
               <br>
-              Mark the project from the "To measure" section that you want to measure. Additionally, you have the ability to view any relevant documents you might need in Dropbox.(optional).
-
+              Select the project you want to measure from the 'To measure' section. Additionally, you have the option to view any relevant documents you might need in Dropbox. (optional).
+              <br> Important Note: The console updates projects retrieved from Dropbox automatically at 9:00 am and 9:00 p.m. If you need to access any projects in between, click on the dropbox icon located next to the 'Document to measure' section.
+              <br>
               <br> <label style="font-style: italic;"> * Pixel to Metric conversion important notes:</label> 
-              <br>Once you have selected a specific plan to measure, you will be provided with a pdf with a colored rectangle drawn in it. Please open this PDF in Foxit Reader, Adobe, or any software that will allow you to measure shapes on a plan, and measure the given shape’s area and perimeter in the desired metric unit, then input those values in the textboxes that will be shown below the relevant documents. 
+              <br>Once you have selected a specific plan to measure, you will be provided with a PDF containing a colored rectangle. Please open this PDF in Foxit Reader, Adobe, or any software that will allow you to measure shapes on a plan, and measure the given shape’s area and perimeter in the desired metric unit, then input those values in the textboxes that will be shown below the relevant documents. 
               For the ease of conversion of metric units, you will find a dropdown with ‘m’ or ‘mm’ next to each textbox.
-              This will allow the code to understand the ratio between the pixels to the metric unit you chose.
+              This will enable the code to understand the ratio between pixels and the metric unit you chose.
               
              <br>
               You may think of this rectangle's measurement as a scale check for Bluebeam.
               <br> <br>
              <label  style="font-style: italic;"> * Notes for section 1.0 measurement:</label> <!--  (Section 3.2 does not yet support this feature):   -->
-               <br><label id=info >You can measure several levels independently using checkbox labeled 'Leveled plan' under Scale document heading.  </label>
-              Leave the checkbox unchecked if you want to measure the entirety of the plan. <br>Please tick the box if you want to measure certain areas of the plan or have the plan divided into levels. Once the checkbox is ticked, a window will appear that will allow you to draw on the PDF. Click the save button at the bottom of the page when you are done.
+               <br><label id=info >You can measure multiple levels independently using checkbox labeled 'Leveled plan' under Scale document heading.  </label>
+               Leave the checkbox unchecked if you want to measure the entire plan. <br>Please check the box if you want to measure specific areas of the plan or if the plan is divided into levels. Click the save button at the bottom of the page when you have finished.
               <br>
     
               <i id="secondpage" class="fa fa-arrow-right" aria-hidden="true"></i>
@@ -320,17 +326,39 @@
     <!-- Modal content -->
     <div class="modal-content">
         <div class="modal-header">
-            <span class="close">×</span>
-            <h2>Error</h2>
+           <button type="button" class="closeModal" data-dismiss="modal">&times;</button>
+            <h2 id="TopTextModal">Error</h2>
         </div>
         <div class="modal-body">
           <p id="modal-bodyText"> 
           </p>
+          <br>
         </div>
 
     </div>
 </div>
 
+
+<div id="dialog-container" class="overlay">
+  <!-- Modal content -->
+  <div class="modal-content">
+      <div class="modal-header">
+         <button type="button" class="closeModal" >&times;</button>
+          <h2 id="TopTextModal">Warning!</h2>
+      </div>
+      <div class="modal-body">
+        <p id="modal-bodyText">Are you sure you want to retrieve information from dropbox. Please note that this process may exceed 30 minutes, depending on the amount of data found in the dropbox and the internet connection. 
+        </p>
+        <br>
+        <div class="text-right">
+          <button class="dialog-btn btn-primary" id="confirm">Ok</button>
+          <button class="dialog-btn btn-cancel" id="cancel">Cancel</button>
+        </div>
+        <br>
+      </div>
+  </div>
+</div>
+
   </body>
 </html>
 
@@ -339,6 +367,7 @@
 ///////////////////////////////////////////////BEGIN JS CODE//////////////////////////////////////////////////
 PopupElement=document.getElementById('modal-bodyText');
 
+
 // add project names to first dropdown from google sheet
 firstdropdown=document.getElementsByClassName('selectionsProj')[0];
 seconddropdown=document.getElementsByClassName('selectionsProjp')[0];
@@ -375,6 +404,7 @@ function displayprjnames(){
 $.get('/getprojectnames/')
      .success(function(data) {
       document.getElementById("all").style.display = "none";
+
       for (let i=0;i<data.length;i++)
       {
         var op0 = document.createElement("OPTION") ;
@@ -496,12 +526,48 @@ $toggle.addEventListener('click', function() {
 }
 
 });
+// if (thirddropdown.value){
+  MCTNames={}
+  var workerMCT = new Worker('../static/MC_T_API_Worker.js');
+  // workerMCT.postMessage(thirddropdown.value)
+  workerMCT.onmessage= function(event){
+    console.log('refreshed')
+    if (thirddropdown.value){
+      sectionNumber=thirddropdown.value;
+    
+    MCTNames=event.data;
+    MCTNames=MCTNames[sectionNumber.toString().toLowerCase()]
+    }
+    console.log(MCTNames)
+   }
+// }
+
 
 var worker = new Worker('../static/API_Refresh_workerJS.js');
+
 worker.onmessage= function(event){
-    var data=JSON.parse(event.data);
+
+//   if (event.data=='sectionData')
+//  {
+//    if (thirddropdown.value){
+//     worker.postMessage(thirddropdown.value);
+//   }
+//   else{
+//     worker.postMessage('noSectionYet');
+//   }
+  var data=JSON.parse(event.data);
+//   }
     if (data)
     {
+      // console.log(event.data)
+      // // if (event.data!='noSectionYet'){
+      //   // returnString=event.data[0]
+      //   // MCTNames=event.data[1]
+      // }
+      // else{
+      //   returnString=event.data
+      //   console.log(returnString)
+      // }
         if (confirm(data[0]+"\n")){
           document.getElementById('all').style.display='block';
           
@@ -560,53 +626,63 @@ worker.onmessage= function(event){
     }
 }
 
-// var workerDropbox = new Worker('../static/DropboxWorker.js');
-// workerDropbox.onmessage= function(event){
-//     var dataDropbox=JSON.parse(event.data);
-//     console.log(dataDropbox)
-//     if (dataDropbox)
-//     {  console.log('dataDropbox')
-//        console.log(dataDropbox)
-//        console.log(dataDropbox[1])
-      
-//         if (confirm(dataDropbox[0]+"\n")){
-//           document.getElementById('all').style.display='block';
-          
-//           $.getJSON('/postdropboxprojects', {
-//             dict: JSON.stringify(dataDropbox[1]),     
-          
-//                   }, function(data2){
-//                       console.log(data2)
-//                       if (data2.startsWith('post'))
-//                       {
-//                         getproj();
-//                       }
-
-//                   })
-//         }
-//           else{
-//             workerDropbox.terminate()
-//         }
 
-//     }
-// }
+/*worker.onmessage= function(event){
+}
+*/
+
 
+
+var workerDropbox = new Worker('../static/DropboxWorker.js');
+workerDropbox.onmessage= function(event)
+  {
+    var dataDropbox=JSON.parse(event.data);
+    console.log(dataDropbox)
+    // if (dataDropbox)
+    // {
+    //       $.ajax({
+    //         type: "POST",
+    //         url: "/postdropboxprojects",
+
+    //         // set content type header to use Flask response.get_json()
+    //         contentType: "application/json",
+
+    //         // convert data/object to JSON to send
+    //         data: JSON.stringify({dict:dataDropbox[1]}),
+
+    //         // expect JSON data in return (e.g. Flask jsonify)
+    //         dataType: "json",
+
+    //         // handle response
+    //         success: function(response) {
+    //             console.log(response);
+    //             document.getElementById('all').style.display='none';
+    //         console.log('posted successfully',data)
+    //         getproj();
+    //         },
+    //         error: function(err) {
+    //           PopupElement.textContent='Error occured. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+    //           ShowPopUp();
+    //         }
+    //       })
+    // }
+  }
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
-/*Retrieve MCTNAMES Dictionary from API - Flask*/
-MCTNames={}
-function getALLMCTNAMES(){
-
-$.get( '/RetrieveMCTNames/'+thirddropdown.value)
-  .success (function(data){
-    MCTNames=data;
-    console.log(MCTNames)
-  })
-  .error(function(jqXHR, textStatus, errorThrown) { 
-        PopupElement.textContent='Error occured while retrieving the MC-T Names. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
-        ShowPopUp();
-      });
-    }
+// /*Retrieve MCTNAMES Dictionary from API - Flask*/
+
+// function getALLMCTNAMES(){
+
+// $.get( '/RetrieveMCTNames/'+thirddropdown.value)
+//   .success (function(data){
+//     MCTNames=data;
+//     console.log(MCTNames)
+//   })
+//   .error(function(jqXHR, textStatus, errorThrown) { 
+//         PopupElement.textContent='Error occured while retrieving the MC-T Names. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+//         ShowPopUp();
+//       });
+//     }
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
 
@@ -855,7 +931,7 @@ var ratioPunit=1;
 //___________________________________________________________________________________________________________
   //Retrieves list of projects  
   function getproj(){
-    getALLMCTNAMES();
+
     document.getElementById("all").style.display = "block";
     var proj = document.getElementsByClassName("selectionsProj")[0];
     var projectVal=proj.value.toString() //selected project
@@ -886,10 +962,11 @@ var ratioPunit=1;
       var relvSelect = document.getElementById("relvselectid");
       var levelcheckbox=  document.getElementById("levelcheckbox");
     
-    
+      
       measSelect.removeAttribute("hidden");
       relvSelect.removeAttribute("hidden");
       measSelect.innerHTML='';
+      
       var optn2 = document.createElement("OPTION");
       optn2.text= 'Select project to measure';
       optn2.value=''
@@ -898,8 +975,9 @@ var ratioPunit=1;
     
       measSelect.add(optn2);
       document.getElementById("hidden").required = true;
+      // measSelect.required=true;
     // console.log(measSelect)
- 
+   
     relvSelect.innerHTML='';
     for (i = 0; i < relvDocs.length; i++) {
         //relevant documents
@@ -914,6 +992,7 @@ var ratioPunit=1;
           optn1.setAttribute('disabled',true);
       }
     }
+
     for (i = 0; i < docsToMeasure.length; i++) {
   //to measure documents
         var optn2 = document.createElement("OPTION");
@@ -2517,11 +2596,10 @@ function sortlegends(clicked_id){
 //___________________________________________________________________________________________________________
 /* POP-UP code JS*/
 // Select modal
+
 var mpopup = document.getElementById('mpopupBox');
-// Select trigger link
-var mpLink = document.getElementById("mpopupLink");
 // Select close action element
-var close = document.getElementsByClassName("close")[0];
+var close = document.getElementsByClassName("closeModal")[0];
 function ShowPopUp(){
 // Open modal
     mpopup.style.display = "block";
@@ -2538,6 +2616,25 @@ function ShowPopUp(){
 };
 
 
+var dialog_container = document.getElementById('dialog-container');
+// Select close action element
+var closeDialog = document.getElementsByClassName("closeModal")[1];
+function ShowPopUpWarning(){
+// Open modal
+dialog_container.style.display = "block";
+}
+// Close modal once close element is clicked
+closeDialog.onclick = function() {
+    dialog_container.style.display = "none";
+};
+// Close modal when user clicks outside of the modal box
+  window.onclick = function(event) {
+    if (event.target == dialog_container) {
+      dialog_container.style.display = "none";
+    }
+};
+
+
 function filterFunction(id) {
   var input, filter, ul, li, a, i;
   input = document.getElementById(id);
@@ -2556,5 +2653,62 @@ function filterFunction(id) {
     }
   }
 }
+
+
+// Call function when show dialog btn is clicked
+var overlayme = document.getElementById("dialog-container");
+document.getElementById("refreshDropboxButtonID").disabled=false;
+
+// if (document.getElementById("refreshDropboxButtonID").disabled==false){
+
+
+  document.getElementById("refreshDropboxButtonID").onclick = function()
+  {
+    if (document.getElementById("refreshDropboxButtonID").disabled==false)
+    overlayme.style.display = "block";
+  };
+// }
+
+
+  document.getElementById("confirm").onclick = function(){confirmDialog()};
+function confirmDialog() {
+ /* code executed if confirm is clicked */   
+    overlayme.style.display = "none";
+    callrefreshDropbox();
+}
+
+// If cancel btn is clicked , the function cancel() is executed
+document.getElementById("cancel").onclick = function(){cancelDialog()};
+function cancelDialog() {
+ /* code executed if cancel is clicked */  
+    overlayme.style.display = "none";
+}
+
+function callrefreshDropbox(){
+  console.log('l')
+  document.getElementById("refreshDropboxButtonID").style.backgroundColor = "gray";
+  document.getElementById("refreshDropboxButtonID").style.cursor='not-allowed';
+  document.getElementById("refreshDropboxButtonID").disabled="disabled";
+  
+
+  $.get('/postdropboxprojects')
+      
+     .success(function(stringReturned) {
+      console.log('DONEEEE')
+      TopTextModal=document.getElementById("TopTextModal");
+      TopTextModal.textContent= "Success!";
+      TopTextModal.style.color='green';
+      PopupElement.textContent=stringReturned;
+      ShowPopUp();
+      document.getElementById("refreshDropboxButtonID").style.cursor='pointer';
+      document.getElementById("refreshDropboxButtonID").style.backgroundColor = "#1680c7";
+      document.getElementById("refreshDropboxButtonID").disabled = false; 
+      })
+     .error(function(jqXHR, textStatus, errorThrown) { 
+          PopupElement.textContent='Error occured while retrieving projects from the dropbox. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
+          ShowPopUp();    
+      });
+
+}
 </script>