subbuok

Sleeping

App Files Files Community

lokesh341 commited on Apr 5

Commit

4fb1436

verified ·

1 Parent(s): 30de228

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +171 -29

templates/menu.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -189,7 +189,8 @@
         }
         .upload-item,
         .delete-item,
-        .view-item {
             padding: 10px 16px;
             text-decoration: none;
             color: #333;
@@ -199,7 +200,8 @@
         }
         .upload-item:hover,
         .delete-item:hover,
-        .view-item:hover {
             background-color: #ffe4c4;
             color: #2c2c2c;
         }
@@ -367,9 +369,10 @@
             max-width: 100%;
             max-height: 400px;
             object-fit: contain;
-            border-radius: 8px;
             margin: 0 auto;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
         .modal-body #modal-img {
             max-height: 200px;
@@ -717,7 +720,8 @@
             }
             .upload-item,
             .delete-item,
-            .view-item {
                 padding: 8px 12px;
                 font-size: 13px;
             }
@@ -889,6 +893,7 @@
                 {% if user_image %}
                     <div class="dropdown-item delete-item" id="deleteAvatar">Delete Image</div>
                     <div class="dropdown-item view-item" id="viewAvatar">View Avatar</div>
                 {% endif %}
                 <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
                 <div class="dropdown-item upload-item">
@@ -1075,7 +1080,29 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <img id="avatar-modal-img" class="img-fluid rounded mx-auto d-block" alt="Avatar Image" style="max-height: 400px; object-fit: contain;">
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -1302,6 +1329,7 @@
             const avatarUpload = document.getElementById('avatarUpload');
             const deleteAvatar = document.getElementById('deleteAvatar');
             const viewAvatar = document.getElementById('viewAvatar');
             // Load avatar from localStorage if available
             function loadAvatar() {
@@ -1322,7 +1350,7 @@
                 }
             }
-            // Ensure avatar options (Delete and View) are present only once
             function ensureAvatarOptions() {
                 if (!document.querySelector('#deleteAvatar')) {
                     const deleteItem = document.createElement('div');
@@ -1341,19 +1369,57 @@
                     if (firstChild) dropdownMenu.insertBefore(viewItem, firstChild.nextSibling);
                     addViewListener(viewItem);
                 }
             }
             // Remove avatar options
             function removeAvatarOptions() {
                 const deleteItem = document.getElementById('deleteAvatar');
                 const viewItem = document.getElementById('viewAvatar');
                 if (deleteItem) deleteItem.remove();
                 if (viewItem) viewItem.remove();
             }
-            // Save avatar to localStorage
             function saveAvatar(imageUrl) {
-                localStorage.setItem('userAvatar', imageUrl);
             }
             // Clear avatar from localStorage
@@ -1369,14 +1435,14 @@
                 dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
-            // Handle image upload with 15MB limit and error handling
             avatarUpload.addEventListener('change', function(event) {
                 const file = event.target.files[0];
                 if (file) {
-                    const maxSize = 15 * 1024 * 1024; // 15MB in bytes
                     if (file.size > maxSize) {
-                        alert('Image size must not exceed 15MB.');
-                        this.value = '';
                         return;
                     }
                     const reader = new FileReader();
@@ -1451,6 +1517,87 @@
                 }
             });
             // Handle image deletion
             function addDeleteListener(deleteElement) {
                 deleteElement.addEventListener('click', function() {
@@ -1495,9 +1642,19 @@
                 });
             }
             // Add listeners if elements exist
             if (deleteAvatar) addDeleteListener(deleteAvatar);
             if (viewAvatar) addViewListener(viewAvatar);
             // Load avatar on page load
             loadAvatar();
@@ -1786,7 +1943,7 @@
             const micPopupText = document.getElementById('micPopupText');
             const micPopupCancel = document.getElementById('micPopupCancel');
-            if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
                 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                 const recognition = new SpeechRecognition();
                 recognition.continuous = false;
@@ -1863,7 +2020,6 @@
                 micUnsupported.style.display = 'block';
             }
         });
         function filterMenu() {
             const input = sanitizeInput(document.getElementById('searchBar').value.trim().toLowerCase());
             const sections = document.querySelectorAll('h3');
@@ -1901,7 +2057,6 @@
                 });
             }
         }
         function showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
@@ -1917,7 +2072,6 @@
             modalSectionEl.setAttribute('data-section', section);
             modalSectionEl.setAttribute('data-category', selectedCategory);
             document.getElementById('quantityInput').value = 1;
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
@@ -1956,13 +2110,11 @@
                     document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
                 });
         }
         document.addEventListener('click', function(event) {
             if (event.target.classList.contains('addon-option')) {
                 handleAddonClick(event.target);
             }
         });
         function handleAddonClick(checkbox) {
             const groupName = checkbox.getAttribute('data-group');
             const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it"].includes(groupName);
@@ -1973,7 +2125,6 @@
                 });
             }
         }
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText;
             const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
