#51 Render alerts as form related messages (success or error) (#53)

conorheffron · Nov 16, 2024 · 809ee93 · 809ee93
1 parent 11b0d26
commit 809ee93
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/restaurant/static/js/reservations.js b/restaurant/static/js/reservations.js
@@ -16,14 +16,25 @@ function submitHandler(e) {
     fetch(form.action, { method: 'POST', body: new FormData(form) })
         .then(response => response.json())
         .then(response => {
-            alert(response.message);
+            renderAlertMessage(response.message);
             bookings_by_date = response.reservations
             console.log(bookings_by_date)
             // form.reset();
             renderTableBookings(bookings_by_date)
         });
 }
 
+function renderAlertMessage(message) {
+    if (message.includes('Booking Failed')) {
+        document.getElementById('form-out-msg').innerHTML = '<div id="form-out-msg" class="alert alert-danger" role="alert">' + message + '</div>'
+    } else if (message.includes('Booking Complete')) {
+        document.getElementById('form-out-msg').innerHTML = '<div id="form-out-msg" class="alert alert-success" role="alert">' + message + '</div>'
+    } else {
+        document.getElementById('form-out-msg').innerHTML = '<div id="form-out-msg"></div>'
+        console.log('Invalid message returned from server: ' + message)
+    }
+}
+
 function renderTable(booking_date) {
     console.log(booking_date)
     try {

diff --git a/restaurant/templates/booking.html b/restaurant/templates/booking.html
@@ -22,6 +22,7 @@
 
     <div id="bookings" class="container pt-5">
         <h3>Make a Reservation</h1>
+        <div id="form-out-msg"></div>
         <form method="POST" id="form">
             {% csrf_token %}
             {{ form.as_p }}