From 14f336fadf466fc7d0fc1611f1b4cda97a2e7b41 Mon Sep 17 00:00:00 2001
From: Michael Beck <ich@mischbeck.de>
Date: Wed, 16 Apr 2025 15:58:42 +0200
Subject: [PATCH] standardizes notification in html templates

---
 .../templates/config/schedule.html.jinja      | 53 ++---------
 .../partials/flash_messages.html.jinja        | 93 +++++++++++++++++++
 2 files changed, 99 insertions(+), 47 deletions(-)

diff --git a/scipaperloader/templates/config/schedule.html.jinja b/scipaperloader/templates/config/schedule.html.jinja
index 8c1aa67..78f8dd8 100644
--- a/scipaperloader/templates/config/schedule.html.jinja
+++ b/scipaperloader/templates/config/schedule.html.jinja
@@ -30,38 +30,6 @@
         font-size: 0.7rem;
         margin-top: 2px;
     }
-
-    .flash-message {
-        position: fixed;
-        top: 30%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        z-index: 1000;
-        width: 300px;
-        text-align: center;
-        font-weight: bold;
-        padding: 12px;
-        margin-bottom: 20px;
-        border-radius: 6px;
-        opacity: 1;
-        transition: opacity 5s ease-in-out;
-    }
-
-    .flash-message.success {
-        background-color: #d4edda;
-        border-color: #c3e6cb;
-        color: #155724;
-    }
-
-    .flash-message.error {
-        background-color: #f8d7da;
-        border-color: #f5c6cb;
-        color: #721c24;
-    }
-
-    .flash-message.fade {
-        opacity: 0;
-    }
 </style>
 
 <script>
@@ -169,15 +137,6 @@
                 return String(h).padStart(2, "0") + ":00";
             },
 
-            showFlashMessage(message, type = 'success') {
-                const flashMsg = document.createElement('div');
-                flashMsg.className = `flash-message ${type}`;
-                flashMsg.textContent = message;
-                document.body.appendChild(flashMsg);
-                setTimeout(() => flashMsg.classList.add('fade'), 2000);
-                setTimeout(() => flashMsg.remove(), 7000);
-            },
-
             updateVolume() {
                 fetch('{{ url_for('config.api_update_config') }}', {
                     method: 'POST',
@@ -192,14 +151,14 @@
                     .then(data => {
                         if (data.success) {
                             this.volume = parseFloat(this.volumeValue);
-                            this.showFlashMessage('Volume updated successfully!');
+                            showFlashMessage('Volume updated successfully!', 'success');
                         } else {
-                            this.showFlashMessage(data.updates?.[0]?.message || 'Error updating volume', 'error');
+                            showFlashMessage(data.updates?.[0]?.message || 'Error updating volume', 'error');
                         }
                     })
                     .catch(error => {
                         console.error('Error:', error);
-                        this.showFlashMessage('Network error occurred', 'error');
+                        showFlashMessage('Network error occurred', 'error');
                     });
             },
 
@@ -310,14 +269,14 @@
                     .then(response => response.json())
                     .then(data => {
                         if (data.success) {
-                            this.showFlashMessage('Schedule updated successfully!');
+                            showFlashMessage('Schedule updated successfully!', 'success');
                         } else {
-                            this.showFlashMessage(data.updates?.[0]?.message || 'Error updating schedule', 'error');
+                            showFlashMessage(data.updates?.[0]?.message || 'Error updating schedule', 'error');
                         }
                     })
                     .catch(error => {
                         console.error('Error:', error);
-                        this.showFlashMessage('Network error occurred', 'error');
+                        showFlashMessage('Network error occurred', 'error');
                     });
             }
         };
diff --git a/scipaperloader/templates/partials/flash_messages.html.jinja b/scipaperloader/templates/partials/flash_messages.html.jinja
index e69de29..88d9a74 100644
--- a/scipaperloader/templates/partials/flash_messages.html.jinja
+++ b/scipaperloader/templates/partials/flash_messages.html.jinja
@@ -0,0 +1,93 @@
+<!-- Server-side flash messages from Flask -->
+{% with messages = get_flashed_messages(with_categories=true) %}
+{% if messages %}
+<div class="server-flash-messages">
+    {% for category, message in messages %}
+    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+        {{ message }}
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+    {% endfor %}
+</div>
+{% endif %}
+{% endwith %}
+
+<!-- JavaScript flash message container for client-side messages -->
+<div id="clientFlashContainer"></div>
+
+<style>
+    .client-flash-message {
+        position: fixed;
+        top: 30%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 1000;
+        width: 300px;
+        text-align: center;
+        font-weight: bold;
+        padding: 12px;
+        margin-bottom: 20px;
+        border-radius: 6px;
+        opacity: 1;
+        transition: opacity 5s ease-in-out;
+    }
+
+    .client-flash-message.success {
+        background-color: #d4edda;
+        border-color: #c3e6cb;
+        color: #155724;
+    }
+
+    .client-flash-message.error {
+        background-color: #f8d7da;
+        border-color: #f5c6cb;
+        color: #721c24;
+    }
+
+    .client-flash-message.info {
+        background-color: #d1ecf1;
+        border-color: #bee5eb;
+        color: #0c5460;
+    }
+
+    .client-flash-message.warning {
+        background-color: #fff3cd;
+        border-color: #ffeeba;
+        color: #856404;
+    }
+
+    .client-flash-message.fade {
+        opacity: 0;
+    }
+</style>
+
+<script>
+    // Global flash message function that can be used from anywhere
+    function showFlashMessage(message, type = 'success', duration = 5000) {
+        const flashMsg = document.createElement('div');
+        flashMsg.className = `client-flash-message ${type}`;
+        flashMsg.textContent = message;
+
+        const container = document.getElementById('clientFlashContainer');
+        container.appendChild(flashMsg);
+
+        // Apply fade effect after some time
+        setTimeout(() => flashMsg.classList.add('fade'), duration - 3000);
+
+        // Remove element after duration
+        setTimeout(() => flashMsg.remove(), duration);
+
+        return flashMsg;
+    }
+
+    // Initialize toast messages if Bootstrap is used
+    document.addEventListener('DOMContentLoaded', function () {
+        // Initialize any Bootstrap toasts if they exist
+        if (typeof bootstrap !== 'undefined' && bootstrap.Toast) {
+            const toastElList = [].slice.call(document.querySelectorAll('.toast'));
+            toastElList.map(function (toastEl) {
+                return new bootstrap.Toast(toastEl);
+            });
+        }
+    });
+</script>
\ No newline at end of file