152 lines
6.5 KiB
HTML
152 lines
6.5 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>
|
|
<script>
|
|
$(function() {
|
|
setInterval(() => {
|
|
fetch('/point_of_sale/iot_devices', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({}),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// group devices by type
|
|
const grouped_devices = JSON.parse(data.result).iot_device_status.reduce((acc, device) => {
|
|
acc[device.type] = acc[device.type] || [];
|
|
acc[device.type].push(device);
|
|
|
|
return acc;
|
|
}, {})
|
|
|
|
const iot_devices_section = document.querySelectorAll('.iot-devices-section');
|
|
|
|
// Hide or show the 'IoT Devices' part depending on devices
|
|
iot_devices_section.forEach(e => e.style.display = 'block');
|
|
if (Object.keys(grouped_devices).length === 0) {
|
|
iot_devices_section.forEach(e => e.style.display = 'none');
|
|
return;
|
|
}
|
|
|
|
// create the html object
|
|
let iot_devices_html = '';
|
|
for (const type of Object.keys(grouped_devices)) {
|
|
iot_devices_html += '<tr><td>' + type + 's</td><td><ul>';
|
|
// display the first 10 devices
|
|
for (const device of grouped_devices[type].slice(0, 10)) {
|
|
iot_devices_html += '<li>' + device.name + '</li>';
|
|
}
|
|
// add ... at the end if there are more than 10 devices
|
|
if (grouped_devices[type].length > 10) {
|
|
iot_devices_html += '<li>...</li>';
|
|
}
|
|
iot_devices_html += '</ul></td></tr>';
|
|
}
|
|
$('#iot-devices').html(iot_devices_html);
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error: ', error);
|
|
});
|
|
}, 60000); // fetch every minute
|
|
});
|
|
|
|
</script>
|
|
<style class="origin">
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
background: url('/hw_posbox_homepage/static/img/background-light.svg') no-repeat center center fixed;
|
|
background-size: cover;
|
|
height: 100vh;
|
|
}
|
|
.pos-display-boxes {
|
|
position: absolute;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
}
|
|
.pos-display-box {
|
|
padding: 10px 20px;
|
|
background: rgba(255, 255, 255, 0.17);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
box-shadow: 0 0 5px 0 rgba(60, 60, 60, 0.4);
|
|
border-radius: 8px;
|
|
width: 500px;
|
|
margin-top: 20px;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
.info-text {
|
|
font-size: 15px;
|
|
}
|
|
.iot-devices-section {
|
|
display: none;
|
|
}
|
|
.table {
|
|
--bs-table-bg: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div class="text-center pt-5">
|
|
<img style="width: 150px" src="/web/static/img/logo2.png" alt="odoo_logo">
|
|
<p class="mt-3" style="font-size: 25px">IoTBox: <span style="text-transform: capitalize">{{ hostname }}</span></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>
|
|
<h5 class="text-center mb-1">IoT Interfaces</h5>
|
|
<table class="table table-hover table-sm table-pos-info">
|
|
<thead>
|
|
<tr>
|
|
<th>Type</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>
|
|
<h5 class="text-center mb-1 iot-devices-section">IoT Devices</h5>
|
|
<table class="table table-hover table-sm table-pos-info iot-devices-section">
|
|
<thead>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Devices</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="iot-devices">
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|