From 403bbda0be893fac65058424aedf5da5d0f17c5c Mon Sep 17 00:00:00 2001
From: Mattk70 <email@mattkirkland.co.uk>
Date: Wed, 18 Oct 2023 18:47:42 +0100
Subject: [PATCH] Improved display of verified records. Added filter icon to
 Results table headers

---
 css/style.css |  1 +
 index.html    | 10 +++-------
 js/ui.js      | 24 ++++++++++++++++++++++--
 main.js       |  2 +-
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/css/style.css b/css/style.css
index 317074ef..56bd7869 100644
--- a/css/style.css
+++ b/css/style.css
@@ -50,6 +50,7 @@ body {
     -webkit-font-smoothing: antialiased;
 }
 
+
 .material-icons {
     font-family: 'Material Icons';
     font-weight: normal;
diff --git a/index.html b/index.html
index cf85fdd2..0a8f58ed 100644
--- a/index.html
+++ b/index.html
@@ -930,16 +930,12 @@ <h5 class="modal-title" id="gotoModalLabel">Set Location</h5>
                     <table id='results' class="text-center table w-100 align-middle">
                         <thead id="resultsHead" class="d-none">
                             <tr class="bg-dark">
-                                <!-- <th class="col">#</th> -->
-                                <th class="time-sort col text-start timeOfDay">Time</th>
-                                <th class="time-sort text-start timestamp pointer">Position</th>
-                                <th id="confidence-sort" class="text-start pointer">Species</th>
+                                <th class="time-sort col text-start timeOfDay" title="Sort results by detection time"><span class="text-muted material-icons-two-tone time-sort-icon">sort</span> Time</th>
+                                <th class="time-sort text-start timestamp pointer" title="Sort results by detection time"><span class="text-muted material-icons-two-tone time-sort-icon">sort</span> Position</th>
+                                <th id="confidence-sort" class="text-start pointer" title="Sort results by detection confidence"><span class="text-muted material-icons-two-tone species-sort-icon  d-none">sort</span> Species</th>
                                 <th class="text-end">Calls</th>
-                                <!-- <th class="col">Play</th> -->
-                                <!-- <th class="col">XC</th> -->
                                 <th class="col">Label</th>
                                 <th class="col text-end">Notes</th>
-                                <!-- <th class="col text-end">Delete</th> -->
                             </tr>
                         </thead>
                         <tbody class="text-dark" id="resultTableBody">
diff --git a/js/ui.js b/js/ui.js
index 87972469..14d343d2 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -2557,6 +2557,11 @@ const updateSummary = ({ summary = [], filterSpecies = '' }) => {
     const old_summary = document.getElementById('summaryTable');
     const buffer = old_summary.cloneNode();
     buffer.innerHTML = summaryHTML;
+    // Make the star icon look good on black
+    const starIcons = buffer.getElementsByClassName('material-icons-two-tone');
+    [...starIcons].forEach(icon =>{
+        icon.classList.add('text-bg-light', 'rounded-5')
+    })
     old_summary.replaceWith(buffer);
     const currentFilter = document.querySelector('#speciesFilter tr.text-warning');
     if (currentFilter) {
@@ -2812,7 +2817,6 @@ async function renderResult({
         const activeTable = active ? 'table-active' : '';
         const labelHTML = label ? tags[label] : '';
         const hide = selection ? 'd-none' : '';
-
         const countIcon = count > 1 ? `<span class="circle pointer" title="Click to view the ${count} detections at this timecode">${count}</span>` : '';
         const XC_type = cname.indexOf('(song)') !== -1 ? "song" : "nocturnal flight call";
         tr += `<tr tabindex="-1" id="result${index}" name="${file}|${position}|${end || position + 3}|${cname}${isUncertain}" class='${activeTable} border-top border-2 border-secondary ${dayNight}'>
@@ -2860,6 +2864,7 @@ const updateResultTable = (row, isFromDB, isSelection) => {
         table.lastElementChild ? table.lastElementChild.insertAdjacentHTML('afterend', row) :
             table.innerHTML = row;
     }
+    //showSortIcon()
 };
 
 const isExplore = () => {
@@ -3000,7 +3005,7 @@ const iconDict = {
     low: '<span class="confidence-row"><span class="confidence bar" style="flex-basis: --%; background: rgba(255,0,0,0.5)">--%</span></span>',
     medium: '<span class="confidence-row"><span class="confidence bar" style="flex-basis: --%; background: #fd7e14">--%</span></span>',
     high: '<span class="confidence-row"><span class="confidence bar" style="flex-basis: --%; background: #198754">--%</span></span>',
-    confirmed: '<span class="material-icons-two-tone text-muted" title="Confirmed Record">star</span>',
+    confirmed: '<span class="material-icons-two-tone" title="Confirmed Record">verified</span>',
 }
 
 
@@ -3222,9 +3227,24 @@ timeSort.forEach(el => {
     });
 })
 
+function showSortIcon() {
+    const timeHeadings = document.getElementsByClassName('time-sort-icon');
+    const speciesHeadings = document.getElementsByClassName('species-sort-icon');
+
+    const sortOrderIncludesDesc = STATE.sortOrder.includes('DESC');
+
+    [...timeHeadings].forEach(heading => {
+        heading.classList.toggle('d-none', sortOrderIncludesDesc);
+    });
+
+    [...speciesHeadings].forEach(heading => {
+        heading.classList.toggle('d-none', !sortOrderIncludesDesc);
+    });
+}
 
 const setSortOrder = (order) => {
     STATE.sortOrder = order;
+    showSortIcon()
     worker.postMessage({ action: 'update-state', sortOrder: order })
     worker.postMessage({
         action: 'filter',
diff --git a/main.js b/main.js
index 6bf527f0..0e8b3356 100644
--- a/main.js
+++ b/main.js
@@ -59,7 +59,7 @@ autoUpdater.on('update-not-available', function (info) {
 });
 
 autoUpdater.on('error', function (err) {
-    logUpdateStatus('Error in auto-updater.');
+    logUpdateStatus('Error in auto-updater:' + err);
 });
 
 autoUpdater.on('download-progress', function (progressObj) {