{
+ // Fallback to a default room image if specific room image doesn't exist
+ e.target.src = '/images/rooms/default-room.jpg';
+ }}
+ />
+ 
+ 
-
-
- {settings.showFiltersAlways ? (
- /* Always-visible filters */
-
-
- ) : (
- /* Toggle button with collapsible filters */
- <>
-
+
-
-
+ {settings.newBookingLayoutVariant ? (
+ /* Side-by-side layout */
+ <>
+
);
diff --git a/my-app/src/pages/NewBooking.module.css b/my-app/src/pages/NewBooking.module.css
index bfe1c80..5d3ee77 100644
--- a/my-app/src/pages/NewBooking.module.css
+++ b/my-app/src/pages/NewBooking.module.css
@@ -1,10 +1,19 @@
+
.pageContainer {
- padding: var(--container-padding);
+ /*padding: var(--container-padding);*/
background-color: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
}
+.roomImage {
+ width: 100%;
+ height: auto;
+ margin-bottom: 1rem;
+ object-fit: cover;
+ aspect-ratio: 7/3;
+}
+
.formContainer {
/*padding: 1rem;*/
min-height: 100%;
@@ -26,13 +35,12 @@
}
.bookingTimesContainer {
- margin-top: 2rem;
border-radius: 0.3rem;
outline: 1px solid var(--border-light);
display: flex;
flex-direction: column;
align-items: center;
- background-color: var(--bg-secondary);
+ background-color: var(--bg-primary);
padding-bottom: 2rem;
}
@@ -293,4 +301,37 @@
opacity: 1;
transform: translateY(0);
}
+}
+
+/* Side-by-side layout variant */
+.newBookingPageContainer {
+ /*padding: var(--spacing-lg);*/
+}
+
+.newBookingPageContainer.sideBySide {
+ display: flex;
+ flex-direction: column;
+}
+
+@media (min-width: 769px) and (max-width: 1400px) {
+ .newBookingPageContainer.sideBySide {
+ display: flex;
+ flex-direction: row;
+ gap: 2rem;
+ align-items: flex-start;
+ }
+
+ .newBookingPageContainer.sideBySide .headerSection {
+ flex: 0 0 400px;
+ max-width: 400px;
+ }
+
+ .newBookingPageContainer.sideBySide .contentSection {
+ flex: 1;
+ min-width: 0;
+ }
+
+ .newBookingPageContainer.sideBySide .bookingTimesContainer {
+ margin-top: 0;
+ }
}
\ No newline at end of file
diff --git a/my-app/src/pages/Profile.jsx b/my-app/src/pages/Profile.jsx
index a2d087d..ee851e9 100644
--- a/my-app/src/pages/Profile.jsx
+++ b/my-app/src/pages/Profile.jsx
@@ -6,6 +6,8 @@ import styles from './Profile.module.css';
const Profile = () => {
const { getCurrentUser } = useSettingsContext();
const user = getCurrentUser();
+
+ console.log(user, "Current User Data");
// Helper function to get user's initials
const getInitials = (name) => {
diff --git a/my-app/src/pages/RoomBooking.jsx b/my-app/src/pages/RoomBooking.jsx
index a6599d5..4f0515d 100644
--- a/my-app/src/pages/RoomBooking.jsx
+++ b/my-app/src/pages/RoomBooking.jsx
@@ -5,8 +5,10 @@ import BookingsList from '../components/booking/BookingsList';
import Card from '../components/ui/Card';
import { useSettingsContext } from '../context/SettingsContext';
import { USER } from '../constants/bookingConstants';
+import PageHeader from '../components/layout/PageHeader';
+import PageContainer from '../components/layout/PageContainer';
-export function RoomBooking({ bookings, showSuccessBanner, lastCreatedBooking, onDismissBanner, onBookingUpdate, onBookingDelete, showDeleteBanner, lastDeletedBooking, onDismissDeleteBanner }) {
+export function RoomBooking({ bookings, showSuccessBanner, lastCreatedBooking, onDismissBanner, onBookingUpdate, onBookingDelete, showDeleteBanner, lastDeletedBooking, onDismissDeleteBanner, showLeaveBanner, lastLeftBooking, onDismissLeaveBanner, showUpdateBanner, lastUpdatedBooking, onDismissUpdateBanner }) {
const { settings } = useSettingsContext();
useEffect(() => {
@@ -23,50 +25,47 @@ export function RoomBooking({ bookings, showSuccessBanner, lastCreatedBooking, o
}
return (
-
+
+
+
+
+
+ ) : (
+ /* Stacked layout (original) */
+ <>
+
+
+
-
-
+
-
-
-
-
-
- {hasActiveFilters && (
-
-
+ {/* Filter Section */}
+
+
+
+
+
+ {settings.showFiltersAlways ? (
+ /* Always-visible filters */
+
- )}
-
- )}
+
+
+ ) : (
+ /* Toggle button with collapsible filters */
+ <>
+
+
+ {/* Collapsible Filter Content */}
+ {showFilters && (
+
+
+
+ )}
+
)}
+
+ {hasActiveFilters && (
+
+
+
+ )}
+ + Välj starttid +
+
+
+ - Välj starttid -
-
-
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {settings.showFiltersAlways ? (
+ /* Always-visible filters */
+
+
+
+ ) : (
+ /* Toggle button with collapsible filters */
+ <>
+
+
+ {/* Collapsible Filter Content */}
+ {showFilters && (
+
+
+
+
+ )}
+
+ )}
+
+
+ {hasActiveFilters && (
+
+
+
+ )}
+ + Välj starttid +
+
+
+
- {isTestSessionActive && (
-
+
+
+
);
}
\ No newline at end of file
diff --git a/my-app/src/pages/RoomSchedules.jsx b/my-app/src/pages/RoomSchedules.jsx
new file mode 100644
index 0000000..4ade932
--- /dev/null
+++ b/my-app/src/pages/RoomSchedules.jsx
@@ -0,0 +1,241 @@
+import React, { useState } from 'react';
+import styles from './RoomSchedules.module.css';
+import PageHeader from '../components/layout/PageHeader';
+import PageContainer from '../components/layout/PageContainer';
+
+const RoomSchedules = () => {
+ const [selectedBooking, setSelectedBooking] = useState(null);
+ const [showModal, setShowModal] = useState(false);
+ const timeSlots = [
+ '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00',
+ '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00',
+ '22:00', '23:00', '00:00'
+ ];
+
+ const rooms = [
+ {
+ name: 'Lilla hörsalen',
+ bookings: [
+ {
+ id: 1,
+ course: 'MDI S2 grp 7',
+ time: '08:00 - 08:30',
+ instructor: 'Anna Andersson',
+ participants: 12,
+ description: 'Medicinsk datavetenskap seminarium'
+ },
+ {
+ id: 2,
+ course: 'MDI S2 grp 7',
+ time: '08:30 - 09:00',
+ instructor: 'Anna Andersson',
+ participants: 12,
+ description: 'Medicinsk datavetenskap seminarium'
+ },
+ {
+ id: 3,
+ course: 'INTROPROG F12',
+ time: '09:00 - 09:30',
+ instructor: 'Erik Larsson',
+ participants: 25,
+ description: 'Introduktion till programmering - föreläsning'
+ }
+ ]
+ },
+ {
+ name: 'Aula NOD',
+ bookings: [
+ {
+ id: 4,
+ course: 'MDI S2 grp 7',
+ time: '08:00 - 08:30',
+ instructor: 'Anna Andersson',
+ participants: 12,
+ description: 'Medicinsk datavetenskap seminarium'
+ },
+ {
+ id: 5,
+ course: 'MDI S2 grp 7',
+ time: '08:30 - 09:00',
+ instructor: 'Anna Andersson',
+ participants: 12,
+ description: 'Medicinsk datavetenskap seminarium'
+ },
+ {
+ id: 6,
+ course: 'INTROPROG F12',
+ time: '09:00 - 09:30',
+ instructor: 'Erik Larsson',
+ participants: 25,
+ description: 'Introduktion till programmering - föreläsning'
+ },
+ {
+ id: 7,
+ course: 'DB L6 grp 2',
+ time: '10:00 - 12:45',
+ instructor: 'Sofia Karlsson',
+ participants: 18,
+ description: 'Databaser - laboration 6'
+ },
+ {
+ id: 8,
+ course: 'INTROPROG F12',
+ time: '13:00 - 14:00',
+ instructor: 'Erik Larsson',
+ participants: 25,
+ description: 'Introduktion till programmering - föreläsning'
+ }
+ ]
+ },
+ {
+ name: 'G5:7',
+ bookings: [
+ {
+ id: 9,
+ course: 'Team standup',
+ time: '10:00 - 12:00',
+ instructor: 'Magnus Nilsson',
+ participants: 5,
+ description: 'Daglig standup för utvecklingsteam'
+ }
+ ]
+ },
+ {
+ name: 'G5:12',
+ bookings: [
+ {
+ id: 10,
+ course: 'Project planning',
+ time: '16:00 - 20:00',
+ instructor: 'Emma Johansson',
+ participants: 8,
+ description: 'Projektplanering för kommande sprint'
+ }
+ ]
+ }
+ ];
+
+ const getBookingForTimeSlot = (room, timeSlot) => {
+ return room.bookings.find(booking => {
+ const [startTime] = booking.time.split(' - ');
+ return startTime === timeSlot;
+ });
+ };
+
+ const getBookingSpan = (booking) => {
+ const [startTime, endTime] = booking.time.split(' - ');
+ const startHour = parseInt(startTime.split(':')[0]);
+ const endHour = parseInt(endTime.split(':')[0]);
+ const startMinutes = parseInt(startTime.split(':')[1]);
+ const endMinutes = parseInt(endTime.split(':')[1]);
+
+ const startTotalMinutes = startHour * 60 + startMinutes;
+ const endTotalMinutes = endHour * 60 + endMinutes;
+ const durationMinutes = endTotalMinutes - startTotalMinutes;
+
+ return Math.max(1, Math.round(durationMinutes / 60));
+ };
+
+ const handleBookingClick = (booking, roomName) => {
+ setSelectedBooking({ ...booking, room: roomName });
+ setShowModal(true);
+ };
+
+ const closeModal = () => {
+ setShowModal(false);
+ setSelectedBooking(null);
+ };
+
+ return (
+
+
+ );
+};
+
+export default RoomSchedules;
\ No newline at end of file
diff --git a/my-app/src/pages/RoomSchedules.module.css b/my-app/src/pages/RoomSchedules.module.css
new file mode 100644
index 0000000..f9e28b5
--- /dev/null
+++ b/my-app/src/pages/RoomSchedules.module.css
@@ -0,0 +1,242 @@
+
+.ScheduleWrapper {
+ display: flex;
+ overflow-x: auto;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ background: white;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ max-height: 80vh;
+ overflow-y: auto;
+}
+
+.TimeColumn {
+ flex-shrink: 0;
+ width: 80px;
+ border-right: 1px solid #e0e0e0;
+ background: #f8f9fa;
+}
+
+.TimeHeader {
+ height: 60px;
+ border-bottom: 1px solid #e0e0e0;
+ background: #f0f0f0;
+ position: sticky;
+ top: 0;
+ z-index: 15;
+}
+
+.TimeSlot {
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-bottom: 1px solid #e0e0e0;
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: #666;
+}
+
+.RoomsContainer {
+ display: flex;
+ flex: 1;
+ min-width: 0;
+}
+
+.RoomColumn {
+ flex-shrink: 0;
+ width: 200px;
+ border-right: 1px solid #e0e0e0;
+ display: grid;
+ grid-template-rows: 60px repeat(17, 60px);
+}
+
+.RoomColumn:last-child {
+ border-right: none;
+}
+
+.RoomHeader {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-bottom: 1px solid #e0e0e0;
+ background: #f0f0f0;
+ font-weight: 600;
+ font-size: 1rem;
+ text-align: center;
+ padding: 0 1rem;
+ position: sticky;
+ top: 0;
+ z-index: 10;
+}
+
+.ScheduleSlot {
+ border-bottom: 1px solid #e0e0e0;
+ background: #f9f9f9;
+ position: relative;
+}
+
+.ScheduleSlot.Occupied {
+ background: #e3f2fd;
+ border: 1px solid #2196f3;
+ margin: 1px;
+ border-radius: 4px;
+}
+
+.BookingInfo {
+ padding: 8px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.BookingInfo:hover {
+ background: rgba(33, 150, 243, 0.1);
+ transform: scale(1.02);
+}
+
+.CourseName {
+ font-weight: 600;
+ font-size: 0.9rem;
+ color: #1976d2;
+ margin-bottom: 4px;
+ line-height: 1.2;
+}
+
+.BookingTime {
+ font-size: 0.8rem;
+ color: #666;
+ font-weight: 500;
+}
+
+/* Modal styles */
+.ModalOverlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.Modal {
+ background: blue;
+ border-radius: 8px;
+ padding: 0;
+ max-width: 500px;
+ width: 90%;
+ max-height: 80vh;
+ overflow-y: auto;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.ModalHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.5rem;
+ border-bottom: 1px solid #e0e0e0;
+ background: #f8f9fa;
+ border-radius: 8px 8px 0 0;
+}
+
+.ModalHeader h2 {
+ margin: 0;
+ font-size: 1.25rem;
+ color: #1976d2;
+}
+
+.CloseButton {
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: #666;
+ padding: 0;
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ transition: background-color 0.2s ease;
+}
+
+.CloseButton:hover {
+ background: #e0e0e0;
+}
+
+.ModalContent {
+ padding: 1.5rem;
+}
+
+.DetailRow {
+ display: flex;
+ margin-bottom: 1rem;
+ align-items: flex-start;
+}
+
+.DetailRow:last-child {
+ margin-bottom: 0;
+}
+
+.Label {
+ font-weight: 600;
+ min-width: 100px;
+ color: #666;
+ margin-right: 1rem;
+}
+
+/* Mobile scrolling */
+@media (max-width: 768px) {
+ .ScheduleWrapper {
+ overflow-x: scroll;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ .RoomColumn {
+ width: 180px;
+ }
+
+ .TimeColumn {
+ width: 70px;
+ }
+
+ .RoomHeader {
+ font-size: 0.9rem;
+ padding: 0 0.5rem;
+ }
+
+ .CourseName {
+ font-size: 0.8rem;
+ }
+
+ .BookingTime {
+ font-size: 0.7rem;
+ }
+
+ .Modal {
+ width: 95%;
+ margin: 1rem;
+ }
+
+ .ModalHeader {
+ padding: 1rem;
+ }
+
+ .ModalContent {
+ padding: 1rem;
+ }
+
+ .Label {
+ min-width: 80px;
+ font-size: 0.9rem;
+ }
+}
\ No newline at end of file
diff --git a/my-app/src/react-aria-starter/src/DatePicker.css b/my-app/src/react-aria-starter/src/DatePicker.css
index f22e73f..2f95bfd 100644
--- a/my-app/src/react-aria-starter/src/DatePicker.css
+++ b/my-app/src/react-aria-starter/src/DatePicker.css
@@ -10,10 +10,10 @@
color: var(--text-primary);
background-color: var(--bg-secondary);
padding: var(--spacing-md);
- border: 1px solid var(--border-light);
+ border-bottom: 1px solid var(--border-light);
position: sticky;
width: 100%;
- top: 1rem;
+ top: 0;
z-index: 10;
display: flex;
flex-direction: row;
diff --git a/my-app/src/styles/variables.css b/my-app/src/styles/variables.css
index b2c8ca7..18e1d2d 100644
--- a/my-app/src/styles/variables.css
+++ b/my-app/src/styles/variables.css
@@ -298,7 +298,7 @@
/* Button disabled states */
--button-disabled-bg: #f8f9fa;
- --button-disabled-text: #adb5bd;
+ --button-disabled-text: #797e83;
--button-disabled-border: #dee2e6;
/* Additional color variants */
diff --git a/my-app/src/utils/bookingUtils.js b/my-app/src/utils/bookingUtils.js
index d8537a2..5dd03e9 100644
--- a/my-app/src/utils/bookingUtils.js
+++ b/my-app/src/utils/bookingUtils.js
@@ -1,5 +1,12 @@
+import React from 'react';
import { today, getLocalTimeZone } from '@internationalized/date';
-import { NUMBER_OF_ROOMS, CHANCE_OF_AVAILABILITY } from '../constants/bookingConstants';
+import { NUMBER_OF_ROOMS, CHANCE_OF_AVAILABILITY, USER } from '../constants/bookingConstants';
+
+// Simple seeded random number generator
+const seededRandom = (seed) => {
+ const x = Math.sin(seed) * 10000;
+ return x - Math.floor(x);
+};
export const generateInitialRooms = (chanceOfAvailability = CHANCE_OF_AVAILABILITY, numberOfRooms = NUMBER_OF_ROOMS, earliestSlot = 0, latestSlot = 23) => {
return [...Array(numberOfRooms)].map((room, index) => ({
@@ -87,4 +94,51 @@ export const isDateUnavailable = (date, effectiveToday, bookingRangeDays = 14) =
date.compare(interval[0]) >= 0 &&
date.compare(interval[1]) <= 0
);
-};
\ No newline at end of file
+};
+
+export function getParticipantNames(participants) {
+ if (!participants || participants.length === 0) return null;
+
+ const getFirstName = (participant) => participant.name.split(' ')[0];
+
+ if (participants.length === 1) {
+ return getFirstName(participants[0]);
+ } else if (participants.length === 2) {
+ return `${getFirstName(participants[0])} and ${getFirstName(participants[1])}`;
+ } else {
+ const remaining = participants.length - 2;
+ return `${getFirstName(participants[0])}, ${getFirstName(participants[1])} and ${remaining} more`;
+ }
+}
+
+export function createBookingLengthOptions(booking, maxAvailableTime = 16) {
+ const hoursAvailable = Math.min(maxAvailableTime - booking.startTime, 8);
+ const bookingLengths = [];
+
+ for (let i = 1; i <= hoursAvailable; i++) {
+ const endTimeIndex = booking.startTime + i;
+ const endTime = getTimeFromIndex(endTimeIndex);
+ const durationLabel = i === 1 ? "30 min" :
+ i === 2 ? "1 h" :
+ i === 3 ? "1.5 h" :
+ i === 4 ? "2 h" :
+ i === 5 ? "2.5 h" :
+ i === 6 ? "3 h" :
+ i === 7 ? "3.5 h" :
+ i === 8 ? "4 h" : `${i * 0.5} h`;
+
+ bookingLengths.push({
+ value: endTimeIndex,
+ label: `${endTime} · ${durationLabel}`
+ });
+ }
+
+ return bookingLengths;
+}
+
+export function hasBookingChanges(originalBooking, editedTitle, editedParticipants, calculatedEndTime) {
+ const titleChanged = editedTitle !== originalBooking.title;
+ const participantsChanged = JSON.stringify(editedParticipants) !== JSON.stringify(originalBooking.participants || []);
+ const endTimeChanged = calculatedEndTime !== originalBooking.endTime;
+ return titleChanged || participantsChanged || endTimeChanged;
+}
\ No newline at end of file
-
+
-
- -
-
-
+
-
+ <>
+
+ Välkommen, {settings.currentUserName}!
-Hantera dina bokningar och reservera nya lokaler
-Ny bokning
+ +
+
+
- )}
-
-
-
- Lokalbokning
-Reservera lokaler för möten och studier
- Ny bokning
+-
-
-
- - -
Mina bokingar
-Mina bokingar
+
+
+
+ {showModal && selectedBooking && (
+
+
+ {timeSlots.map((time, index) => (
+
+
+
+ {time}
+
+ ))}
+
+ {rooms.map((room, roomIndex) => (
+
+
+
+ ))}
+
+ {room.name}
+
+
+ {timeSlots.map((timeSlot, timeIndex) => {
+ const booking = getBookingForTimeSlot(room, timeSlot);
+ const isOccupied = booking !== undefined;
+ const span = booking ? getBookingSpan(booking) : 1;
+
+ return (
+
+ {isOccupied && (
+
+ );
+ })}
+ handleBookingClick(booking, room.name)}
+ >
+
+ )}
+ {booking.course}
+ {booking.time}
+
+
+ )}
+ e.stopPropagation()}>
+
+
+
+ {selectedBooking.course}
+ +
+
+
+ Room:
+ {selectedBooking.room}
+
+
+ Time:
+ {selectedBooking.time}
+
+
+ Instructor:
+ {selectedBooking.instructor}
+
+
+ Participants:
+ {selectedBooking.participants}
+
+
+ Description:
+ {selectedBooking.description}
+
+