BiryaniHubflask

Running

App Files Files Community

Update templates/customer_details.html

by geethareddy - opened 2 days ago

base: refs/heads/main

←

from: refs/pr/6

Discussion Files changed

+152

-22

Files changed (1) hide show

templates/customer_details.html +152 -22

templates/customer_details.html CHANGED Viewed

@@ -3,14 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Customer Details</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         .back-to-menu {
             display: block;
             margin: 30px auto 10px auto;
             padding: 10px 20px;
-            background-color: #ff5722; /* Bright orange button */
             color: #ffffff;
             border: none;
             border-radius: 25px;
@@ -26,47 +29,174 @@
             background-color: #e64a19;
             text-decoration: none;
         }
         .copy-btn {
             background: none;
             border: none;
-            cursor: pointer;
             color: #007bff;
             font-size: 1rem;
-            margin-left: 10px;
         }
     </style>
     <script>
         function copyReferralCode() {
-            const referralText = document.getElementById("referralCode").innerText;
-            navigator.clipboard.writeText(referralText).then(() => {
-                alert("Referral Code Copied!");
-            }).catch(err => console.error("Failed to copy text: ", err));
         }
     </script>
 </head>
 <body>
     <div class="container mt-4">
-        <h1>Customer Details</h1>
         <div class="card">
             <div class="card-body">
-                <h5 class="card-title">Customer Name: {{ customer.name }}</h5>
-                <p class="card-text"><strong>Email:</strong> {{ customer.email }}</p>
-                <p class="card-text"><strong>Phone:</strong> {{ customer.phone }}</p>
-                <p class="card-text"><strong>Referral Code:</strong> <span id="referralCode">{{ customer.referral_code }}</span>
-                    <button class="copy-btn" onclick="copyReferralCode()">📋</button>
-                </p>
-                <p class="card-text"><strong>Reward Points:</strong> {{ customer.reward_points }}</p>
-                <!-- Edit Profile Button -->
-                <a href="/edit_profile" class="btn btn-primary">Edit Profile</a>
             </div>
         </div>
-        <!-- Back to Menu Button -->
         <a href="/menu" class="back-to-menu">Back to Menu</a>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Profile</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
+       body {
+        background-color: #FDF4E3;
+    }
         .back-to-menu {
             display: block;
             margin: 30px auto 10px auto;
             padding: 10px 20px;
+            background-color: #ff5722;
             color: #ffffff;
             border: none;
             border-radius: 25px;
             background-color: #e64a19;
             text-decoration: none;
         }
+        .editable {
+            background-color: #f0f8ff; /* Light blue when edited */
+        }
+        .input-group {
+            position: relative;
+        }
+        .btn-change {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            background-color: #ffffff;
+            color: #0FAA39; /* Green text color */
+            border: none; /* No border */
+            border-radius: 5px;
+            padding: 5px 10px;
+            cursor: pointer;
+            font-size: 0.9rem;
+        }
+        .btn-change:hover {
+            background-color: #ffffff;
+            color: #0FAA39;
+        }
         .copy-btn {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
             background: none;
             border: none;
             color: #007bff;
+            font-size: 1.2rem;
+            cursor: pointer;
+        }
+        .update-btn {
+            background-color: #0FAA39;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            padding: 10px 20px;
+            font-size: 1rem;
+            cursor: pointer;
+        }
+        .update-btn:hover {
+            background-color: #0f8e29;
+        }
+        .edit-btn {
+            background-color: #0FAA39;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            padding: 10px 20px;
             font-size: 1rem;
+            cursor: pointer;
+        }
+        .edit-btn:hover {
+            background-color: #0f8e29;
+        }
+           /* Change text color to #ff5722 */
+        h1, .form-label {
+        color: #ff5722;
         }
     </style>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script>
+        function enableEditField(fieldId) {
+            var field = document.getElementById(fieldId);
+            field.removeAttribute("readonly");
+            field.classList.add("editable");
+            field.focus();
+        }
+        function updateProfile(event) {
+            event.preventDefault();
+            var formData = $('#profileForm').serialize();
+            $.ajax({
+                type: "POST",
+                url: "/update_profile",
+                data: formData,
+                success: function(response) {
+                    if (response.status === "success") {
+                        alert(response.message);
+                        location.reload();
+                    } else {
+                        alert(response.message);
+                    }
+                },
+                error: function() {
+                    alert("An error occurred while updating the profile.");
+                }
+            });
+        }
+        function editProfileFields() {
+            // Making only editable fields editable (Excluding referralCode and rewardPoints)
+            document.getElementById('customerName').removeAttribute('readonly');
+            document.getElementById('email').removeAttribute('readonly');
+            document.getElementById('phone').removeAttribute('readonly');
+            document.getElementById('customerName').classList.add('editable');
+            document.getElementById('email').classList.add('editable');
+            document.getElementById('phone').classList.add('editable');
+        }
         function copyReferralCode() {
+            var referralCode = document.getElementById('referralCode');
+            referralCode.select();
+            document.execCommand('copy');
+            alert('Referral Code Copied!');
         }
     </script>
 </head>
 <body>
     <div class="container mt-4">
+        <h1>User Profile</h1>
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                <div class="alert alert-{{ messages[0][0] }}">
+                    {{ messages[0][1] }}
+                </div>
+            {% endif %}
+        {% endwith %}
         <div class="card">
             <div class="card-body">
+                <form id="profileForm" method="POST" onsubmit="updateProfile(event)">
+                    <div class="mb-3">
+                        <label for="customerName" class="form-label"><strong>Name:</strong></label>
+                        <div class="input-group">
+                            <input type="text" id="customerName" name="customerName" class="form-control" value="{{ customer['name'] }}" readonly>
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="email" class="form-label"><strong>Email:</strong></label>
+                        <div class="input-group">
+                            <input type="email" id="email" name="email" class="form-control" value="{{ customer['email'] }}" readonly>
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="phone" class="form-label"><strong>Phone:</strong></label>
+                        <div class="input-group">
+                            <input type="text" id="phone" name="phone" class="form-control" value="{{ customer['phone'] }}" readonly>
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="referralCode" class="form-label"><strong>Referral Code:</strong></label>
+                        <div class="input-group">
+                            <input type="text" id="referralCode" name="referralCode" class="form-control" value="{{ customer['referral_code'] }}" readonly>
+                            <button type="button" class="copy-btn" onclick="copyReferralCode()">📋</button>
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="rewardPoints" class="form-label"><strong>Reward Points:</strong></label>
+                        <input type="text" id="rewardPoints" name="rewardPoints" class="form-control" value="{{ customer['reward_points'] }}" readonly>
+                    </div>
+                    <button type="button" class="edit-btn" onclick="editProfileFields()">Edit Profile</button>
+                    <button type="submit" class="update-btn">Update Profile</button>
+                </form>
             </div>
         </div>
         <a href="/menu" class="back-to-menu">Back to Menu</a>
     </div>
 </body>
 </html>