From 2efa3d6ff94b7138e8b74b120e0631b537bb2fa6 Mon Sep 17 00:00:00 2001
From: Mattk70 <email@mattkirkland.co.uk>
Date: Sun, 6 Oct 2024 17:51:06 +0100
Subject: [PATCH] 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

---
 css/style.css | 14 +++++++++++++-
 js/ui.js      |  6 +++---
 js/worker.js  |  3 ++-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index 3bc60709..a40402fb 100644
--- 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;
-  }
\ No newline at end of file
+    overflow: hidden;
+  }
+
+  .guano {
+    max-height: 450px;
+    overflow-y: scroll;
+  }
+
+  .guano table {
+    width: 100%;  /* Ensure the table takes full width */
+    table-layout: auto;
+}
\ No newline at end of file
diff --git a/js/ui.js b/js/ui.js
index e33f9d75..0abf712d 100644
--- 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
index eade73ca..bb78d287 100644
--- 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)');