From 56105b2448b1725f6f7d587f85d9e06d9544d2d4 Mon Sep 17 00:00:00 2001
From: Water-Zi <928069358@qq.com>
Date: Thu, 18 May 2023 16:54:52 +0800
Subject: [PATCH] Added columns to the components list to display the quantity.

To improve efficiency during the SMT assembly process, I have added a new column in the component list to display the quantity. Users can enable or disable the display of this column using checkboxes.

However, there are the following unresolved issues:

Unable to determine if the quantity of PCBs has been modified for automatic updating of the list (related to modifying components associated with reference markers). I lack knowledge in JavaScript and don't know how to retrieve HTML element IDs. It appears that passing parameters is necessary, but implementing this change would require significant modifications to existing code. I hope the author can suggest a better approach for retrieving the parameters.
After adding the extra column, the overall width of the original list may be insufficient. Although it's possible to slightly increase the list's width, I have refrained from making modifications to maintain code consistency.
---
 html/index.html  | 14 ++++++++++++--
 html/pos_list.js | 37 +++++++++++++++++++++++++++++++++++--
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/html/index.html b/html/index.html
index 79f95f6..27ef213 100644
--- a/html/index.html
+++ b/html/index.html
@@ -192,7 +192,15 @@ <h1 class="title is-size-4">Preload <input type="checkbox" id="preload_en" oncha
     <br>
     <div class="container">
         <h1 class="title is-size-4">Components</h1>
-        
+        <button id="btn_change_fuducial" class="button is-small" onclick="update_pos()">Update Quantity</button>
+        <label>(should click after changing the amount of Fiducials)</label>
+        &nbsp;
+        <label class="checkbox"><input id="quantity_pre_pcb" type="checkbox" onchange="update_pos('quantity_pre_pcb', 'quantity_pre_pcb_column')"> Show Quantity (pre PCB)</label>
+        &nbsp;|&nbsp;
+        <label class="checkbox"><input id="quantity_total" type="checkbox" checked onchange="update_pos('quantity_total', 'quantity_total_column')"> Show Quantity (total)</label>
+        <br>
+        <br>
+
         Current: <span id="cur_progress">-- / --</span> &nbsp;|&nbsp;
                  <span id="cur_comp">-- -- --</span> <span id="cur_board">--</span> &nbsp;|&nbsp;
                  Height: <span id="cur_height">--</span>
@@ -205,7 +213,9 @@ <h1 class="title is-size-4">Components</h1>
                   <thead>
                       <tr>
                           <td style="width: 20em;">Footprint</td> <td>Offset</td>
-                          <td style="width: 20em;">Value</td> <td style="width: 10em;">Reference</td>
+                          <td style="width: 20em;">Value</td>
+                          <td id="quantity_pre_pcb_column" style="width: 7em; display: none">Quantity<br>(pre PCB)</td> <td id="quantity_total_column" style="width: 7em;">Quantity<br>(total)</td>
+                          <td style="width: 10em;">Reference</td>
                           <td style="width: 7em;">X</td> <td style="width: 7em;">Y</td> <td style="width: 7em;">R</td>
                       </tr>
                   </thead>
diff --git a/html/pos_list.js b/html/pos_list.js
index 1dc0ad9..0bf3f47 100644
--- a/html/pos_list.js
+++ b/html/pos_list.js
@@ -77,9 +77,14 @@ function search_comp_parents(comp, set_color=false, color='')
     for (let elm of value_list) {
         if (elm.contains(comp_elm)) {
             let sub0 = elm.querySelector('td');
+            let quantity_list = elm.querySelectorAll('.list_quantity');
             parents[1] = sub0.innerText;
-            if (set_color)
+            if (set_color) {
                 sub0.style.backgroundColor = color;
+                for (let quan_elm of quantity_list) {
+                    quan_elm.style.backgroundColor = color;
+                }
+            }
             break;
         }
     }
@@ -246,9 +251,23 @@ function pos_to_page(pos) {
                         <td style="width: 7em;">${readable_float(comp[3])}</td>
                     </tr>`;
             }
+            let list_quantity_pre_pcb_html = '';
+            if (document.getElementById('quantity_pre_pcb').checked) {
+                list_quantity_pre_pcb_html = `
+                    <td class='list_quantity' style="width: 7em;">${pos[footprint][value].length}</td>
+                `;
+            }
+            let list_quantity_total_html = '';
+            if (document.getElementById('quantity_total').checked) {
+                list_quantity_total_html = `
+                    <td class='list_quantity' style="width: 7em;">${csa.fiducial_cam.length * pos[footprint][value].length}</td>
+                `;
+            }
             html_value += `
                 <tr class='list_value'>
                     <td style="width: 20em;">${value}</td>
+                    ${list_quantity_pre_pcb_html}
+                    ${list_quantity_total_html}
                     <td>
                         <table>
                             <tbody class="js-sortable-table">
@@ -258,11 +277,14 @@ function pos_to_page(pos) {
                     </td>
                 </tr>`;
         }
+        let colspan_counter = 5
+        colspan_counter += document.getElementById('quantity_pre_pcb').checked ? 1 : 0
+        colspan_counter += document.getElementById('quantity_total').checked ? 1 : 0
         let html = `
             <tr class='list_footprint'>
                 <td>${footprint}</td>
                 <td>--</td>
-                <td colspan="5">
+                <td colspan=${colspan_counter}>
                     <table>
                         <tbody class="js-sortable-table">
                             ${html_value}
@@ -443,6 +465,17 @@ window.btn_select_board = async function (idx) {
     await select_comp(search_current_comp());
 };
 
+async function update_pos(id="", column="") {
+    if (id != '' && column != '') {
+        let checkBox = document.getElementById(id);
+        let elm = document.getElementById(column);
+        elm.style.display = checkBox.checked ? '' : 'none';
+    }
+    let pos = await db.get('tmp', 'list');
+    if (pos)
+        pos_to_page(pos);
+};
+window.update_pos = update_pos;
 
 export {
     search_comp_parents, search_next_comp, search_current_comp, search_first_comp, select_comp, move_to_comp,