121 lines
4.1 KiB
Plaintext
121 lines
4.1 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tuta-amb/fontawesome-pro@latest/web/css/all.min.css">
|
|
<title>Paging Console</title>
|
|
<style>
|
|
.btn-tall { height: 152px; }
|
|
.btn-short { height: 76px; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="position-absolute top-0 start-0 m-3">
|
|
<select class="form-select" id="phoneSelect">
|
|
<% Object.entries(phones).forEach(([name, number])=> { %>
|
|
<option value="<%= number %>">
|
|
<%= name %>
|
|
</option>
|
|
<% }); %>
|
|
</select>
|
|
</div>
|
|
|
|
<%
|
|
// determine columns and chunk rows
|
|
const cols = (buttons && buttons.COLS) || [''];
|
|
const numCols = Math.max(1, cols.length);
|
|
const rowsFlat = (buttons && buttons.ROWS) || [];
|
|
const chunks = [];
|
|
for (let i = 0; i < rowsFlat.length; i += numCols) {
|
|
const slice = rowsFlat.slice(i, i + numCols);
|
|
// pad short slice with empty objects so layout stays consistent
|
|
while (slice.length < numCols) slice.push({});
|
|
chunks.push(slice);
|
|
}
|
|
%>
|
|
|
|
<div class="container-fluid d-flex justify-content-center align-items-center min-vh-100">
|
|
<div>
|
|
<table class="table table-borderless table-sm">
|
|
<thead>
|
|
<tr>
|
|
<% for (let c = 0; c < numCols; c++) { %>
|
|
<th class="text-left p-2">
|
|
<h3><%= cols[c] || '' %></h3>
|
|
</th>
|
|
<% } %>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% chunks.forEach((row) => { %>
|
|
<tr>
|
|
<% for (let c = 0; c < numCols; c++) {
|
|
const cell = row[c] || {};
|
|
const isBlank = Object.keys(cell).length === 0;
|
|
%>
|
|
<td class="text-left p-2">
|
|
<% if (isBlank) { %>
|
|
<!-- blank space -->
|
|
<% } else {
|
|
const ctx = cell.context || {};
|
|
%>
|
|
<button
|
|
class="btn <%= cell.btnClass || 'btn-secondary' %> mb-1 w-100 <%= cell.doubleHeight ? 'btn-tall' : 'btn-short' %> fw-bold fs-4 <%= cell.faIcon ? 'd-flex justify-content-center align-items-center' : '' %>"
|
|
name="<%= cell.name || '' %>"
|
|
onclick="triggerAnnouncement(this)"
|
|
<% if (ctx.context) { %> data-context="<%= ctx.context %>" <% } %>
|
|
<% if (ctx.timeout) { %> data-timeout="<%= ctx.timeout %>" <% } %>
|
|
<% if (ctx.cid) { %> data-cid="<%= ctx.cid %>" <% } %>
|
|
<% if (ctx.dial) { %> data-dial="<%= ctx.dial %>" <% } %>
|
|
>
|
|
<% if (cell.faIcon) { %>
|
|
<i class="<%= cell.faIcon %> me-2" <% if (cell.faStyle) { %> style="<%= cell.faStyle %>" <% } %>></i>
|
|
<span><%= cell.text || '' %></span>
|
|
<% } else { %>
|
|
<%= cell.text || '' %>
|
|
<% } %>
|
|
</button>
|
|
<% } %>
|
|
</td>
|
|
<% } %>
|
|
</tr>
|
|
<% }); %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/assets/js/bootstrap.min.js"></script>
|
|
<script src="/assets/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/assets/js/jquery.min.js"></script>
|
|
<script>
|
|
function triggerAnnouncement(button) {
|
|
const ann = button.getAttribute('name');
|
|
const phoneSelect = document.getElementById('phoneSelect');
|
|
const phone = phoneSelect.value;
|
|
console.log(ann);
|
|
// send the button's context attrs if you want them server-side
|
|
const payload = {
|
|
pageType: ann,
|
|
phone: phone,
|
|
context: {
|
|
context: button.dataset.context,
|
|
timeout: button.dataset.timeout,
|
|
cid: button.dataset.cid,
|
|
dial: button.dataset.dial
|
|
}
|
|
};
|
|
fetch('/trig', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |