Configure and store bom checkboxes

Issue #17

Author: qu1ck

InteractiveHtmlBom/ibom.css

@@ -100,7 +100,7 @@ canvas:active {
 
 .bom {
   border-collapse: collapse;
-  font-family: Consolas, monospace;
+  font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace;
   font-size: 10pt;
   table-layout: fixed;
   width: 100%;
@@ -134,6 +134,10 @@ canvas:active {
   width: 25px;
 }
 
+.bom .bom-checkbox {
+  width: 30px;
+}
+
 .bom .Description {
   width: 10%;
 }
@@ -186,7 +190,7 @@ canvas:active {
   height: 40px;
   margin: 10px 5px;
   padding: 12px 32px;
-  font-family: Consolas, "DejaVu Sans Mono", monospace;
+  font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace;
   font-size: 18px;
   box-sizing: border-box;
   border: 1px solid #888;
@@ -268,6 +272,22 @@ mark.highlight {
   border-top: 1px solid #ccc;
 }
 
+.menu-textbox {
+  float: left;
+  height: 24px;
+  margin: 10px 5px;
+  padding: 5px 5px;
+  font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace;
+  font-size: 14px;
+  box-sizing: border-box;
+  border: 1px solid #888;
+  border-radius: 4px;
+  outline: none;
+  background-color: #eee;
+  transition: background-color 0.2s, border 0.2s;
+  width: calc(100% - 10px);
+}
+
 #dbg {
   display: none;
 }

InteractiveHtmlBom/ibom.html

@@ -43,6 +43,11 @@
             <input id="dragCheckbox" type="checkbox" checked onchange="setRedrawOnDrag(this.checked)">
             Continuous redraw on drag
           </label>
+          <label class="menu-label">
+            <div style="margin-left: 5px">Bom checkboxes</div>
+            <input id="bomCheckboxes" class="menu-textbox" type=text
+                   oninput="setBomCheckboxes(this.value)">
+          </label>
         </div>
       </div>
       <div class="button-container hideonprint"
@@ -100,14 +105,7 @@
       </div>
       <div id="dbg"></div>
       <table class="bom">
-        <thead>
-        <tr>
-          <th class="numCol"></th>
-          <th class="References">References</th>
-          <th class="Value">Value</th>
-          <th class="Footprint">Footprint</th>
-          <th class="Quantity">Quantity</th>
-        </tr>
+        <thead id="bomhead">
         </thead>
         <tbody id="bombody">
         </tbody>

InteractiveHtmlBom/ibom.js

@@ -7,6 +7,7 @@ var canvassplit;
 var canvaslayout = "default";
 var bomlayout = "default";
 var highlightedRefs = [];
+var bomCheckboxes = "";
 
 function readStorage(key) {
   return window.localStorage.getItem(storagePrefix + '#' + key);
@@ -81,6 +82,41 @@ function populateBomTable() {
   while (bom.firstChild) {
     bom.removeChild(bom.firstChild);
   }
+  while (bomhead.firstChild) {
+    bomhead.removeChild(bomhead.firstChild);
+  }
+  // Populate header
+  var tr = document.createElement("TR");
+  var td = document.createElement("TH");
+  td.classList.add("numCol");
+  tr.appendChild(td);
+  checkboxes = bomCheckboxes.split(",");
+  for (checkbox of checkboxes) {
+    if (checkbox) {
+      td = document.createElement("TH");
+      td.classList.add("bom-checkbox");
+      td.innerHTML = checkbox;
+      tr.appendChild(td);
+    }
+  }
+  td = document.createElement("TH");
+  td.classList.add("References");
+  td.innerHTML = "References";
+  tr.appendChild(td);
+  td = document.createElement("TH");
+  td.classList.add("Value");
+  td.innerHTML = "Value";
+  tr.appendChild(td);
+  td = document.createElement("TH");
+  td.classList.add("Footprint");
+  td.innerHTML = "Footprint";
+  tr.appendChild(td);
+  td = document.createElement("TH");
+  td.classList.add("Quantity");
+  td.innerHTML = "Quantity";
+  tr.appendChild(td);
+  bomhead.appendChild(tr);
+  // Populate table body
   var first = true;
   switch (canvaslayout) {
     case 'F':
@@ -111,6 +147,16 @@ function populateBomTable() {
     tr.id = "bomrow" + rownum;
     td.textContent = rownum;
     tr.appendChild(td);
+    // Checkboxes
+    for (checkbox of checkboxes) {
+      if (checkbox) {
+        td = document.createElement("TD");
+        input = document.createElement("input");
+        input.type = "checkbox";
+        td.appendChild(input);
+        tr.appendChild(td);
+      }
+    }
     // References
     td = document.createElement("TD");
     td.innerHTML = highlightFilter(references.join(", "));
@@ -185,7 +231,7 @@ function changeCanvasLayout(layout) {
   canvaslayout = layout;
   writeStorage("canvaslayout", layout);
   resizeAll();
-  populateBomTable(layout);
+  populateBomTable();
 }
 
 function populateMetadata() {
@@ -289,11 +335,18 @@ function cleanGutters() {
   removeGutterNode(document.getElementById("canvasdiv"));
 }
 
+function setBomCheckboxes(value) {
+  bomCheckboxes = value;
+  writeStorage("bomCheckboxes", value);
+  populateBomTable();
+}
+
 window.onload = function(e) {
   cleanGutters();
   initRender();
   dbgdiv = document.getElementById("dbg");
   bom = document.getElementById("bombody");
+  bomhead = document.getElementById("bomhead");
   bomlayout = readStorage("bomlayout");
   if (!bomlayout) {
     bomlayout = "LR";
@@ -305,6 +358,11 @@ window.onload = function(e) {
   filter = "";
   reflookup = "";
   populateMetadata();
+  bomCheckboxes = readStorage("bomCheckboxes");
+  if (bomCheckboxes === null) {
+    bomCheckboxes = "Sourced,Placed";
+  }
+  document.getElementById("bomCheckboxes").value = bomCheckboxes;
   changeBomLayout(bomlayout);
   if (readStorage("silkscreenVisible") === "false") {
     document.getElementById("silkscreenCheckbox").checked = false;