mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-04 20:42:59 +00:00
etst
This commit is contained in:
Tomas Dvorak
+101
-48
@@ -275,6 +275,48 @@
|
|||||||
padding: 0.5rem;
|
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 */
|
/* Responsive form layout */
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.form-container {
|
.form-container {
|
||||||
@@ -463,7 +505,26 @@
|
|||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<div class="container mx-auto px-4 py-8">
|
<div class="container mx-auto px-4 py-8">
|
||||||
<div class="calendar-container">
|
<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 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> <!-- Reservation Form Modal -->
|
||||||
<div id="reservationModal" class="reservation-modal">
|
<div id="reservationModal" class="reservation-modal">
|
||||||
<div class="form-container">
|
<div class="form-container">
|
||||||
@@ -498,33 +559,14 @@
|
|||||||
<!-- Start Date and Time -->
|
<!-- Start Date and Time -->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="startDate">Datum začátku</label>
|
<label for="startDate">Datum začátku</label>
|
||||||
<input type="date" id="startDate" name="startDate" required
|
<input type="date" id="startDate" name="startDate" required class="w-full p-2 border border-gray-300 rounded-lg">
|
||||||
class="w-full p-2 border border-gray-300 rounded-md">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="startTime">Čas začátku</label>
|
<label for="startTime">Čas začátku</label>
|
||||||
<select id="startTime" name="startTime" required
|
<div class="time-input-wrapper">
|
||||||
class="w-full p-2 border border-gray-300 rounded-md">
|
<i class="fas fa-clock"></i>
|
||||||
<option value="">Vyberte čas</option>
|
<input type="time" id="startTime" name="startTime" required min="06:00" max="22:00">
|
||||||
<option value="06:00">06:00</option>
|
</div>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -532,33 +574,14 @@
|
|||||||
<!-- End Date and Time -->
|
<!-- End Date and Time -->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="endDate">Datum konce</label>
|
<label for="endDate">Datum konce</label>
|
||||||
<input type="date" id="endDate" name="endDate" required
|
<input type="date" id="endDate" name="endDate" required class="w-full p-2 border border-gray-300 rounded-lg">
|
||||||
class="w-full p-2 border border-gray-300 rounded-md">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="endTime">Čas konce</label>
|
<label for="endTime">Čas konce</label>
|
||||||
<select id="endTime" name="endTime" required
|
<div class="time-input-wrapper">
|
||||||
class="w-full p-2 border border-gray-300 rounded-md">
|
<i class="fas fa-clock"></i>
|
||||||
<option value="">Vyberte čas</option>
|
<input type="time" id="endTime" name="endTime" required min="06:00" max="22:00">
|
||||||
<option value="06:00">06:00</option>
|
</div>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -974,6 +997,36 @@
|
|||||||
document.getElementById('startDate').value = dateStr;
|
document.getElementById('startDate').value = dateStr;
|
||||||
document.getElementById('endDate').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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user