@@ -1986,7 +2137,6 @@
                 name: cb.getAttribute('data-name'),
                 price: parseFloat(cb.getAttribute('data-price') || 0)
             }));
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,
@@ -1997,7 +2147,6 @@
                 instructions: instructions,
                 quantity: quantity
             };
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
@@ -2036,10 +2185,3 @@
 </body>
 </html>

+ <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
         }
         .upload-item,
         .delete-item,
+        .view-item,
+        .profile-item {
             padding: 10px 16px;
             text-decoration: none;
             color: #333;
         }
         .upload-item:hover,
         .delete-item:hover,
+        .view-item:hover,
+        .profile-item:hover {
             background-color: #ffe4c4;
             color: #2c2c2c;
         }
             max-width: 100%;
             max-height: 400px;
             object-fit: contain;
+            border-radius: 50%; /* Make the avatar image round */
             margin: 0 auto;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            border: 2px solid #0FAA39; /* Optional: Add a border for style */
         }
         .modal-body #modal-img {
             max-height: 200px;
             }
             .upload-item,
             .delete-item,
+            .view-item,
+            .profile-item {
                 padding: 8px 12px;
                 font-size: 13px;
             }
                 {% if user_image %}
                     <div class="dropdown-item delete-item" id="deleteAvatar">Delete Image</div>
                     <div class="dropdown-item view-item" id="viewAvatar">View Avatar</div>
+                    <div class="dropdown-item profile-item" id="viewProfile">View Profile Customer Details</div>
                 {% endif %}
                 <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
                 <div class="dropdown-item upload-item">
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
+                    <img id="avatar-modal-img" class="img-fluid rounded mx-auto d-block" alt="Avatar Image" style="max-height: 400px; object-fit: contain; border-radius: 50%; border: 2px solid #0FAA39;">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Modal for Profile Customer Details -->
+    <div class="modal fade" id="profileModal" tabindex="-1" aria-labelledby="profileModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="profileModalLabel">Customer Profile Details</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p><strong>Name:</strong> {{ user_name | default('Not specified') }}</p>
+                    <p><strong>Email:</strong> {{ user_email | default('Not specified') }}</p>
+                    <p><strong>Joined Date:</strong> {{ user_joined_date | default('Not specified') }}</p>
+                    <p><strong>Total Orders:</strong> {{ total_orders | default('0') }}</p>
+                    <!-- Add more profile details as needed -->
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
             const avatarUpload = document.getElementById('avatarUpload');
             const deleteAvatar = document.getElementById('deleteAvatar');
             const viewAvatar = document.getElementById('viewAvatar');
+            const viewProfile = document.getElementById('viewProfile');
             // Load avatar from localStorage if available
             function loadAvatar() {
                 }
             }
+            // Ensure avatar options (Delete, View, Profile) are present only once
             function ensureAvatarOptions() {
                 if (!document.querySelector('#deleteAvatar')) {
                     const deleteItem = document.createElement('div');
                     if (firstChild) dropdownMenu.insertBefore(viewItem, firstChild.nextSibling);
                     addViewListener(viewItem);
                 }
+                if (!document.querySelector('#viewProfile')) {
+                    const profileItem = document.createElement('div');
+                    profileItem.className = 'dropdown-item profile-item';
+                    profileItem.id = 'viewProfile';
+                    profileItem.innerText = 'View Profile Customer Details';
+                    const viewItem = document.getElementById('viewAvatar');
+                    if (viewItem) dropdownMenu.insertBefore(profileItem, viewItem.nextSibling);
+                    addProfileListener(profileItem);
+                }
             }
             // Remove avatar options
             function removeAvatarOptions() {
                 const deleteItem = document.getElementById('deleteAvatar');
                 const viewItem = document.getElementById('viewAvatar');
+                const profileItem = document.getElementById('viewProfile');
                 if (deleteItem) deleteItem.remove();
                 if (viewItem) viewItem.remove();
+                if (profileItem) profileItem.remove();
             }
+            // Save avatar to localStorage with size check and compression
             function saveAvatar(imageUrl) {
+                const img = new Image();
+                img.src = imageUrl;
+                img.onload = function() {
+                    const maxSize = 50 * 1024 * 1024; // 50MB in bytes
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+                    let width = img.width;
+                    let height = img.height;
+                    // Resize if larger than 50MB (approximate based on pixel data)
+                    if (img.size > maxSize || (width * height * 4) > maxSize) {
+                        const aspectRatio = width / height;
+                        if (width > height) {
+                            width = 800; // Reduce to a reasonable size
+                            height = width / aspectRatio;
+                        } else {
+                            height = 800;
+                            width = height * aspectRatio;
+                        }
+                        canvas.width = width;
+                        canvas.height = height;
+                        ctx.drawImage(img, 0, 0, width, height);
+                        const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7); // Compress to JPEG
+                        localStorage.setItem('userAvatar', compressedDataUrl);
+                    } else {
+                        localStorage.setItem('userAvatar', imageUrl);
+                    }
+                };
             }
             // Clear avatar from localStorage
                 dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
