Skip to content

Commit

Permalink
Merge pull request #124 from amosproj/feat/17-resource-booking-functi…
Browse files Browse the repository at this point in the history
…on-2

add frontend functionality
  • Loading branch information
xilef45 authored Dec 7, 2022
2 parents 7f8b499 + b9fb26b commit 137ed1b
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 13 deletions.
32 changes: 25 additions & 7 deletions src/deskstar-frontend/components/DesksTable.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import { IDesk } from "../types/desk";
import React from "react";

const DesksTable = ({ desks }: { desks: IDesk[] }) => {
const DesksTable = ({
desks,
onBook,
}: {
desks: IDesk[];
onBook: Function;
}) => {
return (
<div className="overflow-x-auto">
<table className="table table-zebra w-full">
Expand All @@ -14,24 +20,36 @@ const DesksTable = ({ desks }: { desks: IDesk[] }) => {
</thead>
<tbody>
{desks.map((desk: IDesk) => (
<DeskTableEntry key={desk.deskId} desk={desk} />
<DeskTableEntry key={desk.deskId} desk={desk} onBook={onBook}/>
))}
</tbody>
</table>
</div>
);
};

const DeskTableEntry = ({ desk }: { desk: IDesk }) => {
const DeskTableEntry = ({
desk,
onBook,
}: {
desk: IDesk;
onBook: Function;
}) => {
return (
<tr className="hover">
<td className="text-left font-bold">{desk.deskName}</td>
<td className="text-left">{desk.deskTyp}</td>
<td className="text-right">
<a href="#book-modal" className="btn btn-success">
<button
className="btn btn-success"
onClick={(event) => onBook(event, desk)}
>
Book
</a>
<div id="book-modal" className="modal">
</button>
{/* <a href="#book-modal" className="btn btn-success">
Book
</a> */}
{/* <div id="book-modal" className="modal">
<div className="modal-box text-left">
<a href="#close" className="btn btn-sm btn-circle float-right">
x
Expand Down Expand Up @@ -96,7 +114,7 @@ const DeskTableEntry = ({ desk }: { desk: IDesk }) => {
Book
</a>
</div>
</div>
</div> */}
</td>
</tr>
);
Expand Down
39 changes: 39 additions & 0 deletions src/deskstar-frontend/lib/api/BookingService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,42 @@ export async function getBookings(

return bookings;
}

export async function createBooking(
session: Session,
deskId: string,
startTime: EpochTimeStamp,
endTime: EpochTimeStamp
) {
const response = await fetch(BACKEND_URL + "/bookings", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.accessToken}`,
},
body: JSON.stringify({
deskId,
startTime,
endTime,
}),
});
console.log(await response.status);
if (response.status !== 200) {
let text = await response.text();
// take away the quotes
text = text.substring(1, text.length - 1);
console.log(text);
switch (text) {
case "User not found":
return "User not found";
case "Desk not found":
return "The desk you are trying to book does not exist";
case "Time slot not available":
return "The time slot you are trying to book is not available";
default:
return "An unknown error occurred";
}
} else {
return "success";
}
}
6 changes: 5 additions & 1 deletion src/deskstar-frontend/lib/api/ResourceService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ export async function getBuildings(session: Session): Promise<IBuilding[]> {
});

if (response.status !== 200) {
console.log("Error fetching buildings");
console.log(response.status);
console.log( "Error fetching buildings");
return [];
}

Expand All @@ -40,6 +41,7 @@ export async function getFloors(
);

if (response.status !== 200) {
console.log(response.status);
console.log("Error fetching floors");
return [];
}
Expand All @@ -63,6 +65,7 @@ export async function getRooms(
);

if (response.status !== 200) {
console.log(response.status);
console.log("Error fetching rooms");
return [];
}
Expand All @@ -86,6 +89,7 @@ export async function getDesks(
);

if (response.status !== 200) {
console.log(response.status);
console.log("Error fetching desks");
return [];
}
Expand Down
41 changes: 36 additions & 5 deletions src/deskstar-frontend/pages/bookings/add.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
getFloors,
getRooms,
} from "../../lib/api/ResourceService";
import { createBooking } from "../../lib/api/BookingService";
import { IBuilding } from "../../types/building";
import { ILocation } from "../../types/location";
import { IFloor } from "../../types/floor";
Expand Down Expand Up @@ -38,8 +39,38 @@ const Bookings = ({ buildings: origBuildings }: { buildings: IBuilding[] }) => {
const [selectedDeskTypes, setSelectedDeskTypes] = useState<IDeskType[]>([]);
const [desks, setDesks] = useState<IDesk[]>([]);

let startDateTime: string;
let endDateTime: string;
const [startDateTime, setStartDateTime] = useState<string>(
new Date().toISOString().substring(0, "YYYY-MM-DDTHH:SS".length)
);
const [endDateTime, setEndDateTime] = useState<string>(getEndDate());

async function onBook(event, desk) {
event.target.setAttribute("class", "btn loading");
let message;

await createBooking(session, desk.deskId, startDateTime, endDateTime)
.then((response) => {
if (response == "success") {
message =
"You successfully booked the desk " +
desk.deskName +
" from " +
startDateTime +
" to " +
endDateTime;
event.target.setAttribute("class", "btn btn-disabled");
} else {
console.log(response);
message = response;
event.target.setAttribute("class", "btn btn-success");
}
})
.catch((error) => {
console.error("Error calling createBooking:", error);
event.target.setAttribute("class", "btn btn-success");
});
alert(message);
}

async function onSelectedLocationChange(selectedLocations: ILocation[]) {
console.log(selectedLocations);
Expand Down Expand Up @@ -139,7 +170,7 @@ const Bookings = ({ buildings: origBuildings }: { buildings: IBuilding[] }) => {
.toISOString()
.substring(0, "YYYY-MM-DDTHH:SS".length)}
min={new Date().toISOString().substring(0, "YYYY-MM-DDTHH:SS".length)}
onChange={(event) => (startDateTime = event.target.value)}
onChange={(event) => setStartDateTime(event.target.value)}
/>
</div>

Expand All @@ -153,7 +184,7 @@ const Bookings = ({ buildings: origBuildings }: { buildings: IBuilding[] }) => {
id="end-date-time"
min={new Date().toISOString().substring(0, "YYYY-MM-DDTHH:SS".length)}
defaultValue={getEndDate()}
onChange={(event) => (endDateTime = event.target.value)}
onChange={(event) => setEndDateTime(event.target.value)}
/>
</div>

Expand Down Expand Up @@ -207,7 +238,7 @@ const Bookings = ({ buildings: origBuildings }: { buildings: IBuilding[] }) => {
{rooms.length == 0 && <p>Please select a floor</p>}
{deskTypes.length == 0 && <p>Please select a room</p>}

{desks.length > 0 && <DesksTable desks={desks} />}
{desks.length > 0 && <DesksTable desks={desks} onBook={onBook} />}
</div>
);
};
Expand Down

0 comments on commit 137ed1b

Please sign in to comment.