Update templates/combined_summary.html

templates/combined_summary.html

@@ -149,7 +149,7 @@
             -webkit-text-fill-color: #333;
         }
         .fixed-top-bar {
-            position: relative;
+            position: relative; /* Change to relative to allow timer positioning */
             top: 0;
             left: 0;
             width: 100%;
@@ -158,9 +158,18 @@
             color: white;
             padding: 15px;
             display: flex;
-            justify-content: space-between;
+            justify-content: space-between; /* Space out items */
             align-items: center;
             z-index: 1000;
+        }
+         /* Style for the timer */
+        #orderTimer {
+            color: white;
+            font-weight: bold;
+            margin-left: auto; /* Push timer to the right */
+            margin-right: 80px; /* Add some space before avatar */
+            font-size: 1.1em;
+            display: none; /* Initially hidden */
         }
         .back-arrow-container {
             position: absolute;
@@ -338,23 +347,82 @@
             color: #6c757d;
             margin-top: 20px;
         }
-        @media (max-width: 576px) {
+        @media (max-width: 768px) { /* Adjust breakpoint for better timer placement */
             .fixed-top-bar {
-                height: 60px;
+                height: auto; /* Allow height to adjust */
+                flex-direction: column; /* Stack items vertically */
                 padding: 10px;
             }
             .back-arrow-container {
-                left: 8px;
+                 position: relative; /* Adjust positioning for stacking */
+                 left: auto;
+                 top: auto;
+                 transform: none;
+                 width: 100%;
+                 justify-content: flex-start;
+                 margin-bottom: 10px;
+            }
+             .avatar-dropdown-container {
+                 position: absolute; /* Keep avatar positioned */
+                 right: 10px;
+                 top: 10px; /* Adjust top position */
+                 transform: none;
+                 z-index: 1001; /* Ensure avatar is above others */
+             }
+             #orderTimer {
+                 position: relative; /* Adjust positioning for stacking */
+                 margin-left: 0;
+                 margin-right: 0;
+                 text-align: center;
+                 width: 100%;
+                 margin-bottom: 10px;
+             }
+            .search-bar-container {
+                position: relative; /* Adjust positioning for stacking */
+                left: auto;
+                top: auto;
+                transform: none;
+                width: 100%;
+                max-width: 100%;
+                margin-bottom: 10px;
+            }
+            .search-bar-container input {
+                padding: 8px 40px 8px 40px;
+                font-size: 16px;
+                border-radius: 25px;
+            }
+             .menu-heading {
+                 font-size: 1.8rem; /* Adjust heading size */
+             }
+        }
+
+        @media (max-width: 576px) {
+            .fixed-top-bar {
+                padding: 8px; /* Reduce padding */
+            }
+            .back-arrow-container {
+                margin-bottom: 8px;
             }
             .back-arrow {
                 width: 32px;
                 height: 32px;
                 font-size: 18px;
             }
+            .avatar-dropdown-container {
+                 right: 8px;
+                 top: 8px;
+            }
+            .avatar-icon {
+                width: 36px;
+                height: 36px;
+                font-size: 18px;
+            }
+             #orderTimer {
+                 font-size: 1em; /* Further reduce timer font size */
+                 margin-bottom: 8px;
+             }
             .search-bar-container {
-                width: calc(80% - 50px);
-                max-width: calc(100% - 50px);
-                left: 50px;
+                margin-bottom: 8px;
             }
             .search-bar-container input {
                 padding: 6px 35px 6px 35px;
@@ -369,20 +437,12 @@
                 right: 12px;
                 font-size: 16px;
             }
