fixed nav stacking when window narrow

Much better error reporting smaller tour modal
Mattk70 · Mar 6, 2024 · 8d3c178 · 8d3c178
1 parent daa196e
commit 8d3c178
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 15 deletions.
diff --git a/Help/settings.html b/Help/settings.html
@@ -54,7 +54,7 @@
                 You may use a different custom list for both BirdNET and Chirpity models. The format for a 
                 custom list file is "scientific name_common name", with each species on a new line. You can export a starting
                 list in the correct format from the Help menu, using the "<i>What species are detected?</i>" link. 
-            </p>
+
             <p><i>If you wish to see the full list of classes each model was trained on, check the Help menu &gt; <b>What species are detected?</b></i>.</p>
         </td>
     </tr>

diff --git a/index.html b/index.html
@@ -440,7 +440,7 @@ <h6 class="fs-6">Audio Export:</h6>
         </div>
     </div>      
     <!-- The modal for the tour -->
-    <div class="modal modal-lg modal-fade" id="tourModal" tabindex="-1" aria-labelledby="tourModalLabel" aria-hidden="true">
+    <div class="modal modal-fade" id="tourModal" tabindex="-1" aria-labelledby="tourModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-body">
@@ -540,7 +540,7 @@ <h5>Saved Records</h5>
     </div>
     <!-- Navigation bar -->
     <div id="navPadding" class="position-absolute top-0 w-100">
-        <nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="primary_nav_wrap">
+        <nav class="navbar navbar-expand navbar-dark bg-dark" id="primary_nav_wrap">
             <div class="container-fluid">
             <div id="main_nav">
                 <ul class="navbar-nav">

diff --git a/js/ui.js b/js/ui.js
@@ -1,3 +1,6 @@
+const ID_SITE = 2;
+
+
 let seenTheDarkness = false, shownDaylightBanner = false, LOCATIONS, locationID = undefined;
 const startTime = performance.now();
 let LABELS = [], DELETE_HISTORY = [];
@@ -11,7 +14,7 @@ console.warn = function(message) {
     originalWarn.apply(console, arguments);
 
     // Track the warning message using your tracking function
-    track('Warnings', message);
+    track('Warnings', arguments[0], arguments[1]);
 };
 
 // Override console.error to intercept and track errors
@@ -20,16 +23,34 @@ console.error = function(message) {
     originalError.apply(console, arguments);
 
     // Track the error message using your tracking function
-    track('Errors', message);
+    track('Errors', arguments[0], arguments[1]);
 };
 // Implement error handling in the worker
