Update templates/proposed-GUI.html

templates/proposed-GUI.html

@@ -1411,9 +1411,9 @@ function ImgSide(imgdata, spreadsheetLink, pdfLink) {
     var buttonContainer = document.createElement('div');
     buttonContainer.style.display = 'flex';
     buttonContainer.style.marginTop = '10px';
-
+///////////////////////////////////////////////////////////////
     var legendbutton = document.createElement("button");
-    legendbutton.id = 'measureADRbutton2';
+    legendbutton.className = 'measureADRbutton2';
     legendbutton.innerText = 'Legend and Data created';
     legendbutton.style.backgroundColor = 'rgb(5, 43, 235)';
 
@@ -1427,9 +1427,9 @@ function ImgSide(imgdata, spreadsheetLink, pdfLink) {
     legendbutton.addEventListener('click', function () {
         window.open(spreadsheetLink);
     });
-
+//////////////////////////////////////////////////////////////
     var imgbutton = document.createElement("button");
-    imgbutton.id = 'measureADRbutton2';
+    imgbutton.className = 'measureADRbutton2';
     imgbutton.innerText = 'Click to view as PDF';
     imgbutton.style.backgroundColor = 'rgb(255,0,255)';
 
@@ -1443,15 +1443,40 @@ function ImgSide(imgdata, spreadsheetLink, pdfLink) {
     imgbutton.addEventListener('click', function () {
         window.open(pdfLink);
     });
+/////////////////////////////////////////////////////////////
+  var refreshpdfmarkups = document.createElement("button");
+  refreshpdfmarkups.className = 'measureADRbutton2';
+  refreshpdfmarkups.id='refreshpdfmarkups'
+  refreshpdfmarkups.style.backgroundColor = 'rgb(255,80,255)';
+  refreshpdfmarkups.style.padding = '10px 20px';
+
+    // Create the icon element
+    const icon = document.createElement('i');
+    icon.className = 'fa fa-refresh'; // Add Font Awesome classes
+    icon.setAttribute('aria-hidden', 'true'); // Add accessibility attribute
+
+    // Set button text and append the icon
+    // refreshpdfmarkups.textContent = ' Refresh';
+    refreshpdfmarkups.prepend(icon); // Add icon before the text
+
+  refreshpdfmarkups.addEventListener('mouseover', function () {
+    refreshpdfmarkups.style.boxShadow = '0 0 8px 2px rgb(255,80,255)';
+    });
+    refreshpdfmarkups.addEventListener('mouseout', function () {
+      refreshpdfmarkups.style.boxShadow = 'none';
+    });
 
+////////////////////////////////////////////////////////////
     buttonContainer.appendChild(legendbutton);
     buttonContainer.appendChild(imgbutton);
+    buttonContainer.appendChild(refreshpdfmarkups);
+
 
     imgContainer.appendChild(imgcanvas);
     imgContainer.appendChild(buttonContainer);
 
     backimg.appendChild(imgContainer);
-}
+} 
 function updatepreview(pdfname){
  console.log('pdfpath',pdfname)
    
@@ -1696,128 +1721,115 @@ function getData(form) {
             var flag=0;
             pdfpath=[];
             pdfpath.push(formvalues['selectproj'],formvalues['selectprojp'] ,formvalues['selectprojs'])
-            var rightsideids=[];
-          
-if (formvalues['selectprojs'].startsWith('1.0')  || formvalues['selectprojs'].startsWith('3.2')  || formvalues['selectprojs'].startsWith('2.8') || formvalues['selectprojs'].startsWith('3.3') )
-{// Set the interval in milliseconds
-const interval = 6000;
-const initialDelay = 0;
-console.log('Starting first AJAX request...');
-let delrows1=''; // Define delrows1 in a broader scope
-let delrows2=''; // Define delrows1 in a broader scope
+if (formvalues['selectprojs'].startsWith('1.0') || formvalues['selectprojs'].startsWith('3.2') || formvalues['selectprojs'].startsWith('2.8') || formvalues['selectprojs'].startsWith('3.3')) {
+    const interval = 6000; // Interval in milliseconds
+    let delrows1 = ''; // Initial data storage
+    let delrows2 = ''; // Updated data storage
 
+    console.log('Starting first AJAX request...');
 
-        // First AJAX request
-        $.ajax({
-            type: "POST",
-            url: "/_submission",
-            // set content type header to use Flask response.get_json()
-            contentType: "application/json",
-            // convert data/object to JSON to send
-            data: JSON.stringify({
-                dict1: JSON.stringify(list1),
-                spreadsheetId: spreadsheetId,
-                pdfpathpath: JSON.stringify(pdfpath),
-                path: Object.fromEntries(formData)['measureselectname']
-            }),
-            dataType: "json",
-            // handle response
-            success: function(data1) {
-              delrows1 = data1[0];
-              console.log('First AJAX response received:', JSON.stringify(delrows1));
+    // First AJAX request
+    $.ajax({
+        type: "POST",
+        url: "/_submission",
+        contentType: "application/json",
+        data: JSON.stringify({
+            dict1: JSON.stringify(list1),
+            spreadsheetId: spreadsheetId,
+            pdfpathpath: JSON.stringify(pdfpath),
+            path: Object.fromEntries(formData)['measureselectname']
+        }),
+        dataType: "json",
+        success: function (data1) {
+            delrows1 = data1[0];
+            console.log('First AJAX response received:', JSON.stringify(delrows1));
+        },
+        error: function (err) {
+            console.error('Error occurred during first AJAX call:', err);
+            PopupElement.textContent = 'Error occurred. Refresh and try again. If the error continues, please contact the ADR team to fix it.';
+            ShowPopUp();
+        }
+    });
 
-            },
-            error: function(err) {
-              PopupElement.textContent='Error occured. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
-              ShowPopUp();
-            }
-          })
+    // Function to perform AJAX requests and compare data
+    async function fetchAndCompareData() {
+        try {
+            console.log('Fetching data...');
+
+            // Second AJAX request
+            const data11 = await $.ajax({
+                type: "POST",
+                url: "/_submission",
+                contentType: "application/json",
+                data: JSON.stringify({
+                    dict1: JSON.stringify(list1),
+                    spreadsheetId: spreadsheetId,
+                    pdfpathpath: JSON.stringify(pdfpath),
+                    path: Object.fromEntries(formData)['measureselectname']
+                }),
+                dataType: "json"
+            });
 
-        
-// Function to handle the delay
-const delay = ms => new Promise(res => setTimeout(res, ms));
+            delrows2 = data11[0];
+            console.log('Second AJAX response received:', JSON.stringify(delrows2));
+
+            // Compare data
+            if (JSON.stringify(delrows1) === JSON.stringify(delrows2)) {
+                console.log('Data is the same');
+            } else {
+                console.log('Differences found:', delrows1, delrows2);
+                if (confirm("Changes have been made in the markups. Would you like to save and view them in the legend?")) {
+                    delrows1 = delrows2;
+                    document.getElementById("loading").hidden = false;
+                    document.getElementById("loading").style.marginTop = '20%';
+                    document.getElementById("loading").style.marginLeft = '65%';
+
+                    updatepreview([pdfpath, Object.fromEntries(formData)['measureselectname']]);
+
+                    await $.ajax({
+                        type: "POST",
+                        url: "/deletemarkupsroute",
+                        contentType: "application/json",
+                        data: JSON.stringify({
+                            dict: JSON.stringify(SimilarAreaDictionary),
+                            deletedrows: delrows2,
+                            path: Object.fromEntries(formData)['measureselectname'],
+                            spreadsheetId: spreadsheetId,
+                            areaPermArr: JSON.stringify(data[7]),
+                            section: Object.fromEntries(formData)['selectprojs'],
+                            pdfpathpath: JSON.stringify(pdfpath)
+                        }),
+                        dataType: "json"
+                    });
 
-// Function to perform AJAX requests and compare data
-async function fetchAndCompareData() {
-    try {
+                    console.log('Markups updated');
+                }
+            }
 
-        // Second AJAX request
-        let data11 = await $.ajax({
-            type: "POST",
-            url: "/_submission",
-            contentType: "application/json",
-            data: JSON.stringify({
-                dict1: JSON.stringify(list1),
-                spreadsheetId: spreadsheetId,
-                pdfpathpath: JSON.stringify(pdfpath),
-                path: Object.fromEntries(formData)['measureselectname']
-            }),
-            dataType: "json"
-        });
+        } catch (err) {
+            console.error('Error occurred during fetchAndCompareData:', err);
+            PopupElement.textContent = 'Error occurred. Refresh and try again. If the error continues, please contact the ADR team to fix it.';
+            ShowPopUp();
+        } finally {
+            // Always continue fetching data every 6 seconds
+            console.log(`Waiting for ${interval} ms before next fetch...`);
+            setTimeout(fetchAndCompareData, interval); // Continue the interval
+        }
+    }
 
-        delrows2 = data11[0];
-        console.log('Second AJAX response received:', JSON.stringify(delrows2));
-
-        // Compare the data
-        if (JSON.stringify(delrows1) === JSON.stringify(delrows2)) 
-          console.log('same')
-        else{
-            console.log('Differences found:', delrows1, delrows2);
-            if (confirm("Changes have been made in the markups. Would you like to save and view them in the legend?")) {
-                delrows1=delrows2
-                document.getElementById("loading").hidden = false;
-                document.getElementById("loading").style.marginTop='20%'
-                document.getElementById("loading").style.marginLeft='75%'
-
-                updatepreview([pdfpath,Object.fromEntries(formData)['measureselectname']])
-                
-                // document.getElementsByClassName('imgContainer')[0].src=''
-                
-                await $.ajax({
-                    type: "POST",
-                    url: "/deletemarkupsroute",
-                    contentType: "application/json",
-                    data: JSON.stringify({
-                        dict: JSON.stringify(SimilarAreaDictionary),
-                        deletedrows: delrows2,
-                        path: Object.fromEntries(formData)['measureselectname'],
-                        spreadsheetId: spreadsheetId,
-                        areaPermArr: JSON.stringify(data[7]),
-                        section: Object.fromEntries(formData)['selectprojs'],
-                        pdfpathpath: JSON.stringify(pdfpath)
-                    }),
-                    dataType: "json",
-                });
+    // Initial interval-based call
+    setTimeout(fetchAndCompareData, interval);
 
-                console.log('Markups updated');
-               
-            }
-        } 
-        
-        // Wait for the delay
-        console.log(`Waiting for ${interval} ms...`);
-        await delay(interval);
-        console.log('Delay complete. Starting second AJAX request...');
-
-    } catch (err) {
-        console.error('Error occurred:', err);
-        PopupElement.textContent = 'Error occurred. Refresh and try again. If the error continues, please contact the ADR team to fix it.';
-        ShowPopUp();
-    } finally {
-        // Ensure the function is called again after the interval, whether an error occurred or not
-        setTimeout(fetchAndCompareData, interval);
+    // Button click event listener
+    document.addEventListener("click", function (event) {
+    if (event.target && event.target.id === "refreshpdfmarkups") {
+        console.log('Button clicked. Fetching data immediately...');
+        fetchAndCompareData();
     }
+});
 }
 
-// Initial call to the function after the initial delay
-setTimeout(fetchAndCompareData, initialDelay);
-
-}  
-
-
-
-
-    /////////////////////////
+            /////////////////////////
   });
 }
 // trial for 2.1 - tameem's code--- delete and deploy in the above if statement
@@ -1867,7 +1879,7 @@ setTimeout(fetchAndCompareData, initialDelay);
             });
 
             var legendbutton= document.createElement("button");
-            legendbutton.id='measureADRbutton2';
+            legendbutton.className='measureADRbutton2';
             legendbutton.innerText='Legend and Data created';
             legendbutton.style.backgroundColor='rgb(5, 43, 235)';
             legendbutton.addEventListener('mouseover',function(){