From f92d793eadb81386667f4cf8066bae31b2c378db Mon Sep 17 00:00:00 2001
From: Pablo <pabloqb@gmail.com>
Date: Fri, 21 Dec 2018 14:13:45 +0100
Subject: [PATCH] [WIP] Add modular templating

---
 hotel_calendar/static/src/css/view.css        |  33 +++--
 .../src/xml/hotel_calendar_templates.xml      | 126 +++++++++---------
 2 files changed, 82 insertions(+), 77 deletions(-)

diff --git a/hotel_calendar/static/src/css/view.css b/hotel_calendar/static/src/css/view.css
index 00b3dfdbc..57a3dc2ee 100644
--- a/hotel_calendar/static/src/css/view.css
+++ b/hotel_calendar/static/src/css/view.css
@@ -160,6 +160,10 @@ input#bookings_search {
 }
 
 /** TOOLTIPS **/
+.tooltip {
+    opacity: unset !important;
+}
+
 .tooltip .tooltip-inner {
     font-family: Garuda, sans-serif;
     border: 1px solid #5C5C5C;
@@ -169,7 +173,6 @@ input#bookings_search {
 .tooltip .container {
 	max-width: 500px;
 }
-
 .tooltip .list-group {
     margin-bottom: 0px;
 }
@@ -180,30 +183,38 @@ input#bookings_search {
     background-color: unset;
     word-break: break-word;
 }
-
-header {
-    font-size: 1.2em;
-}
-
-.tooltip .container h3 {
-    margin-top: 0px;
+.tooltip h1, .h1, h2, .h2, h3, .h3 {
+    margin-top: 2px;
     margin-bottom: 0px;
 }
-
 .tooltip .container p {
     margin-top: 2px;
     margin-bottom: 2px;
 }
+.tooltip header {
+    font-size: 1.3em;
+}
 
 .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
     padding-top: 3px;
     padding-bottom: 3px;
 }
 
