251 lines
10 KiB
HTML
251 lines
10 KiB
HTML
{% extends "authorized.html" %}
|
|
{% block links %}
|
|
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.css'>
|
|
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.3.0/main.min.css'>
|
|
{% endblock links %}
|
|
{% block center %}
|
|
<div class="mh-100">
|
|
<div id="calendar" class="fc"></div>
|
|
</div>
|
|
|
|
<!-- Create Event Modal -->
|
|
<div class="modal fade" id="eventDetailsModal" tabindex="-1" role="dialog" aria-labelledby="eventDetailsModalTitle"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<form id="eventDetailsModalForm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="eventDetailsModalTitle">Request dates</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="eventTitle">Reservation for</label>
|
|
<input type="text" id="eventTitle" class="form-control" placeholder="Reservation for">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="eventStart">Arriving</label>
|
|
<input type="date" class="form-control" id="eventStart" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="eventEnd">Leaving</label>
|
|
<input type="date" class="form-control" id="eventEnd" required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="eventDetailsModalClose" class="btn btn-secondary"
|
|
data-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Send Request</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Event Modal -->
|
|
<div class="modal fade" id="eventEditModal" tabindex="-1" role="dialog" aria-labelledby="eventEditModalTitle"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<form id="eventForm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Edit Event</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="eventEditTitle">Reservation for</label>
|
|
<input type="text" id="eventEditTitle" class="form-control" placeholder="Event Title">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="eventEditEnd">Arriving</label>
|
|
<input type="date" id="eventEditStart" class="form-control" placeholder="Start">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="eventEditEnd">Leaving</label>
|
|
<input type="date" id="eventEditEnd" class="form-control" placeholder="End">
|
|
</div>
|
|
|
|
{% for user_role in user_roles %}
|
|
{% if user_role.role_name == "admin" %}
|
|
<h5>Actions</h5>
|
|
<ul>
|
|
<button type="button" id="eventApprove" onclick="updateEventState('Approved')">Approve</button>
|
|
<button type="button" id="eventReject" onclick="updateEventState('Rejected')">Reject</button>
|
|
<button type="button" id="eventConfirm" onclick="updateEventState('Confirmed')">Confirm</button>
|
|
</ul>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" id="closeEventEdit"
|
|
data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary" id="saveEvent">Save</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock center %}
|
|
{% block scripts %}
|
|
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/index.global.min.js'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js'></script>
|
|
<script src='https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuidv4.min.js'></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var calendarEl = document.getElementById('calendar');
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
initialView: 'dayGridMonth',
|
|
themeSystem: 'bootstrap5',
|
|
selectable: true,
|
|
displayEventTime: true,
|
|
displayEventEnd: true,
|
|
slotDuration: { hours: 12 },
|
|
slotLabelInterval: { hours: 24 },
|
|
headerToolbar: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'dayGridMonth,timeGridWeek,timeGridDay,multiMonthYear'
|
|
},
|
|
events: '/calendar/getevents',
|
|
select: function (info) {
|
|
$('#eventStart').val(info.startStr);
|
|
$('#eventEnd').val(info.endStr);
|
|
$('#eventDetailsModal').modal('show');
|
|
},
|
|
eventClick: function (info) {
|
|
if (info.event.title != "In use") {
|
|
$('#eventEditTitle').val(info.event.title);
|
|
$('#eventEditStart').val(moment(info.event.start).format('YYYY-MM-DD'));
|
|
$('#eventEditEnd').val(moment(info.event.end).format('YYYY-MM-DD'));
|
|
$('#eventEditModal').modal('show');
|
|
// Store the event for later update
|
|
window.calEvent = info.event;
|
|
}
|
|
}
|
|
});
|
|
|
|
calendar.render();
|
|
|
|
document.getElementById('eventDetailsModalForm').addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
var start = document.getElementById('eventStart').value;
|
|
var end = document.getElementById('eventEnd').value;
|
|
|
|
// Prepare the event data
|
|
var eventData = {
|
|
start: start,
|
|
end: end
|
|
};
|
|
|
|
// Send data to the API
|
|
fetch('/calendar/newrequest', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(eventData)
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error('Network response was not ok');
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// Optionally, use the response to add the event to the calendar
|
|
$('#eventDetailsModal').modal('hide');
|
|
calendar.addEvent({
|
|
title: data.title,
|
|
start: data.start,
|
|
end: data.end,
|
|
allDay: data.allDay,
|
|
backgroundColor: data.backgroundColor
|
|
});
|
|
e.target.reset();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error creating event:', error);
|
|
alert('An error occurred while creating the event.');
|
|
});
|
|
});
|
|
|
|
document.getElementById('eventDetailsModalClose').addEventListener('click', function () {
|
|
$('#eventDetailsModal').modal('hide');
|
|
});
|
|
|
|
$('#saveEvent').on('click', function () {
|
|
var updatedEvent = {
|
|
id: window.calEvent.id,
|
|
title: $('#eventEditTitle').val(),
|
|
start: $('#eventEditStart').val(),
|
|
end: $('#eventEditEnd').val()
|
|
};
|
|
|
|
// Save the updates to the record
|
|
fetch('/calendar/updaterequest', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(updatedEvent)
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error('Network response was not ok');
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// Optionally, use the response to add the event to the calendar
|
|
$('#eventDetailsModal').modal('hide');
|
|
// Update the original event object
|
|
if (window.calEvent.title != data.title) {
|
|
window.calEvent.setProp('title', data.title);
|
|
}
|
|
if (window.calEvent.start != data.start) {
|
|
window.calEvent.setStart(data.start);
|
|
}
|
|
if (window.calEvent.end != data.end) {
|
|
window.calEvent.setEnd(data.end);
|
|
}
|
|
window.calEvent.setProp('allDay', data.allDay);
|
|
window.calEvent.setProp('backgroundColor', data.backgroundColor);
|
|
|
|
e.target.reset();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error creating event:', error);
|
|
//alert('An error occurred while creating the event.');
|
|
});
|
|
|
|
// Hide the popup
|
|
$('#eventEditModal').modal('hide');
|
|
});
|
|
|
|
$('#closeEventEdit').on('click', function () {
|
|
$('#eventEditModal').modal('hide');
|
|
});
|
|
});
|
|
|
|
function updateEventState(state) {
|
|
var updatedEvent = {
|
|
id: window.calEvent.id,
|
|
eventType: 'Reservation',
|
|
state: state
|
|
};
|
|
|
|
// Save the updates to the record
|
|
fetch('/calendar/updateeventstate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(updatedEvent)
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error('Network response was not ok');
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// Update the original event object
|
|
window.calEvent.setProp('backgroundColor', data.backgroundColor);
|
|
|
|
e.target.reset();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error creating event:', error);
|
|
//alert('An error occurred while creating the event.');
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock scripts %} |