-            .avatar-dropdown-container {
-                right: 10px;
-            }
-            .avatar-icon {
-                width: 40px;
-                height: 40px;
-                font-size: 20px;
-            }
             .dropdown-menu {
-                width: 220px;
+                width: 200px; /* Adjust dropdown width */
             }
             .dropdown-menu .dropdown-item {
-                padding: 12px 16px;
-                font-size: 15px;
+                padding: 10px 14px;
+                font-size: 14px;
             }
             .menu-heading {
                 font-size: 1.5rem;
@@ -435,6 +495,14 @@
             <a href="{{ url_for('menu.menu') }}" class="back-arrow" aria-label="Back to Menu">
                 <i class="bi bi-arrow-left"></i>
             </a>
+        </div>
+         <!-- Timer Display Area -->
+        <div id="orderTimer"></div>
+        <div class="search-bar-container">
+            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
+            <i class="bi bi-search search-icon"></i>
+            <i class="bi bi-mic mic-icon" id="micIcon"></i>
+            <div class="search-popup" id="searchPopup"></div>
         </div>
         <div class="avatar-dropdown-container">
             <div class="avatar-icon">
@@ -444,21 +512,10 @@
                 <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item"><i class="bi bi-person"></i> View Profile</a>
                 <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item"><i class="bi bi-clock-history"></i> Order History</a>
                 <a href="{{ url_for('combined_summary.combined_summary') }}" class="dropdown-item"><i class="bi bi-file-earmark-text"></i> MY Summary</a>
-                <a href="{{ url_for('logout') }}" class="dropdown-item" id="logoutLink"><i class="bi bi-box-arrow-right"></i> Logout</a>
+                <a href="{{ url_for('logout') }}" class="dropdown-item"><i class="bi bi-box-arrow-right"></i> Logout</a>
             </div>
         </div>
-        <div class="search-bar-container">
-            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
-            <i class="bi bi-search search-icon"></i>
-            <i class="bi bi-mic mic-icon" id="micIcon"></i>
-            <div class="search-popup" id="searchPopup"></div>
-        </div>
-    </div>
 
-    <!-- Timer and Success Message Container -->
-    <div id="orderTimerContainer" style="display: none; text-align: center; margin-top: 20px;">
-        <div id="orderTimer" style="font-size: 1.5rem; font-weight: bold; color: #FFA07A;"></div>
-        <div id="orderSuccessMessage" style="font-size: 1.5rem; font-weight: bold; color: #0FAA39; display: none;">Order Successfully Placed!</div>
     </div>
 
     <div class="container mt-4">
@@ -531,7 +588,7 @@
 
         function selectItem(itemName, section) {
             localStorage.setItem('selectedItem', JSON.stringify({ name: itemName, section: section }));
-            window.location.href = '/menu';
+            window.location.href = '/menu'; // Assuming '/menu' is the detail page
         }
 
         function filterMenuItems(query) {
@@ -584,77 +641,6 @@
             searchPopup.style.display = 'block';
         }
 
-        // Timer and Success Message Functions
-        let orderTimerInterval;
-        let orderDurationInSeconds = 0;
-        let orderStartTime = null; // To store the start time for persistence
-
-        function startOrderTimer(durationInSeconds) {
-            orderDurationInSeconds = durationInSeconds;
-            orderStartTime = Date.now(); // Record the start time
-            localStorage.setItem('orderTimer', JSON.stringify({
-                startTime: orderStartTime,
-                duration: orderDurationInSeconds
-            }));
-
-            const timerElement = document.getElementById('orderTimer');
-            const successMessageElement = document.getElementById('orderSuccessMessage');
-            const timerContainer = document.getElementById('orderTimerContainer');
-
-            if (!timerElement || !successMessageElement || !timerContainer) {
-                console.error("Timer elements not found.");
-                return;
-            }
-
-            timerContainer.style.display = 'block';
-            successMessageElement.style.display = 'none';
-            timerElement.style.display = 'block'; // Ensure timer is visible
-
-            let secondsRemaining = orderDurationInSeconds;
-
-            timerElement.innerText = formatTime(secondsRemaining);
-
-            // Clear any existing interval before starting a new one
-            if (orderTimerInterval) {
-                clearInterval(orderTimerInterval);
-            }
-
-            orderTimerInterval = setInterval(() => {
-                secondsRemaining--;
-
-                if (secondsRemaining <= 0) {
-                    clearInterval(orderTimerInterval);
-                    timerElement.style.display = 'none';
-                    successMessageElement.style.display = 'block';
-                    // Hide the success message and container after a few seconds
-                    setTimeout(() => {
-                        timerContainer.style.display = 'none';
-                        successMessageElement.style.display = 'none';
-                        // We don't reset timerElement.style.display to 'block' here
-                        // because a new timer should only start with a new order.
-                    }, 5000); // Hide after 5 seconds
-                    localStorage.removeItem('orderTimer'); // Clear finished timer data
-                } else {
-                    timerElement.innerText = formatTime(secondsRemaining);
-                }
-            }, 1000);
-        }
-
-        function formatTime(seconds) {
-            const minutes = Math.floor(seconds / 60);
-            const remainingSeconds = seconds % 60;
-            const formattedMinutes = String(minutes).padStart(2, '0');
-            const formattedSeconds = String(remainingSeconds).padStart(2, '0');
-            return `${formattedMinutes}:${formattedSeconds}`;
-        }
-
-        // Function to handle a new order being successfully placed
-        // This is the function you will call from your order placement logic.
-        function handleNewOrderPlaced(estimatedCompletionTimeInSeconds) {
-             console.log("New order successful, starting timer...");
-             startOrderTimer(estimatedCompletionTimeInSeconds);
-        }
-
         document.addEventListener('DOMContentLoaded', function () {
             // Avatar Dropdown
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
@@ -675,15 +661,6 @@
                 });
             });
 
-             // Logout Link - Clear timer on logout
-            const logoutLink = document.getElementById('logoutLink');
-            if (logoutLink) {
-                logoutLink.addEventListener('click', function() {
-                    localStorage.removeItem('orderTimer'); // Clear timer on logout
-                });
-            }
-
-
             // Search Bar Functionality
             const searchBar = document.getElementById('searchBar');
             const searchPopup = document.getElementById('searchPopup');
@@ -752,71 +729,71 @@
                     updateCartUI(cart);
                 });
 