-.tt-margin {
+/* Spacing in Bootstrap v4.0 */
+.mt-3 {
     margin-top: 3px;
 }
-
+.mr-5 {
+    margin-right: 5px;
+}
+.mx-25 {
+    margin-left: 25px;
+    margin-right: 25px;
+}
+.py-5 {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
 
 /* WARNING: The .row-eq-height class uses CSS3's flexbox layout mode,
             which is not supported in Internet Explorer 9 and below. */
diff --git a/hotel_calendar/static/src/xml/hotel_calendar_templates.xml b/hotel_calendar/static/src/xml/hotel_calendar_templates.xml
index 50895a396..9f3bce0ac 100644
--- a/hotel_calendar/static/src/xml/hotel_calendar_templates.xml
+++ b/hotel_calendar/static/src/xml/hotel_calendar_templates.xml
@@ -68,88 +68,68 @@
 	</div>
 </t>
 
-<t t-name="HotelCalendar.TooltipReservation">
+
+<t t-name="HotelCalendar.TooltipReservation.Channel.ota">
+	<p>WuBook: 1544109684</p>
+	<p>Booking: 4253096846</p>
+</t>
+<t t-name="HotelCalendar.TooltipReservation.Channel.direct">
+	<h3><small class="text-white">Sales Channel</small> Direct</h3>
+</t>
+<t t-name="HotelCalendar.TooltipReservation.normal">
 	<div class="container">
 		<div class="row row-eq-height">
 			<div class="col-sm-6 bg-gray-dark">
-				<div class="row">
-					<div class="col-sm-2">
-						<span class="fa fa fa-user-circle-o fa-2x"/>
-					</div>
-					<div class="col-sm-10">
-						<header><t t-esc="name"/></header>
-					</div>
-					<div class="col-sm-12">
-						<p><t t-esc="phone"/></p>
-						<p><t t-esc="email"/></p>
-					</div>
-				</div>
+				<i class="fa fa-user-circle-o fa-2x fa-pull-left"/>
+				<header><t t-esc="name"/></header>
+				<p><t t-esc="phone"/></p>
+				<p><t t-esc="email"/></p>
 			</div>
 			<div class="col-sm-6 bg-gray-light">
-				<div class="row">
-					<div class="col-sm-2">
-						<span class="fa fa-hotel fa-2x"/>
-					</div>
-					<div class="col-sm-10">
-						<header><t t-esc="room_type"/></header>
-						Board Service Undefined
-					</div>
-					<div class="col-sm-2">
-						<h3><t t-esc="amount_total" t-widget="monetary"/>€</h3>
-					</div>
-					<div class="col-sm-10">
-						<p>Adults: <t t-esc="adults"/></p>
-						<p>Children: <t t-esc="children"/></p>
-					</div>
-				</div>
+				<i class="fa fa-hotel fa-2x fa-pull-left"/>
+				<h3 class="pull-right mt-3"><t t-esc="amount_total" t-widget="monetary"/>€</h3>
+				<header><t t-esc="room_type"/></header>
+
+				<p>Board Service Undefined</p>
+				<p>Adults: <t t-esc="adults"/> - Children: <t t-esc="children"/></p>
 			</div>
 		</div>
-		<div class="row row-eq-height tt-margin">
-			<div class="col-sm-6 bg-gray-light">
+		<div class="row row-eq-height mt-3">
+			<div class="col-sm-3 bg-warning">
 				<!-- FIXME: HARD CURRENCY -->
-				<div class="row">
-					<div class="col-sm-6">
-						<p>Pending</p>
-						<h3><t t-esc="amount_total" t-widget="monetary"/> €</h3>
-					</div>
-					<div class="col-sm-6">
-						<h3><t t-esc="amount_paid" t-widget="monetary"/> €</h3>
-						<p>Paid</p>
-					</div>
-				</div>
+				<p>Folio Pending</p>
+				<h3><t t-esc="amount_total" t-widget="monetary"/> €</h3>
+			</div>
+			<div class="col-sm-3 bg-info">
+				<!-- FIXME: HARD CURRENCY -->
+				<h3><t t-esc="amount_paid" t-widget="monetary"/> €</h3>
+				<p>Total Paid</p>
 			</div>
 			<div class="col-sm-6 bg-gray-dark">
-				<p>WuBook: 1544109684</p>
-				<p>Booking: 4253096846</p>
+				<t t-if="channel_type == 'web' or channel_type=='call'">
+					<t t-call="HotelCalendar.TooltipReservation.Channel.ota"/>
+				</t>
+				<t t-else="reservation_type == 'out'">
+				    <t t-call="HotelCalendar.TooltipReservation.Channel.direct"/>
+				</t>
 			</div>
 		</div>
-		<div class="row row-eq-height tt-margin">
-			<div class="col-sm-6 bg-gray-dark">
-				<div class="row">
-					<div class="col-sm-2">
-						<i class="fa fa-arrow-circle-o-right fa-2x"/>
-					</div>
-					<div class="col-sm-7">
-						<h3><t t-esc="checkin"/></h3>
-						<p><t t-esc="checkin_day_of_week"/> <t t-esc="arrival_hour"/></p>
-					</div>
-				</div>
+		<div class="row row-eq-height mt-3">
+			<div class="col-sm-6 bg-gray-dark py-5">
+				<i class="fa fa-arrow-circle-o-right fa-2x fa-pull-left"/>
+				<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 bg-gray-light">
-				<div class="row">
-					<div class="col-sm-7">
-						<h3><t t-esc="checkout"/></h3>
-						<p><t t-esc="checkout_day_of_week"/> <t t-esc="departure_hour"/></p>
-					</div>
-					<div class="col-sm-2">
-						<i class="fa fa-arrow-circle-o-right fa-2x"/>
-					</div>
-				</div>
+			<div class="col-sm-6 bg-gray-light d-sm-2 py-5">
+				<i class="fa fa-arrow-circle-o-right fa-2x fa-pull-right"/>
+				<h3><t t-esc="checkout"/></h3>
+				<p><t t-esc="checkout_day_of_week"/> <t t-esc="departure_hour"/></p>
 			</div>
 		</div>
-		<div class="row row-eq-height tt-margin">
+		<div class="row row-eq-height mt-3">
 			<div class="col-sm-2">
-				<span class="fa fa-file-text-o fa-2x" role="button"/><t t-esc="folio_name"/>
+				<i class="fa fa-file-text-o fa-2x fa-pull-left" role="button"/>
+				<p><t t-esc="folio_name"/></p>
 			</div>
 			<div class="col-sm-2">
 				<span class="fa fa-external-link fa-2x" role="button"/>
@@ -169,6 +149,20 @@
 		</div>
 	</div>
 </t>
+<t t-name="HotelCalendar.TooltipReservation.out">
+	<div class="container">
+		<div class="row">
+			<div class="col-sm-12 bg-gray-dark py-5">
+				<i class="fa fa-ban fa-2x fa-pull-left"/>
+				<h2><t t-esc="name"/> <small class="text-white"><t t-esc="out_service_description"/></small> </h2>
+			</div>
+		</div>
+	</div>
+</t>
+
+<t t-name="HotelCalendar.TooltipReservation">
+	<t t-call="HotelCalendar.TooltipReservation.#{ reservation_type }"/>
+</t>
 
 <t t-name="HotelCalendar.TooltipRoom">
 	<div class="oe_tooltip_string"><t t-esc="name"/></div>