feat: ✨ update available notification

2025-12-04 22:47:43 +00:00
parent f0165985fc
commit 730b8701db
3 changed files with 139 additions and 1 deletions
@@ -67,4 +67,85 @@
        {% endif %}
    </div>
    <script src="/static/js/header.js"></script>
+    
+    <!-- Update Available Toast -->
+    <div id="update-toast" class="hidden fixed bottom-4 right-4 bg-gray-200 dark:bg-zinc-800 border border-gray-400 dark:border-zinc-600 rounded-lg shadow-lg max-w-md z-50">
+        <div class="p-4">
+            <div class="flex items-start justify-between mb-2">
+                <div class="flex items-center gap-2">
+                    <i class="fas fa-bell text-gray-900 dark:text-gray-100"></i>
+                    <h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100">Update Available</h3>
+                </div>
+                <button id="toast-close" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:cursor-pointer">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
+                Version <span id="toast-latest-version" class="font-semibold"></span> is now available. You're currently on <span id="toast-current-version" class="font-semibold"></span>.
+            </p>
+            <div class="flex gap-2 mt-3">
+                <a id="toast-compare-link" href="#" target="_blank" rel="noopener noreferrer" class="flex-1 bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-gray-900 dark:text-gray-100 px-3 py-2 rounded text-center text-sm hover:cursor-pointer">
+                    View Changes
+                </a>
+            </div>
+        </div>
+    </div>
+    
+    <style>
+        #update-toast {
+            animation: slideIn 0.3s ease-out;
+        }
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+    </style>
+    
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Check if toast was dismissed in this session
+        const toastDismissed = sessionStorage.getItem('update-toast-dismissed');
+        if (toastDismissed) {
+            return;
+        }
+        
+        // Check for updates
+        fetch('/check_update')
+            .then(response => response.json())
+            .then(data => {
+                if (data.update_available) {
+                    const toast = document.getElementById('update-toast');
+                    const currentVersionEl = document.getElementById('toast-current-version');
+                    const latestVersionEl = document.getElementById('toast-latest-version');
+                    const compareLink = document.getElementById('toast-compare-link');
+                    const closeBtn = document.getElementById('toast-close');
+                    
+                    // Set versions
+                    currentVersionEl.textContent = 'v' + data.current_version;
+                    latestVersionEl.textContent = 'v' + data.latest_version;
+                    
+                    // Set compare link (current version to latest version)
+                    compareLink.href = `https://github.com/JDB-NET/ipam/compare/v${data.current_version}...v${data.latest_version}`;
+                    
+                    // Show toast
+                    toast.classList.remove('hidden');
+                    
+                    // Close button handler
+                    closeBtn.addEventListener('click', function() {
+                        toast.classList.add('hidden');
+                        sessionStorage.setItem('update-toast-dismissed', 'true');
+                    });
+                }
+            })
+            .catch(error => {
+                console.error('Error checking for updates:', error);
+            });
+    });
+    </script>
 </header>