-self.onerror = function (message) {
+window.onerror = function (message) {
     //split the message back to message & stack
     const [msg, stack] = message.split('|')
     // Send an error message
-    track('Unhandled%20Worker%20Error', msg, stack);
+    track('Unhandled UI Error', msg, stack);
 };
 
+window.addEventListener('unhandledrejection', function(event) {
+    // Extract the error message and stack trace from the event
+    const errorMessage = event.reason.message;
+    const stackTrace = event.reason.stack;
+
+    // Track the unhandled promise rejection
+    track('Unhandled UI Promise Rejection', errorMessage, stackTrace);
+});
+
+window.addEventListener('handledrejection', function(event) {
+    // Extract the error message and stack trace from the event
+    const errorMessage = event.reason.message;
+    const stackTrace = event.reason.stack;
+
+    // Track the unhandled promise rejection
+    track('Handled UI Promise Rejection', errorMessage, stackTrace);
+});
+
 const STATE = {
     mode: 'analyse',
     analysisDone: false,
@@ -922,7 +943,7 @@ function fetchLocationAddress(lat, lon) {
         fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lon}&zoom=14`)
         .then(response => {
             if (!response.ok) {
-                console.warn('Network error: ' + JSON.stringify(response));
+                console.warn('Network error: ', response.status, response.url );
 
             }
             return response.json()
@@ -1594,7 +1615,7 @@ window.onload = async () => {
         doNotTrack.checked = !config.track;
         if (config.track) {
             const {width, height} = window.screen;
-            fetch(`https://analytics.mattkirkland.co.uk/matomo.php?idsite=2&rand=${Date.now()}&rec=1&uid=${config.UUID}&apiv=1
+            fetch(`https://analytics.mattkirkland.co.uk/matomo.php?idsite=${ID_SITE}&rand=${Date.now()}&rec=1&uid=${config.UUID}&apiv=1
                     &res=${width}x${height}
                     &dimension1=${config.model}
                     &dimension2=${config.list}
@@ -4313,7 +4334,7 @@ DOM.gain.addEventListener('input', () => {
                 };
             }
             updatePrefs();
-            const value = element.hasAttribute("checked") ? element.checked : element.value;
+            const value = element.type === "checkbox" ? element.checked : element.value;
             track('Settings Change', target, value);
         }
     })
@@ -4367,7 +4388,7 @@ function track(event, action, name, value){
     name = name ? `&e_n=${name}` : '';
     value = value ? `&e_v=${value}` : '';
         fetch(`https://analytics.mattkirkland.co.uk/matomo.php?h=${t.getHours()}&m=${t.getMinutes()}&s=${t.getSeconds()}
-        &action_name=Settings%20Change&idsite=2&rand=${Date.now()}&rec=1&uid=${config.UUID}&apiv=1
+        &action_name=Settings%20Change&idsite=${ID_SITE}&rand=${Date.now()}&rec=1&uid=${config.UUID}&apiv=1
         &e_c=${event}&e_a=${action}${name}${value}`)
         .then(response => {
             if (! response.ok) throw new Error('Network response was not ok', response);

diff --git a/js/worker.js b/js/worker.js
@@ -1,3 +1,6 @@
+const ID_SITE = 2;
+
+
 const { ipcRenderer } = require('electron');
 const fs = require('node:fs');
 const wavefileReader = require('wavefile-reader');
@@ -26,7 +29,7 @@ console.warn = function(message) {
     originalWarn.apply(console, arguments);
 
     // Track the warning message using your tracking function
-    track('Warnings', message);
+    track('Warnings', arguments[0], arguments[1]);
 };
 
 // Override console.error to intercept and track errors
@@ -35,16 +38,34 @@ console.error = function(message) {
     originalError.apply(console, arguments);
 
     // Track the error message using your tracking function
-    track('Errors', message);
+    track('Handled Errors', arguments[0], arguments[1]);
 };
 // Implement error handling in the worker
 self.onerror = function (message) {
     //split the message back to message & stack
     const [msg, stack] = message.split('|')
     // Send an error message
-    track('Unhandled%20Worker%20Error', msg, stack);
+    track('Unhandled Worker Errors', msg, stack);
 };
 
+self.addEventListener('unhandledrejection', function(event) {
+    // Extract the error message and stack trace from the event
+    const errorMessage = event.reason.message;
+    const stackTrace = event.reason.stack;
+
+    // Track the unhandled promise rejection
+    track('Unhandled Worker Promise Rejections', errorMessage, stackTrace);
+});
+
+self.addEventListener('handledrejection', function(event) {
+    // Extract the error message and stack trace from the event
+    const errorMessage = event.reason.message;
+    const stackTrace = event.reason.stack;
+
+    // Track the unhandled promise rejection
+    track('Handled Worker Promise Rejections', errorMessage, stackTrace);
+});
+
 //Object will hold files in the diskDB, and the active timestamp from the most recent selection analysis.
 const STATE = new State();
 
@@ -3182,7 +3203,7 @@ function track(event, action, name, value){
     value = value ? `&e_v=${value}` : '';
     const state = STATE ? STATE.UUID : 0
     const errURL = `https://analytics.mattkirkland.co.uk/matomo.php?h=${t.getHours()}&m=${t.getMinutes()}&s=${t.getSeconds()}
-    &action_name=${event}&idsite=2&rand=${Date.now()}&rec=1&uid=${state}&apiv=1
+    &action_name=${event}&idsite=${ID_SITE}&rand=${Date.now()}&rec=1&uid=${state}&apiv=1
     &e_c=${event}&e_a=${action}${name}${value}`;
     console.log(errURL);
     fetch(errURL)