Skip to content

Commit

Permalink
resolves #6: changes proposed room after event creation
Browse files Browse the repository at this point in the history
  • Loading branch information
@ali-ahnaf
ali-ahnaf committed Sep 10, 2024
1 parent 7e989bd commit a8d3bd7
Show file tree
Hide file tree
Showing 7 changed files with 204 additions and 70 deletions.
49 changes: 37 additions & 12 deletions client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,8 @@
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
integrity="sha384-tViUnnbYAV00FLIhhi3v/dWt3Jxw4gZQcNoSCxCIFNJVCx7/D55/wXsrNIRANwdD" crossorigin="anonymous">


<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>

<body>
Expand All @@ -38,13 +31,13 @@
style="color: white;"></i></button>
</div>
<div class="col">
<div class="start_time_container">
<div class="dropdown_container">
<select class="dropdown-button" id="startTime" name="startTime"></select>
<label class="hint_text" for="startTime">*Start time</label>
</div>
</div>
<div class="col">
<div class="time-button" style="background-color: #a5d8ff;">
<div class="time-button" style="background-color: #e9e9e9;">
<button onclick="decrementDuration()" id="decrement">-</button>
<span class="btn_text" id="duration">15m</span>
<button onclick="incrementDuration()" id="increment">+</button>
Expand All @@ -60,8 +53,8 @@
<div class="container text-center" style="margin-top: 15px;">
<div class="row">
<div class="col">
<div class="start_time_container">
<div class="time-button" style="background-color: #ffec99;">
<div class="dropdown_container">
<div class="time-button" style="background-color: #e9e9e9;">
<button onclick="decrementFloor()" id="floor_decrement">-</button>
<span class="btn_text" id="floor_text">1</span>
<button onclick="incrementFloor()" id="floor_increment">+</button>
Expand All @@ -70,7 +63,7 @@
</div>
</div>
<div class="col">
<div class="time-button" style="background-color: #b2f2bb;">
<div class="time-button" style="background-color: #e9e9e9;">
<button onclick="decrementSeatCount()" id="seat_decrement">-</button>
<span class="btn_text" id="seat_text">1</span>
<button onclick="incrementSeatCount()" id="seat_increment">+</button>
Expand All @@ -85,6 +78,35 @@
</button>

<div id="liveAlertPlaceholder" class="mt-4"></div>

<!-- change room modal -->
<div class="modal fade" id="changeRoomModal" tabindex="-1" aria-labelledby="changeRoomModal"
aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered change_room_modal">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="changeRoomModalLabel">Choose a different room</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Dropdown in Modal -->
<div class="dropdown_container">
<select class="dropdown-button" id="roomOptions" name="roomOptions">
</select>
</div>

<div id="changeRoomModalErrorAlert" class="mt-4"></div>
</div>
<div class="modal-footer">
<button id="changeRoomModalCancelBtn" type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Cancel</button>
<button id="changeRoomModalSaveBtn" type="button" class="btn btn-primary"
id="saveButton" onclick="changeRoom()">Save</button>
</div>
</div>
</div>
</div>
</div>

</div>
Expand Down Expand Up @@ -121,6 +143,9 @@
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>

Expand Down
99 changes: 88 additions & 11 deletions client/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
let duration = 15;
let seatCount = 1;
let floor = 1;
let currentEvent = {};

const CLIENT_ID = '1043931677993-j15eelb1golb8544ehi2meeru35q3fo4.apps.googleusercontent.com';
const REDIRECT_URI = window.location.origin;
Expand All @@ -26,13 +27,13 @@ async function openPage(pageName, elmnt) {
}
}

function toMinutesSinceMidnight(hours, minutes) {
return hours * 60 + minutes;
}

function populateTimeOptions() {
const startTimeSelect = document.getElementById('startTime');

function toMinutesSinceMidnight(hours, minutes) {
return hours * 60 + minutes;
}

const now = new Date();
let currentHours = now.getHours();
let currentMinutes = Math.floor(now.getMinutes() / 15) * 15;
Expand Down Expand Up @@ -63,6 +64,24 @@ function populateTimeOptions() {
}
}

function populateRoomOptions(availableRooms, roomId) {
const roomOptionsSelect = document.getElementById('roomOptions');
roomOptionsSelect.innerHTML = '';

for (const room of availableRooms) {
const option = document.createElement('option');
option.value = room.name + ' | S: ' + room.seats;
option.text = room.name + ' | S: ' + room.seats;
option.id = room.id;

if (room.id === roomId) {
option.selected = true;
}

roomOptionsSelect.appendChild(option);
}
}

