Merge branch 'ui-v2' of https://github.com/IGS/gEAR into ui-v2

IGS · Jan 8, 2024 · be79618 · be79618
2 parents d64de7d + 855aef6
commit be79618
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/www/index.html b/www/index.html
@@ -229,7 +229,7 @@ <h3>Genes</h3>
                                     <template id="tmpl-gene-item">
                                       <div class="ul-li dropdown-gene-item">
                                         <span class="icon is-pulled-left">
-                                          <i class="mdi mdi-18px toggler mdi-plus is-clickable mr-2"></i>
+                                          <i class="mdi mdi-18px toggler mdi-plus is-clickable mr-2 gene-list-item-add"></i>
                                         </span>
                                         <span class="gene-item-label"></span>
                                       </div>

diff --git a/www/js/index.js b/www/js/index.js
@@ -1,6 +1,6 @@
 let gene_cart_data = null;
 
-// For carts, key is share_id, value is array of genes
+// For carts, key is share_id, value is array of genes individually selected
 let selected_carts = {};
 let selected_genes = [];
 
@@ -24,10 +24,10 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
-    // Add even listeners to the gene list selectors even if they don't exist yet
+    // Add event listeners to the gene list selectors even if they don't exist yet
     document.addEventListener('click', (event) => {
         // gene-list-item-label & dropdown-gene-list-item-right-selector both should only show the genes
-        // dropdown-gene-list-item-add should add the entire cart
+        // dropdown-gene-list-item-add should add the entire cartsmpl
 
         if (event.target.classList.contains('gene-list-item-label') || 
             event.target.classList.contains('dropdown-gene-list-item-right-selector')) {
@@ -39,6 +39,34 @@ document.addEventListener('DOMContentLoaded', () => {
             setActiveGeneCart(row_div, 'add');
         }
     });
+
+    // Add event listeners to the gene selectors even if they don't exist yet
+    document.addEventListener('click', (event) => {
+        if (event.target.classList.contains('gene-list-item-add') || 
+            event.target.classList.contains('gene-list-item-remove')) {
+
+            const row_div = event.target.closest('div');
+            const gene_symbol = row_div.querySelector('.gene-item-label').textContent;
+            console.log("Gene symbol is: " + gene_symbol);
+            console.log("Selected genes is:");
+            console.log(selected_genes);
+
+            if (selected_genes.includes(gene_symbol)) {
+                console.log("Removing gene from list");
+                selected_genes = selected_genes.filter((gene) => gene !== gene_symbol);
+            } else {
+                console.log("Adding gene to list");
+                selected_genes.push(gene_symbol);
+            }
+
+            console.log("Selected genes is now:"); 
+            console.log(selected_genes);
+
+            row_div.classList.toggle('is-selected');
+            row_div.querySelector('i.toggler').classList.toggle('mdi-plus');
+            row_div.querySelector('i.toggler').classList.toggle('mdi-minus');
+        }
+    });
 });
 
 const fetchGeneCartData = async () => {
@@ -106,10 +134,8 @@ const setActiveGeneCart = (cart_row, mode) => {
     // if adding or removing, update the inventory
     if (mode === 'add') {
         selected_carts[cart_row.dataset.shareId] = genes;
-        console.log(selected_carts);
     } else if (mode === 'remove') {
         delete selected_carts[cart_row.dataset.shareId];
-        console.log(selected_carts);
     }
 
     // now handle the coloring, icons and selection box based on the mode