queue added

index.html

@@ -95,7 +95,7 @@
                           <script id="category-template" type="text/x-handlebars-template">
                             <div>
                                 <strong>Category:</strong><br>
-                                <select class="form-select selectwidthauto" multiple aria-label="multiple select" name="category" >
+                                <select  oninput="global_component.update_listbox(1)" class="form-select selectwidthauto" aria-label="multiple select" id="category_sel"  multiple="multiple" size="5">
                                   {{#each this}}
                                       <option>{{this.[1]}}</option>
                                   {{/each}}
@@ -113,9 +113,9 @@
                         <script id="subcategory-template" type="text/x-handlebars-template">
                           <div>
                               <strong>Subcategory:</strong><br>
-                              <select class="form-select selectwidthauto" multiple aria-label="multiple select" name="subcat_sel" >
+                              <select class="form-select selectwidthauto" multiple aria-label="multiple select" id="subcat_sel" >
                                 {{#each this}}
-                                    <option>{{this.[1]}}</option>
+                                    <option>{{this}}</option>
                                 {{/each}}
                               </select>
                           </div>
@@ -131,10 +131,38 @@
                 <div class="col-8">
                   <div class="col-12">
                     <!--this is gonna be the selected values-->
-                    <div class="row">hey</div>
+                    <div class="row">
+                      <div id="filter_queue"></div>
+                      <!--Template-->
+                      <script id="filter_queue_template" type="text/x-handlebars-template">
+                        <div>
+                        <h5>Queries:</h5>
+                        <br>
+                        <table class="table">
+                          <thead class="thead-dark">
+                            <tr>
+                              <th scope="col">Subdiv/LGA</th>
+                              <th scope="col">Category</th>
+                              <th scope="col">Subcategory</th>
+                            </tr>
+                        </thead>
+                            <tbody>
+                              {{#each this}}
+                              <tr>
+                                <td>{{this.subdivs}} {{this.lgas}}</td>
+                                <td>{{this.categorys}}</td>
+                                <td>{{this.subcategorys}}</td>
+                              </tr>       
+                              {{/each}}
+                            </tbody>
+                        </table>
+                        <h5>Multiple choices in a given column will be AVGed.</h5>
+                      </div>
+                      </script>
+                    </div>
                     <div class="row">
                       <div>
-                        <canvas id="Chart"></canvas>
+                        <canvas id="chart_canvas"></canvas>
                       </div>
                   </div>        
                   </div>          

index.js

@@ -5,8 +5,10 @@ location(id INTEGER PRIMARY KEY AUTOINCREMENT , subdiv TEXT, LGA TEXT)
 statistics(id INTEGER PRIMARY KEY AUTOINCREMENT , category_id INTEGER, subcat_id INTEGER DEFAULT 0, location_id INTEGER, month TEXT NOT NULL, count INTEGER NOT NULL,FOREIGN KEY(category_id) REFERENCES categories(id), FOREIGN KEY(subcat_id) REFERENCES subcat(id), FOREIGN KEY(location_id) REFERENCES location(id))
 
 */
-var chart;
+
 //init sqlite
+
+
 function getSelectValues(sel) {
     var result = [];
     var options = sel && sel.options;
@@ -62,7 +64,7 @@ class db_handler {
         console.log(column,condition);
         var stmt = ("SELECT * FROM "+table+" WHERE "+column+" = '"+condition+"'");
         var res = this.db.exec(stmt, {"returnValue":"resultRows"});
-        console.log(res)
+        console.log(stmt)
         return res
     }
 
@@ -82,29 +84,74 @@ class db_handler {
         return this.db.exec(stmt, {"returnValue": "resultRows"})
     }
 
-    select_n_join_multicond(selects, joinparams, conditions, columns){
+    select_n_join_multicond(selects, joinparams, conditions, columns,table){
         var cols = [];
         var add = " OR ";
         //match according subcat
-        var stmt = ("SELECT "+selects+" FROM subcat INNER JOIN ON "+joinparams[0]+"="+joinparams[1]+" WHERE ("+columns[0]+"='"+conditions[0]+"'")
+        var stmt = ("SELECT "+selects+" FROM "+table+" INNER JOIN categories ON "+joinparams[0]+"="+joinparams[1]+" WHERE ("+columns+"='"+conditions[0]+"'")
         for (var i=1;i<conditions.length;i++){
-            stmt = stmt+add+columns[i]+"='"+conditions[i]+"'";
+            stmt = stmt+add+columns+"='"+conditions[i]+"'";
         }
         stmt = stmt+")";
+        console.log(stmt)
+        return this.db.exec(stmt, {"returnValue": "resultRows"})
+    }
+
+    select_n_join_singlecond(joinparams, condition,column){
+        var stmt = "SELECT * FROM subcat INNER JOIN categories ON "+joinparams[0]+" = "+joinparams[1]+" WHERE ("+column+"="+condition+")";
+        var res = this.db.exec(stmt, {"returnValue": "resultRows"})
+        console.log(stmt)
+        console.log(res)
+        return res
        }
 
 }
 
+
+
 class Component {
     constructor(dbhandler){
         this.handler = dbhandler;
     }
 }
 
-class Chart extends Component {
+class FilterQueue{
+    constructor(){
+        this.src = document.getElementById("filter_queue_template").innerHTML   ;
+        this.lst = [];
+    }
+
+    update(queryobj){
+        this.lst.push(queryobj);
+        this.template = Handlebars.compile(this.src);
+        document.getElementById("filter_queue").innerHTML=this.template(this.lst);
+    }
+}
+
+new Chart(document.getElementById("chart_canvas"), {
+    type: 'bar',
+    data: {
+      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+      datasets: [{
+        label: '# of Votes',
+        data: [12, 19, 3, 5, 2, 3],
+        borderWidth: 1
+      }]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+
+class ChartComponent extends Component {
     constructor(dbhandler){
         super(dbhandler);
         this.ctx = document.getElementById("Chart");
+
     }
 
     //params = {"subdiv","lga nullable", "cat", "subcat"}
@@ -113,6 +160,7 @@ class Chart extends Component {
     }
 }
 
+
 //left column filter component
 class Filter extends Component{
     constructor(dbhandler){
@@ -124,7 +172,7 @@ class Filter extends Component{
         this.all_location = this.handler.select_all("location");  
         this.distinct_subdiv = this.handler.select_distinct("subdiv","location")
         console.log(this.distinct_subdiv);
-        this.all_subcat = this.handler.select_all("subcat");
+        this.all_subcat = this.handler.select_distinct("name","subcat");
         this.category = this.handler.select_all("categories");
         this.distinct_lga = this.handler.select_distinct("lga","location")
         console.log(this.category)
@@ -180,10 +228,11 @@ class Filter extends Component{
             document.getElementById("lga").innerHTML = this.lga_template(outarr);
         } else if (id=1){
             //if it is subcat according to cat
-            var selel = document.getElementById("lga_sel");
+            var selel = document.getElementById("category_sel");
             var result = getSelectValues(selel);
             var outarr = [];
             var queryres;
+
             //if multisel
             if (result.length != 1){
                 console.log(result)
@@ -193,26 +242,54 @@ class Filter extends Component{
                     conds.push(result[i]);
                     columns.push("");
                 }
-                queryres = this.handler.select_n_join_multicond("subcat.id",joinparams.columns, conds, "location");
+                
+                queryres = this.handler.select_n_join_multicond("subcat.id, subcat.name",["categories.id " ," subcat.cat_id"], conds, "categories.name","subcat");
                 console.log(queryres)
             } else {
+                var cat_id = this.handler.select_singlecond("name",result[0],"categories")[0][0];
                 //if single select
-                queryres = this.handler.select_singlecond("subdiv",result[0],"location");
+                queryres = this.handler.select_n_join_singlecond(["subcat.cat_id","categories.id"],cat_id,"categories.id");
 
             }
+            
+            if (queryres.length !=0){
                 for (var i=0; i<queryres.length;i++){
-                //extract LGA list
-                outarr.push(queryres[i][2]);
+                    //extract subcat list
+                    outarr.push(queryres[i][1]);
+                }
+            } else {
+                //just append the category into the subcategory
+                outarr.push(result);
             }
             console.log(outarr)
-            document.getElementById("lga").innerHTML = this.lga_template(outarr);
+            document.getElementById("subcat_sel").innerHTML = this.subcat_template(outarr);
         }
     }
 
+    add_filter(){
+        var selelsubdiv = document.getElementById("subdiv_sel");
+        var selellga = document.getElementById("lga_sel");
+        var selelcat = document.getElementById("category_sel");
+        var selelsub = document.getElementById("subcat_sel");
+
+        var subdiv = getSelectValues(selelsubdiv);
+        var lga = getSelectValues(selellga);
+        var cat = getSelectValues(selelcat);
+        var sub = getSelectValues(selelsub);
+
+        var pass_obj = {"subdivs":"","lgas":"","categorys":"","subcategorys":""}
+        pass_obj.subdivs = subdiv
+        pass_obj.lgas = lga
+        pass_obj.categorys = cat
+        pass_obj.subcategorys = sub
+        queue_filter.update(pass_obj);
+    }
+    
 }
 
 function init(sqlite3){
     global_component = new Filter(new db_handler(sqlite3));
     chart = new Chart(new db_handler(sqlite3));
+    queue_filter = new FilterQueue();
 }