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

etst

Browse Source
This commit is contained in:
Tomas Dvorak
2025-06-13 14:51:56 +02:00
parent 481d3e9ab0
commit 289eb93c26
1 changed files with 101 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rezervace-aut.html
+101 -48
View File
@@ -275,6 +275,48 @@
padding: 0.5rem;
}
/* Time input styling */
.time-input-wrapper {
position: relative;
}
.time-input-wrapper i {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: #6b7280;
pointer-events: none;
}
.time-input-wrapper input[type="time"] {
width: 100%;
padding: 0.5rem 0.75rem 0.5rem 2.5rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
appearance: none;
background-color: white;
color: #111827;
}
.time-input-wrapper input[type="time"]:focus {
outline: 2px solid transparent;
outline-offset: 2px;
border-color: #004990;
box-shadow: 0 0 0 1px #004990;
}
/* Hide default time picker icon in Edge/Chrome */
.time-input-wrapper input[type="time"]::-webkit-calendar-picker-indicator {
background: none;
padding-right: 0.5rem;
}
/* Style for Firefox */
.time-input-wrapper input[type="time"]::-moz-calendar-picker-indicator {
background: none;
}
/* Responsive form layout */
@media (max-width: 640px) {
.form-container {
@@ -463,7 +505,26 @@
<!-- Main Content -->
<div class="container mx-auto px-4 py-8">
<div class="calendar-container">
<div class="bg-blue-50 border-l-4 border-brand-blue p-4 mb-4 rounded-r-lg shadow-sm">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-info-circle text-brand-blue"></i>
</div>
<div class="ml-3">
<p class="text-sm text-gray-700">
Pro rychlé vytvoření rezervace dvakrát klikněte na požadovaný čas/den v kalendáři.
</p>
</div>
</div>
</div>
<div id='calendar'></div>
<div class="flex justify-center mt-6">
<button id="newReservationBtn"
class="bg-brand-blue hover:bg-brand-light-blue text-white font-bold py-3 px-6 rounded-lg shadow-lg transition-all duration-200 transform hover:scale-105 flex items-center gap-2">
<i class="fas fa-plus-circle"></i>
Vytvořit novou rezervaci
</button>
</div>
</div> <!-- Reservation Form Modal -->
<div id="reservationModal" class="reservation-modal">
<div class="form-container">
@@ -498,33 +559,14 @@
<!-- Start Date and Time -->
<div class="form-group">
<label for="startDate">Datum začátku</label>
<input type="date" id="startDate" name="startDate" required
class="w-full p-2 border border-gray-300 rounded-md">
<input type="date" id="startDate" name="startDate" required class="w-full p-2 border border-gray-300 rounded-lg">
</div>
<div class="form-group">
<label for="startTime">Čas začátku</label>
<select id="startTime" name="startTime" required
class="w-full p-2 border border-gray-300 rounded-md">
<option value="">Vyberte čas</option>
<option value="06:00">06:00</option>
<option value="07:00">07:00</option>
<option value="08:00">08:00</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
<option value="19:00">19:00</option>
<option value="20:00">20:00</option>
<option value="21:00">21:00</option>
<option value="22:00">22:00</option>
</select>
<div class="time-input-wrapper">
<i class="fas fa-clock"></i>
<input type="time" id="startTime" name="startTime" required min="06:00" max="22:00">
</div>
</div>
</div>
@@ -532,33 +574,14 @@
<!-- End Date and Time -->
<div class="form-group">
<label for="endDate">Datum konce</label>
<input type="date" id="endDate" name="endDate" required
class="w-full p-2 border border-gray-300 rounded-md">
<input type="date" id="endDate" name="endDate" required class="w-full p-2 border border-gray-300 rounded-lg">
</div>
<div class="form-group">
<label for="endTime">Čas konce</label>
<select id="endTime" name="endTime" required
class="w-full p-2 border border-gray-300 rounded-md">
<option value="">Vyberte čas</option>
<option value="06:00">06:00</option>
<option value="07:00">07:00</option>
<option value="08:00">08:00</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
<option value="19:00">19:00</option>
<option value="20:00">20:00</option>
<option value="21:00">21:00</option>
<option value="22:00">22:00</option>
</select>
<div class="time-input-wrapper">
<i class="fas fa-clock"></i>
<input type="time" id="endTime" name="endTime" required min="06:00" max="22:00">
</div>
</div>
</div>
@@ -974,6 +997,36 @@
document.getElementById('startDate').value = dateStr;
document.getElementById('endDate').value = dateStr;
});
// New reservation button handler
document.getElementById('newReservationBtn').addEventListener('click', function() {
// Set default date and time to current time rounded to next hour
const now = new Date();
now.setMinutes(0);
now.setHours(now.getHours() + 1);
const endDate = new Date(now);
endDate.setHours(endDate.getHours() + 1);
// Format dates for the form
const formattedDate = now.getFullYear() + '-' +
String(now.getMonth() + 1).padStart(2, '0') + '-' +
String(now.getDate()).padStart(2, '0');
const formattedTime = String(now.getHours()).padStart(2, '0') + ':00';
const formattedEndTime = String(endDate.getHours()).padStart(2, '0') + ':00';
// Set the form values
document.getElementById('startDate').value = formattedDate;
document.getElementById('startTime').value = formattedTime;
document.getElementById('endDate').value = formattedDate;
document.getElementById('endTime').value = formattedEndTime;
// Show the modal
reservationModal.style.display = 'block';
});
// Rest of the JavaScript code
// ...existing code...
});
</script>
</body>