RoyAalekh commited on
Commit
b779bba
Β·
1 Parent(s): 5b53982

πŸŽ‰ 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!

Files changed (1) hide show
  1. 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(`Tree record saved successfully! ID: ${result.id}`, 'success');
390
- this.resetForm();
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() {