From 5dd5fdb6d3cf74c51dd837a008fdf4f7981d91bf Mon Sep 17 00:00:00 2001
From: "Jacky (trj)" <trj@odoo.com>
Date: Wed, 17 Feb 2021 12:03:43 +0000
Subject: [PATCH] [IMP]: pos_restaurant: table shows ratio between taken seat
 and max seat

This change allows the user to see how many seats are already taken in a table.

Task ID: 2419637
---
 addons/pos_restaurant/static/src/css/restaurant.css      | 9 ++++++---
 .../static/src/js/Screens/FloorScreen/TableWidget.js     | 3 +++
 .../static/src/xml/Screens/FloorScreen/TableWidget.xml   | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/addons/pos_restaurant/static/src/css/restaurant.css b/addons/pos_restaurant/static/src/css/restaurant.css
index c2716d93d46..60ee27f5bcf 100644
--- a/addons/pos_restaurant/static/src/css/restaurant.css
+++ b/addons/pos_restaurant/static/src/css/restaurant.css
@@ -94,16 +94,16 @@
     bottom: 0;
     left: 50%;
     height: 20px;
-    width: 20px;
     line-height: 20px;
     font-size: 16px;
-    border-radius: 50%;
-    margin-left: -10px;
+    border-radius: 5px;
+    margin-left: -16px;
     margin-bottom: 4px;
     background: black;
     color: white;
     opacity: 0.2;
     z-index: 3;
+    padding: 0 4px;
 }
 .floor-map .table .label {
     display: block;
@@ -117,6 +117,9 @@
     cursor: move;
     z-index: 50;
 }
+.floor-map .table.selected .table-seats {
+    margin-left: -12px;
+}
 .floor-map .edit-button.editing {
     position: absolute;
     top: 0;
diff --git a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/TableWidget.js b/addons/pos_restaurant/static/src/js/Screens/FloorScreen/TableWidget.js
index 48dfdad71e8..94d1685c12a 100644
--- a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/TableWidget.js
+++ b/addons/pos_restaurant/static/src/js/Screens/FloorScreen/TableWidget.js
@@ -49,6 +49,9 @@ odoo.define('pos_restaurant.TableWidget', function(require) {
                 'notify-skipped': notifications.skipped,
             };
         }
+        get customerCountDisplay() {
+            return `${this.env.pos.get_customer_count(this.props.table)}/${this.props.table.seats}`;
+        }
         _getNotifications() {
             const orders = this.env.pos.get_table_orders(this.props.table);
 
diff --git a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/TableWidget.xml b/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/TableWidget.xml
index c9a7549ae62..89914543a20 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/TableWidget.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/TableWidget.xml
@@ -11,7 +11,7 @@
                 <t t-esc="props.table.name" />
             </span>
             <span class="table-seats">
-                <t t-esc="props.table.seats" />
+                <t t-esc="customerCountDisplay" />
             </span>
         </div>
     </t>