initial commit

index.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Crime Statistics</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">    
+        <!-- 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>
+        <!-- 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">
+          <a class="navbar-brand" href="#">&nbsp;&nbsp;Crime statistic analysis</a>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+
+          <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>
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item" href="#">By Crime category</a>
+                </div>
+              </li>
+             </ul>
+          </div>
+        </nav>
+        <br><br>
+
+        <!-- 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">
+                  <ul class="">
+                        <li class="list-group-item text-left" v-for="item in filters">
+                            <span v-html="item.html"></span>
+                        </li>
+                  </ul>
+                </div>
+                <div class="col-10">
+                </div>
+              </div>
+         </div>
+    <!-- my stuff-->
+    <script src="index.js"></script>
+    </body>
+</html>

index.js

@@ -0,0 +1,32 @@
+const initSqlJs = window.initSqlJs;
+config = {
+      locateFile: filename => `/dist/${filename}`
+}
+const db = new SQL.Database();
+
+
+
+const { createApp, ref } = Vue
+
+//filters module
+  createApp({
+        props: ['dbConnObj'],
+        
+        data(){
+            return {
+                filters : [{"html": a}]
+            }
+            
+        },
+        
+        methods(){
+            init(){
+            
+            }
+        },
+        
+        beforeMount(){
+            this.init;
+        }
+        
+  }, {"dbConnObj": db).mount('#filters');