diff --git a/modules/hotelreservationsystem/controllers/admin/AdminHotelRoomsBookingController.php b/modules/hotelreservationsystem/controllers/admin/AdminHotelRoomsBookingController.php index de2e11d8a6..0965dfc28a 100644 --- a/modules/hotelreservationsystem/controllers/admin/AdminHotelRoomsBookingController.php +++ b/modules/hotelreservationsystem/controllers/admin/AdminHotelRoomsBookingController.php @@ -31,6 +31,8 @@ class AdminHotelRoomsBookingController extends ModuleAdminController protected $date_to; protected $booking_product; protected $occupancy; + protected $eventColors; + public function __construct() { $this->table = 'htl_booking_detail'; @@ -43,6 +45,13 @@ public function __construct() $this->_conf[52] = $this->l('Room in the booking is successfully reallocated'); $this->_conf[53] = $this->l('Room in the booking is successfully swapped'); + + $this->eventColors = array( + 'available' => array('event' => '#7EC77B', 'cell' => '#D9EFD8'), + 'partially_available' => array('event' => '#FFC224', 'cell' => '#FFF3CD'), + 'booked' => array('event' => '#00AFF0', 'cell' => '#C3E1FB'), + 'unavailable' => array('event' => '#FF3838', 'cell' => '#FFC4C4'), + ); } public function init() @@ -558,10 +567,21 @@ public function ajaxProcessGetCalenderData() } $eventData['date_format'] = Tools::displayDate($cal_date_from); + $stats = $eventData['stats']; + if ($stats['num_avail'] > 0) { + $cellBgColor = $this->eventColors['available']['cell']; + } elseif ($stats['num_part_avai'] > 0) { + $cellBgColor = $this->eventColors['partially_available']['cell']; + } elseif ($stats['num_booked'] == $stats['total_rooms'] && $stats['total_rooms'] != 0) { + $cellBgColor = $this->eventColors['booked']['cell']; + } else { + $cellBgColor = $this->eventColors['unavailable']['cell']; + } $events[strtotime($bookingParams['date_from'])] = array( 'is_notification' => 1, - 'title' => $this->l('icon'), - 'start' => date('Y-m-d H:i:s', strtotime($bookingParams['date_from'])), + 'start' => date('Y-m-d', strtotime($bookingParams['date_from'])), + 'display' => 'background', + 'backgroundColor' => $cellBgColor, 'data' => $eventData ); @@ -571,24 +591,25 @@ public function ajaxProcessGetCalenderData() $bookingParams['date_to'] = $searchDateTo; if ($bookingData = $objBookingDetail->getBookingData($bookingParams)) { if ($bookingData['stats']['num_avail']) { - $eventColor = '#7EC77B'; - $title = sprintf($this->l('Available Rooms : %s'), $bookingData['stats']['num_avail']); + $eventColor = $this->eventColors['available']['event']; + $title = sprintf($this->l('%s Available Rooms'), $bookingData['stats']['num_avail']); } elseif ($bookingData['stats']['num_part_avai']) { - $eventColor = '#FFC224'; - $title = sprintf($this->l('Partially Available Rooms : %s'), $bookingData['stats']['num_part_avai']); + $eventColor = $this->eventColors['partially_available']['event']; + $title = sprintf($this->l('%s Partially Available Rooms'), $bookingData['stats']['num_part_avai']); + } elseif ($bookingData['stats']['num_booked'] == $bookingData['stats']['total_rooms'] && $bookingData['stats']['total_rooms'] != 0 && $bookingData['stats']['num_unavail'] == 0) { + $eventColor = $this->eventColors['booked']['event']; + $title = sprintf($this->l('%s Available Rooms'), $bookingData['stats']['num_avail']); } else { - $eventColor = '#FF3838'; - $title = sprintf($this->l('Available Rooms : %s'), $bookingData['stats']['num_avail']); + $eventColor = $this->eventColors['unavailable']['event']; + $title = sprintf($this->l('%s Available Rooms'), $bookingData['stats']['num_avail']); } $bookingData['date_from_format'] = Tools::displayDate($searchDateFrom); $bookingData['date_to_format'] = Tools::displayDate($searchDateTo); + $bookingData['eventColor'] = $eventColor; $events[] = array( 'title' => $title, 'start' => date('Y-m-d', strtotime($searchDateFrom)), 'end' => date('Y-m-d', strtotime($searchDateTo)), - 'backgroundColor' => $eventColor, - 'color' => $eventColor, - 'textColor' => '#FFF', 'data' => $bookingData ); } diff --git a/modules/hotelreservationsystem/views/css/HotelReservationAdmin.css b/modules/hotelreservationsystem/views/css/HotelReservationAdmin.css index e3b6077b2c..78ca5a7823 100644 --- a/modules/hotelreservationsystem/views/css/HotelReservationAdmin.css +++ b/modules/hotelreservationsystem/views/css/HotelReservationAdmin.css @@ -249,10 +249,10 @@ p.room_cat_data .indi_cont { - margin: 10px 0px; + display: flex; + align-items: center; } - .cart-table-thead { border-bottom: 1px solid #555!important; @@ -549,9 +549,6 @@ p.room_cat_data /* book now full calender */ -.fc .fc-daygrid-day.fc-day-today { - background-color: unset; -} .fc-daygrid-day-top { justify-content: space-between;} .fc a.fc-daygrid-day-number { @@ -563,7 +560,8 @@ p.room_cat_data color: #FFFFFF; line-height: 1; border-radius: 50%; - padding: 5px 8px; + padding: 4px; + margin: 2px 2px 0px 0px; } .fc-daygrid-day-top .day-info { @@ -577,6 +575,57 @@ p.room_cat_data .fc-today-button:disabled { display: none; } +#fullcalendar .fc-daygrid-day-events { + height: 0 ; + min-height: 0; + overflow: visible; +} +#fullcalendar .fc-event.search-result-event:not(.fc-event-start) .fc-event-main { + visibility: hidden; +} +#fullcalendar .fc-event.search-result-event { + background-color: #FFFFFF; + border: none; + border-left: 5px solid; + border-radius: 3px; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05); + margin: 1px 4px; + padding: 2px 4px; + line-height: 1.4; + display: flex; + align-items: center; + overflow: hidden; +} +#fullcalendar .fc-event.search-result-event .fc-event-main { + overflow: hidden; +} +#fullcalendar .fc-event.search-result-event .fc-event-title { + font-size: 14px; + font-weight: 400; + color: #333333; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +#fullcalendar .fc-event.search-result-event:not(.fc-event-start) { + border-left: none; + padding-left: 13px; + margin-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +#fullcalendar .fc-event.search-result-event:not(.fc-event-end) { + margin-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.calendar-legend { + display: flex; + justify-content: space-evenly; + align-items: center; + flex-wrap: nowrap; + padding-top: 14px; +} #room-reallocation-modal .modal-footer { padding: 15px 0px 0px 0px diff --git a/modules/hotelreservationsystem/views/js/admin/hotel_rooms_booking.js b/modules/hotelreservationsystem/views/js/admin/hotel_rooms_booking.js index 225f08bd22..e52d8e4c52 100644 --- a/modules/hotelreservationsystem/views/js/admin/hotel_rooms_booking.js +++ b/modules/hotelreservationsystem/views/js/admin/hotel_rooms_booking.js @@ -45,22 +45,15 @@ $(document).ready(function() { }, eventContent: function(info) { - if (info.event.extendedProps.is_notification) { - return false; + if (!info.event.extendedProps.is_notification) { + return { html: '
' + info.event.title.replace(/^(\S+)/, '$1') + '
' }; } }, eventDidMount: function(info) { if (info.event.extendedProps.is_notification) { - if (info.event.extendedProps.data.stats.num_avail > 0) { - $(info.el).closest('td').find('.day-info svg circle').attr('fill', '#7EC77B'); - } else if (info.event.extendedProps.data.stats.num_part_avai > 0) { - $(info.el).closest('td').find('.day-info svg circle').attr('fill', '#FFC224'); - } else if ((info.event.extendedProps.data.stats.num_booked == info.event.extendedProps.data.stats.total_rooms) && info.event.extendedProps.data.stats.total_rooms != 0) { - $(info.el).closest('td').find('.day-info svg circle').attr('fill', '#00AFF0'); - } else { - $(info.el).closest('td').find('.day-info svg circle').attr('fill', '#FF3838'); - } - $(info.el).closest('td').find('.day-info').tooltip({ + var $cell = $(info.el).closest('td'); + $cell.css('background-color', info.event.backgroundColor); + $cell.tooltip({ content: function() { $('#date-stats-tooltop .tip_date').text(info.event.extendedProps.data.date_format); @@ -73,8 +66,13 @@ $(document).ready(function() { }); return $('#date-stats-tooltop').html(); }, - items: "div", + items: "td", trigger : 'hover', + position: { + my: "left top", + at: "left+50% bottom-50%", + collision: "flipfit" + }, show: { delay: 100, }, @@ -91,6 +89,13 @@ $(document).ready(function() { return false; } + // suppress cell tooltip when hovering the search result bar + if ($(event.originalEvent.target).closest('.search-result-event').length) { + ui.tooltip.remove(); + $(this).removeData('ui-tooltip-id').removeAttr('aria-describedby'); + return false; + } + var $id = $(ui.tooltip).attr('id'); // close any lingering tooltips @@ -113,8 +118,8 @@ $(document).ready(function() { }); } }); - info.event.remove(); } else { + $(info.el).addClass('search-result-event'); $(info.el).tooltip({ content: function() { @@ -134,6 +139,7 @@ $(document).ready(function() { }, items: "div", trigger : 'hover', + track: true, show: { delay: 100, }, @@ -172,13 +178,10 @@ $(document).ready(function() { }); } }); + info.el.style.borderLeftColor = info.event.extendedProps.data.eventColor; + resizeSearchResultEventBar($(info.el)); } }, - dayCellDidMount: (arg) => { - - let svg = $('#svg-icon').html(); - $(arg.el).find('.fc-daygrid-day-top').append(''+svg+''); - }, datesSet: function(arg) { if($('.fc-event').tooltip()) { $('.fc-event').tooltip('destroy'); @@ -186,10 +189,40 @@ $(document).ready(function() { } }); calendar.render(); + + var searchResultResizeTimer; + $(window).on('resize', function() { + clearTimeout(searchResultResizeTimer); + searchResultResizeTimer = setTimeout(function() { + $('#fullcalendar .fc-event.search-result-event').each(function() { + resizeSearchResultEventBar($(this)); + }); + }, 150); + }); + } + + function resizeSearchResultEventBar($bar) { + requestAnimationFrame(function() { + var $td = $bar.closest('td'); + if (!$td.length) { + return; + } + var cellHeight = $td.outerHeight(); + if (!cellHeight) { + return; + } + $bar.css('transform', ''); + $bar.css('height', (cellHeight * 0.35) + 'px'); + var cellRect = $td.get(0).getBoundingClientRect(); + var barRect = $bar.get(0).getBoundingClientRect(); + var desiredTop = cellRect.top + (cellRect.height - barRect.height) / 2; + var delta = desiredTop - barRect.top; + $bar.css('transform', 'translateY(' + delta + 'px)'); + }); } function removeInitializedTooltips() { - $('#fullcalendar a.day-info, #fullcalendar .fc-daygrid-event').each(function () { + $('#fullcalendar td.fc-daygrid-day, #fullcalendar .fc-daygrid-event').each(function () { if ($(this).data('ui-tooltip')) { $(this).tooltip('destroy'); } @@ -753,6 +786,7 @@ $(document).ready(function() { e.preventDefault(); var booking_occupancy_wrapper = $(this).closest('.booking_occupancy_wrapper'); + var max_child_in_room = $(booking_occupancy_wrapper).find('.max_children').val(); var occupancy_block = ''; var roomBlockIndex = parseInt($(booking_occupancy_wrapper).find(".occupancy_info_block").last().attr('occ_block_index')); roomBlockIndex += 1; diff --git a/modules/hotelreservationsystem/views/templates/admin/hotel_rooms_booking/helpers/view/_partials/search-stats.tpl b/modules/hotelreservationsystem/views/templates/admin/hotel_rooms_booking/helpers/view/_partials/search-stats.tpl index 11690bc249..44b27250fd 100644 --- a/modules/hotelreservationsystem/views/templates/admin/hotel_rooms_booking/helpers/view/_partials/search-stats.tpl +++ b/modules/hotelreservationsystem/views/templates/admin/hotel_rooms_booking/helpers/view/_partials/search-stats.tpl @@ -63,23 +63,4 @@
- -
-
- - {l s='Available Rooms' mod='hotelreservationsystem'} -
-
- - {l s='Partially Available' mod='hotelreservationsystem'} -
-
- - {l s='Unavailable Rooms' mod='hotelreservationsystem'} -
-
- - {l s='Booked Rooms' mod='hotelreservationsystem'} -
-
\ No newline at end of file diff --git a/modules/hotelreservationsystem/views/templates/admin/hotel_rooms_booking/helpers/view/view.tpl b/modules/hotelreservationsystem/views/templates/admin/hotel_rooms_booking/helpers/view/view.tpl index 2557827b97..27259daa9e 100644 --- a/modules/hotelreservationsystem/views/templates/admin/hotel_rooms_booking/helpers/view/view.tpl +++ b/modules/hotelreservationsystem/views/templates/admin/hotel_rooms_booking/helpers/view/view.tpl @@ -194,6 +194,24 @@ {if !isset($booking_product) || (isset($booking_product) && $booking_product == 1)}
{hook h='displayAdminRoomsBookingCalendarAfter'} +
+
+ + {l s='Available Rooms' mod='hotelreservationsystem'} +
+
+ + {l s='Partially Available' mod='hotelreservationsystem'} +
+
+ + {l s='Unavailable Rooms' mod='hotelreservationsystem'} +
+
+ + {l s='Booked Rooms' mod='hotelreservationsystem'} +
+
{else}
{include file="./_partials/service-products.tpl"} @@ -253,6 +271,3 @@
-