data-analyse/index.html

<!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 style="background-color: azure;">
        <!--chartjs-->
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <!--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://12sen.dchen4.au/sqlite-js/sqlite3.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">
              </li>
                <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-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 oninput="global_component.update_listbox(0)" class="form-select selectwidthauto" multiple aria-label="multiple select" id="subdiv_sel" 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" id="lga_sel" multiple="multiple" size="5">
                                {{#each this}}
                                    <option>{{this}}</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  oninput="global_component.update_listbox(1)" class="form-select selectwidthauto" aria-label="multiple select" id="category_sel"  multiple="multiple" size="5">
                                  {{#each this}}
                                      <option>{{this.[1]}}</option>
                                  {{/each}}
                                </select>
                            </div>
                          </script>
                          <!--/template--> 
                      </li>

                      <li class="list-group-item">
                        <div id="subcategory">

                        </div>
                        <!--template-->
                        <script id="subcategory-template" type="text/x-handlebars-template">
                          <div>
                              <strong>Subcategory:</strong><br>
                              <select class="form-select selectwidthauto" multiple aria-label="multiple select" id="subcat_sel" >
                                {{#each this}}
                                    <option>{{this}}</option>
                                {{/each}}
                              </select>
                          </div>
                        </script>
                        <!--/template--> 
                        <br>
                        <button type="button" class="btn btn-primary" onclick="global_component.add_filter()">Add filter</button>
                    </li>

                    </ul>
                </div>
                <!--charts!-->
                <div class="col-8">
                  <div class="col-12">
                    <!--this is gonna be the selected values-->
                    <div class="row">
                      <div id="filter_queue"></div>
                      <!--Template-->
                      <script id="filter_queue_template" type="text/x-handlebars-template">
                        <div>
                        <h5>Queries:</h5>
                        <br>
                        <table class="table">
                          <thead class="thead-dark">
                            <tr>
                              <th scope="col">Subdiv/LGA</th>
                              <th scope="col">Category</th>
                              <th scope="col">Subcategory</th>
                            </tr>
                        </thead>
                            <tbody>
                              {{#each this}}
                              <tr>
                                <td>{{this.subdivs}} {{this.lgas}}</td>
                                <td>{{this.categorys}}</td>
                                <td>{{this.subcategorys}}</td>
                              </tr>       
                              {{/each}}
                            </tbody>
                        </table>
                        <h5>Multiple choices in a given column will be AVGed.</h5>
                      </div>
                      </script>
                    </div>
                    <div class="row">
                      <div>
                        <canvas id="chart_canvas"></canvas>
                      </div>
                  </div>        
                  </div>          
                </div>
              </div>
         </div>
    <!-- my stuff-->
    <script src="index.js"></script>
    </body>
</html>