Compare commits

...

2 Commits

Author SHA1 Message Date
Yurun Chen
b9ecdecd99 less polished 2024-12-12 16:33:24 +11:00
Yurun Chen
3e64c270e6 mostly working 2024-12-11 21:09:36 +11:00
2 changed files with 549 additions and 46 deletions

View File

@@ -7,7 +7,87 @@
<!-- dependencies --> <!-- 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"> <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> </head>
<body style="background-color: azure;"> <body style="background-color: #fffee0;">
<style>
.range_container {
display: flex;
flex-direction: column;
width: 80%;
margin: 35% auto;
}
.sliders_control {
position: relative;
min-height: 50px;
}
.form_control {
position: relative;
display: flex;
justify-content: space-between;
font-size: 24px;
color: #635a5a;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #C6C6C6;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #C6C6C6;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb:hover {
background: #f7f7f7;
}
input[type=range]::-webkit-slider-thumb:active {
box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
-webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}
input[type="number"] {
color: #8a8383;
width: 50px;
height: 30px;
font-size: 20px;
border: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 2px;
width: 100%;
position: absolute;
background-color: #C6C6C6;
pointer-events: none;
}
#fromSlider {
height: 0;
z-index: 1;
}
</style>
<!--chartjs--> <!--chartjs-->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!--handlebars--> <!--handlebars-->
@@ -19,11 +99,12 @@
<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> <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 --> <!-- SQL -->
<script src="https://12sen.dchen4.au/sqlite-js/sqlite3.js"></script> <script src="https://12sen.dchen4.au/sqlite-js/sqlite3.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.30.1/moment.min.js"></script>
<!--nav--> <!--nav-->
<nav class="navbar navbar-expand-lg navbar-light bg-warning"> <nav class="navbar navbar-expand-lg navbar-light bg-warning">
<a class="navbar-brand" href="#">&nbsp;&nbsp;Crime statistic analysis</a> <a class="navbar-brand" href="#">&nbsp;&nbsp;NSW 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"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
@@ -58,7 +139,7 @@
<!--template--> <!--template-->
<script id="subdiv-template" type="text/x-handlebars-template"> <script id="subdiv-template" type="text/x-handlebars-template">
<div> <div>
<strong>Subdiv:</strong><br> <strong>Subdivision:</strong><br>
<select oninput="global_component.update_listbox(0)" class="form-select selectwidthauto" multiple aria-label="multiple select" id="subdiv_sel" multiple="multiple" size="5"> <select oninput="global_component.update_listbox(0)" class="form-select selectwidthauto" multiple aria-label="multiple select" id="subdiv_sel" multiple="multiple" size="5">
{{#each this}} {{#each this}}
<option>{{this}}</option> <option>{{this}}</option>
@@ -97,7 +178,7 @@
<strong>Category:</strong><br> <strong>Category:</strong><br>
<select oninput="global_component.update_listbox(1)" class="form-select selectwidthauto" aria-label="multiple select" id="category_sel" multiple="multiple" size="5"> <select oninput="global_component.update_listbox(1)" class="form-select selectwidthauto" aria-label="multiple select" id="category_sel" multiple="multiple" size="5">
{{#each this}} {{#each this}}
<option>{{this.[1]}}</option> <option>{{this}}</option>
{{/each}} {{/each}}
</select> </select>
</div> </div>
@@ -113,7 +194,7 @@
<script id="subcategory-template" type="text/x-handlebars-template"> <script id="subcategory-template" type="text/x-handlebars-template">
<div> <div>
<strong>Subcategory:</strong><br> <strong>Subcategory:</strong><br>
<select class="form-select selectwidthauto" multiple aria-label="multiple select" id="subcat_sel" > <select class="form-select selectwidthauto" multiple aria-label="multiple select" id="subcat_sel" disabled>
{{#each this}} {{#each this}}
<option>{{this}}</option> <option>{{this}}</option>
{{/each}} {{/each}}
@@ -122,6 +203,7 @@
</script> </script>
<!--/template--> <!--/template-->
<br> <br>
<button type="button" class="btn btn-warning" onclick="global_component.clear()">Clear</button>
<button type="button" class="btn btn-primary" onclick="global_component.add_filter()">Add filter</button> <button type="button" class="btn btn-primary" onclick="global_component.add_filter()">Add filter</button>
</li> </li>
@@ -137,11 +219,13 @@
<script id="filter_queue_template" type="text/x-handlebars-template"> <script id="filter_queue_template" type="text/x-handlebars-template">
<div> <div>
<h5>Queries:</h5> <h5>Queries:</h5>
<p>*multiple queries possible</p>
<br> <br>
<table class="table"> <table class="table">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th scope="col">Subdiv/LGA</th> <th scope="col">Subdivision</th>
<th scope="col">LGA</th>
<th scope="col">Category</th> <th scope="col">Category</th>
<th scope="col">Subcategory</th> <th scope="col">Subcategory</th>
</tr> </tr>
@@ -149,20 +233,82 @@
<tbody> <tbody>
{{#each this}} {{#each this}}
<tr> <tr>
<td>{{this.subdivs}} {{this.lgas}}</td> <td style="word-break: break-all">{{this.subdivs}}</td>
<td>{{this.categorys}}</td> <td style="word-break: break-all"> {{this.lgas}}</td>
<td>{{this.subcategorys}}</td> <td style="word-break: break-all">{{this.categorys}}</td>
<td style="word-break: break-all">{{this.subcategorys}}</td>
</tr> </tr>
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
<h5>Multiple choices in a given column will be AVGed.</h5> <br>
<label for="customRange1" class="form-label">Begin Month</label><br>
<input type="range" class="form-range w-25 text-center" min="0" max="215" step="1" id="customRange1">
<br>
<label for="customRange2" class="form-label">End Month</label><br>
<input type="range" class="form-range w-25 text-center" min="1" max="216" step="1" id="customRange2">
<br>
<p>*Multiple choices in a given column for line graph will be averaged. Bar graph will be cumulative.</p>
</div> </div>
<button type="button" class="btn btn-danger" onclick="queue_filter.clear()">Clear query queue</button>
<button type="button" class="btn btn-success" onclick="queue_filter.go()">Run!</button>
</script> </script>
</div> </div>
<br>
<div class="row"> <div class="row">
<div>
<canvas id="chart_canvas"></canvas> <ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Line</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Pie/Bar</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Table</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"><canvas id="chart_canvas"></canvas></div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"><canvas id="pie_canvas"></canvas><br><canvas id="bar_canvas"></canvas><br><br></div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div id="result_table"></div>
<!--template-->
<script id="result_template" type="text/x-handlebars-template">
<br>
<table class="table">
<thead>
<th>Months</th>
{{#each this.columns}}
<th scope="col">{{this}}</th>
{{/each}}
</thead>
<tbody>
{{#each this.values.[0]}}
<tr>
<td>{{lookup ../months @index}}</td>
{{#each ../values}}
{{log this}}
<td>{{lookup this @../index}}</td>
{{/each}}
</tr>
{{/each}}
<tr>
<td>Total:</td>
{{#each this.sum}}
<td>{{this}}</td>
{{/each}}
</tr>
</tbody>
</table>
</script>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

425
index.js
View File

@@ -9,6 +9,11 @@ statistics(id INTEGER PRIMARY KEY AUTOINCREMENT , category_id INTEGER, subcat_id
//init sqlite //init sqlite
function random_rgba() {
var o = Math.round, r = Math.random, s = 255;
return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')';
}
function getSelectValues(sel) { function getSelectValues(sel) {
var result = []; var result = [];
var options = sel && sel.options; var options = sel && sel.options;
@@ -68,6 +73,15 @@ class db_handler {
return res return res
} }
select_singlecond_id(column, condition, table){
console.log(column,condition);
var stmt = ("SELECT * FROM "+table+" WHERE "+column+" = '"+condition+"'");
var res = this.db.exec(stmt, {"returnValue":"resultRows"});
console.log(stmt)
return res
}
select_multicond(columns, conditions, table){ select_multicond(columns, conditions, table){
var add = (" OR ") var add = (" OR ")
var stmt = ("SELECT * FROM "+table+" WHERE ("+columns[0]+"='"+conditions[0]+"'") var stmt = ("SELECT * FROM "+table+" WHERE ("+columns[0]+"='"+conditions[0]+"'")
@@ -79,6 +93,21 @@ class db_handler {
return this.db.exec(stmt, {"returnValue":"resultRows"}) return this.db.exec(stmt, {"returnValue":"resultRows"})
} }
select_multicond_and(columns1, conditions1, columns2, conditions2,table){
var add = (" OR ")
var stmt = ("SELECT id FROM "+table+" WHERE ("+columns1[0]+"='"+conditions1[0]+"'")
for (var i=1;i<conditions1.length;i++){
stmt = stmt+add+columns1[i]+"='"+conditions1[i]+"'";
}
stmt = stmt+")"+" AND ("+columns2[0]+" = '"+conditions2[0]+"'";
for (var i=1;i<conditions2.length;i++){
stmt = stmt+add+columns2[i]+"='"+conditions2[i]+"'";
}
stmt = stmt+")";
console.log(stmt);
return this.db.exec(stmt, {"returnValue":"resultRows"})
}
select_distinct(column, table){ select_distinct(column, table){
var stmt = ("SELECT DISTINCT "+column+" FROM "+table); var stmt = ("SELECT DISTINCT "+column+" FROM "+table);
return this.db.exec(stmt, {"returnValue": "resultRows"}) return this.db.exec(stmt, {"returnValue": "resultRows"})
@@ -105,6 +134,63 @@ class db_handler {
return res return res
} }
select_records(locids, catids, subcatids){
var add = " OR ";
var stmt;
if (locids != 404){
stmt = "SELECT * FROM statistics WHERE (location_id = "+locids[0]
for (var i=1;i<locids.length;i++){
stmt = stmt+add+"location_id"+"="+locids[i]+"";
}
} else {
stmt = "SELECT * FROM statistics WHERE ("
}
//if location is not a constraint and category is, format as the above stmt
if (locids == 404 && catids != 404){
stmt = stmt+"category_id = "+catids[0]
for (var i=1;i<catids.length;i++){
stmt = stmt+add+"category_id"+"="+catids[i]+"";
}
//if location and category are all not constraints, keep stmt as is
} else if (locids == 404 && catids == 404){
stmt = stmt;
//if location is not a constraint
} else if (locids != 404 && catids != 404) {
stmt = stmt+") AND (category_id = "+catids[0]
for (var i=1;i<catids.length;i++){
stmt = stmt+add+"category_id"+"="+catids[i]+"";
}
} else if (locids != 404 && catids == 404){
stmt = stmt;
}
//if select all
if (subcatids == 404 && catids == 404 && locids == 404) {
stmt = "SELECT * FROM statistics";
//if subcat constraint
} else if (subcatids != 404 && catids == 404 && locids == 404){
stmt = stmt + "subcat_id= "+subcatids[0];
for (var i=1;i<subcatids.length;i++){
stmt = stmt+add+"subcat_id"+"="+subcatids[i]+"";
}
//if category is constraint and subcategory is also constraint
} else if (subcatids !=404 && catids != 404 || subcatids !=404 && catids ==404 && locids !=404){
stmt = stmt + ") AND (subcat_id = "+subcatids[0];
for (var i=1;i<subcatids.length;i++){
stmt = stmt+add+"subcat_id"+"="+subcatids[i]+"";
}
}
if (stmt!="SELECT * FROM statistics"){
stmt = stmt + ")";
}
console.log(stmt);
return this.db.exec(stmt, {"returnValue": "resultRows"})
}
} }
@@ -116,36 +202,246 @@ class Component {
} }
class FilterQueue{ class FilterQueue{
constructor(){ constructor(db_handler){
this.dbhandler = db_handler;
this.src = document.getElementById("filter_queue_template").innerHTML ; this.src = document.getElementById("filter_queue_template").innerHTML ;
this.lst = []; this.lst = [];
} }
update(queryobj){ render(){
this.lst.push(queryobj);
this.template = Handlebars.compile(this.src); this.template = Handlebars.compile(this.src);
document.getElementById("filter_queue").innerHTML=this.template(this.lst); document.getElementById("filter_queue").innerHTML=this.template(this.lst);
} }
update(queryobj){
this.lst.push(queryobj);
this.render();
console.log(this.lst)
}
clear(){
this.lst = [];
this.render();
}
get_id(name,conds,table){
return this.db_handler.select_multicond_and(name, conds, table);
}
go(){
//form structured query from lists, loop through the objects
var plotlst = [];
var pielst = [];
var k=0;
while (k<this.lst.length){
console.log(k)
var cur_obj= this.lst[k];
//{subdivs,lgas,categorys,subcategorys}
//SELECT id FROM locations WHERE subdivs=subdiv AND subdiv = subdiv AND
var lga_arr = cur_obj.lgas;
var subdiv_arr = cur_obj.subdivs;
var cat_arr = cur_obj.categorys;
var subcat_arr = cur_obj.subcategorys;
console.log(lga_arr, subdiv_arr, cat_arr, subcat_arr)
var column_arr = []
var column_arr1 = []
var query_arr1 = []
var query_arr2 = []
var locids = [];
var catids = [];
var subcatids = [];
var subcatid;
var locids_raw;
var res;
for (i=0;i<lga_arr.length;i++){
column_arr.push("LGA")
query_arr1.push(lga_arr[i])
}
for (i=0;i<subdiv_arr.length;i++){
column_arr1.push("subdiv")
query_arr2.push(subdiv_arr[i])
}
//if lga and subdiv are all constraint
if (lga_arr[0] != "*" && subdiv_arr[0] != "*"){
locids = this.dbhandler.select_multicond_and(column_arr,query_arr1,column_arr1,query_arr2,"location")
//if one of them is constraint
} else if (lga_arr[0] == "*" && subdiv_arr[0] !="*"){
//if lga is not constraint
locids_raw = this.dbhandler.select_multicond(column_arr1, subdiv_arr, "location")
if (locids_raw.length != 1){
for (var record in locids_raw){
locids.push(record[0])
}
} else {
locids = [locids_raw[0][0]]
}
console.log(locids)
}
else if (subdiv_arr[0] == "*" && lga_arr[0] != "*"){
locids_raw = this.dbhandler.select_multicond(column_arr, lga_arr,"location");
console.log(locids_raw);
if (locids_raw.length != 1){
for (var record in locids_raw){
console.log(record);
locids.push(record[0]);
}
} else {
locids = [locids_raw[0][0]]
}
console.log(locids,locids_raw);
}
else if (lga_arr[0] == "*" && subdiv_arr[0] == "*"){
locids = 404;
}
if (cat_arr[0] != "*"){
for (i=0;i<cat_arr.length;i++){
catids.push(this.dbhandler.select_singlecond("name", cat_arr[i], "categories")[0][0])
}
} else {
catids = 404;
}
console.log(subcat_arr)
if (subcat_arr[0] != "*"){
for (i=0;i<subcat_arr.length;i++){
subcatid = (this.dbhandler.select_singlecond("name", subcat_arr[i], "subcat"))
subcatids.push(subcatid[0][0])
}
} else {
subcatids = 404;
}
//now select all data
console.log(locids, catids, subcatids)
res = this.dbhandler.select_records(locids,catids,subcatids);
console.log(res)
//now consolidate it
//if line then avg
var res_arr = []
//all array
for (var i=0;i<JSON.parse(res[0][5]).length;i++){
var val;
val = JSON.parse(res[0][5])[i]
//one array, find avg of all 1st val
for (var j=1;j<res.length;j++){
val = (val+JSON.parse(res[j][5])[i])/2
}
res_arr.push(Math.round(val));
}
//bar graph, sum everything in the query basically
//first column iteration
val = 0;
//modify JSON.parse(res[0][5]) and initial i to control the range of the months
for (var i=0; i<JSON.parse(res[0][5]).length;i++){
val = JSON.parse(res[0][5])[i]
for (var j=1;j<res.length;j++){
val += JSON.parse(res[j][5])[i]
}
val+=Math.round(val)
}
console.log(val)
pielst.push(val)
console.log(res_arr)
plotlst.push(res_arr)
k++
}
var label_arr=[];
for (let i = 0; i < 216; i++) {
label_arr.push(moment().year(1995).month(i+1).date(0).startOf('month').format("MMM YYYY"))
}
//formulate graph object
var graph_lst = []
for (var i=0; i<plotlst.length;i++){
graph_lst.push({"lineTension":0.8, label:"Query "+String(i+1), "data": plotlst[i], borderWidth:1})
}
var pie_lbl = [];
var pie_dslst = [];
var pie_colour = [];
//why don't we generate the bg colour as well
for (var i=0; i<pielst.length;i++){
pie_lbl.push("Query "+String(i+1))
pie_colour.push(random_rgba())
}
pie_dslst.push({"label": "NSW Crime 1995-2012", "data": pielst, "backgroundColor": pie_colour, "hoverOffset":4})
console.log(graph_lst, plotlst)
document.getElementById("chart_canvas");
if (this.chart){
this.chart.destroy();
}
if (this.pie){
this.pie.destroy();
}
if (this.bar){
this.bar.destroy();
}
this.chart = new Chart(document.getElementById("chart_canvas"), {
type: "line",
data: {
labels: label_arr,
datasets: graph_lst
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
this.pie = new Chart(document.getElementById("pie_canvas"), {
type: "pie",
data: {
labels: pie_lbl,
datasets: pie_dslst,
}
});
this.bar = new Chart(document.getElementById("bar_canvas"),{
type: "bar",
data: {
labels: pie_lbl,
datasets : pie_dslst,
},
options: {
scales: {
y: {
beginAtZero: true
}
}
},
})
var source = document.getElementById("result_template").innerHTML;
this.table_template = Handlebars.compile(source);
console.log(label_arr)
document.getElementById("result_table").innerHTML = this.table_template({"columns": pie_lbl, "months" :label_arr, "values":plotlst, "sum":pielst})
}
} }
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 { class ChartComponent extends Component {
constructor(dbhandler){ constructor(dbhandler){
@@ -179,23 +475,38 @@ class Filter extends Component{
//subdiv filter rendering //subdiv filter rendering
var source = document.getElementById("subdiv-template").innerHTML; var source = document.getElementById("subdiv-template").innerHTML;
this.subdiv_template = Handlebars.compile(source); this.subdiv_template = Handlebars.compile(source);
var html = this.subdiv_template(this.distinct_subdiv); var html = this.subdiv_template(this.distinct_subdiv.sort());
document.getElementById("subdiv").innerHTML = html; document.getElementById("subdiv").innerHTML = html;
//LGA filter rendering //LGA filter rendering
source = document.getElementById("lga-template").innerHTML; source = document.getElementById("lga-template").innerHTML;
this.lga_template = Handlebars.compile(source); this.lga_template = Handlebars.compile(source);
document.getElementById("lga").innerHTML = this.lga_template(this.distinct_lga); document.getElementById("lga").innerHTML = this.lga_template(this.distinct_lga.sort());
//category filter rendering //category filter rendering
source = document.getElementById("category-template").innerHTML; source = document.getElementById("category-template").innerHTML;
this.category_template = Handlebars.compile(source); this.category_template = Handlebars.compile(source);
document.getElementById("category").innerHTML = this.category_template(this.category); var categoryin = [];
for (var i=0; i<this.category.length; i++){
categoryin.push(this.category[i][1])
}
document.getElementById("category").innerHTML = this.category_template(categoryin.sort());
//subcat filter rendering //subcat filter rendering
source = document.getElementById("subcategory-template").innerHTML; source = document.getElementById("subcategory-template").innerHTML;
this.subcat_template = Handlebars.compile(source); this.subcat_template = Handlebars.compile(source);
document.getElementById("subcategory").innerHTML = this.subcat_template(this.all_subcat) document.getElementById("subcategory").innerHTML = this.subcat_template(this.all_subcat.sort())
//don't select statistics, use where to filter too darn slow 266k records //don't select statistics, use where to filter too darn slow 266k records
} }
clear(){
var sel_lst = [document.getElementById("subdiv_sel"),document.getElementById("lga_sel"),document.getElementById("category_sel"),document.getElementById("subcat_sel")]
for (var j=0; j<sel_lst.length;j++){
for(var i=0;i<sel_lst[j].options.length;i++){
if(sel_lst[j].options[i].selected==true){
sel_lst[j].options[i].selected=false;
}
}
}
}
//there shall be linked data, on update filter out subdata //there shall be linked data, on update filter out subdata
update_listbox(id){ update_listbox(id){
//if subdiv fetch according LGA //if subdiv fetch according LGA
@@ -225,7 +536,7 @@ class Filter extends Component{
outarr.push(queryres[i][2]); outarr.push(queryres[i][2]);
} }
console.log(outarr) console.log(outarr)
document.getElementById("lga").innerHTML = this.lga_template(outarr); document.getElementById("lga").innerHTML = this.lga_template(outarr.sort());
} else if (id=1){ } else if (id=1){
//if it is subcat according to cat //if it is subcat according to cat
var selel = document.getElementById("category_sel"); var selel = document.getElementById("category_sel");
@@ -257,12 +568,13 @@ class Filter extends Component{
//extract subcat list //extract subcat list
outarr.push(queryres[i][1]); outarr.push(queryres[i][1]);
} }
document.getElementById("subcat_sel").removeAttribute("disabled");
document.getElementById("subcat_sel").innerHTML = this.subcat_template(outarr.sort());
} else { } else {
document.getElementById("subcat_sel").innerHTML = this.subcat_template([]);
//just append the category into the subcategory //just append the category into the subcategory
outarr.push(result); document.getElementById("subcat_sel").setAttribute("disabled", true);
} }
console.log(outarr)
document.getElementById("subcat_sel").innerHTML = this.subcat_template(outarr);
} }
} }
@@ -277,11 +589,36 @@ class Filter extends Component{
var cat = getSelectValues(selelcat); var cat = getSelectValues(selelcat);
var sub = getSelectValues(selelsub); var sub = getSelectValues(selelsub);
console.log(subdiv.length)
var pass_obj = {"subdivs":"","lgas":"","categorys":"","subcategorys":""} var pass_obj = {"subdivs":"","lgas":"","categorys":"","subcategorys":""}
pass_obj.subdivs = subdiv //too many darn records, will break it
pass_obj.lgas = lga if (subdiv.length == 0){
pass_obj.categorys = cat pass_obj.subdivs = ["*"]
pass_obj.subcategorys = sub } else {
pass_obj.subdivs = subdiv
}
if (lga.length == 0){
pass_obj.lgas = ["*"];
} else {
pass_obj.lgas = lga
}
if (cat.length == 0){
pass_obj.categorys = ["*"]
} else {
pass_obj.categorys = cat
}
if (sub.length == 0){
pass_obj.subcategorys = ["*"]
} else {
pass_obj.subcategorys = sub
}
queue_filter.update(pass_obj); queue_filter.update(pass_obj);
} }
@@ -290,6 +627,26 @@ class Filter extends Component{
function init(sqlite3){ function init(sqlite3){
global_component = new Filter(new db_handler(sqlite3)); global_component = new Filter(new db_handler(sqlite3));
chart = new Chart(new db_handler(sqlite3)); chart = new Chart(new db_handler(sqlite3));
queue_filter = new FilterQueue(); queue_filter = new FilterQueue(new db_handler(sqlite3));
Handlebars.registerHelper('range', function(start, end) {
let result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
});
Handlebars.registerHelper('maxLength', function(arrays) {
var len = Math.max(...arrays.map(array => array.length));
console.log(len);
return len;
});
Handlebars.registerHelper("setVar", function(varName, varValue, options) {
options.data.root[varName] = varValue;
});
} }