TDvorak/PPve
1
0
Fork 0
mirror of https://github.com/Dvorinka/PPve.git synced 2026-06-03 20:12:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

ef

Browse Source
This commit is contained in:
Tomas Dvorak
2025-06-11 15:01:40 +02:00
parent c6cca52ddc
commit f386068760
1 changed files with 92 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rezervace-aut.html
+92 -73
View File
@@ -86,12 +86,12 @@
}
.fc-timegrid-slot {
height: 3rem !important;
height: 2rem !important;
}
.fc-timegrid-slot-label {
font-size: 0.875rem;
color: #64748b;
font-size: 0.75rem !important;
padding: 0 !important;
}
.reservation-card {
@@ -125,11 +125,18 @@
.vehicle-bmw-218d { background-color: #f3e6ff; color: #6f42c1; }
.vehicle-skoda-superb { background-color: #ffe6e6; color: #dc3545; }
/* Calendar size adjustments */
.calendar-container {
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}
/* Responsive calendar styles */
@media (max-width: 768px) {
.fc .fc-toolbar {
flex-direction: column;
gap: 1rem;
gap: 0.5rem;
}
.fc .fc-toolbar-title {
@@ -141,7 +148,7 @@
}
.fc-view-harness {
height: 500px !important; /* Smaller height on mobile */
height: 400px !important;
}
.fc .fc-button {
@@ -151,14 +158,8 @@
}
/* Adjust calendar size for desktop */
.calendar-container {
max-width: 900px;
margin: 0 auto;
padding: 1rem;
}
.fc-view-harness {
height: 600px !important; /* Default height for desktop */
height: 500px !important; /* Reduced from 600px */
}
/* Form container styles */
@@ -374,14 +375,13 @@
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get form reference
const form = document.getElementById('reservationForm');
const message = document.getElementById('statusMessage');
const messageText = document.getElementById('messageText');
let calendar;
const reservationForm = document.getElementById('reservationForm');
const statusMessage = document.getElementById('statusMessage');
// Initialize full calendar
// Initialize FullCalendar
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
@@ -391,8 +391,9 @@
locale: 'cs',
slotMinTime: '06:00:00',
slotMaxTime: '22:00:00',
slotDuration: '01:00:00', // Set slot duration to 1 hour
snapDuration: '01:00:00', // Snap to hour intervals
allDaySlot: false,
slotDuration: '00:30:00',
businessHours: {
daysOfWeek: [1, 2, 3, 4, 5],
startTime: '06:00',
@@ -410,6 +411,30 @@
}
});
calendar.render();
// Check vehicle availability
async function checkVehicleAvailability(vehicle, startDate, endDate) {
try {
const params = new URLSearchParams({
vehicle: vehicle,
start: startDate.toISOString(),
end: endDate.toISOString()
});
const response = await fetch(`/api/check-availability?${params}`);
if (!response.ok) {
throw new Error('Failed to check availability');
}
const data = await response.json();
return data.available;
} catch (error) {
console.error('Error checking availability:', error);
throw new Error('Could not verify vehicle availability');
}
}
// Show status message function
function showMessage(text, type) {
const statusContainer = document.getElementById('statusMessage');
@@ -442,63 +467,57 @@
}
// Handle form submission
if (form) {
form.addEventListener('submit', async function(e) {
e.preventDefault();
reservationForm.addEventListener('submit', async function(e) {
e.preventDefault();
// Validate dates
const startDate = new Date(document.getElementById('startDateTime').value);
const endDate = new Date(document.getElementById('endDateTime').value);
if (endDate <= startDate) {
showMessage('Čas ukončení musí být později než čas začátku', 'error');
return;
// Validate dates
const startDate = new Date(document.getElementById('startDateTime').value);
const endDate = new Date(document.getElementById('endDateTime').value);
if (endDate <= startDate) {
showMessage('Čas ukončení musí být později než čas začátku', 'error');
return;
}
// Check vehicle availability
const vehicle = document.getElementById('vehicle').value;
const isAvailable = await checkVehicleAvailability(vehicle, startDate, endDate);
if (!isAvailable) {
showMessage('Vozidlo není v tomto čase dostupné', 'error');
return;
}
// Prepare reservation data
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');
}
// Check vehicle availability
const vehicle = document.getElementById('vehicle').value;
const isAvailable = await checkVehicleAvailability(vehicle, startDate, endDate);
if (!isAvailable) {
showMessage('Vozidlo není v tomto čase dostupné', 'error');
return;
}
// Prepare reservation data
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');
}
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 {
console.error('Reservation form not found');
}
calendar.render();
showMessage('Rezervace byla úspěšně vytvořena', 'success');
calendar.refetchEvents();
reservationForm.reset();
} catch (error) {
console.error('Error:', error);
showMessage(error.message || 'Nepodařilo se vytvořit rezervaci', 'error');
}
});
});
</script>
</body>