Add reservation counter

lily-coder · lily-coder · commit 61836d412038 · 2021-09-17T12:34:38.000+03:00
diff --git a/src/modules/render/reservation.js b/src/modules/render/reservation.js
@@ -1,4 +1,5 @@
 import API from '../data';
+import counter from '../counter';
 
 const modal = document.getElementById('reservation-modal');
 
@@ -97,16 +98,23 @@ const reserveModal = (meal) => {
 
   const sectionTitle = document.createElement('div');
   reserveContent.appendChild(sectionTitle);
-  const sectionTitleHeader = document.createElement('h2');
+  const sectionTitleHeader = document.createElement('div');
   sectionTitleHeader.className = 'section-title';
-  sectionTitleHeader.innerHTML = 'Reservations(0)';
+  const reservationCounterHeading = document.createElement('h2');
+  reservationCounterHeading.innerHTML = 'Reservations';
+  sectionTitleHeader.appendChild(reservationCounterHeading);
+  const reservationCounter = document.createElement('span');
+  reservationCounter.className = 'reservations-counter';
+  reservationCounterHeading.appendChild(reservationCounter);
   sectionTitle.appendChild(sectionTitleHeader);
   const reservationList = document.createElement('li');
   reservationList.className = 'reservation-list';
   API.getReservations(meal.idMeal).then((data) => {
     if (data === 'No reservations available for this meal') {
       reservationList.innerHTML = `<li class='no-comments'>${`${data}. Add a new reservation`}</li>`;
     } else {
+      const reservationCounter = counter.reservation(data);
+      sectionTitleHeader.innerHTML = `Reservation(${reservationCounter})`;
       data.forEach((userReservation) => {
         displayReservations(reservationList, userReservation);
       });
@@ -173,7 +181,6 @@ const reserveModal = (meal) => {
     inputReserveStartDate.value = '';
     inputReserveEndDate.value = '';
   };
-
   closeButton.addEventListener('click', () => {
     modal.style.display = 'none';
   });
