Merge pull request #3 from RAHB-REALTORS-Association/improved-params

Improved parameter handling, URL history
RAHB-REALTORS-Association · Oct 18, 2023 · 0b44247 · 0b44247
2 parents 1c0f8fe + 8c6fdeb
commit 0b44247
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -28,12 +28,12 @@
     <div class="container-fluid mt-5 px-5">
       <div class="d-flex align-items-center justify-content-between mb-2">
         <div class="d-flex align-items-center mb-2">
-          <select class="form-control" id="csvSelect" onchange="loadCSV()" style="width: auto">
+          <select class="form-control" id="csvSelect" style="width: auto">
             <!-- Options will be populated here -->
           </select>
           <a class="btn btn-link ml-2" id="downloadLink"> Download CSV </a>
         </div>
-        <input class="form-control mt-2 w-25" id="searchInput" onkeyup="searchTable()" placeholder="Search Fields" type="text" />
+        <input class="form-control mt-2 w-25" id="searchInput" placeholder="Search Fields" type="text" />
       </div>
       <table class="table table-striped mt-3" id="dataTable">
         <thead>
@@ -49,7 +49,7 @@
         </tbody>
       </table>
     </div>
-    <script src="static/viewer.js?v=202310181052"></script>
+    <script src="static/viewer.js?v=202310181130"></script>
     <footer class="text-center m-5">
       <p><em>The trademarks REALTOR®, REALTORS®, and the REALTOR® logo are controlled by <a href="https://www.crea.ca" target="_blank">The Canadian Real Estate Association</a> (CREA) and identify real estate professionals who are members of CREA.</em></p>
       <p><em>Data Copyright © 2023 <a href="https://www.rahb.ca" target="_blank">REALTORS® Association of Hamilton-Burlington</a> with portions Copyright © 2023 <a href="https://www.reso.org" target="_blank">RESO</a>.</em></p>

diff --git a/static/viewer.js b/static/viewer.js
@@ -4,6 +4,18 @@ function getUrlParameter(name) {
     return url.searchParams.get(name);
 }
 
+function updateUrl(params) {
+    const url = new URL(window.location);
+    for (const [key, value] of Object.entries(params)) {
+        if (value) {
+            url.searchParams.set(key, value);
+        } else {
+            url.searchParams.delete(key);
+        }
+    }
+    window.history.pushState({}, '', url);
+}
+
 // CSV Parsing Function
 function parseCSV(text) {
     let lines = text.split('\n');
@@ -39,6 +51,8 @@ function parseCSV(text) {
 // Implement search functionality
 function searchTable() {
     const input = document.getElementById('searchInput').value.toLowerCase();
+    updateUrl({search: input});
+
     const table = document.getElementById('dataTable');
     const rows = table.getElementsByTagName('tr');
 
@@ -70,31 +84,24 @@ fetch('data/fileList.json')
             select.appendChild(option);
         }
 
-        // Check if 'file' parameter exists in URL
-        const fileParam = getUrlParameter('file');
-        if (fileParam) {
-            document.getElementById('csvSelect').value = fileParam;
-        }
-
-        loadCSV(); // Load the selected or first CSV by default
-
-        // Check if 'search' parameter exists in URL
-        const searchTerm = getUrlParameter('search');
-        if (searchTerm) {
-            document.getElementById('searchInput').value = searchTerm;
-        }
-
-        // Load the CSV and then search the table
+        // Load the CSV file and populate the table
         loadCSV(() => {
-            if (searchTerm) {
+            const searchParam = getUrlParameter('search');
+            // If a search term is specified, trigger the search function
+            if (searchParam) {
+                document.getElementById('searchInput').value = searchParam;
                 searchTable();
             }
         });
     });
 
 // Function to load and display a selected CSV file
 function loadCSV(callback) {
-    const selectedFile = document.getElementById('csvSelect').value;
+    let selectedFile = document.getElementById('csvSelect').value;
+
+    // Update URL
+    updateUrl({file: selectedFile});
+
     document.getElementById('downloadLink').href = `data/${selectedFile}`;
     document.getElementById('downloadLink').textContent = `Download CSV`;
 
@@ -118,4 +125,21 @@ function loadCSV(callback) {
                 callback();
             }
         });
-}
+}
+
+// Attach an event listener to the dropdown
+document.getElementById('csvSelect').addEventListener('change', function() {
+    loadCSV(() => {
+        const searchParam = document.getElementById('searchInput').value;
+        if (searchParam) {
+            searchTable();
+        }
+    }); 
+});
+
+// Attach an event listener to the search input
+document.getElementById('searchInput').addEventListener('keydown', function(event) {
+    if (event.key === "Enter") {
+        searchTable();
+    }
+});