refactored client script

Cefalo · Sep 10, 2024 · 8c3dfcc · 8c3dfcc
1 parent 9bcce44
commit 8c3dfcc
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 41 deletions.
diff --git a/client/index.html b/client/index.html
@@ -79,7 +79,7 @@
                         </div>
 
                     </div>
-                    <button id="book_btn" class="book_btn" type="button">
+                    <button id="book_btn" class="book_btn" onclick="onBookClick()" type="button">
                         <span class="spinner-border spinner-border-sm" aria-hidden="true" style="display: none;"></span>
                         <span role="status">BOOK</span>
                     </button>

diff --git a/client/script.js b/client/script.js
@@ -123,35 +123,6 @@ function incrementFloor() {
   document.getElementById('floor_text').textContent = floor;
 }
 
-async function bookRoom() {
-  const startTimeSelect = document.getElementById('startTime');
-  const startTime = startTimeSelect.value;
-
-  const date = new Date(Date.now()).toISOString().split('T')[0];
-  const formattedStartTime = convertToRFC3339(date, startTime);
-
-  console.log('formattedStartTime', formattedStartTime);
-
-  const duration = document.getElementById('duration').textContent;
-  const seats = document.getElementById('seat_text').textContent;
-  const floor = document.getElementById('floor_text').textContent;
-
-  const res = await makeRequest('/room', 'POST', {
-    startTime: formattedStartTime,
-    duration: parseInt(duration),
-    seats: parseInt(seats),
-    floor: parseInt(floor),
-    timeZone: getTimeZoneString(),
-  });
-
-  if (res.error) {
-    createErrorAlert(res.message);
-    return;
-  }
-
-  createRoomAlert(res.room, convertToLocaleTime(res.start), convertToLocaleTime(res.end), res.summary, 'info');
-}
-
 async function makeRequest(path, method, body, params) {
   try {
     let url = `${BACKEND_ENDPOINT}${path}`;
@@ -199,21 +170,43 @@ function login() {
   window.location.href = authUrl;
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-  const bookBtn = document.getElementById('book_btn');
-  bookBtn.addEventListener('click', async () => {
-    console.log('Booking room');
+async function onBookClick() {
+  console.log('Booking room');
+
+  const spinner = bookBtn.querySelector('.spinner-border');
+  bookBtn.disabled = true;
+  spinner.style.display = 'inline-block';
+
+  const startTimeSelect = document.getElementById('startTime');
+  const startTime = startTimeSelect.value;
+
+  const date = new Date(Date.now()).toISOString().split('T')[0];
+  const formattedStartTime = convertToRFC3339(date, startTime);
 
-    const spinner = bookBtn.querySelector('.spinner-border');
-    bookBtn.disabled = true;
-    spinner.style.display = 'inline-block';
+  console.log('formattedStartTime', formattedStartTime);
 
-    await bookRoom();
+  const duration = document.getElementById('duration').textContent;
+  const seats = document.getElementById('seat_text').textContent;
+  const floor = document.getElementById('floor_text').textContent;
 
-    bookBtn.disabled = false;
-    spinner.style.display = 'none';
+  const res = await makeRequest('/room', 'POST', {
+    startTime: formattedStartTime,
+    duration: parseInt(duration),
+    seats: parseInt(seats),
+    floor: parseInt(floor),
+    timeZone: getTimeZoneString(),
   });
-});
+
+  if (res.error) {
+    createErrorAlert(res.message);
+    return;
+  }
+
+  createRoomAlert(res.room, convertToLocaleTime(res.start), convertToLocaleTime(res.end), res.summary, 'info');
+
+  bookBtn.disabled = false;
+  spinner.style.display = 'none';
+}
 
 function toggleVisibility(id) {
   const element = document.getElementById(id);