filter

index.html

@@ -7,14 +7,16 @@
         <!-- dependencies -->
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     </head>
-    <body>
+    <body style="background-color: azure;">
+        <!--handlebars-->
+        <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
         <!-- bootstrap-->
         <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
         <!-- vue stuff--> 
         <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
         <!-- SQL -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.2.1/dist/sql-wasm.js"></script>
+        <script src="https://12sen.dchen4.au/sqlite-js/sqlite3.js"></script>
 
 
         <!--nav-->
@@ -27,13 +29,7 @@
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav mr-auto">
               <li class="nav-item active">
-                <a class="nav-link" href="#">Home</a>
               </li>
-
-              <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  View
-                </a>
                 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                   <a class="dropdown-item" href="#">By year</a>
                   <a class="dropdown-item" href="#">By LGA</a>
@@ -47,17 +43,69 @@
         <br><br>
 
         <!-- page columns -->
-        <div class="container text-center " id="body">
+        <div class="container text-center" id="body">
               <div class="row">
                 <!-- now to vue-->
-                <div class="col-2 border border-primary text-left" id="filters">
+                <div class="col-4 text-left" id="filters">
-                  <ul class="">
+                    <ul class="list-group">
-                        <li class="list-group-item text-left" v-for="item in filters">
+                      <li class="list-group-item  ">
-                            <span v-html="item.html"></span>
+                        <div id="subdiv">
-                        </li>
+                            <strong></strong><h3>Please upload database to start!</h3></strong>
-                  </ul>
+                            <input type='file' id='load-db'/> 
+                        </div>
+                        <!--template-->
+                        <script id="subdiv-template" type="text/x-handlebars-template">
+                          <div>
+                              <strong>Subdiv:</strong><br>
+                              <select class="form-select selectwidthauto" multiple aria-label="multiple select" name="subdiv" multiple="multiple" size="5">
+                                {{#each this}}
+                                    <option>{{this}}</option>
+                                {{/each}}
+                               </select>
+                          </div>
+                        </script>
+                        <!--/template-->
+                      </li>
+
+                      <li class="list-group-item">
+                        <div id="lga">
+
+                        </div>
+                        <!--template-->
+                        <script id="lga-template" type="text/x-handlebars-template">
+                          <div>
+                              <strong>LGA:</strong><br>
+                              <select class="form-select selectwidthauto" multiple aria-label="multiple select" name="lga" multiple="multiple" size="5">
+                                {{#each this}}
+                                    <option>{{this.[2]}}</option>
+                                {{/each}}
+                               </select>
+                          </div>
+                        </script>
+                        <!--/template-->     
+                      </li>
+
+                      <li class="list-group-item">
+                          <div id="category">
+
+                          </div>
+                          <!--template-->
+                          <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" >
+                                  {{#each this}}
+                                      <option>{{this.[1]}}</option>
+                                  {{/each}}
+                                </select>
+                            </div>
+                          </script>
+                          <!--/template--> 
+                      </li>
+
+                    </ul>
                 </div>
-                <div class="col-10">
+                <div class="col-8">
                 </div>
               </div>
          </div>

index.js

@@ -1,3 +1,35 @@
+/*
+categories(id INTEGER PRIMARY KEY AUTOINCREMENT , name TEXT)
+subcat(id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, cat_id INTEGER, FOREIGN KEY(cat_id) REFERENCES categories(id)
+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))
+
+*/
+//init sqlite
+const eUploadDb = document.querySelector('#load-db');
+
+window.sqlite3InitModule().then(function(sqlite3){
+    // The module is now loaded and the sqlite3 namespace
+    // object was passed to this function.
+    console.log("sqlite3:", sqlite3);
+    eUploadDb.addEventListener('change',function(){
+        const f = this.files[0];
+        if(!f) return;
+        const r = new FileReader();
+        r.addEventListener('load', function(){
+            const p = sqlite3.wasm.allocFromTypedArray(this.result);
+            const db = new sqlite3.oo1.DB();
+            const rc = sqlite3.capi.sqlite3_deserialize(
+            db.pointer, 'main', p, this.result.byteLength, this.result.byteLength,
+            sqlite3.capi.SQLITE_DESERIALIZE_FREEONCLOSE);
+            init(db);
+        });
+        r.readAsArrayBuffer(f);
+  });})
+
+
+
+
 class db_handler {
     constructor (sqlite3){
         this.db = sqlite3;
@@ -9,39 +41,67 @@ class db_handler {
         return this.db.exec(stmt, {"returnValue":"resultRows"})
     }
     
-    select(column, condition, table){
+    select_singlecond(column, condition, table){
         console.log(column,condition);
-        var stmt = this.db.prepare("SELECT * FROM "+table+" WHERE $column = $condition").bind([column,condition]);
+        var stmt = ("SELECT * FROM "+table+" WHERE "+column+" = '"+condition+"'");
-        return stmt.finalize();
+        return this.db.exec(stmt, {"returnValue":"resultRows"})
+    }
+
+    select_distinct(column, table){
+        var stmt = ("SELECT DISTINCT "+column+" FROM "+table);
+        return this.db.exec(stmt, {"returnValue": "resultRows"})
     }
 }
 
-class component {
+class Component {
     constructor(dbhandler){
         this.handler = dbhandler;
     }
 }
 
-class filter extends component{
+//left column filter component
+class Filter extends Component{
     constructor(dbhandler){
         super(dbhandler);
         this.init();
     }
     
     init(){
-        var all_location = this.handler.select_all("locations");    
+        this.all_location = this.handler.select_all("location");  
-        console.log(all_location);
+        this.distinct_subdiv = this.handler.select_distinct("subdiv","location")
-        var some_location = this.handler.select("id","1","locations");
+        console.log(this.distinct_subdiv);
-        console.log(some_location);
+        this.all_subcat = this.handler.select_all("subcat");
+        this.category = this.handler.select_all("categories");
+        console.log(this.category)
+        //subdiv filter rendering
+        var source = document.getElementById("subdiv-template").innerHTML;
+        var subdiv_template = Handlebars.compile(source);
+        var html = subdiv_template(this.distinct_subdiv);
+        document.getElementById("subdiv").innerHTML = html;
+        //LGA filter rendering
+        source = document.getElementById("lga-template").innerHTML;
+        var lga_template = Handlebars.compile(source);
+        document.getElementById("lga").innerHTML = lga_template(this.all_location);
+        //category filter rendering
+        source = document.getElementById("category-template").innerHTML;
+        var category_template = Handlebars.compile(source);
+        console.log(category_template(this.category))
+        document.getElementById("category").innerHTML = category_template(this.category);
+        //don't select statistics, use where to filter too darn slow 266k records
     }
     
+    //there shall be linked data, on update filter out subdata
+    update_listbox(){
+        
+    }
     
 }
 
 function init(sqlite3){
-    var global_component = new filter(new db_handler(sqlite3));
+    global_component = new Filter(new db_handler(sqlite3));
 }
 
 function filtergen(){
     console.log(this.sqlite3);
 }
+