change to oop

index.html

@@ -8,14 +8,29 @@
         <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>
+        <script src="https://12sen.dchen4.au/sqlite-js/sqlite3.js"></script>
+        
+        <script>    
+window.sqlite3InitModule().then((_sqlite3)=>{
+        sqlite3 = _sqlite3;
+        console.warn("Installing sqlite3 module globally", sqlite3);
+             globalThis.sqlite3 = sqlite3;
+             const db = new sqlite3.oo1.DB();
+               db.exec([
+                 "create table locations (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, subdiv VARCHAR(255) NOT NULL);",
+                 "INSERT INTO LOCATIONS (subdiv) VALUES('thususnutluf');"
+              ]);
+             init(db);
+        }).catch(e=>{
+             console.error("sqlite init failed:",e);
+        });</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>
-
 
         <!--nav-->
         <nav class="navbar navbar-expand-lg navbar-light bg-warning">
@@ -48,9 +63,8 @@
 
         <!-- page columns -->
         <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="row">                <!-- now to vue-->
+                <div class="col-2 border border-primary text-left" id="filters" >
                   <ul class="">
                         <li class="list-group-item text-left" v-for="item in filters">
                             <span v-html="item.html"></span>
@@ -61,6 +75,7 @@
                 </div>
               </div>
          </div>
+
          <!-- my stuff-->
         <script src="index.js"></script>
     </body>

index.js

@@ -1,60 +1,47 @@
-const initSqlJs = window.initSqlJs
-const SQL = await initSqlJs({
-  // Required to load the wasm binary asynchronously. Of course, you can host it wherever you want
-  // You can omit locateFile completely when running in node
-  locateFile: file => `https://sql.js.org/dist/${file}`
-});
-
-// Create a database
-const db = new SQL.Database();
-
-
-
-
-const { createApp, ref } = Vue
-
-//filters module
-  createApp({
-        props: ['dbConnObj'],
-        
-        data(){
-            return {
-                filters : [{"html": a}]
+class db_handler {
+    constructor (sqlite3){
+        this.db = sqlite3;
     }
     
-        },
-        
-        methods:{
-            sqlStatements(opt, val = 0){
-                var stmt;
-                switch(opt){
-                    case 0:
-                        stmt = "SELECT * FROM index";
-                        break;
-                    case 1:
-                        stmt = "SELECT DISTINCT lga FROM index";
-                        break;
-                    case 2:
-                        stmt = "SELECT DISTINCT crime_category FROM index";
-                        break;
-                    case 3:
-                        stmt = "SELECT record_id FROM index";
-                    case 4:
-                        stmt = db.prepare("SELECT * FROM records WHERE record_id=:id");
-                        stmt = stmt.
-                    default:
-                        break;
+    select_all(table){
+        var stmt = ("SELECT * FROM "+table+";");
+        console.log(stmt);
+        return this.db.exec(stmt, {"returnValue":"resultRows"})
+    }
+    
+    select(column, condition, table){
+        console.log(column,condition);
+        var stmt = this.db.prepare("SELECT * FROM "+table+" WHERE $column = $condition").bind([column,condition]);
+        return stmt.finalize();
+    }
+}
+
+class component {
+    constructor(dbhandler){
+        this.handler = dbhandler;
+    }
+}
+
+class filter extends component{
+    constructor(dbhandler){
+        super(dbhandler);
+        this.init();
     }
-                return stmt;
-            } ,
     
     init(){
-                db.exec(sqlStatements(0))
-            }
-        },
-        
-        beforeMount(){
-            this.init;
+        var all_location = this.handler.select_all("locations");    
+        console.log(all_location);
+        var some_location = this.handler.select("id","1","locations");
+        console.log(some_location);
     }
     
-  }, {"dbConnObj": db}).mount('#filters');
+    
+}
+
+function init(sqlite3){
+    var global_component = new filter(new db_handler(sqlite3));
+}
+
+function filtergen(){
+    console.log(this.sqlite3);
+}