Update templates/menu.html

templates/menu.html

@@ -174,6 +174,23 @@
             background-color: #ffe4c4;
             color: #333;
         }
+        /* Added styles for upload/delete options */
+        .upload-item:hover,
+        .delete-item:hover {
+            background-color: #ffe4c4;
+            color: #333;
+        }
+        .upload-item,
+        .delete-item {
+            padding: 12px 16px;
+            text-decoration: none;
+            color: #333;
+            border-bottom: 1px solid #ffd8b1;
+            display: block;
+            font-size: 15px;
+            transition: background-color 0.2s ease;
+            cursor: pointer;
+        }
         .fixed-top-bar {
             position: relative;
             top: 0;
@@ -830,12 +847,26 @@
 
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
-            <div class="avatar-icon">
-                <span>{{ first_letter }}</span>
+            <div class="avatar-icon" id="avatarIcon">
+                {% if user_image %}
+                    <img src="{{ user_image }}" alt="User Avatar" class="avatar-image" 
+                         style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
+                {% else %}
+                    <span>{{ first_letter }}</span>
+                {% endif %}
             </div>
-            <div class="dropdown-menu">
+            <div class="dropdown-menu" id="avatarDropdown">
                 <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
                 <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
+                <div class="dropdown-item upload-item">
+                    <label for="avatarUpload" style="cursor: pointer; margin: 0; width: 100%;">
+                        Upload Image
+                    </label>
+                    <input type="file" id="avatarUpload" accept="image/*" style="display: none;">
+                </div>
+                {% if user_image %}
+                    <div class="dropdown-item delete-item" id="deleteAvatar">Delete Image</div>
+                {% endif %}
                 <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
             </div>
         </div>
@@ -1208,22 +1239,111 @@
         document.addEventListener('DOMContentLoaded', function () {
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
             const dropdownMenu = document.querySelector('.dropdown-menu');
-            avatarContainer.addEventListener('click', function (event) {
+            const avatarIcon = document.getElementById('avatarIcon');
+            const avatarUpload = document.getElementById('avatarUpload');
+            const deleteAvatar = document.getElementById('deleteAvatar');
+
+            // Avatar click handler
+            avatarIcon.addEventListener('click', function(event) {
                 event.stopPropagation();
                 dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
-            document.addEventListener('click', function (event) {
+
+            // Close dropdown when clicking outside
+            document.addEventListener('click', function(event) {
                 if (!avatarContainer.contains(event.target)) {
                     dropdownMenu.style.display = 'none';
                 }
             });
-            const dropdownItems = document.querySelectorAll('.dropdown-item');
-            dropdownItems.forEach(item => {
-                item.addEventListener('click', function () {
-                    dropdownMenu.style.display = 'none';
-                });
+
+            // Handle image upload
+            avatarUpload.addEventListener('change', function(event) {
+                const file = event.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        const base64Image = e.target.result;
+
+                        fetch('/upload_avatar', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify({ image: base64Image })
+                        })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.success) {
+                                // Update avatar image
+                                const avatarImg = avatarIcon.querySelector('.avatar-image');
+                                if (avatarImg) {
+                                    avatarImg.src = data.image;
+                                } else {
+                                    const img = document.createElement('img');
+                                    img.src = data.image;
+                                    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);
+                                }
+                                // Add delete option if not present
+                                if (!document.getElementById('deleteAvatar')) {
+                                    const deleteItem = document.createElement('div');
+                                    deleteItem.className = 'dropdown-item delete-item';
+                                    deleteItem.id = 'deleteAvatar';
+                                    deleteItem.innerText = 'Delete Image';
+                                    dropdownMenu.insertBefore(deleteItem, dropdownMenu.querySelector('.dropdown-item:last-child'));
+                                    addDeleteListener(deleteItem);
+                                }
+                                dropdownMenu.style.display = 'none';
+                            } else {
+                                alert('Failed to upload image: ' + (data.error || 'Unknown error'));
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Upload error:', error);
+                            alert('Error uploading image');
+                        });
+                    };
+                    reader.readAsDataURL(file);
+                }
             });
 
+            // Handle image deletion
+            function addDeleteListener(deleteElement) {
+                deleteElement.addEventListener('click', function() {
+                    fetch('/delete_avatar', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        }
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            // Replace image with first letter
+                            const firstLetter = "{{ first_letter }}";
+                            avatarIcon.innerHTML = `<span>${firstLetter}</span>`;
+                            // Remove delete option
+                            deleteElement.remove();
+                            dropdownMenu.style.display = 'none';
+                        } else {
+                            alert('Failed to delete image: ' + (data.error || 'Unknown error'));
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Delete error:', error);
+                        alert('Error deleting image');
+                    });
+                });
+            }
+
+            // Add delete listener if delete option exists
+            if (deleteAvatar) {
+                addDeleteListener(deleteAvatar);
+            }
+
             const menuCards = document.querySelectorAll('.menu-card');
             const menuVideos = document.querySelectorAll('.menu-video');
             const cardObserver = new IntersectionObserver((entries, observer) => {