Update templates/customer_details.html
Browse files- templates/customer_details.html +31 -12
templates/customer_details.html
CHANGED
@@ -145,7 +145,8 @@
|
|
145 |
</style>
|
146 |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
147 |
<script>
|
148 |
-
function enableEditField(fieldId, flagId) {
|
|
|
149 |
var field = document.getElementById(fieldId);
|
150 |
var flagField = document.getElementById(flagId);
|
151 |
var changeBtn = $(field).siblings('.change-btn');
|
@@ -157,26 +158,28 @@
|
|
157 |
flagField.value = "true";
|
158 |
});
|
159 |
}
|
160 |
-
// Show CHANGE buttons for all
|
161 |
['customerName', 'phone', 'email'].forEach(function(id) {
|
162 |
if ($('#' + id).prop('readonly')) {
|
163 |
$('#' + id).siblings('.change-btn').show();
|
164 |
}
|
165 |
});
|
166 |
}
|
167 |
-
function onFocusNext(inputField) {
|
|
|
168 |
var changeBtn = $(inputField).siblings('.change-btn');
|
169 |
if ($(inputField).prop('readonly')) {
|
170 |
changeBtn.show();
|
171 |
}
|
172 |
-
// Show CHANGE buttons for all
|
173 |
['customerName', 'phone', 'email'].forEach(function(id) {
|
174 |
if ($('#' + id).prop('readonly')) {
|
175 |
$('#' + id).siblings('.change-btn').show();
|
176 |
}
|
177 |
});
|
178 |
}
|
179 |
-
function copyReferralCode(button) {
|
|
|
180 |
var referralCode = document.getElementById('referralCode').value;
|
181 |
navigator.clipboard.writeText(referralCode).then(() => {
|
182 |
$(button).find('span').text('COPIED');
|
@@ -186,6 +189,12 @@
|
|
186 |
}).catch(err => {
|
187 |
console.error('Failed to copy: ', err);
|
188 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
189 |
}
|
190 |
function updateProfile(event) {
|
191 |
event.preventDefault();
|
@@ -234,6 +243,16 @@
|
|
234 |
if ($('#emailEdited').val() === "true") {
|
235 |
$('#email').siblings('.change-btn').addClass('disabled').off('click');
|
236 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
237 |
});
|
238 |
</script>
|
239 |
</head>
|
@@ -255,26 +274,26 @@
|
|
255 |
|
256 |
<div class="form-group">
|
257 |
<label for="customerName">Name</label>
|
258 |
-
<input type="text" id="customerName" name="customerName" value="{{ customer['name'] }}" readonly>
|
259 |
-
<span class="change-btn" onclick="enableEditField('customerName', 'nameEdited')">CHANGE</span>
|
260 |
</div>
|
261 |
|
262 |
<div class="form-group">
|
263 |
<label for="phone">Mobile</label>
|
264 |
-
<input type="text" id="phone" name="phone" value="{{ customer['phone'] }}" readonly onfocus="onFocusNext(this)">
|
265 |
-
<span class="change-btn" onclick="enableEditField('phone', 'phoneEdited')">CHANGE</span>
|
266 |
</div>
|
267 |
|
268 |
<div class="form-group">
|
269 |
<label for="email">Email</label>
|
270 |
-
<input type="email" id="email" name="email" value="{{ customer['email'] }}" readonly onfocus="onFocusNext(this)">
|
271 |
-
<span class="change-btn" onclick="enableEditField('email', 'emailEdited')">CHANGE</span>
|
272 |
</div>
|
273 |
|
274 |
<div class="form-group">
|
275 |
<label for="referralCode">Referral Code</label>
|
276 |
<input type="text" id="referralCode" name="referralCode" value="{{ customer['referral_code'] }}" readonly>
|
277 |
-
<span class="copy-btn" onclick="copyReferralCode(this)">
|
278 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
279 |
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
280 |
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
|
145 |
</style>
|
146 |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
147 |
<script>
|
148 |
+
function enableEditField(fieldId, flagId, event) {
|
149 |
+
event.stopPropagation(); // Prevent click from bubbling to document
|
150 |
var field = document.getElementById(fieldId);
|
151 |
var flagField = document.getElementById(flagId);
|
152 |
var changeBtn = $(field).siblings('.change-btn');
|
|
|
158 |
flagField.value = "true";
|
159 |
});
|
160 |
}
|
161 |
+
// Show CHANGE buttons for all readonly fields
|
162 |
['customerName', 'phone', 'email'].forEach(function(id) {
|
163 |
if ($('#' + id).prop('readonly')) {
|
164 |
$('#' + id).siblings('.change-btn').show();
|
165 |
}
|
166 |
});
|
167 |
}
|
168 |
+
function onFocusNext(inputField, event) {
|
169 |
+
event.stopPropagation(); // Prevent focus click from bubbling to document
|
170 |
var changeBtn = $(inputField).siblings('.change-btn');
|
171 |
if ($(inputField).prop('readonly')) {
|
172 |
changeBtn.show();
|
173 |
}
|
174 |
+
// Show CHANGE buttons for all readonly fields
|
175 |
['customerName', 'phone', 'email'].forEach(function(id) {
|
176 |
if ($('#' + id).prop('readonly')) {
|
177 |
$('#' + id).siblings('.change-btn').show();
|
178 |
}
|
179 |
});
|
180 |
}
|
181 |
+
function copyReferralCode(button, event) {
|
182 |
+
event.stopPropagation(); // Prevent click from bubbling to document
|
183 |
var referralCode = document.getElementById('referralCode').value;
|
184 |
navigator.clipboard.writeText(referralCode).then(() => {
|
185 |
$(button).find('span').text('COPIED');
|
|
|
189 |
}).catch(err => {
|
190 |
console.error('Failed to copy: ', err);
|
191 |
});
|
192 |
+
// Show CHANGE buttons for all readonly fields
|
193 |
+
['customerName', 'phone', 'email'].forEach(function(id) {
|
194 |
+
if ($('#' + id).prop('readonly')) {
|
195 |
+
$('#' + id).siblings('.change-btn').show();
|
196 |
+
}
|
197 |
+
});
|
198 |
}
|
199 |
function updateProfile(event) {
|
200 |
event.preventDefault();
|
|
|
243 |
if ($('#emailEdited').val() === "true") {
|
244 |
$('#email').siblings('.change-btn').addClass('disabled').off('click');
|
245 |
}
|
246 |
+
// Handle outside clicks
|
247 |
+
$(document).on('click', function(event) {
|
248 |
+
if (!$(event.target).closest('.form-group input, .change-btn, .copy-btn').length) {
|
249 |
+
['customerName', 'phone', 'email'].forEach(function(id) {
|
250 |
+
if ($('#' + id).prop('readonly')) {
|
251 |
+
$('#' + id).siblings('.change-btn').show();
|
252 |
+
}
|
253 |
+
});
|
254 |
+
}
|
255 |
+
});
|
256 |
});
|
257 |
</script>
|
258 |
</head>
|
|
|
274 |
|
275 |
<div class="form-group">
|
276 |
<label for="customerName">Name</label>
|
277 |
+
<input type="text" id="customerName" name="customerName" value="{{ customer['name'] }}" readonly onfocus="onFocusNext(this, event)">
|
278 |
+
<span class="change-btn" onclick="enableEditField('customerName', 'nameEdited', event)">CHANGE</span>
|
279 |
</div>
|
280 |
|
281 |
<div class="form-group">
|
282 |
<label for="phone">Mobile</label>
|
283 |
+
<input type="text" id="phone" name="phone" value="{{ customer['phone'] }}" readonly onfocus="onFocusNext(this, event)">
|
284 |
+
<span class="change-btn" onclick="enableEditField('phone', 'phoneEdited', event)">CHANGE</span>
|
285 |
</div>
|
286 |
|
287 |
<div class="form-group">
|
288 |
<label for="email">Email</label>
|
289 |
+
<input type="email" id="email" name="email" value="{{ customer['email'] }}" readonly onfocus="onFocusNext(this, event)">
|
290 |
+
<span class="change-btn" onclick="enableEditField('email', 'emailEdited', event)">CHANGE</span>
|
291 |
</div>
|
292 |
|
293 |
<div class="form-group">
|
294 |
<label for="referralCode">Referral Code</label>
|
295 |
<input type="text" id="referralCode" name="referralCode" value="{{ customer['referral_code'] }}" readonly>
|
296 |
+
<span class="copy-btn" onclick="copyReferralCode(this, event)">
|
297 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
298 |
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
299 |
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|