mirror of
https://github.com/OCA/pms.git
synced 2025-01-29 00:17:45 +02:00
popover improvement (#93)
* [FIX] Fix popover placement * [FIX] Fix popover in xs (phones) * [ADD] folio and reservation buttons * [ADD] Folio pending highlights * [FIX] event is not defined in Firefox
This commit is contained in:
@@ -49,6 +49,8 @@ class BusHotelCalendar(models.TransientModel):
|
||||
'fix_days': vals['fix_days'],
|
||||
'fix_room': False,
|
||||
'overbooking': vals['overbooking'],
|
||||
'price_room_services_set': vals['price_room_services_set'],
|
||||
'amount_total': vals['pending_amount'] + vals['invoices_paid'],
|
||||
'real_dates': vals['real_dates'],
|
||||
},
|
||||
'tooltip': {
|
||||
|
||||
@@ -92,6 +92,8 @@ class HotelReservation(models.Model):
|
||||
'fix_room': False, # Fix Rooms
|
||||
'overbooking': reserv['overbooking'],
|
||||
'state': reserv['state'],
|
||||
'price_room_services_set': reserv['price_room_services_set'],
|
||||
'amount_total': reserv['amount_total'],
|
||||
'real_dates': [reserv['real_checkin'], reserv['real_checkout']]})
|
||||
json_reservation_tooltips.update({
|
||||
reserv['id']: {
|
||||
@@ -192,6 +194,7 @@ class HotelReservation(models.Model):
|
||||
hr.price_room_services_set,
|
||||
|
||||
hf.id as folio_id, hf.name as folio_name, hf.reservation_type, hf.invoices_paid, hf.pending_amount,
|
||||
hf.amount_total,
|
||||
|
||||
rp.mobile, rp.phone, rp.email, rp.name as partner_name,
|
||||
|
||||
|
||||
@@ -350,6 +350,12 @@ div.diagonal {
|
||||
left: 40%;
|
||||
bottom: 0;
|
||||
}
|
||||
div.diagonal_pending_amount {
|
||||
background-color: #A24689;
|
||||
}
|
||||
.diagonal_pending_amount::before {
|
||||
border-top-color: #A24689;
|
||||
}
|
||||
|
||||
div.triangle-right {
|
||||
overflow: hidden;
|
||||
@@ -378,3 +384,7 @@ div.pull-right-custom {
|
||||
color: #777;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
@@ -386,6 +386,16 @@ var PMSCalendarController = AbstractController.extend({
|
||||
$('.hcal-reservation').removeClass("marked-as-having-a-popover");
|
||||
};
|
||||
|
||||
/* destroy popover if mouse click is done out the popover */
|
||||
/* except if you click in the payment button */
|
||||
/* TODO: Review because this event is trigger anywhere, even if you click in other buttons! */
|
||||
$('html').on('click', function(e) {
|
||||
if (!$(e.target).hasClass("marked-as-having-a-popover") &&
|
||||
!$(e.target).parents().is('.popover.in') &&
|
||||
(e.target.id !== 'payment_folio')) {
|
||||
_destroy_and_clear_popover_mark();
|
||||
}
|
||||
});
|
||||
this._multi_calendar.on_calendar('hcalOnClickReservation', function(ev){
|
||||
var active_calendar = self._multi_calendar.get_active_calendar();
|
||||
if ( active_calendar.getSelectionMode() !== HotelCalendar.MODE.NONE
|
||||
@@ -403,15 +413,9 @@ var PMSCalendarController = AbstractController.extend({
|
||||
container: 'body',
|
||||
animation: false,
|
||||
html: true,
|
||||
placement: 'bottom',
|
||||
placement: 'auto bottom',
|
||||
content: QWeb.render('HotelCalendar.TooltipReservation', qdict)
|
||||
}).popover('show');
|
||||
/* destroy popover if mouse click is done out the popover */
|
||||
$(document).click(function(e){
|
||||
if( $(e.target).closest(".popover-content").length == 0 && $(e.target).hasClass("marked-as-having-a-popover") == false ) {
|
||||
_destroy_and_clear_popover_mark();
|
||||
}
|
||||
});
|
||||
/* add actions */
|
||||
$reservationPopover.data('bs.popover').tip().find(".btn_popover_open_folio").on('click',
|
||||
{folio_id: ev.detail.reservationObj._userData.folio_id}, function(ev){
|
||||
@@ -433,12 +437,39 @@ var PMSCalendarController = AbstractController.extend({
|
||||
views: [[false, 'form']]
|
||||
});
|
||||
});
|
||||
$reservationPopover.data('bs.popover').tip().find(".btn_popover_open_payment").on('click',
|
||||
$reservationPopover.data('bs.popover').tip().find(".btn_popover_open_payment_folio").on('click',
|
||||
{reservation: ev.detail.reservationObj}, function(ev){
|
||||
if (ev.data.reservation.total_folio <= ev.data.reservation.total_reservation ||
|
||||
$('#payment_reservation').hasClass('in')) {
|
||||
_destroy_and_clear_popover_mark();
|
||||
var x = self._rpc({
|
||||
model: 'hotel.reservation',
|
||||
method: 'action_pay_folio',
|
||||
args: [ev.data.reservation.id],
|
||||
}).then(function (result){
|
||||
return self.do_action({
|
||||
name: result.name,
|
||||
view_type: result.view_type,
|
||||
view_mode: result.view_mode,
|
||||
type: result.type,
|
||||
res_model: result.res_model,
|
||||
views: [[result.view_id, 'form']],
|
||||
context: result.context,
|
||||
target: result.target,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
$('#payment_folio').css('color', '#A24689');
|
||||
$('#folio_pending_amount').css('animation', 'blinker 1s linear');
|
||||
$('#price_room').css('animation', 'blinker 1s linear');
|
||||
}
|
||||
});
|
||||
$reservationPopover.data('bs.popover').tip().find(".btn_popover_open_payment_reservation").on('click',
|
||||
{reservation_id: ev.detail.reservationObj.id}, function(ev){
|
||||
_destroy_and_clear_popover_mark();
|
||||
var x = self._rpc({
|
||||
model: 'hotel.reservation',
|
||||
method: 'action_pay_folio',
|
||||
method: 'action_pay_reservation',
|
||||
args: [ev.data.reservation_id],
|
||||
}).then(function (result){
|
||||
return self.do_action({
|
||||
@@ -771,7 +802,9 @@ var PMSCalendarController = AbstractController.extend({
|
||||
'unusedZone': false,
|
||||
'linkedId': false,
|
||||
'overbooking': json_reserv['overbooking'],
|
||||
'cancelled': json_reserv['state'] === 'cancelled'
|
||||
'cancelled': json_reserv['state'] === 'cancelled',
|
||||
'total_reservation': json_reserv['price_room_services_set'],
|
||||
'total_folio': json_reserv['amount_total'],
|
||||
});
|
||||
nreserv.addUserData({
|
||||
'folio_id': json_reserv['folio_id'],
|
||||
|
||||
@@ -2992,6 +2992,8 @@ function HReservation(/*Dictionary*/rValues) {
|
||||
this.overbooking = rValues.overbooking || false;
|
||||
this.cancelled = rValues.cancelled || false;
|
||||
this.room = rValues.room || null;
|
||||
this.total_reservation = rValues.total_reservation || 0;
|
||||
this.total_folio = rValues.total_folio || 0;
|
||||
|
||||
this._drawModes = ['hard-start', 'hard-end'];
|
||||
this._html = false;
|
||||
@@ -3046,6 +3048,8 @@ HReservation.prototype = {
|
||||
'overbooking': this.overbooking,
|
||||
'cancelled': this.cancelled,
|
||||
'room_id': this.room_id,
|
||||
'total_reservation': this.total_reservation,
|
||||
'total_folio': this.total_folio,
|
||||
});
|
||||
nreserv._beds = _.clone(this._beds);
|
||||
nreserv._html = this._html;
|
||||
|
||||
@@ -96,12 +96,12 @@
|
||||
|
||||
<t t-name="HotelCalendar.TooltipReservation.Channel.direct">
|
||||
<div class="row row-eq-height">
|
||||
<div class="col-sm-12 bg-gray-light">
|
||||
<div class="col-sm-12 col-xs-12 bg-gray-light">
|
||||
Sales Channel: <b class="mt-10"><t t-esc="channel_type"/></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-eq-height">
|
||||
<div class="col-sm-12 bg-gray-light">
|
||||
<div class="col-sm-12 col-xs-12 bg-gray-light">
|
||||
<t t-if="channel_type =='call'">
|
||||
TODO: add call center information
|
||||
</t>
|
||||
@@ -111,19 +111,19 @@
|
||||
|
||||
<t t-name="HotelCalendar.TooltipReservation.Customer">
|
||||
<div class="row row-eq-height">
|
||||
<div class="col-sm-6 bg-gray-light">
|
||||
<div class="col-sm-6 col-xs-6 bg-gray-light">
|
||||
<i class="fa fa-user-circle fa-2x fa-pull-left mt-5"/>
|
||||
<header><t t-esc="name"/></header>
|
||||
<p><t t-esc="phone"/></p>
|
||||
<p class="email"><t t-esc="email"/></p>
|
||||
</div>
|
||||
<div class="col-sm-6 bg-gray-lighter">
|
||||
<div class="col-sm-6 col-xs-6 bg-gray-lighter">
|
||||
<i class="fa fa-hotel fa-2_5x fa-pull-left mt-5 text-gray-dark"/>
|
||||
<header class="mt-5"><t t-esc="room_type_name"/></header>
|
||||
|
||||
<p><t t-esc="board_service_name"/></p>
|
||||
|
||||
<span class="circle pull-left"><t t-esc="price_room_services_set" t-widget="monetary"/>€</span>
|
||||
<span class="circle pull-left" id="price_room"><t t-esc="price_room_services_set" t-widget="monetary"/>€</span>
|
||||
<p>Adults: <t t-esc="adults"/></p>
|
||||
<p class="children">Children: <t t-esc="children"/></p>
|
||||
</div>
|
||||
@@ -132,7 +132,8 @@
|
||||
|
||||
<t t-name="HotelCalendar.TooltipReservation.Sale">
|
||||
<div class="row row-eq-height mt-3">
|
||||
<div class="col-sm-6 bg-gray-light pb-3 pr-0 diagonal">
|
||||
<div id="folio_pending_amount"
|
||||
t-attf-class="col-sm-6 col-xs-6 bg-gray-light pb-3 pr-0 diagonal {{pending_amount gt 0 ? 'diagonal_pending_amount':''}}">
|
||||
<div class="on-top">
|
||||
<div class="pull-left">
|
||||
<p>Folio Pending</p>
|
||||
@@ -155,7 +156,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 bg-gray-light">
|
||||
<div class="col-sm-6 col-xs-6 bg-gray-light">
|
||||
<t t-if="channel_type == 'web'">
|
||||
<t t-call="HotelCalendar.TooltipReservation.Channel.ota"/>
|
||||
</t>
|
||||
@@ -168,13 +169,13 @@
|
||||
|
||||
<t t-name="HotelCalendar.TooltipReservation.Dates">
|
||||
<div class="row row-eq-height mt-3">
|
||||
<div class="col-sm-12 triangle-right">
|
||||
<div class="col-sm-6 px-0">
|
||||
<div class="col-sm-12 col-xs-12 triangle-right">
|
||||
<div class="col-sm-6 col-xs-6 px-0">
|
||||
<i class="fa fa-sign-in fa-2x fa-pull-left pl-5 py-5"/>
|
||||
<h3><t t-esc="checkin"/></h3>
|
||||
<p><t t-esc="checkin_day_of_week"/> <t t-esc="arrival_hour"/></p>
|
||||
</div>
|
||||
<div class="col-sm-6 text-gray-dark">
|
||||
<div class="col-sm-6 col-xs-6 text-gray-dark">
|
||||
<i class="fa fa-sign-out fa-2x fa-pull-left pl-5 py-5"/>
|
||||
<h3><t t-esc="checkout"/></h3>
|
||||
<p><t t-esc="checkout_day_of_week"/> <t t-esc="departure_hour"/></p>
|
||||
@@ -201,9 +202,11 @@
|
||||
<span class="fa fa-envelope fa-2x" role="button"
|
||||
title="Send Reservation Email" />
|
||||
</div>
|
||||
<div class="col-sm-2 btn_popover_open_payment">
|
||||
<div class="col-sm-2 btn_popover_open_payment_folio" data-toggle="collapse" data-target="#payment_reservation">
|
||||
<span class="fa fa-money fa-2x" role="button"
|
||||
title="Folio Payments" />
|
||||
title="Folio Payments" id="payment_folio" />
|
||||
<span class="fa fa-money fa-2x collapse btn_popover_open_payment_reservation" role="button"
|
||||
title="Reservation Payments" id="payment_reservation" />
|
||||
</div>
|
||||
<t t-if="reservation_type =='normal'">
|
||||
<div class="col-sm-2 btn_popover_open_invoice">
|
||||
@@ -238,13 +241,13 @@
|
||||
<t t-name="HotelCalendar.TooltipReservation.staff">
|
||||
<div class="container">
|
||||
<div class="row row-eq-height">
|
||||
<div class="col-sm-6 bg-danger">
|
||||
<div class="col-sm-6 col-xs-6 bg-danger">
|
||||
<i class="fa fa-black-tie fa-2x fa-pull-left mt-5"/>
|
||||
<header><t t-esc="name"/></header>
|
||||
<p><t t-esc="phone"/></p>
|
||||
<p class="email"><t t-esc="email"/></p>
|
||||
</div>
|
||||
<div class="col-sm-6 bg-gray-lighter">
|
||||
<div class="col-sm-6 col-xs-6 bg-gray-lighter">
|
||||
<i class="fa fa-hotel fa-2_5x fa-pull-left mt-5"/>
|
||||
<header class="mt-5"><t t-esc="room_type_name"/></header>
|
||||
<p><t t-esc="board_service_name"/></p>
|
||||
@@ -261,12 +264,12 @@
|
||||
<t t-name="HotelCalendar.TooltipReservation.out">
|
||||
<div class="container">
|
||||
<div class="row row-eq-height">
|
||||
<div class="col-sm-6 bg-gray-lighter">
|
||||
<div class="col-sm-6 col-xs-6 bg-gray-lighter">
|
||||
<i class="fa fa-ban fa-2x fa-pull-left"/>
|
||||
<header><t t-esc="name"/></header>
|
||||
<p><t t-esc="out_service_description"/></p>
|
||||
</div>
|
||||
<div class="col-sm-6 bg-gray-light">
|
||||
<div class="col-sm-6 col-xs-6 bg-gray-light">
|
||||
<i class="fa fa-hotel fa-2x fa-pull-left"/>
|
||||
<header><t t-esc="room_type_name"/></header>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user