✨ Finish the project

src/app.ts

@@ -2,6 +2,7 @@ import express from "express";
 import morgan from "morgan";
 import tableRoute from "./routes/tables";
 import waitlistRoute from "./routes/waitlist";
+import clearRoute from "./routes/clear";
 import path from "path";
 
 const app = express();
@@ -11,12 +12,14 @@ const app = express();
  */
 app.use(morgan("combined"));
 app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
 
 /**
  * Routes
  */
 app.use("/api", tableRoute);
 app.use("/api", waitlistRoute);
+app.use("/api", clearRoute);
 
 /**
  * Static content

src/routes/clear.ts

@@ -0,0 +1,13 @@
+import express from "express";
+import { clearData } from "../db";
+
+const clearRoute = express();
+
+clearRoute.post("/clearData", (_req, res) => {
+  clearData();
+  return res.status(200).json({
+    success: true,
+  });
+});
+
+export default clearRoute;

src/routes/tables.ts

@@ -8,7 +8,7 @@ tableRoute.get("/tables", (_req, res) => {
   return res.status(200).json(getReservations());
 });
 
-tableRoute.post("/table", (req, res) => {
+tableRoute.post("/tables", (req, res) => {
   const table: Table = req.body;
   return res.status(200).json({
     reserved: reserveTable(table),

src/routes/waitlist.ts

@@ -3,7 +3,7 @@ import { getWaitlist } from "../db";
 
 const waitlistRoute = express();
 
-waitlistRoute.get("/waitlist", (_req, res) => {
+waitlistRoute.get("/waitlisttables", (_req, res) => {
   return res.status(200).json(getWaitlist());
 });
 

static/index.html

@@ -51,4 +51,18 @@ <h2 class="text-center">
       </footer>
     </div>
   </body>
+  <script src="https://code.jquery.com/jquery.js"></script>
+  <script type="text/javascript">
+    $("#MesasDisponibles").text("");
+
+    $.ajax({
+      url: "/api/tables",
+      method: "GET",
+    }).then((tableData) => {
+      const reservas = tableData.length;
+      const disponibles = 5 - reservas;
+
+      $("#MesasDisponibles").text(disponibles);
+    });
+  </script>
 </html>

static/reserve.html

@@ -39,6 +39,19 @@ <h2 class="text-center">Reservar</h2>
           </a>
         </div>
       </div>
+      <div class="alert alert-success" id="success-alert" style="display: none">
+        <strong>Reservación exitosa! </strong>
+      </div>
+      <div
+        class="alert alert-warning"
+        id="lleno-alert"
+        style="display: none; opacity: 500"
+      >
+        <strong
+          >Oops! Todas las mesas se encuentren reservadas, pero te hemos
+          agregado a la lista de espera.
+        </strong>
+      </div>
       <div class="row">
         <div class="col-lg-12">
           <!-- Reservation Page -->
@@ -77,7 +90,39 @@ <h2 class="text-center">Reservar</h2>
       </footer>
     </div>
   </body>
-</html>
+  <!-- BELOW CODE IS CRITICAL. IT HANDLES HOW FORM DATA IS SENT TO OUR SERVER -->
+  <script type="text/javascript">
+    $("#success-alert").hide();
+    $("#lleno-alert").hide();
+
+    $(".submit").on("click", (event) => {
+      event.preventDefault();
 
-<!-- BELOW CODE IS CRITICAL. IT HANDLES HOW FORM DATA IS SENT TO OUR SERVER -->
-<script type="text/javascript"></script>
+      const newReservation = {
+        name: $("#reserve-name").val().trim(),
+        phone: $("#reserve-phone").val().trim(),
+        email: $("#reserve-email").val().trim(),
+      };
+
+      $.post("/api/tables", newReservation, (data) => {
+        if (data.reserved) {
+          $("#success-alert")
+            .fadeTo(3000, 500)
+            .slideUp(500, () => {
+              $("#success-alert").slideUp(500);
+            });
+        } else {
+          $("#lleno-alert")
+            .fadeTo(3000, 500)
+            .slideUp(500, () => {
+              $("#lleno-alert").slideUp(500);
+            });
+        }
+
+        $("#reserve-name").val("");
+        $("#reserve-phone").val("");
+        $("#reserve-email").val("");
+      });
+    });
+  </script>
+</html>

static/tables.html

@@ -77,5 +77,56 @@ <h4>Lista de Espera</h4>
   </body>
 
   <!-- BELOW CODE IS CRITICAL. IT HANDLES HOW FORM DATA IS LOADED FROM OUR SERVER -->
-  <script type="text/javascript"></script>
+  <script type="text/javascript">
+    const addTables = (tables, parent) => {
+      tables.forEach(({ name, email, phone }, i) => {
+        const listItem = $("<li class='list-group-item mt-4'>");
+
+        listItem.append(
+          $("<h2>").text("Mesa# " + (i + 1)),
+          $("<hr>"),
+          $("<h2>").text("Nombre: " + name),
+          $("<h2>").text("Email: " + email),
+          $("<h2>").text("Teléfono: " + phone)
+        );
+
+        parent.append(listItem);
+      });
+    };
+
+    const getTables = () => {
+      $.ajax({
+        url: "/api/tables",
+        method: "GET",
+      }).then((tables) => {
+        const tableList = $("#tableList");
+        addTables(tables, tableList);
+      });
+    };
+
+    const getWaitlist = () => {
+      $.ajax({
+        url: "/api/waitlisttables",
+        method: "GET",
+      }).then((tables) => {
+        const waitList = $("#waitList");
+        addTables(tables, waitList);
+      });
+    };
+
+    const clearTable = () => {
+      $.ajax({
+        url: "/api/clear",
+        method: "POST",
+      }).then(() => {
+        $("#waitList").empty();
+        $("#tableList").empty();
+      });
+    };
+
+    $("#clear").on("click", clearTable);
+
+    getTables();
+    getWaitlist();
+  </script>
 </html>