GUANO popover scrolls if lots of metadata

added fk_constraint to files table so locationIDs are set null if location deleted. Not done archive table migration yet
Mattk70 · Oct 6, 2024 · 2efa3d6 · 2efa3d6
1 parent cf3ba9c
commit 2efa3d6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/css/style.css b/css/style.css
@@ -769,9 +769,21 @@ input[type="range"].vertical {
 
   .guano-popover {
     --bs-popover-max-width: 500px;
+    max-height: 500px;
     --bs-popover-border-color: var(--bs-primary);
     --bs-popover-header-bg: var(--bs-primary);
     --bs-popover-header-color: var(--bs-white);
     --bs-popover-body-padding-x: 1rem;
     --bs-popover-body-padding-y: .5rem;
-  }
+    overflow: hidden;
+  }
+
+  .guano {
+    max-height: 450px;
+    overflow-y: scroll;
+  }
+
+  .guano table {
+    width: 100%;  /* Ensure the table takes full width */
+    table-layout: auto;
+}
diff --git a/js/ui.js b/js/ui.js
@@ -683,7 +683,7 @@ function extractFileNameAndFolder(path) {
  * @returns {string} - HTML string of the formatted Bootstrap table
  */
 function formatAsBootstrapTable(jsonData) {
-    let tableHtml = "<table class='table table-striped table-bordered'><thead class='text-bg-light'><tr><th>Key</th><th>Value</th></tr></thead><tbody>";
+    let tableHtml = "<div class='guano'><table class='table table-striped table-bordered'><thead class='text-bg-light'><tr><th>Key</th><th>Value</th></tr></thead><tbody>";
 
     // Iterate over the key-value pairs in the JSON object
     for (const [key, value] of Object.entries(JSON.parse(jsonData))) {
@@ -700,7 +700,7 @@ function formatAsBootstrapTable(jsonData) {
         tableHtml += '</tr>';
     }
 
-    tableHtml += '</tbody></table>';
+    tableHtml += '</tbody></table></div>';
     return tableHtml;
 }
 function showGUANO(){
@@ -711,7 +711,7 @@ function showGUANO(){
         // Reinitialize the popover to reflect the updated content
         const popover = bootstrap.Popover.getInstance(icon);
         popover.setContent({
-            '.popover-header': 'Guano metadata',
+            '.popover-header': 'GUANO Metadata',
             '.popover-body': formatAsBootstrapTable(STATE.guano)
           });
     } else {

diff --git a/js/worker.js b/js/worker.js
@@ -139,7 +139,8 @@ const createDB = async (file) => {
     const db = archiveMode ? diskDB : memoryDB;
     await db.runAsync('BEGIN');
     await db.runAsync('CREATE TABLE species(id INTEGER PRIMARY KEY, sname TEXT NOT NULL, cname TEXT NOT NULL)');
-    await db.runAsync(`CREATE TABLE files(id INTEGER PRIMARY KEY, name TEXT NOT NULL, duration REAL,filestart INTEGER, locationID INTEGER, archiveName TEXT, metadata TEXT, UNIQUE (name))`);
+    await db.runAsync(`CREATE TABLE files(id INTEGER PRIMARY KEY, name TEXT NOT NULL, duration REAL,filestart INTEGER, locationID INTEGER, archiveName TEXT, metadata TEXT, UNIQUE (name),
+        CONSTRAINT fk_locations FOREIGN KEY (locationID) REFERENCES locations(id) ON DELETE SET NULL`);
     await db.runAsync(`CREATE TABLE locations( id INTEGER PRIMARY KEY, lat REAL NOT NULL, lon  REAL NOT NULL, place TEXT NOT NULL, UNIQUE (lat, lon))`);
     // Ensure place names are unique too
     await db.runAsync('CREATE UNIQUE INDEX idx_unique_place ON locations(lat, lon)');