This commit is contained in:
Tomas Dvorak
2025-06-11 14:57:14 +02:00
parent 6cc7f2865c
commit c6cca52ddc
+80 -135
View File
@@ -374,13 +374,14 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
let calendar; // Get form reference
const reservationForm = document.getElementById('reservationForm'); const form = document.getElementById('reservationForm');
const statusMessage = document.getElementById('statusMessage'); const message = document.getElementById('statusMessage');
const messageText = document.getElementById('messageText');
// Initialize FullCalendar // Initialize full calendar
const calendarEl = document.getElementById('calendar'); const calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, { const calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek', initialView: 'timeGridWeek',
headerToolbar: { headerToolbar: {
left: 'prev,next today', left: 'prev,next today',
@@ -409,151 +410,95 @@
} }
}); });
calendar.render(); // Show status message function
function showMessage(text, type) {
// Form submission const statusContainer = document.getElementById('statusMessage');
reservationForm.addEventListener('submit', async function(e) { if (!statusContainer) {
e.preventDefault(); console.error('Status message container not found');
// Validate dates
const startDate = new Date(document.getElementById('startDateTime').value);
const endDate = new Date(document.getElementById('endDateTime').value);
if (endDate <= startDate) {
showStatus('Čas ukončení musí být později než čas začátku', 'error');
return; return;
} }
// Check vehicle availability statusContainer.className = 'mt-4 p-4 rounded-md';
const vehicle = document.getElementById('vehicle').value; statusContainer.classList.remove('hidden');
const isAvailable = await checkVehicleAvailability(vehicle, startDate, endDate);
switch (type) {
if (!isAvailable) { case 'success':
showStatus('Vozidlo není v tomto čase dostupné', 'error'); statusContainer.classList.add('bg-green-100', 'text-green-700');
return; break;
case 'error':
statusContainer.classList.add('bg-red-100', 'text-red-700');
break;
case 'info':
statusContainer.classList.add('bg-blue-100', 'text-blue-700');
break;
} }
// Prepare reservation data statusContainer.textContent = text;
const reservationData = {
driverName: document.getElementById('driverName').value,
vehicle: vehicle,
startDateTime: startDate.toISOString(),
endDateTime: endDate.toISOString(),
purpose: document.getElementById('purpose').value
};
try {
const response = await fetch('/api/reservations', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(reservationData)
});
if (!response.ok) {
throw new Error('Chyba při vytváření rezervace');
}
showStatus('Rezervace byla úspěšně vytvořena', 'success');
calendar.refetchEvents();
reservationForm.reset();
} catch (error) {
showStatus(error.message, 'error');
}
});
async function checkVehicleAvailability(vehicle, startDate, endDate) {
try {
const response = await fetch(`/api/check-availability?vehicle=${encodeURIComponent(vehicle)}&start=${startDate.toISOString()}&end=${endDate.toISOString()}`);
const data = await response.json();
return data.available;
} catch (error) {
console.error('Error checking availability:', error);
return false;
}
}
function showStatus(message, type) {
statusMessage.textContent = message;
statusMessage.className = 'mt-4 p-4 rounded-md';
statusMessage.classList.remove('hidden');
if (type === 'success') {
statusMessage.classList.add('bg-green-100', 'text-green-700');
} else {
statusMessage.classList.add('bg-red-100', 'text-red-700');
}
// Auto hide after 5 seconds
setTimeout(() => { setTimeout(() => {
statusMessage.classList.add('hidden'); statusContainer.classList.add('hidden');
}, 5000); }, 5000);
} }
});
function showMessage(text, type) { // Handle form submission
const message = document.getElementById('message'); if (form) {
const messageText = document.getElementById('messageText'); form.addEventListener('submit', async function(e) {
const messageIcon = document.getElementById('messageIcon'); e.preventDefault();
if (!message || !messageText || !messageIcon) {
console.error('Message elements not found');
return;
}
message.classList.remove('hidden', 'bg-green-50', 'bg-red-50', 'bg-blue-50', 'text-green-800', 'text-red-800', 'text-blue-800'); // Validate dates
messageText.textContent = text; const startDate = new Date(document.getElementById('startDateTime').value);
const endDate = new Date(document.getElementById('endDateTime').value);
switch(type) {
case 'success': if (endDate <= startDate) {
message.classList.add('bg-green-50', 'text-green-800'); showMessage('Čas ukončení musí být později než čas začátku', 'error');
messageIcon.className = 'fas fa-check-circle text-green-600 mr-2'; return;
break; }
case 'error':
message.classList.add('bg-red-50', 'text-red-800');
messageIcon.className = 'fas fa-exclamation-circle text-red-600 mr-2';
break;
case 'info':
message.classList.add('bg-blue-50', 'text-blue-800');
messageIcon.className = 'fas fa-info-circle text-blue-600 mr-2';
break;
}
message.classList.remove('hidden');
}
// Update form submission to handle API errors better // Check vehicle availability
form.addEventListener('submit', async (e) => { const vehicle = document.getElementById('vehicle').value;
e.preventDefault(); const isAvailable = await checkVehicleAvailability(vehicle, startDate, endDate);
try { if (!isAvailable) {
showMessage('Odesílání rezervace...', 'info'); showMessage('Vozidlo není v tomto čase dostupné', 'error');
return;
const response = await fetch('/api/reservations', { }
method: 'POST',
headers: { 'Content-Type': 'application/json' }, // Prepare reservation data
body: JSON.stringify({ const reservationData = {
driverName: document.getElementById('driverName').value, driverName: document.getElementById('driverName').value,
vehicle: document.getElementById('vehicle').value, vehicle: vehicle,
startDateTime: new Date(dateStart.value + 'T' + timeStart.value).toISOString(), startDateTime: startDate.toISOString(),
endDateTime: new Date(dateEnd.value + 'T' + timeEnd.value).toISOString(), endDateTime: endDate.toISOString(),
purpose: document.getElementById('purpose').value || undefined // Make purpose optional purpose: document.getElementById('purpose').value
}) };
try {
const response = await fetch('/api/reservations', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(reservationData)
});
if (!response.ok) {
throw new Error('Chyba při vytváření rezervace');
}
showMessage('Rezervace byla úspěšně vytvořena', 'success');
calendar.refetchEvents();
form.reset();
} catch (error) {
console.error('Error:', error);
showMessage(error.message || 'Nepodařilo se vytvořit rezervaci', 'error');
}
}); });
} else {
if (!response.ok) { console.error('Reservation form not found');
throw new Error(response.statusText || 'Došlo k chybě při vytváření rezervace');
}
showMessage('Rezervace byla úspěšně vytvořena', 'success');
form.reset();
dateStart.value = todayStr;
dateEnd.value = todayStr;
} catch (error) {
console.error('Error:', error);
showMessage(error.message || 'Nepodařilo se vytvořit rezervaci', 'error');
} }
calendar.render();
}); });
</script> </script>
</body> </body>