Update templates/proposed-GUI.html

templates/proposed-GUI.html

@@ -750,6 +750,45 @@
                   </lord-icon>
                 </div> 
             </div>
+
+
+                      <div id="duplicaterExtradoor" hidden="until-found">
+                <div id="repeatforloopExtra" class="repeatforloopclassExtra0" name="repeatforloopExtraname " > 
+                  <label id="modalColumn">Enter column names as shown in the schedule</label> 
+                  <button type="button" class="delete-table-btn" style="float:right; margin-bottom: 8px;">Delete Table</button> 
+                  
+
+                  
+
+                  <i class="fa fa-info-circle smallFaIcon" id="infotoolModal">
+                    <span class="tooltiptext" id="modaltooltips">
+                      <p>
+                      <b>SCROLL DOWN TO READ ALL INFORMATION.</b><br>
+                      1) You can skip any column name, but <b>at least one of “Door id”</b> or <b>“Door type”</b> must be included.<br>
+                      2) Column names must <b>exactly match</b> how they appear in the schedule. For best results, <b>copy the name directly from the schedule and paste it here</b>. <br> 
+                      3) If there is <b>"Structural Opening" </b>there are two scenarios:<br>
+                        3.a) <b>Single Column:</b> If both width and height appear in one cell, enter the value into the <b>“Width”</b> field and leave the <b>“Height field empty”</b>.<br>
+                        3.b) <b>Separate Columns:</b> If width and height appear in <b>two separate columns,</b> enter them into the respective <b>“Width”</b> and <b>“Height”</b> fields. In this case, you can <b>ignore “Structural Opening”</b>.<br>
+                      4) <b>“Fire Rating”</b> and <b>“Acoustic Rating”</b> are optional fields.<br>
+                        If only one of them is available, make sure to maintain the <b>same order of fields</b>.
+                     </p>
+                    </span>
+                  </i>
+                  
+                  <br>
+
+                  <input type="text" id="textidextra" name="textidname" placeholder="Door Id" > <br>
+                  <input type="text" id="textypeextra" name="texttypename" placeholder="Door Type" > <br>
+                  <input type="text" id="textstopextra" name="textstopname" placeholder="Width or Structural Opening" > <br>
+                  <input type="text" id="textheightextra" name="textheightname" placeholder="Height" > <br>
+                  <input type="text" id="textfireextra" name="textfirename" placeholder="Fire rating" > <br>
+                  <input type="text" id="textacousticextra" name="textacousticname" placeholder="Acoustic Rating" > 
+                  
+                  <script src="https://cdn.lordicon.com/bhenfmcm.js" ></script>
+
+                </div> 
+            </div>          
+
             <div hidden="until-found" id="duplicaterExtraHidden" >
                 <div id="repeatforloopExtrahidden" class="repeatforloopclassExtrahidden" name="repeatforloopnameExtrahidden " >    <!-- onchange="getmctName()" -->
                   <input type="text" id="text0extra" name="text1name" placeholder="Eg: Column Name" > 
@@ -781,6 +820,8 @@
         <div class="text-right">
           <button class="dialog-btn btn-primary" id="confirm">Ok</button>
           <button class="dialog-btn btn-cancel" id="cancel">Cancel</button>
+          <button type="button" id="addAnotherTableBtn" style="display:none; margin:10px 0 15px 0;">Add Another Table</button>
+
         </div>
         <br>
       </div>
@@ -4309,27 +4350,61 @@ if(sectionNumber.startsWith('2.7') ){
 
 if (sectionNumber.startsWith('2.8') || sectionNumber.startsWith('2.6'))
 {
-  text1extra= document.getElementById("text1extra")
-  text1extra.style.backgroundColor = "rgba(101, 101, 101, 0.27)";
-  text1extra.style.cursor='not-allowed';
-  text1extra.disabled="disabled";
-
-  text2extra= document.getElementById("text2extra")
-  text2extra.style.backgroundColor = "rgba(101, 101, 101, 0.27)";
-  text2extra.style.cursor='not-allowed';
-  text2extra.disabled="disabled";
+  document.getElementById('addAnotherTableBtn').style.display = 'block';
+  document.getElementById('addAnotherTableBtn').disabled = false;
+  
+  //text1extra= document.getElementById("text1extra")
+  //text1extra.style.backgroundColor = "rgba(101, 101, 101, 0.27)";
+  //text1extra.style.cursor='not-allowed';
+  //text1extra.disabled="disabled";
+
+  //text2extra= document.getElementById("text2extra")
+  //text2extra.style.backgroundColor = "rgba(101, 101, 101, 0.27)";
+  //text2extra.style.cursor='not-allowed';
+  //text2extra.disabled="disabled";
 }
-  duplicaterExtra.removeAttribute('hidden'); 
+  duplicaterExtradoor.removeAttribute('hidden'); 
   TopTextModal.textContent='Define Information to Extract from Drawing'
     if (document.getElementById("popupforextratext").disabled==false)
     {    
       overlaymeText.textContent='';
       overlayme.style.display = "block";
+      updateDeleteButtonStates();
   }
   };
 // }
 
 
