Make bom columns sortable

Except for checkboxes for now Issue #42
openscopeproject · Sep 12, 2018 · f034663 · f034663
1 parent db9089f
commit f034663
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 22 deletions.
diff --git a/InteractiveHtmlBom/ibom.css b/InteractiveHtmlBom/ibom.css
@@ -142,6 +142,7 @@ canvas:active {
   padding: 5px;
   word-wrap: break-word;
   text-align: center;
+  position: relative;
 }
 
 .dark .bom th, .dark .bom td {
@@ -200,6 +201,34 @@ canvas:active {
   width: 65px;
 }
 
+.bom th .sortmark {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent #221 transparent;
+  transform-origin:  50% 85%;
+  transition: opacity 0.2s, transform 0.4s;
+}
+
+.dark .bom th .sortmark {
+  filter: invert(1);
+}
+
+.bom th .sortmark.none {
+  opacity: 0;
+}
+
+.bom th .sortmark.desc {
+  transform:rotate(180deg);
+}
+
+.bom th:hover .sortmark.none {
+  opacity: 0.5;
+}
+
 .split {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;

diff --git a/InteractiveHtmlBom/ibom.js b/InteractiveHtmlBom/ibom.js
@@ -6,6 +6,9 @@ var bomsplit;
 var canvassplit;
 var canvaslayout = "default";
 var bomlayout = "default";
+var bomSortFunction = null;
+var currentSortColumn = null;
+var currentSortOrder = null;
 var currentHighlightedRowId;
 var highlightHandlers = [];
 var highlightedRefs = [];
@@ -181,7 +184,58 @@ function highlightFilter(s) {
   return r;
 }
 
+function createColumnHeader(name, cls, comparator) {
+  var th = document.createElement("TH");
+  th.innerHTML = name;
+  th.classList.add(cls);
+  th.style.cursor = "pointer";
+  var span = document.createElement("SPAN");
+  span.classList.add("sortmark");
+  span.classList.add("none");
+  th.appendChild(span);
+  th.onclick = function() {
+    if (currentSortColumn && this !== currentSortColumn) {
+      // Currently sorted by another column
+      currentSortColumn.childNodes[1].classList.remove(currentSortOrder);
+      currentSortColumn.childNodes[1].classList.add("none");
+      currentSortColumn = null;
+      currentSortOrder = null;
+    }
+    if (currentSortColumn && this === currentSortColumn) {
+      // Already sorted by this column
+      if (currentSortOrder == "asc") {
+        // Sort by this column, descending order
+        bomSortFunction = function(a, b) {
+          return -comparator(a, b);
+        }
+        currentSortColumn.childNodes[1].classList.remove("asc");
+        currentSortColumn.childNodes[1].classList.add("desc");
+        currentSortOrder = "desc";
+      } else {
+        // Unsort
+        bomSortFunction = null;
+        currentSortColumn.childNodes[1].classList.remove("desc");
+        currentSortColumn.childNodes[1].classList.add("none");
+        currentSortColumn = null;
+        currentSortOrder = null;
+      }
+    } else {
+      // Sort by this column, ascending order
+      bomSortFunction = comparator;
+      currentSortColumn = this;
+      currentSortColumn.childNodes[1].classList.remove("none");
+      currentSortColumn.childNodes[1].classList.add("asc");
+      currentSortOrder = "asc";
+    }
+    populateBomBody();
+  }
+  return th;
+}
+
 function populateBomHeader() {
+  while (bomhead.firstChild) {
+    bomhead.removeChild(bomhead.firstChild);
+  }
   var tr = document.createElement("TR");
   var td = document.createElement("TH");
   td.classList.add("numCol");
@@ -195,26 +249,32 @@ function populateBomHeader() {
       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);
+  tr.appendChild(createColumnHeader("References", "References", (a, b) => {
+    var i = 0;
+    while (i < a[3].length && i < b[3].length) {
+      if (a[3][i] != b[3][i]) return a[3][i] > b[3][i] ? 1 : -1;
+      i++;
+    }
+    return a[3].length - b[3].length;
+  }));
+  tr.appendChild(createColumnHeader("Value", "Value", (a, b) => {
+    if (a[1] != b[1]) return a[1] > b[1] ? 1 : -1;
+    else return 0;
+  }));
+  tr.appendChild(createColumnHeader("Footprint", "Footprint", (a, b) => {
+    if (a[2] != b[2]) return a[2] > b[2] ? 1 : -1;
+    else return 0;
+  }));
+  tr.appendChild(createColumnHeader("Quantity", "Quantity", (a, b) => {
+    return a[3].length - b[3].length;
+  }));
   bomhead.appendChild(tr);
 }
 
 function populateBomBody() {
+  while (bom.firstChild) {
+    bom.removeChild(bom.firstChild);
+  }
   highlightHandlers = [];
   currentHighlightedRowId = null;
   var first = true;
@@ -229,6 +289,9 @@ function populateBomBody() {
       bomtable = pcbdata.bom.B;
       break;
   }
+  if (bomSortFunction) {
+    bomtable = bomtable.slice().sort(bomSortFunction);
+  }
   for (var i in bomtable) {
     var bomentry = bomtable[i];
     if (filter && !entryMatches(bomentry)) {
@@ -337,12 +400,6 @@ function highlightNextRow() {
 }
 
 function populateBomTable() {
-  while (bom.firstChild) {
-    bom.removeChild(bom.firstChild);
-  }
-  while (bomhead.firstChild) {
-    bomhead.removeChild(bomhead.firstChild);
-  }
   populateBomHeader();
   populateBomBody();
 }