tables

back-end/src/db/migrations/20210123122225_createReservationsTable.js

@@ -13,5 +13,5 @@ exports.up = function (knex) {
 
 exports.down = function(knex) {
   return knex.schema.dropTable("reservations")
-  .then(() => console.log("Dropped Table"))
+  .then(() => console.log("Dropped Reservation Table"))
 };

back-end/src/db/migrations/20240530112512_createTablesTable.js

@@ -0,0 +1,14 @@
+
+exports.up = function(knex) {
+    return knex.schema.createTable("tables", (table) => {
+        table.increments("table_id").primary();
+        table.string("table_name")
+        table.integer("capacity")
+        table.timestamps(true, true);
+    });
+};
+
+exports.down = function(knex) {
+    return knex.schema.dropTable("tables")
+    .then(() => console.log("Dropped Table Table"))
+};

back-end/src/db/seeds/01-tables.js

@@ -0,0 +1,9 @@
+const tables = require("./01-tables.json")
+
+
+exports.seed = function(knex) {
+  return knex.raw("TRUNCATE TABLE tables RESTART IDENTITY CASCADE")
+  .then(function (){
+    return knex("tables").insert(tables)
+  })
+};

back-end/src/db/seeds/01-tables.json

@@ -0,0 +1,18 @@
+[
+  {
+    "table_name": "Bar #1",
+    "capacity": 1
+  },
+  {
+    "table_name": "Bar #2",
+    "capacity": 1
+  },
+  {
+    "table_name": "#1",
+    "capacity": 6
+  },
+  {
+    "table_name": "#2",
+    "capacity": 6
+  }
+]

back-end/src/tables/tables.controller.js

@@ -3,10 +3,8 @@ const service = require("./tables.service")
 const moment = require("moment")
 
 async function list(req, res) {
-  console.log("list")
-  res.json({
-    data: await service.list(),
-  });
+  console.log("list tables")
+  res.json({ data: await service.list() });
 }
 
 module.exports = {

front-end/src/dashboard/Dashboard.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import {useLocation, useNavigate} from "react-router-dom"
-import { listReservations } from "../utils/api";
+import { listReservations, listTables } from "../utils/api";
 import ErrorAlert from "../layout/ErrorAlert";
 import { today, previous, next } from "../utils/date-time";
 
@@ -13,6 +13,7 @@ import { today, previous, next } from "../utils/date-time";
 function Dashboard() {
   const [reservations, setReservations] = useState([]);
   const [reservationsError, setReservationsError] = useState(null);
+  const [tables, setTables] = useState([])
 
   let navigate = useNavigate()
   let location = useLocation()
@@ -28,6 +29,8 @@ function Dashboard() {
   function loadDashboard() {
     const abortController = new AbortController();
     setReservationsError(null);
+    listTables(abortController.signal)
+      .then(setTables);
     listReservations({ date }, abortController.signal)
       .then(setReservations)
       .catch(setReservationsError);
@@ -46,13 +49,30 @@ function Dashboard() {
                       <p className="card-text"><b>Reservation Time:</b> {reservation.reservation_time} --- {reservation.reservation_date}</p>
                       <p className="card-text"><b>Number of People:</b> {reservation.people}</p>
                       <button>Edit</button>
+                      <button>Seat</button>
                       <button className="btn btn-danger">Delete</button>
                   </div>
               </div>
           </li>
           : null
           ));
 
+          const tableItems = tables.map((table, index) => (
+            <li key={index}>
+              <div className="card">
+                  <div className="card-body">
+                      <div className="card-header"><h5 className="card-title">Table {table.table_name}</h5></div>
+                      <p className="card-text"><b>Table Capacity:</b> {table.capacity}</p>
+                      <button>Edit</button>
+                      <button>Seat</button>
+                      <button className="btn btn-danger">Delete</button>
+                  </div>
+              </div>
+          </li>
+
+
+          ))
+
   return (
     <main>
       <h1>Dashboard</h1>
@@ -65,9 +85,14 @@ function Dashboard() {
       <ErrorAlert error={reservationsError} />
       {JSON.stringify(reservations)}
       <br/>
-
-      <ul>{reservationItems}</ul>
-
+      <div>
+      <h3>Reservations</h3>
+        <ul>{reservationItems}</ul>
+      </div>
+      <div>
+        <h3>Tables</h3>
+        <ul>{tableItems}</ul>
+      </div>
     </main>
   );
 }

front-end/src/layout/CreateEditTable.js

@@ -45,7 +45,8 @@ function CreateEditTable(){
                     <br />
                     <input
                         id="capacity"
-                        type="text"
+                        type="number"
+                        min="1"
                         name="capacity"
                         onChange={handleChange}
                         value={formData.capacity}

front-end/src/layout/RootRoutes.js

@@ -38,6 +38,7 @@ function RootRoutes() {
         <Route path="/reservations" element={<Dashboard reservations={reservations}/>} />
         <Route path="/reservations/new" element={<CreateEditReservation />} />
         <Route path="/reservations/:reservation_id/edit" element={<CreateEditReservation/>} />
+        <Route path="/reservations/:reservation_id/seat" element={<CreateEditTable />} />
         <Route path="/tables/new" element={<CreateEditTable />} />
         <Route path="/tables/:table_id/seat" element={<CreateEditTable/>}/>
         <Route path="/dashboard/*" element={<Dashboard date={today()}/>} />

front-end/src/utils/api.js

@@ -69,6 +69,14 @@ export async function listReservations(params, signal) {
 
 }
 
+export async function listTables(params, signal) {
+  const url = new URL(`${API_BASE_URL}/tables`);
+  Object.entries(params).forEach(([key, value]) =>
+  url.searchParams.append(key, value.toString())
+)
+return await fetchJson(url, { headers, signal }, [])
+}
+
 
 /**
  * Saves the reservation to the database.