Files
odoo_source/addons/hw_drivers/views/pos_display.html
T
Theo VINCENT (thvi) ee792569f0 [IMP] point_of_sale, *: improve customer display
*: hw_drivers

Improvements:
 - Makes the display responsive to practically never have a horizontal scrollbar.
 - Automatically reconnect to the customer display popup if it's still open from a previous session, allowing the user to keep it open between sessions.
 - Adds a view when no order is selected (in the restaurant POS UI, when the user is in the floors and tables view for example), which is also opened before leaving the POS UI (closing session or clicking on the Backend button).
 - Adds an empty order title as the one displayed in the backend when there is no product.
 - Improves the display of payment lines to take benefit of all the available free space.
 - Shows customer notes and discount in the customer display.
 - Adds order line unit next to or under the quantity (so as not to lose horizontal space).
 - Adds a footer dedicated to the Odoo logo, always visible.
 - Adds an optional user-customizable background image displayed either on the right side of the customer display if it is in landscape orientation, or in the top header of the portrait orientation.
 - Adds a title bar "Your Order".
 - Removes the "Customer Screen" label in the POS session UI and moves the status message of this screen to a notification and the title of the button.

Fixes the local display of customer display for restaurants when the "Customer Screen" button is clicked from the main view (floor with tables) and not from the view of a table order.
Removes .pos-adv and .pos-js_no_ADV css properties that no longer seem to be used.

Thanks to Xavier (xlu) for the design ideas and mockups.

task-id: 2906039
Closes #106907

closes odoo/odoo#118721

Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
2023-06-09 10:54:43 +02:00

94 lines
3.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<title class="origin">{{ title or "Odoo's IoTBox" }}</title>
<script class="origin" type="text/javascript" src="/web/static/lib/jquery/jquery.js"></script>
<link class="origin" rel="stylesheet" href="/web/static/lib/bootstrap/dist/css/bootstrap.css">
<link class="origin" rel="stylesheet" type="text/css" href="/web/static/src/libs/fontawesome/css/font-awesome.css"/>
<script type="text/javascript" class="origin">
var display_identifier = '{{ display_identifier }}';
{{ cust_js|safe }}
</script>
<style class="origin">
html, body {
height: 100%;
}
</style>
<style>
body {
background: linear-gradient(to right bottom, #77717e, #c9a8a9);
height: 100vh;
}
.pos-display-boxes {
position: absolute;
right: 20px;
bottom: 20px;
}
.pos-display-box {
padding: 10px 20px;
background: rgba(0, 0, 0, 0.17);
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 1px 1px 0px 0px rgba(60, 60, 60, 0.4);
color: #fff;
border-radius: 8px;
width: 500px;
margin-top: 20px;
}
.pos-display-box hr {
background-color: #fff;
}
.info-text {
font-size: 15px;
}
.table-pos-info {
color: #fff;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="text-center pt-5">
<img style="width: 150px;" src="/web/static/img/logo_inverse_white_206px.png">
<p class="mt-3" style="color: #fff;font-size: 30px;">IoTBox</p>
</div>
<div class="pos-display-boxes">
{% if pairing_code %}
<div class="pos-display-box">
<h4 class="text-center mb-3">Pairing Code</h4>
<hr/>
<h4 class="text-center mb-3">{{ pairing_code }}</h4>
</div>
{% endif %}
<div class="pos-display-box">
<h4 class="text-center mb-3">POS Client display</h4>
<table class="table table-hover table-sm table-pos-info">
<thead>
<tr>
<th>Interface</th>
<th>IP</th>
</tr>
</thead>
<tbody>
{% for display_iface in display_ifaces -%}
<tr>
<td><i class="fa fa-{{ display_iface.icon }}"/> {{ display_iface.essid }}</td>
<td>{{ display_iface.addr }}</td>
</tr>
{%- endfor %}
</tbody>
</table>
<p class="mb-2 info-text">
<i class="fa fa-info-circle me-1"></i>The customer cart will be displayed here once a Point of Sale session is started.
</p>
<p class="mb-2 info-text">
<i class="fa fa-info-circle me-1"></i>Odoo version 11 or above is required.
</p>
<div class="error-message alert alert-danger mb-2 d-none" role="alert" />
</div>
</div>
</div>
</body>
</html>