From be1e8bc00f0a05bd1422b5622ea0319ae90ff71c Mon Sep 17 00:00:00 2001
From: Darshan Gada <gadadarshan@gmail.com>
Date: Sun, 6 Sep 2020 16:27:10 +0530
Subject: [PATCH] Improve Demo (#105)

* NEW: Improved Demo WIP
* Attach More info modal
* Finalize Demo
* clear cities if country selection changed.
---
 docs/css/app.css | 121 ++++++++++++-----------
 docs/index.html  | 249 +++++++++++++++++++++++++----------------------
 docs/js/app.js   | 243 +++++++++++++++++++++++++++++++++++++--------
 docs/sw.js       |   2 +-
 4 files changed, 399 insertions(+), 216 deletions(-)

diff --git a/docs/css/app.css b/docs/css/app.css
index 69c5c1025..df20dcd8f 100755
--- a/docs/css/app.css
+++ b/docs/css/app.css
@@ -1,78 +1,87 @@
 body {
-  padding-top: 56px;
+    padding-top: 56px;
 }
 
-th a, th a:hover {
-  color: #000;
+td:hover {
+    background: #fafafa;
 }
 
-.dynatable-page-link {
-    display: inline-block;
-    font-weight: 400;
-    color: #212529;
-    text-align: center;
-    vertical-align: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    background-color: transparent;
-    border: 1px solid transparent;
-    padding: .375rem .75rem;
-    font-size: 1rem;
-    line-height: 1.5;
-    border-radius: .25rem;
-    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-    color: #fff !important;
-    background-color: #007bff;
-    border-color: #007bff;
-    cursor: pointer;
+/* Github Button */
+.github {
+    padding: 8px 12px;
+    border-radius: 50px;
+    color: #fff;
+    display: inline-flex;
+    font-weight: 600;
+    align-items: center;
+    justify-content: center;
 }
 
-input:focus {
-    color: #495057;
-    background-color: #fff;
-    border-color: #80bdff;
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
+.github svg {
+    width: 24px;
+    flex-shrink: 0;
+    margin-right: 6px;
 }
 
-input, select {
-    height: calc(1.5em + .75rem + 2px);
-    padding: .375rem .75rem;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: #495057;
-    background-color: #fff;
-    background-clip: padding-box;
-    border: 1px solid #ced4da;
-    border-radius: .25rem;
-    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+/* Tooltip */
+.tooltip .tooltip-text {
+    visibility: hidden;
+    text-align: center;
+    padding: 2px 6px;
+    position: absolute;
+    z-index: 100;
 }
 
-select {
-    word-wrap: normal;
+.tooltip:hover .tooltip-text {
+    visibility: visible;
 }
 
-.dynatable-page-link:hover {
-    color: #fff;
-    background-color: #0069d9;
-    border-color: #0062cc;
+/* Code Formatting */
+pre {
+    font-family: ibm-plex-mono, Consolas, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New';
+    overflow: hidden;
+    background: rgb(28, 29, 33);
+    color: rgb(192, 197, 206);
+    padding: 1rem;
+    border-radius: 6px;
+    font-size: 13px
 }
 
-.dynatable-pagination-links span, .dynatable-pagination-links li {
-    margin: 0 5px 0 0;
+/* Github Corner */
+.github-corner:hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
 }
 
-.dynatable-per-page, .dynatable-record-count {
-    float: left;
+@keyframes octocat-wave {
+
+    0%,
+    100% {
+        transform: rotate(0);
+    }
+
+    20%,
+    60% {
+        transform: rotate(-25deg);
+    }
+
+    40%,
+    80% {
+        transform: rotate(10deg);
+    }
 }
 
-.dynatable-per-page-label {
-    margin: 0 10px;
+@media (max-width: 500px) {
+    .github-corner:hover .octo-arm {
+        animation: none;
+    }
+
+    .github-corner .octo-arm {
+        animation: octocat-wave 560ms ease-in-out;
+    }
 }
 
-.cities, .countries, .states {
-    width: 100%;
+/* Hidden Element */
+textarea {
+    position: absolute;
+    left: -100%;
 }
diff --git a/docs/index.html b/docs/index.html
index 12a127f70..24dc87739 100755
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,146 +2,161 @@
 <html lang="en">
 
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="">
-    <meta name="author" content="">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="" />
+    <meta name="author" content="" />
 
     <title>Country State City Demo</title>
 
     <!-- Vendor CSS -->
-    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-    <link href="vendor/dynatable/css/jquery.dynatable.css" rel="stylesheet">
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
 
     <!-- Custom Styles -->
-    <link href="css/app.css" rel="stylesheet">
-
+    <link href="css/app.css" rel="stylesheet" />
 </head>
 
-<body>
-
-    <a href="https://github.com/dr5hn/countries-states-cities-database" class="github-corner" aria-label="View source on GitHub">
-        <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0; z-index: 9999;" aria-hidden="true">
-            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
-            <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
-            <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
-        </svg>
-    </a>
-    <style>
-        .github-corner:hover .octo-arm {
-            animation: octocat-wave 560ms ease-in-out
-        }
-
-        @keyframes octocat-wave {
-
-            0%,
-            100% {
-                transform: rotate(0)
-            }
-
-            20%,
-            60% {
-                transform: rotate(-25deg)
-            }
-
-            40%,
-            80% {
-                transform: rotate(10deg)
-            }
-        }
-
-        @media (max-width:500px) {
-            .github-corner:hover .octo-arm {
-                animation: none
-            }
-
-            .github-corner .octo-arm {
-                animation: octocat-wave 560ms ease-in-out
-            }
-        }
-    </style>
-
+<body class="bg-grey-light font-sans leading-normal tracking-normal">
     <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
-        <div class="container">
-            <a class="navbar-brand" href="#">Country State City DB Demo</a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse"  data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
+    <nav class="bg-indigo-600 p-2 mt-0 fixed w-full z-10 top-0">
+        <div class="container mx-auto flex flex-wrap items-center">
+            <div class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-bold">
+                <div class="text-white no-underline hover:text-white hover:no-underline">
+                    <span class="text-2xl pl-2">🌍 Country State City DB Demo</span>
+                </div>
+            </div>
+            <div class="flex w-full content-center justify-between md:w-1/2 md:justify-end">
+                <a href="https://github.com/dr5hn/countries-states-cities-database" class="github" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"></path></svg>GitHub</a>
+            </div>
         </div>
     </nav>
 
     <!-- Page Content -->
-    <div class="container mt-3 text-center">
-        <div class="btn-group mb-3" role="group">
-            <button type="button" class="btn btn-primary active toggle" data-toggle="countries">Countries</button>
-            <button type="button" class="btn btn-success toggle" data-toggle="states">State</button>
-            <button type="button" class="btn btn-danger toggle" data-toggle="cities">Cities</button>
-        </div>
-        <div class="row">
-            <div class="countries">
-                <table id="countries" class="table table-striped table-sm table-bordered">
-                    <thead>
-                        <tr>
-                            <th>id</th>
-                            <th>name</th>
-                            <th>iso3</th>
-                            <th>iso2</th>
-                            <th>phone_code</th>
-                            <th>capital</th>
-                            <th>currency</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                </table>
-            </div>
-            <div class="states" style="display:none">
-                <table id="states" class="table table-striped table-sm table-bordered">
-                    <thead>
-                        <tr>
-                            <th>id</th>
-                            <th>name</th>
-                            <th>country_id</th>
-                            <th>country_code</th>
-                            <th>state_code</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                </table>
+    <div class="container mx-auto flex flex-wrap py-6 overflow-hidden">
+        <section class="w-full md:w-1/3 flex flex-col px-3">
+            <table id="countries" class="table-auto">
+                <thead>
+                    <tr>
+                        <th class="border px-4 py-2 items-left">
+                            Countries
+                        </th>
+                    </tr>
+                    <tr>
+                        <th class="border px-4 py-2">
+                            <input id="search-countries" type="search"
+                                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                                onkeyup="filter('countries')" placeholder="Search Countries..">
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="countries-tb overflow-y-scroll">
+                    <!-- Filled via JS -->
+                </tbody>
+            </table>
+        </section>
+        <section class="w-full md:w-1/3 flex flex-col px-3">
+            <table id="states" class="table-auto">
+                <thead>
+                    <tr>
+                        <th class="border px-4 py-2">
+                            States
+                        </th>
+                    </tr>
+                    <tr>
+                        <th class="border px-4 py-2">
+                            <input id="search-states" type="search"
+                                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                                onkeyup="filter('states')" placeholder="Search States..">
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="states-tb">
+                    <tr>
+                        <td class="border px-4 py-2">
+                            Select a country
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+        <section class="w-full md:w-1/3 flex flex-col px-3">
+            <table id="cities" class="table-auto">
+                <thead>
+                    <tr>
+                        <th class="border px-4 py-2">
+                            Cities
+                        </th>
+                    </tr>
+                    <tr>
+                        <th class="border px-4 py-2">
+                            <input id="search-cities" type="search"
+                                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                                onkeyup="filter('cities')" placeholder="Search Cities..">
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="cities-tb">
+                    <tr>
+                        <td class="border px-4 py-2">
+                            Select a state
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+    </div>
+    <!-- /.container -->
+
+    <!--Modal-->
+    <div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
+        <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
+        <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
+            <div
+                class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
+                <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                    viewBox="0 0 18 18">
+                    <path
+                        d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
+                    </path>
+                </svg>
+                <span class="text-sm">(Esc)</span>
             </div>
-            <div class="cities" style="display:none">
-                <table id="cities" class="table table-striped table-sm table-bordered">
-                    <thead>
-                        <tr>
-                            <th>id</th>
-                            <th>name</th>
-                            <th>state_id</th>
-                            <th>state_code</th>
-                            <th>country_id</th>
-                            <th>country_code</th>
-                            <th>latitude</th>
-                            <th>longitude</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                </table>
+
+            <!-- Add margin if you want to see some of the overlay behind the modal-->
+            <div class="modal-content py-4 text-left px-6">
+                <!--Title-->
+                <div class="flex justify-between items-center pb-3">
+                    <p class="text-2xl font-bold modal-title"></p>
+
+                    <div class="modal-close cursor-pointer z-50">
+                        <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                            viewBox="0 0 18 18">
+                            <path
+                                d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
+                            </path>
+                        </svg>
+                    </div>
+                </div>
+
+                <!--Body-->
+                <pre id="modal-code"></pre>
+
+                <!--Footer-->
+                <div class="flex justify-end pt-2">
+                    <button
+                        class="bg-indigo-500 hover:bg-indigo-700 text-sm text-white p-3 px-4 rounded-lg copy-to-clipboard"
+                        onclick="copyMeOnClipboard()">Copy 📋</button>
+                </div>
             </div>
         </div>
-        <!-- /.row -->
     </div>
-    <!-- /.container -->
 
     <!-- Vendor JS -->
     <script src="vendor/jquery/jquery.min.js"></script>
-    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
-    <script src="vendor/dynatable/js/jquery.dynatable.js"></script>
+    <script src="https://unpkg.com/lokijs@^1.5/build/lokijs.min.js"></script>
 
     <!-- Custom Script -->
     <script src="js/app.js"></script>
-
 </body>
 
 </html>
diff --git a/docs/js/app.js b/docs/js/app.js
index 2f3600436..d33f84eb8 100644
--- a/docs/js/app.js
+++ b/docs/js/app.js
@@ -1,52 +1,211 @@
 // check see if your browser supports service workers
-if ('serviceWorker' in navigator) {
-    navigator.serviceWorker
-        // register the service worker script
-        .register('./sw.js')
-        // using promises tell us if successful or there was an error
-        .then(reg => {console.info('Service Worker registration successful: ', reg)})
-        .catch(err => {console.warn('Service Worker setup failed: ', err)});
-}
+// if ('serviceWorker' in navigator) {
+//     navigator.serviceWorker
+//         // register the service worker script
+//         .register('./sw.js')
+//         // using promises tell us if successful or there was an error
+//         .then(reg => {console.info('Service Worker registration successful: ', reg)})
+//         .catch(err => {console.warn('Service Worker setup failed: ', err)});
+// }
 
-$(function () {
-    function initializeDyna(data, target) {
-        var $dynaConfig = {
-            inputs: {
-                queryEvent: 'blur change keyup',
-                processingText: 'Processing...',
-                multisort: ['ctrlKey', 'shiftKey', 'metaKey']
-            },
-            dataset: {
-                records: data,
-                perPageDefault: 15,
-                perPageOptions: [15, 20, 50, 100],
-                sortTypes: {
-                    'id': 'number'
-                }
-            }
-        };
-        $('#' + target).dynatable($dynaConfig);
-    }
+var db = new loki('csc.db');
 
-    $.getJSON('https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/countries.json')
-        .done(function (data) {
-            initializeDyna(data, 'countries');
+const countriesJSON = 'https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/countries.json';
+const statesJSON = 'https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/states.json';
+const citiesJSON = 'https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/cities.json';
+
+async function initializeData() {
+  var countries = db.getCollection("countries");
+  if (!countries) {
+    countries = db.addCollection('countries');
+    await fetch(countriesJSON)
+      .then(response => response.json())
+      .then(async (data) => {
+        await data.forEach((c) => {
+          countries.insert(c);
+          $('.countries-tb').append(`
+            <tr>
+              <td class="border px-4 py-2">
+                ${c.emoji} ${c.name}  <span class="inline-block bg-gray-200 rounded-full px-3 text-sm font-semibold text-gray-700">${c.iso2}</span> <button class="tooltip inline-block align-middle float-right" onclick="filterStates(${c.id})"><svg viewBox="0 0 20 20" fill="currentColor" class="arrow-circle-right w-6 h-6 text-pink-600"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg><span class="tooltip-text bg-indigo-600 rounded text-white text-sm -mt-12">Show States</span></button> <button class="tooltip inline-block align-middle float-right" onclick="toggleModal(${c.id}, 'countries')"><svg viewBox="0 0 20 20" fill="currentColor" class="information-circle w-6 h-6 text-blue-600"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg><span class="tooltip-text bg-indigo-600 rounded text-white text-sm -mt-12">More Details</span></button>
+              </td>
+            </tr>
+          `);
         });
+      });
+  }
 
-    $.getJSON('https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/states.json')
-        .done(function (data) {
-            initializeDyna(data, 'states');
+  var states = db.getCollection("states");
+  if (!states) {
+    states = db.addCollection('states');
+    await fetch(statesJSON)
+      .then(response => response.json())
+      .then(async (data) => {
+        await data.forEach((d) => {
+          states.insert(d);
         });
+      });
+  }
 
-    $.getJSON('https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/cities.json')
-        .done(function (data) {
-            initializeDyna(data, 'cities');
+  var cities = db.getCollection("cities");
+  if (!cities) {
+    cities = db.addCollection('cities');
+    await fetch(citiesJSON)
+      .then(response => response.json())
+      .then(async (data) => {
+        await data.forEach((d) => {
+          cities.insert(d);
         });
+      });
+  }
+}
 
-    $(document).on('click', '.toggle', function() {
-        $('.toggle').removeClass('active');
-        $('.cities, .countries, .states').fadeOut();
-        $(this).addClass('active');
-        $('.'+$(this).data('toggle')).fadeIn();
+initializeData();
+
+async function filterStates($cid = null) {
+  let statesColl = db.getCollection("states");
+  let states = await statesColl.find({ country_id: parseInt($cid) });
+  let $states = $('.states-tb');
+  $states.html('');
+  $('.cities-tb').html('');
+  if (states.length) {
+    await states.forEach((s) => {
+      $states.append(`
+        <tr>
+          <td class="border px-4 py-2">
+            ${s.name}  <span class="inline-block bg-gray-200 rounded-full px-3 text-sm font-semibold text-gray-700">${s.state_code}</span> <button class="tooltip inline-block align-middle float-right" onclick="filterCities(${s.id})"><svg viewBox="0 0 20 20" fill="currentColor" class="arrow-circle-right w-6 h-6 text-pink-600"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg><span class="tooltip-text bg-indigo-600 rounded text-white text-sm -mt-12">Show Cities</span></button> <button class="tooltip inline-block align-middle float-right" onclick="toggleModal(${s.id}, 'states')"><svg viewBox="0 0 20 20" fill="currentColor" class="information-circle w-6 h-6 text-blue-600"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg><span class="tooltip-text bg-indigo-600 rounded text-white text-sm -mt-12">More Details</span></button>
+          </td>
+        </tr>
+      `);
     });
-});
+  } else {
+    $states.append(`
+        <tr>
+          <td class="border px-4 py-2">
+            No States Found.
+          </td>
+        </tr>
+      `);
+  }
+}
+
+async function filterCities($sid = null) {
+  let citiesColl = db.getCollection("cities");
+  let cities = await citiesColl.find({ state_id: parseInt($sid) });
+  let $cities = $('.cities-tb');
+  $cities.html('');
+  if (cities.length) {
+    await cities.forEach((c) => {
+      $cities.append(`
+        <tr>
+          <td class="border px-4 py-2">
+            ${c.name} <button class="tooltip inline-block align-middle float-right" onclick="toggleModal(${c.id}, 'cities')"><svg viewBox="0 0 20 20" fill="currentColor" class="information-circle w-6 h-6 text-blue-600"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg><span class="tooltip-text bg-indigo-600 rounded text-white text-sm -mt-12">More Details</span></button>
+          </td>
+        </tr>
+      `);
+    });
+  } else {
+    $cities.append(`
+        <tr>
+          <td class="border px-4 py-2">
+            No Cities Found.
+          </td>
+        </tr>
+      `);
+  }
+}
+
+function filter(type) {
+  // Declare variables
+  var input, filter, table, tr, td, i, txtValue;
+  input = document.getElementById('search-' + type);
+  filter = input.value.toUpperCase();
+  table = document.getElementById(type);
+  tr = table.getElementsByTagName("tr");
+
+  // Loop through all table rows, and hide those who don't match the search query
+  for (i = 0; i < tr.length; i++) {
+    td = tr[i].getElementsByTagName("td")[0];
+    if (td) {
+      txtValue = td.textContent || td.innerText;
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        tr[i].style.display = "";
+      } else {
+        tr[i].style.display = "none";
+      }
+    }
+  }
+}
+
+// Modal
+const overlay = document.querySelector('.modal-overlay')
+overlay.addEventListener('click', toggleModal)
+
+var closemodal = document.querySelectorAll('.modal-close')
+for (var i = 0; i < closemodal.length; i++) {
+  closemodal[i].addEventListener('click', toggleModal)
+}
+
+document.onkeydown = function (evt) {
+  evt = evt || window.event
+  var isEscape = false
+  if ("key" in evt) {
+    isEscape = (evt.key === "Escape" || evt.key === "Esc")
+  } else {
+    isEscape = (evt.keyCode === 27)
+  }
+  if (isEscape && document.body.classList.contains('modal-active')) {
+    toggleModal()
+  }
+};
+
+async function toggleModal($id = null, $type = null) {
+  const body = document.querySelector('body')
+  const modal = document.querySelector('.modal')
+  modal.classList.toggle('opacity-0')
+  modal.classList.toggle('pointer-events-none')
+  body.classList.toggle('modal-active')
+
+  if ($id && $type) {
+    let content = { name: '' };
+    if ($type == 'countries') {
+      let countries = db.getCollection($type);
+      let country = await countries.findOne({ id: parseInt($id) });
+      delete country.$loki;
+      delete country.meta;
+      content = { ...country };
+    } else if ($type == 'states') {
+      let states = db.getCollection($type);
+      let state = await states.findOne({ id: parseInt($id) });
+      delete state.$loki;
+      delete state.meta;
+      content = { ...state };
+    } else if ($type == 'cities') {
+      let cities = db.getCollection($type);
+      let city = await cities.findOne({ id: parseInt($id) });
+      delete city.$loki;
+      delete city.meta;
+      content = { ...city };
+    }
+    $('.modal-title').html(content.name);
+    $('#modal-code').html(JSON.stringify(content, undefined, 2));
+  }
+}
+
+// Copy to clipboard
+const textArea = document.createElement('textarea');
+const copyMeOnClipboard = () => {
+  const copyText = document.getElementById("modal-code").textContent;
+  textArea.textContent = copyText;
+  document.body.append(textArea);
+  textArea.setSelectionRange(0, 99999); // used for mobile phone
+  textArea.select();
+  document.execCommand("copy");
+  $('.copy-to-clipboard').text('Copied 🎉');
+  $('.copy-to-clipboard').addClass('opacity-50 cursor-not-allowed');
+  setTimeout(() => {
+    $('.copy-to-clipboard').text('Copy 📋');
+    $('.copy-to-clipboard').removeClass('opacity-50 cursor-not-allowed');
+  }, 3000);
+}
+
+
diff --git a/docs/sw.js b/docs/sw.js
index 2588b174e..dfaa7eec1 100644
--- a/docs/sw.js
+++ b/docs/sw.js
@@ -29,7 +29,7 @@ self.addEventListener('activate', function (event) {
             return Promise.all(
                 // Get all the items that are stored under a different cache name than the current one
                 cacheNames.filter(function (cacheName) {
-                    return cacheName != 'countrystatecity';
+                    return cacheName == 'countrystatecity';
                 }).map(function (cacheName) {
                     // Delete the items
                     return caches.delete(cacheName);