function decrementDuration() {
if (duration > 15) {
duration -= 15;
Expand Down Expand Up @@ -157,7 +176,7 @@ async function logout() {

async function bookRoom() {
console.log('Booking room');

const bookBtn = document.getElementById('book_btn');
const spinner = bookBtn.querySelector('.spinner-border');
bookBtn.disabled = true;
spinner.style.display = 'inline-block';
Expand All @@ -183,16 +202,69 @@ async function bookRoom() {
});

if (res.error) {
createErrorAlert(res.message);
createErrorAlert(res.message, 'liveAlertPlaceholder');
return;
}

currentEvent.eventId = res.eventId;
currentEvent.roomId = res.roomId;
populateRoomOptions(res.availableRooms || [], res.roomId);
createRoomAlert(res.room, convertToLocaleTime(res.start), convertToLocaleTime(res.end), res.summary, 'info');

bookBtn.disabled = false;
spinner.style.display = 'none';
}

function disableButton(id) {
const btn = document.getElementById(id);
btn.disabled = true;
}

function enableButton(id) {
const btn = document.getElementById(id);
btn.disabled = false;
}

async function changeRoom() {
const roomOptionsSelect = document.getElementById('roomOptions');
const selectedOption = roomOptionsSelect.options[roomOptionsSelect.selectedIndex];
const selectedRoomId = selectedOption.id;

if (selectedRoomId === currentEvent.roomId) {
createErrorAlert('You have already booked this room', 'changeRoomModalErrorAlert');
return;
}

disableButton('changeRoomModalCancelBtn');
disableButton('changeRoomModalSaveBtn');

const res = await makeRequest('/room', 'PUT', {
eventId: currentEvent.eventId,
roomId: selectedRoomId,
});

if (res.error) {
createErrorAlert(res.message, 'changeRoomModalErrorAlert');
return;
}

enableButton('changeRoomModalCancelBtn');
enableButton('changeRoomModalSaveBtn');

const roomDiv = document.getElementById('event_alert_room');
roomDiv.innerHTML = `<b>Room: </b>${res.room}`;

const editBtn = document.getElementById('event_alert_edit_icon');
editBtn.style.display = 'none';

// dismiss the modal
document.querySelector('[data-bs-dismiss="modal"]').click();

var myModalEl = document.getElementById('changeRoomModal');
var modal = bootstrap.Modal.getInstance(myModalEl);
modal.hide();
}

function toggleVisibility(id) {
const element = document.getElementById(id);
if (element.style.display === 'none' || element.style.display === '') {
Expand Down Expand Up @@ -250,7 +322,12 @@ const createRoomAlert = (room, start, end, summary, type) => {
wrapper.innerHTML = [
`<div style="text-align: left;" class="alert alert-${type} custom-alert-text alert-dismissible" role="alert">`,
` <div><b>Summary: </b>${summary}</div>`,
` <div><b>Room: </b>${room}</div>`,
` <div style="display: flex;">
<div id="event_alert_room"><b>Room: </b>${room}</div>
<a id="event_alert_edit_icon" class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0); align-items: stretch; margin-left: 5px;" data-bs-toggle="modal" data-bs-target="#changeRoomModal">
<i class="bi bi-pencil-fill"></i>
</a>
</div>`,
` <div><b>Start: </b>${start}</div>`,
` <div><b>End: </b>${end}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
Expand All @@ -260,8 +337,8 @@ const createRoomAlert = (room, start, end, summary, type) => {
alertPlaceholder.append(wrapper);
};

const createErrorAlert = (message) => {
const alertPlaceholder = document.getElementById('liveAlertPlaceholder');
const createErrorAlert = (message, elementId) => {
const alertPlaceholder = document.getElementById(elementId);
alertPlaceholder.innerHTML = '';

const wrapper = document.createElement('div');
Expand Down Expand Up @@ -330,12 +407,12 @@ const populateEvents = async () => {
<div class="container text-center mt-1">
<div class="row">
<div class="col-7 p-0" style="text-align: center;">
<div class="my_events_field" style="background-color: #ffec99; padding-right: 10px">
<div class="my_events_field" style="background-color: #e9e9e9; padding-right: 10px">
<span id="event_time" class="event_name">${convertToLocaleTime(event.start)} - ${convertToLocaleTime(event.end)}</span>
</div>
</div>
<div class="col-5 p-0">
<div class="my_events_field" style="background-color: #a5d8ff;">
<div class="my_events_field" style="background-color: #e9e9e9;">
<span id="event_room" class="event_name">${event.room}</span>
</div>
</div>
Expand Down
Loading

0 comments on commit a8d3bd7

Please sign in to comment.