dchen4/data-analyse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

filter

Browse Source
This commit is contained in:
Yurun Chen
2024-12-04 12:33:39 +11:00
parent c24c128ca7
commit 9cf7776a20
2 changed files with 134 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
index.html
View File

@@ -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">
<ul class="">
<li class="list-group-item text-left" v-for="item in filters">
<span v-html="item.html"></span>
</li>
</ul>
<div class="col-4 text-left" id="filters">
<ul class="list-group">
<li class="list-group-item ">
<div id="subdiv">
<strong></strong><h3>Please upload database to start!</h3></strong>
<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>