Improved handling and notification of software update

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file.
 
 ### Changed
 - Moved Roboto font files locally
+- Made notifications clickable with a 3rd optional parameter
 
 ## [1.3.0] Revamped UI
 

app.py

@@ -117,11 +117,6 @@ def check_git_updates():
             ["git", "describe", "--tags", "--abbrev=0"]
         ).strip().decode()
 
-        # Check if there are new commits
-        local_hash = subprocess.check_output(["git", "rev-parse", "HEAD"]).strip()
-        remote_hash = subprocess.check_output(["git", "rev-parse", "origin/main"]).strip()
-        updates_available = local_hash != remote_hash
-
         # Count how many tags the local branch is behind
         tag_behind_count = 0
         if latest_local_tag != latest_remote_tag:
@@ -138,6 +133,10 @@ def check_git_updates():
                     if tag == latest_remote_tag:
                         break
 
+
+        # Check if there are new commits
+        updates_available = latest_remote_tag != latest_local_tag
+
         return {
             "updates_available": updates_available,
             "tag_behind_count": tag_behind_count,  # Tags behind
@@ -1248,4 +1247,4 @@ def update_software():
 if __name__ == '__main__':
     # Auto-connect to serial
     connect_to_serial()
-    app.run(debug=False, host='0.0.0.0', port=8080)
+    app.run(debug=True, host='0.0.0.0', port=8080)

static/css/style.css

@@ -771,12 +771,15 @@ body.playing .bottom-nav {
     color: var(--text-secondary);
 }
 
-#currently-playing-container h2,
+#currently-playing-container h3,
 #currently-playing-container .open-button
 {
     color: var(--text-secondary);
 }
 
+#currently-playing-container h3 {
+    margin: 0;
+}
 
 body:not(.playing) #currently-playing-container {
     display: none;
@@ -813,19 +816,21 @@ body.playing #currently-playing-preview {
 
 body.playing #currently-playing-preview #currentlyPlayingCanvas {
     max-width:80px;
-    padding: 10px;
+    padding: 5px;
 }
 
 body.playing #currently-playing-container:not(.open) .header .fullscreen-button,
 body.playing #currently-playing-container:not(.open) .header .close-button,
-body.playing #currently-playing-container:not(.open) .header h2 {
+body.playing #currently-playing-container:not(.open) .header h3 {
     display: none;
 }
 
 body.playing #currently-playing-container:not(.open) #currently-playing-details{
     flex-grow: 1;
+    flex-basis: 50%;
     align-items: flex-start;
-    margin: 0 0 0 20px;
+    margin: 0 0 0 10px;
+    overflow-y: scroll;
 }
 
 body.playing #currently-playing-container:not(.open) .play-buttons button {
@@ -850,7 +855,7 @@ body.playing #currently-playing-container:not(.open) #play_progress_text {
     border: 1px solid var(--border-primary);
     background: var(--theme-secondary);
     border-radius: 100%;
-    padding: 20px;
+    padding: 10px;
 }
 
 #currently-playing-details {
