mirrors/easyappointments
1
0
Fork 1
mirror of https://github.com/alextselegidis/easyappointments.git synced 2024-11-10 01:52:22 +03:00
Code Issues Projects Releases Packages Wiki Activity

Update how the booking selection displays on the screen

Browse source
This commit is contained in:
Alex Tselegidis 2024-07-15 16:09:15 +02:00
parent d12d4f125c
commit bdc5782cf4
3 changed files with 17 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
application/views/components/booking_header.php
View file

@ -15,11 +15,8 @@
</span> </span>
<div class="d-flex justify-content-center justify-content-md-start"> <div class="d-flex justify-content-center justify-content-md-start">
<span class="display-selected-service me-1 pe-1 border-end invisible"> <span class="display-booking-selection">
<?= lang('service') ?> <?= lang('service') ?> │ <?= lang('provider') ?>
</span>
<span class="display-selected-provider invisible">
<?= lang('provider') ?>
</span> </span>
</div> </div>
</div> </div>

3
assets/css/layouts/booking_layout.scss
View file

@ -53,8 +53,7 @@ body {
max-height: 56px; max-height: 56px;
} }
.display-selected-service, .display-booking-selection {
.display-selected-provider {
color: #225d4d; color: #225d4d;
border-right-color: #225d4d !important; border-right-color: #225d4d !important;
font-size: 60%; font-size: 60%;

18
assets/js/pages/booking.js
View file

@ -38,6 +38,7 @@ App.Pages.Booking = (function () {
const $customField3 = $('#custom-field-3'); const $customField3 = $('#custom-field-3');
const $customField4 = $('#custom-field-4'); const $customField4 = $('#custom-field-4');
const $customField5 = $('#custom-field-5'); const $customField5 = $('#custom-field-5');
const $displayBookingSelection = $('.display-booking-selection');
const tippy = window.tippy; const tippy = window.tippy;
const moment = window.moment; const moment = window.moment;
@ -644,11 +645,20 @@ App.Pages.Booking = (function () {
* customer settings and input for the appointment booking. * customer settings and input for the appointment booking.
*/ */
function updateConfirmFrame() { function updateConfirmFrame() {
const serviceOptionText = $selectService.find('option:selected').text(); const serviceId = $selectService.val();
$('.display-selected-service').text(serviceOptionText).removeClass('invisible'); const providerId = $selectProvider.val();
$displayBookingSelection.text(`${lang('service')} │ ${lang('provider')}`); // Notice: "│" is a custom ASCII char
if (serviceId && providerId) {
const serviceOptionText = $selectService.find('option:selected').text();
const providerOptionText = $selectProvider.find('option:selected').text(); const providerOptionText = $selectProvider.find('option:selected').text();
$('.display-selected-provider').text(providerOptionText).removeClass('invisible'); $displayBookingSelection.text(`${serviceOptionText} │ ${providerOptionText}`);
}
$('.display-selected-service')
.text(serviceId ? serviceOptionText : lang('service_and_provider'))
.removeClass('invisible');
if (!$availableHours.find('.selected-hour').text()) { if (!$availableHours.find('.selected-hour').text()) {
return; // No time is selected, skip the rest of this function... return; // No time is selected, skip the rest of this function...
@ -656,8 +666,6 @@ App.Pages.Booking = (function () {
// Render the appointment details // Render the appointment details
const serviceId = $selectService.val();
const service = vars('available_services').find( const service = vars('available_services').find(
(availableService) => Number(availableService.id) === Number(serviceId), (availableService) => Number(availableService.id) === Number(serviceId),
); );