Spaces:
Running
Running
π Improve tree submission success message and UX
Browse files⨠User Experience Improvements:
β’ Replace confusing 'Form reset successfully!' with clear success message
β’ Show tree ID and explain that form is cleared for next entry
β’ Add tree emoji (π³) for visual appeal
β’ Separate resetFormSilently() for internal use vs. manual reset
π§ Technical Changes:
β’ Split resetForm() into user-facing and silent versions
β’ Better success message: 'Tree successfully added! Tree ID: X. The form has been cleared for your next entry.'
β’ Fixed syntax error in form submission handler
β’ Improved user feedback and clarity
π― Result: Users now get clear, encouraging feedback when adding trees!
- static/app.js +7 -4
static/app.js
CHANGED
@@ -386,8 +386,8 @@ class TreeTrackApp {
|
|
386 |
|
387 |
if (response.ok) {
|
388 |
const result = await response.json();
|
389 |
-
this.showMessage(
|
390 |
-
this.
|
391 |
this.loadTrees(); // Refresh the tree list
|
392 |
} else {
|
393 |
const error = await response.json();
|
@@ -400,6 +400,11 @@ class TreeTrackApp {
|
|
400 |
}
|
401 |
|
402 |
resetForm() {
|
|
|
|
|
|
|
|
|
|
|
403 |
document.getElementById('treeForm').reset();
|
404 |
this.uploadedPhotos = {};
|
405 |
this.audioFile = null;
|
@@ -417,8 +422,6 @@ class TreeTrackApp {
|
|
417 |
|
418 |
document.getElementById('recordingStatus').textContent = 'Click to start recording';
|
419 |
document.getElementById('audioUploadResult').innerHTML = '';
|
420 |
-
|
421 |
-
this.showMessage('Form reset successfully!', 'success');
|
422 |
}
|
423 |
|
424 |
async loadTrees() {
|
|
|
386 |
|
387 |
if (response.ok) {
|
388 |
const result = await response.json();
|
389 |
+
this.showMessage(`π³ Tree successfully added! Tree ID: ${result.id}. The form has been cleared for your next entry.`, 'success');
|
390 |
+
this.resetFormSilently();
|
391 |
this.loadTrees(); // Refresh the tree list
|
392 |
} else {
|
393 |
const error = await response.json();
|
|
|
400 |
}
|
401 |
|
402 |
resetForm() {
|
403 |
+
this.resetFormSilently();
|
404 |
+
this.showMessage('Form has been reset.', 'success');
|
405 |
+
}
|
406 |
+
|
407 |
+
resetFormSilently() {
|
408 |
document.getElementById('treeForm').reset();
|
409 |
this.uploadedPhotos = {};
|
410 |
this.audioFile = null;
|
|
|
422 |
|
423 |
document.getElementById('recordingStatus').textContent = 'Click to start recording';
|
424 |
document.getElementById('audioUploadResult').innerHTML = '';
|
|
|
|
|
425 |
}
|
426 |
|
427 |
async loadTrees() {
|