-            // --- Timer Logic Integration ---
-            // Check local storage for an existing timer when the page loads.
-            const savedOrderTimer = localStorage.getItem('orderTimer');
-            if (savedOrderTimer) {
-                const timerData = JSON.parse(savedOrderTimer);
-                const now = Date.now();
-                const elapsed = Math.floor((now - timerData.startTime) / 1000);
-                const remaining = timerData.duration - elapsed;
-
-                const timerElement = document.getElementById('orderTimer');
-                const successMessageElement = document.getElementById('orderSuccessMessage');
-                const timerContainer = document.getElementById('orderTimerContainer');
-
-                if (remaining > 0) {
-                    // Resume the timer
-                    orderDurationInSeconds = timerData.duration; // Load duration
-                    orderStartTime = timerData.startTime; // Load start time
-                    timerContainer.style.display = 'block';
-                    successMessageElement.style.display = 'none';
-                    timerElement.style.display = 'block';
-                    let secondsRemaining = remaining;
-                     timerElement.innerText = formatTime(secondsRemaining);
-
-                    // Clear any existing interval before resuming
-                    if (orderTimerInterval) {
-                        clearInterval(orderTimerInterval);
-                    }
+            // --- Timer Logic ---
+            const orderTimerElement = document.getElementById('orderTimer');
+            // Get timestamp from Flask template (passed from server)
+            const completionTimeTimestamp = {{ order_completion_time | default('null') }};
+
+            let timerInterval = null; // Variable to hold the interval ID
+
+            function startTimer(timestamp) {
+                 orderTimerElement.style.display = 'block';
+                 const completionTime = new Date(timestamp * 1000); // Convert timestamp to Date object
 
-                    orderTimerInterval = setInterval(() => {
-                        secondsRemaining--;
-
-                        if (secondsRemaining <= 0) {
-                            clearInterval(orderTimerInterval);
-                            timerElement.style.display = 'none';
-                            successMessageElement.style.display = 'block';
-                             setTimeout(() => {
-                                timerContainer.style.display = 'none';
-                                successMessageElement.style.display = 'none';
-                            }, 5000); // Hide success after 5 seconds
-                            localStorage.removeItem('orderTimer'); // Clear finished timer data
-                        } else {
-                            timerElement.innerText = formatTime(secondsRemaining);
-                        }
-                    }, 1000);
-
-                } else {
-                    // Timer has already finished, show success message briefly
-                    if (timerContainer && successMessageElement && timerElement) {
-                         timerContainer.style.display = 'block';
-                         timerElement.style.display = 'none'; // Timer is finished
-                         successMessageElement.style.display = 'block';
+                 function updateTimer() {
+                     const now = new Date();
+                     const timeRemaining = completionTime - now;
+
+                     if (timeRemaining <= 0) {
+                         orderTimerElement.innerText = 'Order Ready!';
+                         // Clear timer and local storage
+                         clearInterval(timerInterval);
+                         localStorage.removeItem('orderCompletionTime');
+                         // Refresh the page after a short delay
                          setTimeout(() => {
-                            timerContainer.style.display = 'none';
-                            successMessageElement.style.display = 'none';
-                        }, 3000); // Show success for 3 seconds
-                         localStorage.removeItem('orderTimer'); // Clear finished timer data
+                             window.location.reload();
+                         }, 2000); // Refresh after 2 seconds
+                         return;
+                     }
+
+                     const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
+                     const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
+
+                     // Add leading zeros if needed
+                     const displayMinutes = String(minutes).padStart(2, '0');
+                     const displaySeconds = String(seconds).padStart(2, '0');
+
+                     orderTimerElement.innerText = `Ready In: ${displayMinutes}m ${displaySeconds}s`;
+                 }
+
+                 // Initial call to display the timer immediately
+                 updateTimer();
+
+                 // Update the timer every second
+                 timerInterval = setInterval(updateTimer, 1000);
+
+                 // Store completion time in local storage for persistence
+                 localStorage.setItem('orderCompletionTime', timestamp);
+            }
+
+            // Check if a completion time was passed from the server (new order)
+            if (completionTimeTimestamp) {
+                startTimer(completionTimeTimestamp);
+            } else {
+                // If not from server, check local storage for an existing timer
+                const storedCompletionTime = localStorage.getItem('orderCompletionTime');
+                if (storedCompletionTime) {
+                    const parsedCompletionTime = parseFloat(storedCompletionTime);
+                    // Ensure stored time is valid and in the future
+                    if (!isNaN(parsedCompletionTime) && new Date(parsedCompletionTime * 1000) > new Date()) {
+                        startTimer(parsedCompletionTime);
+                    } else {
+                         // Clear invalid or past timestamp from local storage
+                         localStorage.removeItem('orderCompletionTime');
                     }
                 }
             }
-
-            // --- Example of how you would trigger the timer (replace with your actual logic) ---
-            // This is for demonstration only. You should call handleNewOrderPlaced()
-            // from your code that handles a successful order submission.
-            // For example, after a successful API call to create an order.
-            // handleNewOrderPlaced(45); // Simulate a new order with a 45-second timer
+            // --- End Timer Logic ---
         });
     </script>
 </body>