[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

@@ -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;

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);
 

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>