Reservations counter

.gitignore

@@ -2,4 +2,6 @@
 
 /dist
 
-/coverage
+/coverage
+
+.env

package.json

@@ -48,4 +48,4 @@
     "lodash": "^4.17.21",
     "uuidv4": "^6.2.12"
   }
-}
+}

src/apis/index.js

@@ -1,3 +1,3 @@
 /* eslint-disable no-unused-vars */
-const involvementID = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/qwFEh0Dwu7LrqmgqtV9u/likes/'
+const involvementID = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/qwFEh0Dwu7LrqmgqtV9u/likes/';
 const involvmentAPI = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi';

src/index.html

@@ -161,6 +161,65 @@
       </div>
     </div>
 
+    <!-- main -->
+    <div class="container text-center">
+        <button class="reservation-btn">Resevation</button>
+    </div>
+
+    <!-- Resevation Modal -->
+    <div id="reservation-modal" class="modal">
+      <div class="modal-content-wrapper">
+        <div class="modal-content">
+          <span id="closeBtn" class="close-modal">&times;</span>
+          <div class="container">
+            <div class="inner-content">
+              <img src="https://images.squarespace-cdn.com/content/v1/5190d201e4b0e86c59643db1/1596337984880-PLN8JEIO6PHZNBNN2ZNO/8F053A6A-0C62-4BE2-8AFB-7A0FEC7F2282.JPG?format=1000w" alt="">
+
+              <div class="text-box">
+                <h1 class="heading text-center">Bounty Food :)</h1>
+                <div class="flex-items">
+                  <div class="left">
+                    <p class="text">Food: Assorted Meal</p>
+                    <p class="text">Weight: 500</p>
+                  </div>
+                  <div class="right">
+                    <p class="text">Length: 100 000 00</p>
+                    <p class="text">Power: 500 00 000 00 000</p>
+                  </div>
+                </div>
+              </div>
+
+              <div class="reservations-box">
+                <h1 class="sub-heading text-center">Reservation (<span class="counts"></span>)</h1>
+
+                <div class="reservations"></div>
+              </div>
+
+              <form class="reservation-form">
+                <h1 class="sub-heading text-center">Add a reservation</h1>
+                <div>
+                  <label for="name"></label>
+                  <input type="text" class="name" placeholder="Your name" required>
+                </div>
+                <div>
+                  <label for="start-date"></label>
+                  <input type="text" class="start-date" placeholder="Start date" required onfocus="(this.type='date')">
+                </div>
+                <div>
+                  <label for="end-date"></label>
+                  <input type="text" class="end-date" placeholder="End date"  required onfocus="(this.type='date')">
+                </div>
+
+                <button class="reserve-btn">Reserve</button>
+              </form>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
     <footer class="py-16 bg-white border-t border-stone-200">
         <div class="px-8 max-w-7xl mx-auto">
           <div class="grid grid-cols-3">

src/index.js

@@ -1,3 +1,14 @@
 import './base.css';
 import './style.css';
-// import logo from './yummly.svg';
+// import logo from './yummly.svg';
+
+import {
+  hideModalOnLoad, displayReservationModal, closeModal, addReservation,
+} from './module/reservation.js';
+
+hideModalOnLoad();
+displayReservationModal();
+closeModal();
+addReservation();
+
+// updateReservationsList();

src/module/counter.js

@@ -0,0 +1,9 @@
+export default class ReservationsCounter {
+  constructor(reservations) {
+    this.reservations = reservations;
+  }
+
+  getLength() {
+    return this.reservations.length;
+  }
+}

src/module/reservation.js

@@ -0,0 +1,89 @@
+import ReservationsCounter from './counter.js';
+
+const reservationBtn = document.querySelector('.reservation-btn');
+const modal = document.querySelector('.modal');
+
+const hideModalOnLoad = () => {
+  window.addEventListener('DOMContentLoaded', () => {
+    modal.style.display = 'none';
+  });
+};
+
+const updateReservationsList = async () => {
+  const reservations = document.querySelector('.reservations');
+  const itemID = 7005;
+  const endpoint = `https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/qwFEh0Dwu7LrqmgqtV9u/reservations/?item_id=${itemID}`;
+
+  const data = await fetch(endpoint);
+  const items = await data.json();
+
+  reservations.innerHTML = '';
+  const counts = document.querySelector('.counts');
+
+  const countReservations = new ReservationsCounter(items);
+
+  counts.innerText = countReservations.getLength();
+
+  items.forEach((item) => {
+    const content = `
+    <p>${item.date_start} - ${item.date_end} by ${item.username}</p>
+    `;
+    reservations.innerHTML += content;
+  });
+};
+
+const displayReservationModal = () => {
+  reservationBtn.addEventListener('click', () => {
+    modal.style.display = 'block';
+    updateReservationsList();
+  });
+};
+
+const closeModal = () => {
+  const closeBtn = document.querySelector('#closeBtn');
+
+  closeBtn.addEventListener('click', () => {
+    modal.style.display = 'none';
+  });
+};
+
+const recoredReservation = async (id, username, startDate, endDate) => {
+  const endpoint = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/qwFEh0Dwu7LrqmgqtV9u/reservations';
+
+  await fetch(endpoint, {
+    method: 'POST',
+    headers: { 'Content-type': 'application/json' },
+    body: JSON.stringify({
+      item_id: id,
+      username,
+      date_start: startDate,
+      date_end: endDate,
+    }),
+  });
+};
+
+const addReservation = () => {
+  const form = document.querySelector('.reservation-form');
+  const username = document.querySelector('.name');
+  const startDate = document.querySelector('.start-date');
+  const endDate = document.querySelector('.end-date');
+  const reserveBtn = document.querySelector('.reserve-btn');
+
+  reserveBtn.addEventListener('click', async (e) => {
+    e.preventDefault();
+
+    await recoredReservation(7005, username.value, startDate.value, endDate.value);
+
+    await updateReservationsList();
+
+    form.reset();
+  });
+};
+
+export {
+  displayReservationModal,
+  closeModal,
+  addReservation,
+  hideModalOnLoad,
+  updateReservationsList,
+};