+            // Handle image upload with 50MB limit and compression
             avatarUpload.addEventListener('change', function(event) {
                 const file = event.target.files[0];
                 if (file) {
+                    const maxSize = 50 * 1024 * 1024; // 50MB in bytes
                     if (file.size > maxSize) {
+                        alert('Image size must not exceed 50MB. Compressing and resizing...');
+                        compressImage(file);
                         return;
                     }
                     const reader = new FileReader();
                 }
             });
+            // Compress image if it exceeds 50MB
+            function compressImage(file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const img = new Image();
+                    img.src = e.target.result;
+                    img.onload = function() {
+                        const canvas = document.createElement('canvas');
+                        const ctx = canvas.getContext('2d');
+                        let width = img.width;
+                        let height = img.height;
+                        const maxWidth = 800; // Max width for compression
+                        const maxHeight = 800; // Max height for compression
+                        if (width > height) {
+                            if (width > maxWidth) {
+                                height *= maxWidth / width;
+                                width = maxWidth;
+                            }
+                        } else {
+                            if (height > maxHeight) {
+                                width *= maxHeight / height;
+                                height = maxHeight;
+                            }
+                        }
+                        canvas.width = width;
+                        canvas.height = height;
+                        ctx.drawImage(img, 0, 0, width, height);
+                        const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7); // Compress to 70% quality
+                        fetch('/upload_avatar', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ image: compressedDataUrl })
+                        })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.success) {
+                                const imgElement = document.createElement('img');
+                                imgElement.src = data.image || '/static/default-avatar.jpg';
+                                imgElement.alt = 'User Avatar';
+                                imgElement.className = 'avatar-image';
+                                imgElement.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
+                                avatarIcon.innerHTML = '';
+                                avatarIcon.appendChild(imgElement);
+                                saveAvatar(data.image);
+                                ensureAvatarOptions();
+                                dropdownMenu.style.display = 'none';
+                            } else {
+                                alert('Failed to upload compressed image: ' + (data.error || 'Unknown error'));
+                                const img = document.createElement('img');
+                                img.src = '/static/default-avatar.jpg';
+                                img.alt = 'User Avatar';
+                                img.className = 'avatar-image';
+                                img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
+                                avatarIcon.innerHTML = '';
+                                avatarIcon.appendChild(img);
+                                saveAvatar('/static/default-avatar.jpg');
+                                ensureAvatarOptions();
+                                dropdownMenu.style.display = 'none';
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Upload error:', error);
+                            alert('Error uploading compressed image. Using default image.');
+                            const img = document.createElement('img');
+                            img.src = '/static/default-avatar.jpg';
+                            img.alt = 'User Avatar';
+                            img.className = 'avatar-image';
+                            img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
+                            avatarIcon.innerHTML = '';
+                            avatarIcon.appendChild(img);
+                            saveAvatar('/static/default-avatar.jpg');
+                            ensureAvatarOptions();
+                            dropdownMenu.style.display = 'none';
+                        });
+                    };
+                };
+                reader.readAsDataURL(file);
+            }
             // Handle image deletion
             function addDeleteListener(deleteElement) {
                 deleteElement.addEventListener('click', function() {
                 });
             }
+            // Handle profile view
+            function addProfileListener(profileElement) {
+                profileElement.addEventListener('click', function() {
+                    const modal = new bootstrap.Modal(document.getElementById('profileModal'));
+                    modal.show();
+                    dropdownMenu.style.display = 'none';
+                });
+            }
             // Add listeners if elements exist
             if (deleteAvatar) addDeleteListener(deleteAvatar);
             if (viewAvatar) addViewListener(viewAvatar);
+            if (viewProfile) addProfileListener(viewProfile);
             // Load avatar on page load
             loadAvatar();
             const micPopupText = document.getElementById('micPopupText');
             const micPopupCancel = document.getElementById('micPopupCancel');
+                if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
                 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                 const recognition = new SpeechRecognition();
                 recognition.continuous = false;
                 micUnsupported.style.display = 'block';
             }
         });
         function filterMenu() {
             const input = sanitizeInput(document.getElementById('searchBar').value.trim().toLowerCase());
             const sections = document.querySelectorAll('h3');
                 });
             }
         }
         function showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
             modalSectionEl.setAttribute('data-section', section);
             modalSectionEl.setAttribute('data-category', selectedCategory);
             document.getElementById('quantityInput').value = 1;
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
                     document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
                 });
         }
         document.addEventListener('click', function(event) {
             if (event.target.classList.contains('addon-option')) {
                 handleAddonClick(event.target);
             }
         });
         function handleAddonClick(checkbox) {
             const groupName = checkbox.getAttribute('data-group');
             const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it"].includes(groupName);
                 });
             }
         }
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText;
             const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
                 name: cb.getAttribute('data-name'),
                 price: parseFloat(cb.getAttribute('data-price') || 0)
             }));
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,
                 instructions: instructions,
                 quantity: quantity
             };
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
 </body>
 </html>