hawk / commit

Added status callbacks to some API methods.

8c91be3205145e36a23aaa0d8dfb3b7d3c6e5651 · Pavel Safronov · 2023-10-13 16:49:02 -0700 · parents 299346ff7acf

Added status callbacks to some API methods.
Added a Clear Cache button to the UI.
Added status report span on the main page.

 public/api.js     | 18 +++++++++++++++---
 public/index.html |  7 ++++++-
 public/main.js    | 28 +++++++++++++++++++++-------
 public/style.css  |  3 ++-
 4 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/public/api.js b/public/api.js
index db2ac28..859eee2 100644
--- a/public/api.js
+++ b/public/api.js
@@ -1,10 +1,13 @@
 const apiExpiry = 3600 * 1000; // 1 hour
 
-async function getAlbums() {
+async function getAlbums(statusCallback) {
     const db = await openDb();
     const cacheKey = 'albums';
     const cachedAlbums = await getWithExpiry(db, cacheKey);
     if (cachedAlbums) {
+        if (statusCallback) {
+            statusCallback(`Retrieved ${cachedAlbums.length} albums`)
+        }
         return cachedAlbums;
     }
 
@@ -19,6 +22,9 @@ async function getAlbums() {
         });
         const data = await response.json();
         albums.push(...data.items);
+        if (statusCallback) {
+            statusCallback(`Retrieved ${albums.length} albums`);
+        }
         url = data.next;
     }
 
@@ -26,11 +32,14 @@ async function getAlbums() {
     return albums;
 }
 
-async function getTracks(albumId) {
+async function getTracks(albumId, statusCallback) {
     const db = await openDb();
     const cacheKey = `tracks-${albumId}`;
     const cachedTracks = await getWithExpiry(db, cacheKey);
     if (cachedTracks) {
+        if (statusCallback) {
+            statusCallback(`Retrieved ${cachedTracks.length} tracks`)
+        }
         return cachedTracks;
     }
 
@@ -45,6 +54,9 @@ async function getTracks(albumId) {
         });
         const data = await response.json();
         tracks.push(...data.items);
+        if (statusCallback) {
+            statusCallback(`Retrieved ${tracks.length} tracks`)
+        }
         url = data.next;
     }
 
@@ -100,4 +112,4 @@ async function pause() {
             Authorization: 'Bearer ' + accessToken
         }
     });
-}
\ No newline at end of file
+}
diff --git a/public/index.html b/public/index.html
index 300fcdc..b717dcd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -83,6 +83,10 @@
                 <button id="search" onclick="searchForMatch()">Search</button>
             </div>
 
+            <div>
+                <span id="status"></span>
+            </div>
+
             <div>
                 <h3>Found songs:</h3>
                 <div id="results"></div>
@@ -91,7 +95,8 @@
         </div>
         <hr />
         <div id="footer">
-            <button id="signout">Sign Out</button>
+            <button id="signout" onclick="signOut()">Sign Out</button>
+            <button id="clear-cache" onclick="clearDb()">Clear Cache</button>
             <div>
                 Hawk version <span id="version"></span>
             </div>
diff --git a/public/main.js b/public/main.js
index c424407..3e9e06a 100644
--- a/public/main.js
+++ b/public/main.js
@@ -34,12 +34,9 @@ if (showSignInButton) {
     setInterval(setCurrentPlayingSong, 5 * 1000);
 }
 
-signOutButton.addEventListener('click', signOut);
-
 async function setCurrentPlayingSong() {
     const currentSongSpan = document.getElementById('current-song');
     const currentTrack = await getPlayingTrack();
-    console.debug(currentTrack);
     if (currentTrack && currentTrack.is_playing) {
         currentSongSpan.innerText = `${currentTrack.item.name} by ${currentTrack.item.artists[0].name}`;
     } else {
@@ -92,14 +89,14 @@ async function searchForMatch() {
 }
 
 async function search(minutes, seconds) {
-    const albums = await getAlbums();
-    console.debug(albums);
+    reportStatus(`Retrieving albums`);
+    const albums = await getAlbums(null);
 
     const foundTracks = [];
     for (let i = 0; i < albums.length; i++) {
         const album = albums[i];
-        const tracks = await getTracks(album.album.id);
-        console.debug(tracks)
+        const tracks = await getTracks(album.album.id, null);
+        reportStatus(`Retrieving tracks for album ${i + 1} of ${albums.length}`)
 
         for (let j = 0; j < tracks.length; j++) {
             const track = tracks[j];
@@ -114,6 +111,8 @@ async function search(minutes, seconds) {
             }
         }
     }
+
+    reportStatus(`Found ${foundTracks.length} track(s)`);
     return foundTracks;
 }
 
@@ -130,4 +129,19 @@ async function pauseOrPlay() {
 async function playChosenSong(trackId) {
     await playTrack(trackId);
     setCurrentPlayingSong();
+}
+
+let statusText = '';
+setInterval(() => {
+    const statusDiv = document.getElementById('status');
+    statusDiv.innerText = statusText;
+}, 1000);
+
+function reportStatus(text) {
+    statusText = text;
+}
+
+async function clearDb() {
+    await deleteDb();
+    window.location.reload();
 }
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index f2debd8..44c9615 100644
--- a/public/style.css
+++ b/public/style.css
@@ -101,7 +101,8 @@ div {
 
 #search,
 #signout,
-#signin {
+#signin,
+#clear-cache {
     border: 2px solid black;
     padding: .5em;
     margin: .5em;