Add download buttons to information modal

OpenAcousticDevices · Sep 12, 2024 · 911fbc7 · 911fbc7
1 parent a7c129b
commit 911fbc7
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -46,6 +46,7 @@ <h3 style="margin-bottom: 5px; display: inline-block;">AudioMoth Play</h3>
                     <button class="btn btn-primary" id="disabled-file-button" style="vertical-align: middle;" disabled>Select File</button>
                     <span id="file-span" style="margin-left: 10px; vertical-align: middle; display: none;"></span>
                     <span id="slice-reselect-span" style="margin-left: 2px; vertical-align: middle; display: none;">(<a href="#" id="slice-reselect-link">00:00:00 - 00:00:00</a>)</span>
+                    <a href="#" id="file-information-link" style="margin-left: 10px; vertical-align: middle; display: none;" data-toggle="modal" data-target="#information-modal">Show file information</a>
                     <a href="#" id="file-information-link" style="margin-left: 10px; vertical-align: middle; display: none;">Show file information</a>
                     <span class="loading" id="loading-span" style="margin-left: 10px; vertical-align: middle;">Loading</span>
                     <span id="resampled-span" style="color: blue; vertical-align: middle; margin-left: 10px; display: none;"></span>
@@ -803,6 +804,10 @@ <h5 class="modal-title" id="commentModalLabel">File Information</h5>
                             <span id="comment-span" style="float: left; clear: left; margin-bottom: 10px;">-</span>
                             <div id="guano-holder" style="float: left; clear: left;"></div>
                         </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-primary" id="information-download-button">Download</button>
+                            <button type="button" class="btn btn-primary" id="information-clipboard-button">Copy to Clipboard</button>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/scripts/constants.js b/scripts/constants.js
@@ -5,7 +5,7 @@
  *****************************************************************************/
 
 // TODO: Update this with changes, along with the version in worker.js
-const VERSION = 2;
+const VERSION = 3;
 
 /* Regex used to extract timestamp from header comment */
 

diff --git a/scripts/index.js b/scripts/index.js
@@ -44,10 +44,6 @@ const launchAppLink = document.getElementById('launch-app-link');
 const FILLER_SAMPLE_RATE = 384000;
 const FILLER_SAMPLE_COUNT = FILLER_SAMPLE_RATE * 60;
 
-// Body element
-
-const body = document.getElementsByTagName('body')[0];
-
 // Error display elements
 
 const errorSpan = document.getElementById('error-span');
@@ -69,16 +65,12 @@ const loadingSpan = document.getElementById('loading-span');
 let isExampleFile = true;
 
 // File information modal
-const informationModalElem = document.getElementById('information-modal');
-const informationModal = new bootstrap.Modal(informationModalElem, {
-    backdrop: 'static',
-    keyboard: false
-});
 const informationModalDialog = document.getElementById('information-modal-dialog');
-const informationModalCloseButton = document.getElementById('information-modal-close-button');
 const artistSpan = document.getElementById('artist-span');
 const commentSpan = document.getElementById('comment-span');
 const guanoHolder = document.getElementById('guano-holder');
+const informationDownloadButton = document.getElementById('information-download-button');
+const informationClipboardButton = document.getElementById('information-clipboard-button');
 
 const DEFAULT_INFORMATION_MODAL_WIDTH = 400;
 const INFORMATION_MODAL_PADDING = 40;
@@ -242,6 +234,7 @@ let firstFile = true;
 let artist = '';
 let comment = '';
 let possibleGuano = false;
+let guanoData = [];
 
 let resampledFile = false;
 
@@ -440,7 +433,7 @@ async function displaySpans (index) {
 
             // If GUANO data exists, check the widest line fits in the window
 
-            let guanoData;
+            guanoData = [];
 
             guanoHolder.innerHTML = '';
 
@@ -504,6 +497,9 @@ async function displaySpans (index) {
             artistSpan.style.display = (artist === '') ? 'none' : '';
             commentSpan.style.display = (comment === '') ? 'none' : '';
 
+            informationDownloadButton.disabled = artist === '';
+            informationClipboardButton.disabled = artist === '';
+
         }
 
         sliceReselectSpan.style.display = showReselectLink ? '' : 'none';
@@ -533,6 +529,47 @@ async function displaySpans (index) {
 
 }
 
+function getInformationString () {
+
+    let str = '';
+
+    str += artist + '\n';
+    str += comment + '\n';
+
+    for (let i = 0; i < guanoData.length; i++) {
+
+        str += guanoData[i][0] + ': ' + guanoData[i][1] + '\n';
+
+    }
+
+    return str;
+
+}
+
+informationDownloadButton.addEventListener('click', () => {
+
+    const downloadElement = document.createElement('a');
+    downloadElement.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(getInformationString()));
+
+    const infoFileName = fileSpan.innerText.replace(/\.wav|\.WAV/, '.txt');
+
+    downloadElement.setAttribute('download', infoFileName);
+
+    downloadElement.style.display = 'none';
+    document.body.appendChild(downloadElement);
+
+    downloadElement.click();
+
+    document.body.removeChild(downloadElement);
+
+});
+
+informationClipboardButton.addEventListener('click', () => {
+
+    navigator.clipboard.writeText(getInformationString());
+
+});
+
 /**
  * Update UI based on which threshold type is selected
  */
@@ -5133,24 +5170,6 @@ launchAppLink.addEventListener('click', () => {
 
 });
 
-// Enable/disable dragging to select when the information modal is open/closed
-
-fileInformationLink.addEventListener('click', (e) => {
-
-    e.preventDefault();
-
-    body.classList.remove('body-no-select');
-
-    informationModal.show();
-
-});
-
-informationModalCloseButton.addEventListener('click', () => {
-
-    body.classList.add('body-no-select');
-
-});
-
 function loadPage () {
 
     // Start zoom and offset level on default values

diff --git a/worker.js b/worker.js
@@ -6,7 +6,7 @@
 
 /* global self, caches, fetch */
 
-const VERSION = '2';
+const VERSION = '3';
 const cacheName = 'audiomothplay-v' + VERSION;
 
 self.addEventListener('install', (e) => {