Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add frontend functionality #124

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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