@@ -1095,7 +1100,7 @@ input[type="number"]:focus {
 
 .notification .close-button {
     color: var(--text-secondary);
-    font-size: 2rem;
+    font-size: 1.5rem;
     top: 0;
     right: 0;
     position: absolute;

static/js/main.js

@@ -14,7 +14,7 @@ const LOG_TYPE = {
 };
 
 // Enhanced logMessage with notification system
-function logMessage(message, type = LOG_TYPE.DEBUG) {
+function logMessage(message, type = LOG_TYPE.DEBUG, clickTargetId = null) {
     const log = document.getElementById('status_log');
     const header = document.querySelector('header');
 
@@ -49,14 +49,27 @@ function logMessage(message, type = LOG_TYPE.DEBUG) {
 
     // Add a close button
     const closeButton = document.createElement('button');
-    closeButton.textContent = '×';
+    closeButton.innerHTML = '<i class="fa-solid fa-xmark"></i>';
     closeButton.className = 'close-button no-bg';
-    closeButton.onclick = () => {
+    closeButton.onclick = (e) => {
+        e.stopPropagation(); // Prevent triggering the clickTarget when the close button is clicked
         notification.classList.remove('show');
         setTimeout(() => notification.remove(), 250); // Match transition duration
     };
     notification.appendChild(closeButton);
 
+    // Attach click event to the notification if a clickTargetId is provided
+    if (clickTargetId) {
+        notification.onclick = () => {
+            const target = document.getElementById(clickTargetId);
+            if (target) {
+                target.click();
+            } else {
+                console.error(`Error: Target with ID "${clickTargetId}" not found`);
+            }
+        };
+    }
+
     // Append the notification to the header
     header.appendChild(notification);
 
@@ -786,12 +799,17 @@ async function checkForUpdates() {
         const response = await fetch('/check_software_update');
         const data = await response.json();
 
-        data.updates_available = true;
-
         // Handle updates available logic
         if (data.updates_available) {
             const updateButton = document.getElementById('update-software-btn');
+            const updateLinkElement = document.getElementById('update_link');
+            const tagLink = `https://github.com/tuanchris/dune-weaver/releases/tag/${data.latest_remote_tag}`;
+
             updateButton.classList.remove('hidden'); // Show the button
+            logMessage("Software Update Available", LOG_TYPE.INFO, 'open-settings-button')
+
+            updateLinkElement.innerHTML = `<a href="${tagLink}" target="_blank">View Release Notes </a>`;
+            updateLinkElement.classList.remove('hidden'); // Show the link
         }
 
         // Update current and latest version in the UI
@@ -799,7 +817,7 @@ async function checkForUpdates() {
         const latestVersionElem = document.getElementById('latest_git_version');
 
         currentVersionElem.textContent = `Current Version: ${data.latest_local_tag || 'Unknown'}`;
-        latestVersionElem.textContent = (data.latest_remote_tag !== data.latest_local_tag)
+        latestVersionElem.textContent = data.updates_available
             ? `Latest Version: ${data.latest_remote_tag}`
             : 'You are up to date!';
 

templates/index.html

@@ -324,6 +324,23 @@
                 </div>
             </section>
 
+            <section class="software version">
+                <div class="header">
+                    <h2>Software Version</h2>
+                </div>
+                <div id="git_version_info">
+                    <div id="current_git_version">Current Version: Unknown</div>
+                    <div id="latest_git_version">Latest Version: Unknown</div>
+                    <div id="update_link" class="hidden"></div>
+                </div>
+                <div class="button-group">
+                    <button id="update-software-btn" class="hidden" onclick="updateSoftware()">
+                        <i class="fa-solid fa-download"></i>
+                        <span>Update Software</span>
+                    </button>
+                </div>
+            </section>
+
             <section class="firmware version">
                 <div class="header">
                     <h2>Firmware Version</h2>
@@ -345,26 +362,11 @@
                     </div>
                     <button id="check_updates_button" onclick="fetchFirmwareInfo()">Check for Updates</button>
                     <button id="update_firmware_button" class="cta" style="display: none;" onclick="updateFirmware()">
-                        <i class="fa-solid fa-file-import"></i>
+                        <i class="fa-solid fa-file-arrow-up"></i>
                         <span>Update Firmware</span>
                     </button>
                 </div>
             </section>
-            <section class="software version">
-                <div class="header">
-                    <h2>Software Version</h2>
-                </div>
-                <div id="git_version_info">
-                    <div id="current_git_version">Current Version: Unknown</div>
-                    <div id="latest_git_version">Latest Version: Unknown</div>
-                </div>
-                <div class="button-group">
-                    <button id="update-software-btn" class="hidden" onclick="updateSoftware()">
-                        <i class="fa-solid fa-wrench"></i>
-                        <span>Update Software</span>
-                    </button>
-                </div>
-            </section>
             <section class="debug main">
                 <div id="github">
                 <span>Help us improve! <a href="https://github.com/tuanchris/dune-weaver/pulls" target="_blank">Submit a Pull Request</a> or <a
@@ -390,16 +392,16 @@
             <canvas id="currentlyPlayingCanvas"></canvas>
         </div>
         <div id="currently-playing-details">
-            <h2 id="currently-playing-file"></h2>
+            <h3 id="currently-playing-file"></h3>
             <p id="currently-playing-position"></p>
-        </div>
-        <div class="play-buttons">
-            <button id="stopCurrent" onclick="stopExecution()" class="cancel">
-                <i class="fa-solid fa-stop"></i>
-            </button>
-            <button id="pausePlayCurrent" class="cta" onclick="togglePausePlay()">
-                <i class="fa-solid fa-pause"></i>
-            </button>
+            <div class="play-buttons">
+                <button id="stopCurrent" onclick="stopExecution()" class="cancel">
+                    <i class="fa-solid fa-stop"></i>
+                </button>
+                <button id="pausePlayCurrent" class="cta" onclick="togglePausePlay()">
+                    <i class="fa-solid fa-pause"></i>
+                </button>
+            </div>
         </div>
         <div id="progress-container">
             <progress id="play_progress" value="0" max="100"></progress>