+document.getElementById('addAnotherTableBtn').onclick = function() {
+    console.log("add another table clicked")
+    // Clone the template row
+    let newRow = document.getElementById('duplicaterExtradoor').firstElementChild.cloneNode(true);
+    // Clear values
+    newRow.querySelectorAll('input').forEach(inp => inp.value = '');
+
+    // --- Section logic: Disable Spec/Count for 2.6/2.8 ---
+  //  if (sectionNumber === '2.6' || sectionNumber === '2.8') {
+    //    let spec = newRow.querySelector('input[name="text2name"]');
+      //  let count = newRow.querySelector('input[name="text3name"]');
+        //if(spec){
+          //spec.disabled = true;
+          //spec.style.backgroundColor = "rgba(101,101,101,0.27)";
+          //spec.style.cursor = "not-allowed";
+        //}
+        //if(count){
+          //count.disabled = true;
+          //count.style.backgroundColor = "rgba(101,101,101,0.27)";
+          //count.style.cursor = "not-allowed";
+        //}
+    //}
+
+    // Insert before the Ok/Cancel buttons (find the .text-right div)
+    let btns = document.querySelector('.modal-body .text-right');
+    btns.parentNode.insertBefore(newRow, btns);
+    updateDeleteButtonStates();
+};
+
+  
 document.getElementById("confirm").onclick = function(){confirmDialogR()};
 function confirmDialogR() {
  /* code executed if confirm is clicked */ 
@@ -4346,6 +4421,12 @@ function confirmDialogR() {
     }
     else{
       getpopuptext();
+      //get_from_dataSimple_modified();
+      getAddedTablesDataSimple_modified();
+      //tab1 = getpopuptext();
+      //tab2 = get_from_dataSimple_modified();
+      //get_combined_tables(getpopuptext(), get_from_dataSimple_modified());
+      updateDeleteButtonStates();
     }
 
 }
@@ -4568,6 +4649,98 @@ document.querySelector('.searchfocusx').addEventListener('click', () => {
   input.focus(); // Keep input focused
   handleKey({ target: input }, 'tomeasureSearchInput');
 });
+function getAddedTablesDataSimple_modified() {
+  const allTablesData = [];
+  // 1. Get the first main table container
+  const firstTableDiv = document.querySelector('#duplicaterExtradoor > .repeatforloopclassExtra0');
+  // 2. Get all other tables (added dynamically) - assume they have same 6 inputs & a label
+  const otherTables = Array.from(document.querySelectorAll('.repeatforloopclassExtra0'))
+      .concat(Array.from(document.querySelectorAll('#duplicaterExtradoor ~ .repeatforloopclassExtra0')));
+  
+  // Merge first and others (remove duplicates)
+  const uniqueTables = [firstTableDiv].concat(
+    Array.from(document.querySelectorAll('.repeatforloopclassExtra0')).filter(div => div !== firstTableDiv)
+  );
+
+  uniqueTables.forEach(container => {
+    if (!container) return;
+    const inputs = container.querySelectorAll('input[name="textidname"], input[name="texttypename"], input[name="textstopname"], input[name="textheightname"], input[name="textfirename"], input[name="textacousticname"]');
+    if (inputs.length === 6) {
+      const rowValues = [
+        inputs[0].value.trim(),
+        inputs[1].value.trim(),
+        inputs[2].value.trim(),
+        inputs[3].value.trim(),
+        inputs[4].value.trim(),
+        inputs[5].value.trim()
+      ];
+      allTablesData.push(rowValues);
+    }
+  });
+
+  console.log("All table data:", allTablesData);
+  return allTablesData;
+}
+// Attach listener to all current and future delete buttons
+document.addEventListener('click', function(event) {
+  if(event.target.classList.contains('delete-table-btn')) {
+    // Find all delete buttons
+    const allBtns = Array.from(document.querySelectorAll('.delete-table-btn'));
+    // Only allow delete if it's NOT the first button
+    if (event.target !== allBtns[0]) {
+      const tableGroup = event.target.closest('.repeatforloopclassExtra0');
+      if(tableGroup) tableGroup.remove();
+    }
+  }
+});
+// After adding tables, run this code:
+function updateDeleteButtonStates() {
+    const allDeleteBtns = document.querySelectorAll('.delete-table-btn');
+    
+    // Reset all buttons to enabled state first
+    allDeleteBtns.forEach(btn => {
+        btn.disabled = false;
+        btn.style.opacity = '1';
+        btn.style.background = '';
+        btn.style.color = '';
+        btn.style.cursor = 'pointer';
+    });
+    
+    // Disable and shade the first button only
+    if (allDeleteBtns.length > 0) {
+        const firstBtn = allDeleteBtns[0];
+        firstBtn.disabled = true;
+        // Apply shaded styling
+        firstBtn.style.opacity = '0.5';
+        firstBtn.style.background = '#ddd';
+        firstBtn.style.color = '#888';
+        firstBtn.style.cursor = 'not-allowed';
+    }
+}
+
+// 5. Also call it when the page loads (if needed)
+document.addEventListener('DOMContentLoaded', function() {
+    updateDeleteButtonStates();
+});
+// Call this whenever you add or remove a table!
+
 
+
+function get_from_dataSimple_modified(){
+  const data_from_table_simple = getAddedTablesDataSimple_modified();
+  const tables = [];
+  for (let i = 1; i < data_from_table_simple.length; i++) {
+    tables.push(data_from_table_simple[i])
+  }
+    console.log("Filtered Added Tables:", tables);
+  return tables;
+
+}
+
+function get_combined_tables(main_table, other_tables){
+  const mergedArray = main_table.concat(other_tables);
+  console.log("Final output that will be passed to flask:", mergedArray);
+  return mergedArray;
+}
 </script>