+
+
Reservations
+
+ VTT devices can at times be reserved. At these times the queue will be paused.
+ Reservations can be viewed from this calendar. Note that making reservations through FiQCI is not currently possible.
+
+
setBookingModalOpen(true)}>View Reservations
+
+
+
Devices
+
{devicesWithStatus.map((qc, index) => (
handleCardClick(qc)} />
))}
+
+
+ {bookingModalOpen && (
+
+ )}
+
{modalOpen && (
)}
diff --git a/src/components/SiteSearch.jsx b/src/components/SiteSearch.jsx
index d73bb7dd0d99..8b10196ae0bd 100644
--- a/src/components/SiteSearch.jsx
+++ b/src/components/SiteSearch.jsx
@@ -6,6 +6,7 @@ import {
CCardTitle, CCardContent, CCardActions
} from '@cscfi/csc-ui-react';
import { prependBaseURL } from '../utils/url';
+import { capitalizeFirstLetter } from "../utils/textUtils";
const style = {
"--_c-button-font-size": 14,
@@ -107,10 +108,6 @@ function findItemByRef(ref, store) {
return Object.values(store).flat().find(item => item.key.toLowerCase() === normalizedRef);
}
-function capitalizeFirstLetter(val) {
- return String(val).charAt(0).toUpperCase() + String(val).slice(1);
-}
-
const SearchBar = ({ setResults, setQuery, query }) => {
const handleSearchBar = (e) => {
const input = e.target.value;
diff --git a/src/components/StatusModal/StatusModal.jsx b/src/components/StatusModal/StatusModal.jsx
index 0f2ca50b10a7..3fac9f6481d8 100644
--- a/src/components/StatusModal/StatusModal.jsx
+++ b/src/components/StatusModal/StatusModal.jsx
@@ -4,26 +4,7 @@ import { useState, useEffect } from 'react'
import { CModal } from '@cscfi/csc-ui-react';
import { ModalContent } from './StatusModalConent';
-
-export default function useWindowSize() {
- const [width, setWidth] = useState(
- typeof window !== 'undefined' ? window.innerWidth : 0
- );
-
- useEffect(() => {
- const onResize = () => setWidth(window.innerWidth);
-
- window.addEventListener('resize', onResize);
- // In case the window was resized before the listener attached
- onResize();
-
- return () => {
- window.removeEventListener('resize', onResize);
- };
- }, []);
-
- return { width };
-}
+import { useWindowSize } from '../../utils/modalUtils';
export const StatusModal = (props) => {
const { isModalOpen, setIsModalOpen, ...modalProps } = props;
diff --git a/src/components/bookingCalendar.jsx b/src/components/bookingCalendar.jsx
new file mode 100644
index 000000000000..9b77e22e6453
--- /dev/null
+++ b/src/components/bookingCalendar.jsx
@@ -0,0 +1,382 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import Calendar from "react-calendar";
+import "../stylesheets/Calendar.css";
+import { format, parseISO } from "date-fns";
+import { CModal, CCard, CCardTitle, CCardContent, CSelect, CCardActions, CButton, CTextField } from '@cscfi/csc-ui-react';
+import { capitalizeFirstLetter } from "../utils/textUtils";
+import { useWindowSize } from "../utils/modalUtils";
+
+export const BookingModal = (props) => {
+ const { bookingData } = props;
+
+ const { width } = useWindowSize();
+ let size;
+
+ if (width >= 2600) size = 'large';
+ else if (width >= 768) size = 'medium';
+ else size = 'small';
+
+ const modalWidths = { small: '90vw', medium: '1400px', large: '50vw' }
+
+ return (
+
props.setIsModalOpen(e.detail)}
+ >
+
+
+ {props.name}
+
+
+
+
+
+ props.setIsModalOpen(false)} text>Close
+
+
+
+
+ )
+}
+
+// Helper to group bookings by date
+const groupBookingsByDate = (bookings) => {
+ return bookings.reduce((acc, booking) => {
+ const dateKey = format(parseISO(booking.start_time), "yyyy-MM-dd");
+ if (!acc[dateKey]) acc[dateKey] = [];
+ acc[dateKey].push(booking);
+ return acc;
+ }, {});
+}
+
+const BookingCalendar = (props) => {
+ const { bookingData } = props;
+ // Set initial selectedDate to today
+ const [selectedDate, setSelectedDate] = useState(new Date());
+ const [selectedBooking, setSelectedBooking] = useState(null);
+ const [tooltip, setTooltip] = useState({ visible: false, x: 0, y: 0, content: '' });
+ const gridRef = useRef(null);
+ const [bookings, setBookings] = useState(bookingData)
+ const [bookingsByDate, setBookingsByDate] = useState(groupBookingsByDate(bookingData))
+ const [filter, setFilter] = useState("All")
+ const [view, setView] = useState("List")
+ const [validDate, setValidDate] = useState(true)
+
+ useEffect(() => {
+ setBookings(bookingData)
+ }, [bookingData])
+
+ useEffect(() => {
+ setBookings(bookingData.filter(b => filter.toLowerCase() === "all" || b.device === filter.toLowerCase()))
+ }, [filter])
+
+ useEffect(() => {
+ setBookingsByDate(groupBookingsByDate(bookings))
+ }, [bookings])
+
+ const handleFilterChange = useCallback(selectedFilter => {
+ setFilter(selectedFilter.detail || 'All');
+ }, [])
+
+ const handleViewChange = useCallback(selectedView => {
+ setView(selectedView.detail || 'List');
+ }, [])
+
+ // Helper to get reserved minutes for the selected day
+ const getReservedMinutes = () => {
+ // Use local time for all calculations
+ const selectedYear = selectedDate.getFullYear();
+ const selectedMonth = selectedDate.getMonth();
+ const selectedDay = selectedDate.getDate();
+ // Start and end of the selected day in local time
+ const dayStart = new Date(selectedYear, selectedMonth, selectedDay, 0, 0, 0, 0).getTime();
+ const dayEnd = new Date(selectedYear, selectedMonth, selectedDay, 23, 59, 59, 999).getTime();
+ let reserved = Array.from({ length: 24 * 60 }, () => []);
+ (bookings || []).forEach(b => {
+ const start = parseISO(b.start_time);
+ const end = parseISO(b.end_time);
+ const bookingStart = start.getTime();
+ const bookingEnd = end.getTime();
+ // If booking overlaps this day at all (local time)
+ if (bookingEnd > dayStart && bookingStart < dayEnd) {
+ // Clamp booking to this day
+ const minStart = Math.max(bookingStart, dayStart);
+ const maxEnd = Math.min(bookingEnd, dayEnd + 1); // +1 to include last minute
+ // For each minute of the day
+ for (let i = 0; i < 24 * 60; i++) {
+ const minuteTime = new Date(selectedYear, selectedMonth, selectedDay, Math.floor(i / 60), i % 60).getTime();
+ if (minuteTime >= minStart && minuteTime < maxEnd) {
+ reserved[i].push(b);
+ }
+ }
+ }
+ });
+ return reserved;
+ };
+
+ const reservedMinutes = getReservedMinutes();
+
+ const handleDateChange = (value) => {
+ try {
+ const newDate = parseISO(value.detail);
+ if (isNaN(newDate) || newDate.toString() === 'Invalid Date') {
+ setValidDate(false);
+ setSelectedDate(new Date());
+ console.log(newDate)
+ return;
+ }
+ setSelectedDate(newDate);
+ setValidDate(true);
+ console.log(newDate)
+ } catch {
+ console.log("here")
+ setValidDate(false);
+ }
+ }
+
+ // Helper to show tooltip (for both mouse and touch)
+ const showTooltip = (event, content) => {
+ let x = 0, y = 0;
+ if (event.touches && event.touches.length > 0) {
+ x = event.touches[0].clientX;
+ y = event.touches[0].clientY;
+ } else {
+ x = event.clientX;
+ y = event.clientY;
+ }
+ setTooltip({ visible: true, x, y, content });
+ };
+
+ const hideTooltip = () => setTooltip({ ...tooltip, visible: false });
+
+ // Close tooltip when user touches/clicks outside the tooltip
+ useEffect(() => {
+ if (!tooltip.visible) return;
+ const handlePointerDown = (e) => {
+ // If tooltip ref exists and click is outside, close
+ const tooltipEl = document.getElementById('booking-tooltip-overlay');
+ if (tooltipEl && !tooltipEl.contains(e.target)) {
+ hideTooltip();
+ }
+ };
+ document.addEventListener('mousedown', handlePointerDown, true);
+ document.addEventListener('touchstart', handlePointerDown, true);
+ return () => {
+ document.removeEventListener('mousedown', handlePointerDown, true);
+ document.removeEventListener('touchstart', handlePointerDown, true);
+ };
+ }, [tooltip.visible]);
+
+ // Close tooltip on scroll (mobile)
+ useEffect(() => {
+ const handler = () => hideTooltip();
+ window.addEventListener('scroll', handler, true);
+ return () => window.removeEventListener('scroll', handler, true);
+ }, []);
+
+ return (
+
+
+
+
+
+
•
+
Partially Reserved
+
+
+
+ {view === "Grid" && (
+
+ )}
+
+
+
+ {/* Calendar */}
+
setSelectedDate(value)}
+ tileContent={({ date }) =>
+ bookingsByDate[format(date, "yyyy-MM-dd")] ? (
+ •
+ ) : null
+ }
+ />
+
+ {/* Daily booking list or grid */}
+ {selectedDate && (
+
+
+ Reservations on {format(selectedDate, "PPP")}
+
+ {view === "List" ? (
+
+ {(bookingsByDate[format(selectedDate, "yyyy-MM-dd")] || [])
+ .filter(b => filter.toLowerCase() === "all" || b.device === filter.toLowerCase())
+ .map(
+ (b) => (
+ - setSelectedBooking(b)}
+ >
+ {capitalizeFirstLetter(b.device)} - {capitalizeFirstLetter(b.type)} (
+ {format(parseISO(b.start_time), "HH:mm")}–
+ {format(parseISO(b.end_time), "HH:mm")})
+
+ )
+ )}
+
+ ) : (
+
+ {/* Hour labels on the left */}
+
+
+ {"00".toString().padStart(2, '0')}
+
+
+ {"06".toString().padStart(2, '0')}
+
+
+ {"12".toString().padStart(2, '0')}
+
+
+ {"18".toString().padStart(2, '0')}
+
+
+ {"23".toString().padStart(2, '0')}
+
+
+ {/* Responsive grid: 24 rows (hours), 60 cols (minutes) */}
+
+
+ {Array.from({ length: 24 }).map((_, hour) => (
+
+ {Array.from({ length: 60 }).map((_, min) => {
+ const i = hour * 60 + min;
+ const bookings = reservedMinutes[i];
+ let background;
+ if (bookings.length === 0) {
+ background = '#e5e7eb';
+ } else {
+ background = '#f87171';
+ }
+ const tooltipContent = bookings.length
+ ? bookings.map(b => `${capitalizeFirstLetter(b.device)}: ${capitalizeFirstLetter(b.type)} (${format(parseISO(b.start_time), "HH:mm")}-${format(parseISO(b.end_time), "HH:mm")})`).join('\n')
+ : `${hour.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}`;
+ return (
+
{ setSelectedBooking(bookings.length === 1 ? bookings[0] : bookings); showTooltip(e, tooltipContent); } : undefined}
+ onMouseLeave={() => { setSelectedBooking(null); hideTooltip(); }}
+ onTouchStart={bookings.length ? (e) => { setSelectedBooking(bookings.length === 1 ? bookings[0] : bookings); showTooltip(e, tooltipContent); } : undefined}
+ onClick={bookings.length ? (e) => { setSelectedBooking(bookings.length === 1 ? bookings[0] : bookings); showTooltip(e, tooltipContent); } : undefined}
+ />
+ );
+ })}
+
+ ))}
+
+ {/* Tooltip overlay */}
+ {tooltip.visible && (
+
+ {tooltip.content}
+
+ )}
+
+
+ )}
+
+
+ )}
+
+ );
+}
diff --git a/src/hooks/useBookings.jsx b/src/hooks/useBookings.jsx
new file mode 100644
index 000000000000..8b887f77213e
--- /dev/null
+++ b/src/hooks/useBookings.jsx
@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react'
+
+export const useBookings = (bookingUrl) => {
+ const [bookingData, setBookingData] = useState([])
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const fetchBookings = async () => {
+ const url = bookingUrl;
+ try {
+ const resp = await fetch (url);
+ const result = await resp.json();
+ const splitBookings = (bookings) => {
+ const split = [];
+ bookings.forEach((booking) => {
+ const start = new Date(booking.start_time);
+ const end = new Date(booking.end_time);
+
+ let current = new Date(start);
+ current.setHours(0, 0, 0, 0);
+
+ const endDay = new Date(end);
+ endDay.setHours(0, 0, 0, 0);
+
+ if (current.getTime() === endDay.getTime()) {
+ split.push(booking);
+ } else {
+ // Split across days
+ while (current <= endDay) {
+ let dayEnd = new Date(current);
+ dayEnd.setHours(23, 59, 59, 999);
+
+ // Clamp to booking start/end
+ const splitStart = current.getTime() === new Date(start).setHours(0,0,0,0)
+ ? start
+ : new Date(current);
+
+ const splitEnd = current.getTime() === endDay.getTime()
+ ? end
+ : dayEnd;
+
+ split.push({
+ ...booking,
+ id: `${booking.id}-${current.toISOString().slice(0,10)}`,
+ start_time: splitStart.toISOString(),
+ end_time: splitEnd.toISOString(),
+ });
+
+ current.setDate(current.getDate() + 1);
+ }
+ }
+ });
+ return split;
+ };
+
+ const bookings = Array.isArray(result?.data) ? result.data : [];
+ const processedBookings = splitBookings(bookings);
+ setBookingData(processedBookings);
+ } catch (err) {
+ console.error(err);
+ setError(err);
+ }
+ }
+
+ fetchBookings();
+}, [bookingUrl]);
+
+ return { bookingData, error };
+}
diff --git a/src/stylesheets/Calendar.css b/src/stylesheets/Calendar.css
new file mode 100644
index 000000000000..1c950ce4dbea
--- /dev/null
+++ b/src/stylesheets/Calendar.css
@@ -0,0 +1,157 @@
+.react-calendar {
+ width: 40%;
+ height: fit-content;
+ background: white;
+ border: 1px solid #e5e7eb;
+ font-family: 'Arial', 'Helvetica', sans-serif;
+ line-height: 1.125em;
+}
+
+.react-calendar--doubleView {
+ width: 700px;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer {
+ display: flex;
+ margin: -0.5em;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer > * {
+ width: 50%;
+ margin: 0.5em;
+}
+
+.react-calendar,
+.react-calendar *,
+.react-calendar *:before,
+.react-calendar *:after {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.react-calendar button {
+ margin: 0;
+ border: 0;
+ outline: none;
+}
+
+.react-calendar button:enabled:hover {
+ cursor: pointer;
+}
+
+.react-calendar__navigation {
+ display: flex;
+ height: 44px;
+ margin-bottom: 1em;
+}
+
+.react-calendar__navigation button {
+ min-width: 44px;
+ background: none;
+}
+
+.react-calendar__navigation button:disabled {
+ background-color: #f0f0f0;
+}
+
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+ background-color: #e6e6e6;
+}
+
+.react-calendar__month-view__weekdays {
+ text-align: center;
+ text-transform: uppercase;
+ font: inherit;
+ font-size: 0.75em;
+ font-weight: bold;
+ text-decoration: none !important;
+}
+
+abbr:where([title]) {
+ text-decoration: none !important
+}
+
+.react-calendar__month-view__weekdays__weekday {
+ padding: 0.5em;
+}
+
+.react-calendar__month-view__weekNumbers .react-calendar__tile {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font: inherit;
+ font-size: 0.75em;
+ font-weight: bold;
+}
+
+
+.react-calendar__month-view__days__day--neighboringMonth,
+.react-calendar__decade-view__years__year--neighboringDecade,
+.react-calendar__century-view__decades__decade--neighboringCentury {
+ color: #757575;
+}
+
+.react-calendar__year-view .react-calendar__tile,
+.react-calendar__decade-view .react-calendar__tile,
+.react-calendar__century-view .react-calendar__tile {
+ padding: 2em 0.5em;
+}
+
+.react-calendar__tile {
+ max-width: 100%;
+ padding: 10px 6.6667px;
+ background: none;
+ text-align: center;
+ font: inherit;
+ font-size: 0.833em;
+}
+
+.react-calendar__tile:disabled {
+ background-color: #f0f0f0;
+ color: #ababab;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth:disabled,
+.react-calendar__decade-view__years__year--neighboringDecade:disabled,
+.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
+ color: #cdcdcd;
+}
+
+.react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus {
+ background-color: #e6e6e6;
+}
+
+.react-calendar__tile--now {
+ background: #CCE6F1;
+}
+
+.react-calendar__tile--now:enabled:hover,
+.react-calendar__tile--now:enabled:focus {
+ background: #CCE6F1;
+}
+
+.react-calendar__tile--hasActive {
+ background: #CCE6F1;
+}
+
+.react-calendar__tile--hasActive:enabled:hover,
+.react-calendar__tile--hasActive:enabled:focus {
+ background: #CCE6F1;
+}
+
+.react-calendar__tile--active {
+ background: #006edc;
+ color: white;
+}
+
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+ background: #1087ff;
+}
+
+.react-calendar--selectRange .react-calendar__tile--hover {
+ background-color: #e6e6e6;
+}
diff --git a/src/utils/modalUtils.jsx b/src/utils/modalUtils.jsx
new file mode 100644
index 000000000000..dd420a2efeab
--- /dev/null
+++ b/src/utils/modalUtils.jsx
@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+
+export const useWindowSize = () => {
+ const [width, setWidth] = useState(
+ typeof window !== 'undefined' ? window.innerWidth : 0
+ );
+
+ useEffect(() => {
+ const onResize = () => setWidth(window.innerWidth);
+
+ window.addEventListener('resize', onResize);
+ // In case the window was resized before the listener attached
+ onResize();
+
+ return () => {
+ window.removeEventListener('resize', onResize);
+ };
+ }, []);
+
+ return { width };
+}
\ No newline at end of file
diff --git a/src/utils/textUtils.js b/src/utils/textUtils.js
new file mode 100644
index 000000000000..f50d8b52cd8d
--- /dev/null
+++ b/src/utils/textUtils.js
@@ -0,0 +1,3 @@
+export const capitalizeFirstLetter = (val) => {
+ return String(val).charAt(0).toUpperCase() + String(val).slice(1);
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 35a7b5d2af7d..fba4390a6f71 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -47,6 +47,7 @@ fs.writeFileSync(jekyllConfigFilepath, yaml.stringify(jekyllConfig));
module.exports = {
entry: entryFiles,
+ devtool: 'inline-source-map',
output: {
filename: "[name].js",
path: outputDirpath,