влад
@@ -0,0 +1,849 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var t = (localStorage.getItem("theme") || "").trim().toLowerCase();
|
||||
document.documentElement.setAttribute("data-theme", t === "light" ? "light" : "dark");
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Калибровка {{ dispenser_name }}</title>
|
||||
<link rel="stylesheet" href="/static/css/inter-fonts.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: #2563eb;
|
||||
--primary-hover: #1d4ed8;
|
||||
--success: #10b981;
|
||||
--danger: #ef4444;
|
||||
--gray-50: #f9fafb;
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-200: #e5e7eb;
|
||||
--gray-600: #4b5563;
|
||||
--gray-900: #111827;
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
background: var(--gray-50);
|
||||
margin: 0;
|
||||
padding: 20px 20px 48px;
|
||||
color: var(--gray-900);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.nav-button img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-header .subtitle {
|
||||
color: var(--gray-600);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.data-container {
|
||||
background: var(--white);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid var(--gray-200);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.data-container h2 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--gray-600);
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calibration-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.calibration-form input {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.calibration-form input:focus {
|
||||
border-color: var(--primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.calibration-form input[readonly] {
|
||||
cursor: pointer;
|
||||
background: var(--white);
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.numpad {
|
||||
display: none;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
margin: 4px 0;
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
|
||||
.numpad.visible {
|
||||
display: grid;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.numpad-btn {
|
||||
padding: 14px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: 8px;
|
||||
background: var(--gray-50);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s, color 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.numpad-btn:hover {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
background: #fef2f2;
|
||||
color: #991b1b;
|
||||
border-color: #fecaca;
|
||||
}
|
||||
|
||||
.clear-btn:hover {
|
||||
background: var(--danger);
|
||||
border-color: var(--danger);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.toggle-keyboard {
|
||||
background: var(--white);
|
||||
color: var(--primary);
|
||||
border: 1px solid var(--gray-200);
|
||||
padding: 10px 18px;
|
||||
border-radius: 6px;
|
||||
margin: 2px 0;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.toggle-keyboard:hover {
|
||||
border-color: var(--primary);
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
.btn-primary-lg {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
padding: 12px 22px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
font-family: inherit;
|
||||
transition: background 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary-lg:hover {
|
||||
background: var(--primary-hover);
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
|
||||
}
|
||||
|
||||
.current-weight {
|
||||
font-size: 2.25rem;
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
margin: 12px 0 16px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.admin-panel {
|
||||
background: var(--white);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
margin: 20px auto 0;
|
||||
padding: 16px 20px;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
border: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.admin-panel.collapsed {
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
.admin-panel h2 {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--gray-900);
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-chevron {
|
||||
display: inline-block;
|
||||
transition: transform 0.25s ease;
|
||||
color: var(--gray-600);
|
||||
font-size: 0.7rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.admin-panel:not(.collapsed) .admin-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.admin-panel.collapsed .admin-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--gray-50);
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid var(--gray-200);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.admin-content h3 {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--gray-900);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
background: var(--gray-50);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--gray-200);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info-item h4 {
|
||||
margin: 0 0 6px 0;
|
||||
color: var(--gray-600);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.error-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
z-index: 2000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.error-modal {
|
||||
background: var(--white);
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--gray-200);
|
||||
border-top: 4px solid var(--danger);
|
||||
}
|
||||
|
||||
.error-modal h3 {
|
||||
color: var(--danger);
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.error-modal p {
|
||||
margin-bottom: 18px;
|
||||
color: var(--gray-600);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.error-modal button {
|
||||
background: var(--danger);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
padding: 10px 22px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.error-modal button:hover {
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
.error-state {
|
||||
color: var(--danger) !important;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.55; }
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body {
|
||||
background: #1a1a1a !important;
|
||||
color: #e6e6e6 !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .page-header h1,
|
||||
html[data-theme="dark"] .data-container h2,
|
||||
html[data-theme="dark"] .admin-panel h2,
|
||||
html[data-theme="dark"] .admin-content h3 {
|
||||
color: #f3f4f6 !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .page-header .subtitle,
|
||||
html[data-theme="dark"] .form-label {
|
||||
color: #9ca3af !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .data-container,
|
||||
html[data-theme="dark"] .admin-panel,
|
||||
html[data-theme="dark"] .error-modal {
|
||||
background: #242424 !important;
|
||||
border-color: #3a3a3a !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .calibration-form input[readonly] {
|
||||
background: #2d2d2d !important;
|
||||
color: #e6e6e6 !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .calibration-form input,
|
||||
html[data-theme="dark"] .numpad-btn,
|
||||
html[data-theme="dark"] .toggle-keyboard {
|
||||
background: #2d2d2d !important;
|
||||
border-color: #3a3a3a !important;
|
||||
color: #e6e6e6 !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .numpad-btn:hover {
|
||||
background: var(--primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .clear-btn {
|
||||
background: #3f1f1f !important;
|
||||
border-color: #7f1d1d !important;
|
||||
color: #fecaca !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] pre,
|
||||
html[data-theme="dark"] .info-item {
|
||||
background: #1f1f1f !important;
|
||||
border-color: #3a3a3a !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .info-item h4 {
|
||||
color: #9ca3af !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .info-value,
|
||||
html[data-theme="dark"] .current-weight {
|
||||
color: #60a5fa !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .error-modal p {
|
||||
color: #d1d5db !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-header h1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.calibration-form input,
|
||||
.calibration-form .btn-primary-lg,
|
||||
.numpad {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body.calibration-embed {
|
||||
padding: 12px 14px 16px;
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
display: block;
|
||||
background: #fff;
|
||||
}
|
||||
body.calibration-embed .page-header {
|
||||
display: none;
|
||||
}
|
||||
body.calibration-embed .container {
|
||||
flex: none;
|
||||
max-width: none;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
body.calibration-embed .data-container {
|
||||
padding: 16px;
|
||||
}
|
||||
body.calibration-embed .admin-panel {
|
||||
margin: 12px 0 0;
|
||||
max-width: none;
|
||||
}
|
||||
body.calibration-embed .admin-panel.collapsed {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body{% if embed %} class="calibration-embed"{% endif %}>
|
||||
{% if not embed %}
|
||||
<button type="button" class="nav-button" id="kioskMenuButton" title="Меню" aria-label="Меню">
|
||||
<img src="/static/menu.png" alt="">
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<header class="page-header">
|
||||
<h1>Калибровка весов</h1>
|
||||
<p class="subtitle">Установите контрольный груз и подтвердите пошагово</p>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="data-container">
|
||||
<h2>Калибровка</h2>
|
||||
<div class="calibration-form">
|
||||
<label class="form-label" for="targetWeight">Контрольный вес (кг)</label>
|
||||
<!-- text + readonly + inputmode=none: не открывать системную клавиатуру на мобильных; ввод только с нумпада -->
|
||||
<input type="text"
|
||||
id="targetWeight"
|
||||
inputmode="none"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
enterkeyhint="done"
|
||||
onfocus="showNumpad()">
|
||||
|
||||
<button type="button"
|
||||
class="toggle-keyboard"
|
||||
onclick="toggleNumpad(event)">
|
||||
Показать клавиатуру
|
||||
</button>
|
||||
|
||||
<div class="numpad" id="numpad">
|
||||
<button type="button" class="numpad-btn" onclick="appendNumber('7')">7</button>
|
||||
<button type="button" class="numpad-btn" onclick="appendNumber('8')">8</button>
|
||||
<button type="button" class="numpad-btn" onclick="appendNumber('9')">9</button>
|
||||
<button type="button" class="numpad-btn" onclick="appendNumber('4')">4</button>
|
||||
<button type="button" class="numpad-btn" onclick="appendNumber('5')">5</button>
|
||||
<button type="button" class="numpad-btn" onclick="appendNumber('6')">6</button>
|
||||
<button type="button" class="numpad-btn" onclick="appendNumber('1')">1</button>
|
||||
<button type="button" class="numpad-btn" onclick="appendNumber('2')">2</button>
|
||||
<button type="button" class="numpad-btn" onclick="appendNumber('3')">3</button>
|
||||
<button type="button" class="numpad-btn" onclick="appendNumber('0')">0</button>
|
||||
<button type="button" class="numpad-btn" onclick="appendNumber(',')">,</button>
|
||||
<button type="button" class="numpad-btn clear-btn" onclick="clearInput()">Сброс</button>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-primary-lg" onclick="calibrate()">
|
||||
Начать калибровку
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-container">
|
||||
<h2>Текущие показания</h2>
|
||||
<div class="current-weight" id="currentWeight">{{ current_weight }}</div>
|
||||
<div class="calibration-form">
|
||||
<button type="button" class="btn-primary-lg" onclick="tare()">
|
||||
Обнулить весы
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-panel collapsed">
|
||||
<h2 onclick="toggleAdminPanel()">
|
||||
<span>Техническая информация</span>
|
||||
<span class="admin-chevron" aria-hidden="true">▼</span>
|
||||
</h2>
|
||||
<div class="admin-content">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<h4>Текущий коэффициент</h4>
|
||||
<div class="info-value" id="currentCalibrationFactor">{{ calibration_factor }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Stream Weight</h4>
|
||||
<div class="info-value" id="streamWeight">{{ stream_weight }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Raw Data</h3>
|
||||
<pre id="rawData">{{ raw_data }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="error-overlay" id="errorOverlay">
|
||||
<div class="error-modal">
|
||||
<h3>Ошибка получения данных</h3>
|
||||
<p id="errorMessage">Произошла ошибка при получении данных с весов. Пожалуйста, проверьте подключение.</p>
|
||||
<button type="button" onclick="hideError()">Понятно</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/kiosk-dialog.js"></script>
|
||||
<script>
|
||||
let kioskPaired = false;
|
||||
const DEVICE_TOKEN_KEY = 'wespDeviceToken';
|
||||
function getDeviceToken() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const tokenFromQuery = (params.get('device_token') || '').trim();
|
||||
if (tokenFromQuery) {
|
||||
localStorage.setItem(DEVICE_TOKEN_KEY, tokenFromQuery);
|
||||
return tokenFromQuery;
|
||||
}
|
||||
return (localStorage.getItem(DEVICE_TOKEN_KEY) || '').trim();
|
||||
}
|
||||
function buildHeaders(extra = {}) {
|
||||
const headers = { ...extra };
|
||||
const token = getDeviceToken();
|
||||
if (token) headers['X-Device-Token'] = token;
|
||||
return headers;
|
||||
}
|
||||
|
||||
function toggleNumpad(event) {
|
||||
event.stopPropagation();
|
||||
const numpad = document.getElementById('numpad');
|
||||
numpad.classList.toggle('visible');
|
||||
}
|
||||
|
||||
function showNumpad() {
|
||||
document.getElementById('numpad').classList.add('visible');
|
||||
}
|
||||
|
||||
function hideNumpad() {
|
||||
document.getElementById('numpad').classList.remove('visible');
|
||||
}
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
const isInsideNumpad = e.target.closest('#numpad');
|
||||
const isInsideInput = e.target.closest('#targetWeight');
|
||||
const isInsideToggle = e.target.closest('.toggle-keyboard');
|
||||
|
||||
if (!isInsideInput && !isInsideNumpad && !isInsideToggle) {
|
||||
hideNumpad();
|
||||
}
|
||||
});
|
||||
|
||||
function appendNumber(num) {
|
||||
const input = document.getElementById('targetWeight');
|
||||
const currentValue = input.value.replace(/\./g, '');
|
||||
|
||||
if (num === ',') {
|
||||
if (!input.value.includes(',')) {
|
||||
input.value += num;
|
||||
}
|
||||
} else {
|
||||
if (currentValue.length < 6) {
|
||||
input.value = (input.value + num).replace(/^0+(?=\d)/, '');
|
||||
}
|
||||
}
|
||||
input.focus();
|
||||
}
|
||||
|
||||
function clearInput() {
|
||||
const input = document.getElementById('targetWeight');
|
||||
input.value = input.value.slice(0, -1);
|
||||
input.focus();
|
||||
}
|
||||
|
||||
async function calibrate() {
|
||||
if (!kioskPaired) return;
|
||||
const targetWeight = document.getElementById('targetWeight').value;
|
||||
if (!targetWeight || isNaN(targetWeight.replace(',', '.'))) {
|
||||
await WespKioskDialog.alert('Введите корректное значение веса!', { variant: 'danger' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const numericValue = parseFloat(targetWeight.replace(',', '.'));
|
||||
const response = await fetch('/calibrate', {
|
||||
method: 'POST',
|
||||
headers: buildHeaders({'Content-Type': 'application/json'}),
|
||||
body: JSON.stringify({ target_weight: numericValue })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === 'confirm') {
|
||||
if (await WespKioskDialog.confirm(result.message)) {
|
||||
const confirmResponse = await fetch('/calibrate/continue', {
|
||||
method: 'POST',
|
||||
headers: buildHeaders()
|
||||
});
|
||||
const finalResult = await confirmResponse.json();
|
||||
if (finalResult.status === 'success') {
|
||||
await WespKioskDialog.alert(
|
||||
`${finalResult.message}\nНовый коэффициент: ${finalResult.calibration_factor}`,
|
||||
{ variant: 'success' }
|
||||
);
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
await WespKioskDialog.alert(result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
showError('Ошибка калибровки: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function tare() {
|
||||
if (!kioskPaired) return;
|
||||
try {
|
||||
const response = await fetch('/tare', {
|
||||
method: 'POST',
|
||||
headers: buildHeaders()
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.status === 'success') {
|
||||
await WespKioskDialog.alert(result.message, { variant: 'success' });
|
||||
location.reload();
|
||||
} else {
|
||||
console.log('Ошибка обнуления:', result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Ошибка обнуления:', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function updateAdminData() {
|
||||
if (!kioskPaired) return;
|
||||
try {
|
||||
const [weightResponse, rawResponse] = await Promise.all([
|
||||
fetch('/current_weight', { headers: buildHeaders() }),
|
||||
fetch('/current_raw_data', { headers: buildHeaders() })
|
||||
]);
|
||||
|
||||
if (!weightResponse.ok) throw new Error('Ошибка получения веса: ' + weightResponse.status);
|
||||
if (!rawResponse.ok) throw new Error('Ошибка получения сырых данных: ' + rawResponse.status);
|
||||
|
||||
const weightData = await weightResponse.json();
|
||||
const rawData = await rawResponse.json();
|
||||
|
||||
if (weightData.error) throw new Error(weightData.error);
|
||||
if (rawData.error) throw new Error(rawData.error);
|
||||
|
||||
const currentWeightElement = document.getElementById('currentWeight');
|
||||
currentWeightElement.textContent = String(Math.round(Number(weightData.weight ?? 0)));
|
||||
currentWeightElement.classList.remove('error-state');
|
||||
|
||||
document.getElementById('rawData').textContent = JSON.stringify(rawData, null, 2);
|
||||
document.getElementById('currentCalibrationFactor').textContent =
|
||||
parseFloat("{{ calibration_factor }}").toFixed(2);
|
||||
document.getElementById('streamWeight').textContent = String(
|
||||
Math.round(Number(weightData.weight ?? 0))
|
||||
);
|
||||
|
||||
hideError();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Ошибка обновления данных:', error);
|
||||
|
||||
const currentWeightElement = document.getElementById('currentWeight');
|
||||
currentWeightElement.textContent = 'Ошибка';
|
||||
currentWeightElement.classList.add('error-state');
|
||||
|
||||
showError(error.message || 'Произошла ошибка при получении данных с весов');
|
||||
}
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('errorMessage').textContent = message;
|
||||
document.getElementById('errorOverlay').style.display = 'flex';
|
||||
}
|
||||
|
||||
function hideError() {
|
||||
document.getElementById('errorOverlay').style.display = 'none';
|
||||
}
|
||||
|
||||
function toggleAdminPanel() {
|
||||
const adminPanel = document.querySelector('.admin-panel');
|
||||
adminPanel.classList.toggle('collapsed');
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
hideNumpad();
|
||||
});
|
||||
</script>
|
||||
<script src="/static/js/kiosk-theme.js"></script>
|
||||
<script src="/static/js/kiosk-nav-menu.js"></script>
|
||||
<script src="/static/js/kiosk-pairing.js"></script>
|
||||
{% if not embed %}
|
||||
<script src="/static/js/kiosk-db-check.js"></script>
|
||||
<script src="/static/js/kiosk-calibration.js"></script>
|
||||
{% endif %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
window.WespKioskTheme.setup({ withToggle: false });
|
||||
{% if setup_mode %}
|
||||
kioskPaired = true;
|
||||
updateAdminData();
|
||||
setInterval(updateAdminData, 3000);
|
||||
{% else %}
|
||||
window.WespKioskMenu.setup({ menuButtonSelector: '#kioskMenuButton' });
|
||||
{% if not embed %}
|
||||
window.WespKioskDbCheck.setup({ menuLinkSelector: '#dbCheckLink' });
|
||||
window.WespKioskCalibration.setup({ menuLinkSelector: '#calibrationLink' });
|
||||
{% endif %}
|
||||
window.WespKioskPairing.setup({
|
||||
menuLinkSelector: '#pairTerminalLink',
|
||||
onPaired: function () {
|
||||
kioskPaired = true;
|
||||
updateAdminData();
|
||||
setInterval(updateAdminData, 3000);
|
||||
},
|
||||
onUnpaired: function () {
|
||||
kioskPaired = false;
|
||||
}
|
||||
});
|
||||
{% endif %}
|
||||
});
|
||||
</script>
|
||||
<link href="/static/css/wesp-update-banner.css" rel="stylesheet">
|
||||
<script src="/static/js/wesp-update-notifier.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (window.WespUpdateNotifier) {
|
||||
WespUpdateNotifier.init({ dialog: window.WespKioskDialog || window.WespDialog });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,421 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" translate="no" class="notranslate">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="google" content="notranslate">
|
||||
<meta name="googlebot" content="notranslate">
|
||||
<meta http-equiv="Content-Language" content="ru">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Main</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #f5f5f5;
|
||||
--text-color: #333;
|
||||
--weight-color: #121a22;
|
||||
--modal-bg: white;
|
||||
--button-shadow: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg-color: #1a1a1a;
|
||||
--text-color: #e0e0e0;
|
||||
--weight-color: #ffffff;
|
||||
--modal-bg: #2d2d2d;
|
||||
--button-shadow: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
position: fixed;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px;
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
background-color: #2980b9;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--modal-bg);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px var(--button-shadow);
|
||||
z-index: 1000;
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal a {
|
||||
display: block;
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: background 0.3s ease;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.modal a:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.modal-logo {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
margin-bottom: 15px;
|
||||
/* Делаем логотип белым */
|
||||
}
|
||||
|
||||
.current-weight {
|
||||
width: 100%;
|
||||
font-size: 30vw;
|
||||
font-weight: bold;
|
||||
color: var(--weight-color);
|
||||
transition: all 0.5s ease;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: auto;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
border-radius: 8px;
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
background-color: #3498db;
|
||||
}
|
||||
|
||||
.start-button {
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
|
||||
.reset-button:hover {
|
||||
background-color: #2980b9;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.start-button:hover {
|
||||
background-color: #27ae60;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 12px;
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.connection-status.connected {
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
|
||||
/* Переключатель темы из kiosk-theme.js: правый нижний угол, ниже блока веса */
|
||||
#wespThemeToggleWrap {
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
right: 16px;
|
||||
bottom: 52px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#wespThemeToggleWrap {
|
||||
right: 12px;
|
||||
bottom: 48px;
|
||||
}
|
||||
|
||||
.current-weight {
|
||||
font-size: 25vw;
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
padding: 12px 24px;
|
||||
font-size: 1.4rem;
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button class="nav-button" id="kioskMenuButton" title="Меню">☰</button>
|
||||
|
||||
<div class="current-weight" id="currentWeight">×﹏×</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="control-button reset-button" onclick="resetWeight()">Обнулить</button>
|
||||
<a href="/api/recipes_wibor"><button class="control-button start-button">Начать работу</button></a>
|
||||
</div>
|
||||
|
||||
<div class="connection-status" id="connectionStatus">Нет соединения</div>
|
||||
|
||||
<script src="/static/js/kiosk-dialog.js"></script>
|
||||
<script>
|
||||
let kioskPaired = false;
|
||||
const DEVICE_TOKEN_KEY = 'wespDeviceToken';
|
||||
function getDeviceToken() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const tokenFromQuery = (params.get('device_token') || '').trim();
|
||||
if (tokenFromQuery) {
|
||||
localStorage.setItem(DEVICE_TOKEN_KEY, tokenFromQuery);
|
||||
return tokenFromQuery;
|
||||
}
|
||||
return (localStorage.getItem(DEVICE_TOKEN_KEY) || '').trim();
|
||||
}
|
||||
function withDeviceToken(url) {
|
||||
const token = getDeviceToken();
|
||||
if (!token) return url;
|
||||
const u = new URL(url, window.location.origin);
|
||||
u.searchParams.set('device_token', token);
|
||||
return `${u.pathname}${u.search}`;
|
||||
}
|
||||
function buildHeaders(extra = {}) {
|
||||
const headers = { ...extra };
|
||||
const token = getDeviceToken();
|
||||
if (token) headers['X-Device-Token'] = token;
|
||||
return headers;
|
||||
}
|
||||
|
||||
let eventSource;
|
||||
let reconnectAttempts = 0;
|
||||
const maxReconnectAttempts = 5;
|
||||
const reconnectDelay = 3000;
|
||||
const statusElement = document.getElementById('connectionStatus');
|
||||
|
||||
async function fetchCurrentWeight() {
|
||||
if (!kioskPaired) return;
|
||||
try {
|
||||
const response = await fetch(withDeviceToken('/current_weight'), { headers: buildHeaders() });
|
||||
if (!response.ok) return;
|
||||
const data = await response.json();
|
||||
const weight = Number(data.weight ?? 0);
|
||||
document.getElementById('currentWeight').textContent = String(Math.round(weight));
|
||||
} catch (e) {
|
||||
console.error('current_weight:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function initSSE() {
|
||||
if (!kioskPaired) {
|
||||
return;
|
||||
}
|
||||
// Закрываем предыдущее соединение, если оно есть
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
}
|
||||
|
||||
// Добавляем случайный параметр для предотвращения кеширования
|
||||
const url = withDeviceToken('/stream_weight?r=' + Math.random().toString(36).substring(7));
|
||||
|
||||
eventSource = new EventSource(url);
|
||||
fetchCurrentWeight();
|
||||
|
||||
eventSource.onopen = () => {
|
||||
console.log('SSE соединение установлено');
|
||||
statusElement.textContent = 'Подключено';
|
||||
statusElement.classList.add('connected');
|
||||
reconnectAttempts = 0;
|
||||
fetchCurrentWeight();
|
||||
};
|
||||
|
||||
eventSource.onmessage = (e) => {
|
||||
const payload = JSON.parse(e.data || '{}');
|
||||
const weight = Number(payload.weight || 0);
|
||||
document.getElementById('currentWeight').textContent = String(Math.round(weight));
|
||||
};
|
||||
|
||||
eventSource.onerror = (e) => {
|
||||
console.error('Ошибка SSE:', e);
|
||||
statusElement.textContent = 'Переподключение...';
|
||||
statusElement.classList.remove('connected');
|
||||
|
||||
eventSource.close();
|
||||
|
||||
if (reconnectAttempts < maxReconnectAttempts) {
|
||||
setTimeout(initSSE, reconnectDelay);
|
||||
reconnectAttempts++;
|
||||
} else {
|
||||
statusElement.textContent = 'Соединение потеряно';
|
||||
void WespKioskDialog.alert(
|
||||
'Не удалось подключиться к терминалу. Пожалуйста, проверьте WIFI и обновите страницу.',
|
||||
{ variant: 'danger' }
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Обработчик видимости страницы
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState === 'visible') {
|
||||
initSSE();
|
||||
} else {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
statusElement.textContent = 'Фоновый режим';
|
||||
statusElement.classList.remove('connected');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Инициализация SSE выполняется только после успешной проверки pairing.
|
||||
|
||||
let bratEasterEggClicks = 0;
|
||||
|
||||
function maybeBratEasterEgg() {
|
||||
bratEasterEggClicks += 1;
|
||||
if (bratEasterEggClicks < 10) return;
|
||||
bratEasterEggClicks = 0;
|
||||
const text =
|
||||
'Короче избранный, я тебя спас и в благородства играть не буду. Лучше делом займись!';
|
||||
void WespKioskDialog.alert(text, {
|
||||
title: 'Брат',
|
||||
variant: 'success',
|
||||
timerOnly: true,
|
||||
});
|
||||
setTimeout(function () {
|
||||
if (typeof WespKioskDialog.closeActive === 'function') {
|
||||
WespKioskDialog.closeActive();
|
||||
}
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
async function resetWeight() {
|
||||
maybeBratEasterEgg();
|
||||
if (!kioskPaired) return;
|
||||
try {
|
||||
const response = await fetch('/tare', { method: 'POST', headers: buildHeaders() });
|
||||
const data = await response.json();
|
||||
// Обнуление выполнено без отображения уведомления
|
||||
} catch (error) {
|
||||
console.error('Ошибка:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Закрываем соединение при выходе
|
||||
window.addEventListener('beforeunload', () => {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
}
|
||||
});
|
||||
|
||||
// Периодическая проверка соединения
|
||||
setInterval(() => {
|
||||
if (eventSource && eventSource.readyState === EventSource.CLOSED) {
|
||||
initSSE();
|
||||
}
|
||||
}, 10000);
|
||||
|
||||
</script>
|
||||
<script src="/static/js/kiosk-theme.js"></script>
|
||||
<script src="/static/js/kiosk-nav-menu.js"></script>
|
||||
<script src="/static/js/kiosk-pairing.js"></script>
|
||||
<script src="/static/js/kiosk-db-check.js"></script>
|
||||
<script src="/static/js/kiosk-calibration.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
window.WespKioskTheme.setup({ withToggle: true });
|
||||
window.WespKioskMenu.setup({ menuButtonSelector: '#kioskMenuButton' });
|
||||
window.WespKioskDbCheck.setup({ menuLinkSelector: '#dbCheckLink' });
|
||||
window.WespKioskCalibration.setup({ menuLinkSelector: '#calibrationLink' });
|
||||
window.WespKioskPairing.setup({
|
||||
menuLinkSelector: '#pairTerminalLink',
|
||||
onPaired: function () {
|
||||
kioskPaired = true;
|
||||
fetchCurrentWeight();
|
||||
initSSE();
|
||||
},
|
||||
onUnpaired: function () {
|
||||
kioskPaired = false;
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<link href="/static/css/wesp-update-banner.css" rel="stylesheet">
|
||||
<script src="/static/js/wesp-update-notifier.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (window.WespUpdateNotifier) {
|
||||
WespUpdateNotifier.init({ dialog: window.WespKioskDialog || window.WespDialog });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!--
|
||||
Шаблон второго экрана «загрузка компонента» без выбора рецепта.
|
||||
|
||||
Роут: GET /component_loader → app.routes.pages.component_loader (render_template).
|
||||
|
||||
Переменные Jinja задаются только на сервере при первом рендере:
|
||||
component_name, remaining_weight, current_loaded, total_component, total_mixture, last_update
|
||||
|
||||
Статика: /static/css/inter-fonts.css
|
||||
|
||||
Динамика (как в монолите): страница может дополняться JS с опросом /api/weight_display_data
|
||||
и родственных эндпоинтов из app.routes.legacy_misc (текущий рецепт, вес, навигация по компонентам).
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Загрузка компонента</title>
|
||||
<link rel="stylesheet" href="/static/css/inter-fonts.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f3f4f6;
|
||||
color: #111827;
|
||||
padding: 24px;
|
||||
}
|
||||
.kiosk-menu-btn {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 1200;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: #1f6fd6;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
h1 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
|
||||
.meta { font-size: 0.875rem; color: #6b7280; margin-bottom: 24px; }
|
||||
dl { display: grid; gap: 12px; }
|
||||
dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; }
|
||||
dd { font-size: 1.125rem; font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button class="kiosk-menu-btn" id="kioskMenuButton" title="Меню">☰</button>
|
||||
<div class="card">
|
||||
<h1>{{ component_name }}</h1>
|
||||
<p class="meta">Обновлено: {{ last_update }}</p>
|
||||
<dl>
|
||||
<div>
|
||||
<dt>Остаток</dt>
|
||||
<dd>{{ remaining_weight }} кг</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Загружено</dt>
|
||||
<dd>{{ current_loaded }} кг</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>По компоненту</dt>
|
||||
<dd>{{ total_component }} кг</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Смесь всего</dt>
|
||||
<dd>{{ total_mixture }} кг</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<script src="/static/js/kiosk-theme.js"></script>
|
||||
<script src="/static/js/kiosk-nav-menu.js"></script>
|
||||
<script src="/static/js/kiosk-pairing.js"></script>
|
||||
<script src="/static/js/kiosk-db-check.js"></script>
|
||||
<script src="/static/js/kiosk-calibration.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
window.WespKioskTheme.setup({ withToggle: false });
|
||||
window.WespKioskMenu.setup({ menuButtonSelector: '#kioskMenuButton' });
|
||||
window.WespKioskDbCheck.setup({ menuLinkSelector: '#dbCheckLink' });
|
||||
window.WespKioskCalibration.setup({ menuLinkSelector: '#calibrationLink' });
|
||||
window.WespKioskPairing.setup({ menuLinkSelector: '#pairTerminalLink' });
|
||||
});
|
||||
</script>
|
||||
<script src="/static/js/kiosk-dialog.js"></script>
|
||||
<link href="/static/css/wesp-update-banner.css" rel="stylesheet">
|
||||
<script src="/static/js/wesp-update-notifier.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (window.WespUpdateNotifier) {
|
||||
WespUpdateNotifier.init({ dialog: window.WespKioskDialog || window.WespDialog });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,748 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var t = (localStorage.getItem("theme") || "").trim().toLowerCase();
|
||||
document.documentElement.setAttribute("data-theme", t === "light" ? "light" : "dark");
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Дублер выбора рецепта</title>
|
||||
<link rel="stylesheet" href="/static/css/inter-fonts.css">
|
||||
<link href="/static/css/wesp-recipes-skeleton.css" rel="stylesheet">
|
||||
<link href="/static/css/wesp-kiosk-skeleton.css" rel="stylesheet">
|
||||
<script type="module" src="/static/js/modules/kiosk/kiosk-skeleton.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #2563eb;
|
||||
--primary-hover: #1d4ed8;
|
||||
--primary-light: #3b82f6;
|
||||
--success: #10b981;
|
||||
--danger: #ef4444;
|
||||
--warning: #f59e0b;
|
||||
--gray-50: #f9fafb;
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-200: #e5e7eb;
|
||||
--gray-600: #4b5563;
|
||||
--gray-900: #111827;
|
||||
--white: #ffffff;
|
||||
--border: var(--gray-200);
|
||||
--dup-pad-x: clamp(12px, 3.5vw, 24px);
|
||||
--dup-pad-y: clamp(12px, 2.5vmin, 20px);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: clamp(14px, 2vmin, 18px);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
min-height: 100vh;
|
||||
background: var(--gray-50);
|
||||
color: var(--gray-900);
|
||||
line-height: 1.5;
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
/* Карточки в духе db_check */
|
||||
.card {
|
||||
background: var(--white);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.dup-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
max-width: min(960px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: var(--dup-pad-y) var(--dup-pad-x);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dup-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: clamp(8px, 2vmin, 16px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dup-header-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.recipe-info-section {
|
||||
padding: clamp(10px, 2.5vmin, 16px) clamp(12px, 3vw, 20px);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.recipe-info-section h3 {
|
||||
font-size: clamp(1rem, 2.8vmin, 1.35rem);
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.recipe-info-section p {
|
||||
font-size: clamp(0.8rem, 2vmin, 0.95rem);
|
||||
color: var(--gray-600);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 12px;
|
||||
border-radius: 9999px;
|
||||
font-size: clamp(0.75rem, 1.8vmin, 0.875rem);
|
||||
font-weight: 500;
|
||||
align-self: center;
|
||||
background: var(--gray-200);
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.connection-status.connected {
|
||||
background: var(--success);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.connection-status.disconnected {
|
||||
background: var(--danger);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.dup-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(8px, 2vmin, 14px);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.next-component-info {
|
||||
padding: clamp(10px, 2.5vmin, 16px) clamp(12px, 3vw, 18px);
|
||||
text-align: center;
|
||||
border-left: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
.next-component-info h4 {
|
||||
font-size: clamp(0.8rem, 2vmin, 0.95rem);
|
||||
font-weight: 600;
|
||||
color: var(--gray-600);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.next-component-name {
|
||||
font-size: clamp(1rem, 3.2vmin, 1.35rem);
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.last-component-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #fff7ed;
|
||||
color: #9a3412;
|
||||
border: 1px solid #fdba74;
|
||||
border-radius: 9999px;
|
||||
padding: 6px 12px;
|
||||
font-size: clamp(0.75rem, 1.8vmin, 0.875rem);
|
||||
font-weight: 600;
|
||||
margin: 8px auto 0 auto;
|
||||
}
|
||||
|
||||
.weight-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: clamp(200px, 38vh, 520px);
|
||||
padding: clamp(12px, 3vmin, 24px);
|
||||
}
|
||||
|
||||
.weight-section.center-weight {
|
||||
justify-content: center;
|
||||
min-height: clamp(240px, 42vh, 560px);
|
||||
}
|
||||
|
||||
.weight-section.center-weight .weight-content {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.weight-content {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
min-height: clamp(12rem, 32vh, 24rem);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.component-name {
|
||||
font-size: clamp(1.35rem, 5.5vmin, 3.25rem);
|
||||
font-weight: 700;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: clamp(4px, 1.5vmin, 12px);
|
||||
line-height: 1.15;
|
||||
max-width: 100%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.weight-display {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
width: 100%;
|
||||
margin: clamp(8px, 2vmin, 20px) 0;
|
||||
flex: 0 0 auto;
|
||||
min-height: min-content;
|
||||
}
|
||||
|
||||
.weight-section.center-weight .weight-display {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.remaining-weight {
|
||||
font-size: clamp(2.75rem, 14vmin, 9rem);
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
flex-shrink: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.remaining-weight.negative {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.weight-unit {
|
||||
font-size: clamp(1.25rem, 5vmin, 3rem);
|
||||
font-weight: 500;
|
||||
margin-left: 0.15em;
|
||||
}
|
||||
|
||||
.weight-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
font-size: clamp(0.9rem, 2.2vmin, 1.15rem);
|
||||
width: 100%;
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.weight-info > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.weight-info span:first-child {
|
||||
color: var(--gray-600);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.weight-info span:last-child {
|
||||
color: var(--gray-900);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: clamp(10px, 2vmin, 14px) clamp(14px, 3vmin, 22px);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: clamp(0.95rem, 2.6vmin, 1.2rem);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
|
||||
min-height: clamp(48px, 8vmin, 72px);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--gray-600);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.prev-btn {
|
||||
background: var(--gray-600);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.prev-btn:hover {
|
||||
background: #374151;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.next-btn:hover {
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
|
||||
.dup-footer {
|
||||
flex-shrink: 0;
|
||||
margin-top: clamp(10px, 2.5vmin, 18px);
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.nav-buttons-overlay {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: clamp(8px, 2vmin, 14px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Тумблер темы — слева снизу, чтобы не перекрывать «Следующий» справа */
|
||||
#wespThemeToggleWrap {
|
||||
top: auto !important;
|
||||
left: 16px !important;
|
||||
right: auto !important;
|
||||
bottom: 16px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#wespThemeToggleWrap {
|
||||
left: 12px !important;
|
||||
bottom: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="light"] body {
|
||||
background: #f9fafb !important;
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .recipe-info-section,
|
||||
html[data-theme="light"] .weight-section,
|
||||
html[data-theme="light"] .next-component-info {
|
||||
background: #ffffff !important;
|
||||
color: #111827 !important;
|
||||
border-color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .recipe-info-section h3,
|
||||
html[data-theme="light"] .component-name {
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .recipe-info-section p,
|
||||
html[data-theme="light"] .next-component-info h4 {
|
||||
color: #4b5563 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .remaining-weight {
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .remaining-weight.negative {
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .next-component-info {
|
||||
border-left-color: #2563eb !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .recipe-info-section,
|
||||
html[data-theme="dark"] .weight-section,
|
||||
html[data-theme="dark"] .next-component-info {
|
||||
background: #242424 !important;
|
||||
color: #f0f0f0 !important;
|
||||
border-color: #3a3a3a !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .recipe-info-section h3,
|
||||
html[data-theme="dark"] .component-name {
|
||||
color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .recipe-info-section p,
|
||||
html[data-theme="dark"] .next-component-info h4 {
|
||||
color: #bdbdbd !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .remaining-weight {
|
||||
color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .remaining-weight.negative {
|
||||
color: #fca5a5 !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .nav-btn {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .last-component-badge {
|
||||
background: #3f2e1a !important;
|
||||
color: #fdba74 !important;
|
||||
border-color: #92400e !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .connection-status:not(.connected):not(.disconnected) {
|
||||
background: #3a3a3a !important;
|
||||
color: #e5e7eb !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dup-page">
|
||||
<header class="dup-header">
|
||||
<div class="dup-header-main">
|
||||
<div class="recipe-info-section card" id="recipeInfo" style="display: none;">
|
||||
<h3>Рецепт: <span id="recipeName"></span></h3>
|
||||
<p>Компонент <span id="currentIndex">0</span> из <span id="totalComponents">0</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="connection-status" id="connectionStatus">Подключение...</div>
|
||||
</header>
|
||||
|
||||
<main class="dup-main">
|
||||
<div class="next-component-info card" id="nextComponentInfo" style="display: none;">
|
||||
<h4>Следующий компонент:</h4>
|
||||
<div class="next-component-name" id="nextComponentName">-</div>
|
||||
<div id="lastComponentBadge" class="last-component-badge" style="display: none;">Последний компонент</div>
|
||||
</div>
|
||||
|
||||
<div class="weight-section card">
|
||||
<div class="weight-content">
|
||||
<div class="component-name" id="componentName">Ожидание компонента...</div>
|
||||
|
||||
<div class="weight-display">
|
||||
<div class="remaining-weight" id="remainingWeight">0<span class="weight-unit">кг</span></div>
|
||||
</div>
|
||||
|
||||
<div class="weight-info">
|
||||
<div style="display: none;"><span>Загружено:</span> <span id="currentLoaded">0.0</span> кг</div>
|
||||
<div style="display: none;"><span>Всего:</span> <span id="totalComponent">0.0</span> кг</div>
|
||||
<div style="display: none;"><span>Общий в миксере:</span> <span id="totalMixtureWeight">0.0</span> кг</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="dup-footer">
|
||||
<div class="nav-buttons-overlay" id="navButtonsOverlay" style="display: none;">
|
||||
<button type="button" class="nav-btn prev-btn btn" id="prevBtnOverlay">Предыдущий</button>
|
||||
<button type="button" class="nav-btn next-btn btn" id="nextBtnOverlay">Следующий</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let kioskPaired = false;
|
||||
let kioskStarted = false;
|
||||
let duplicateInitialLoadDone = false;
|
||||
let updateInterval = null;
|
||||
let connectionRetries = 0;
|
||||
const maxRetries = 5;
|
||||
const POLL_MS = 50;
|
||||
|
||||
function roundToStep5(value) {
|
||||
return Math.round(value / 5) * 5;
|
||||
}
|
||||
|
||||
let unloadingSound = null;
|
||||
let unloadingSoundPlaying = false;
|
||||
let unloadingSoundReason = null;
|
||||
let unloadingSoundNeedsGesture = false;
|
||||
|
||||
function startUnloadingSoundLoop(reason) {
|
||||
unloadingSoundReason = reason || unloadingSoundReason || 'weight';
|
||||
if (unloadingSoundPlaying) return;
|
||||
if (!unloadingSound) {
|
||||
unloadingSound = new Audio('/sounds/unloading.mp3');
|
||||
unloadingSound.loop = true;
|
||||
}
|
||||
unloadingSound.play()
|
||||
.then(() => {
|
||||
unloadingSoundPlaying = true;
|
||||
unloadingSoundNeedsGesture = false;
|
||||
})
|
||||
.catch(e => {
|
||||
unloadingSoundNeedsGesture = true;
|
||||
console.warn('ДУБЛЕР: Unloading sound play failed:', e);
|
||||
});
|
||||
}
|
||||
|
||||
function stopUnloadingSoundLoop() {
|
||||
if (!unloadingSound) return;
|
||||
unloadingSound.pause();
|
||||
unloadingSound.currentTime = 0;
|
||||
unloadingSoundPlaying = false;
|
||||
unloadingSoundReason = null;
|
||||
}
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
if (unloadingSoundNeedsGesture && unloadingSoundReason === 'weight') {
|
||||
startUnloadingSoundLoop('weight');
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
function updateConnectionStatus(connected) {
|
||||
const status = document.getElementById('connectionStatus');
|
||||
if (connected) {
|
||||
status.textContent = 'Подключено';
|
||||
status.className = 'connection-status connected';
|
||||
connectionRetries = 0;
|
||||
} else {
|
||||
status.textContent = 'Соединение потеряно';
|
||||
status.className = 'connection-status disconnected';
|
||||
}
|
||||
}
|
||||
|
||||
function updateWeightDisplay() {
|
||||
if (!kioskPaired) return;
|
||||
fetch('/api/weight_display_data')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('ДУБЛЕР: Получены данные:', data);
|
||||
updateConnectionStatus(true);
|
||||
|
||||
if (!duplicateInitialLoadDone && window.WespKioskSkeleton) {
|
||||
window.WespKioskSkeleton.clearDuplicatePanelSkeleton(
|
||||
document.getElementById('recipeInfo'),
|
||||
document.querySelector('.weight-section')
|
||||
);
|
||||
duplicateInitialLoadDone = true;
|
||||
}
|
||||
|
||||
document.getElementById('componentName').textContent = data.component_name;
|
||||
|
||||
const nextComponentInfo = document.getElementById('nextComponentInfo');
|
||||
const nextComponentName = document.getElementById('nextComponentName');
|
||||
const lastBadge = document.getElementById('lastComponentBadge');
|
||||
const hasNext = !!(data && data.next_component_name && data.status === 'active');
|
||||
const isLast = !!(data && data.status === 'active' && typeof data.current_index === 'number' && typeof data.total_components === 'number' && data.total_components > 0 && (data.current_index === data.total_components - 1));
|
||||
|
||||
if (hasNext) {
|
||||
nextComponentName.textContent = data.next_component_name;
|
||||
nextComponentInfo.style.display = 'block';
|
||||
if (lastBadge) lastBadge.style.display = 'none';
|
||||
} else if (isLast) {
|
||||
nextComponentName.textContent = '-';
|
||||
nextComponentInfo.style.display = 'block';
|
||||
if (lastBadge) lastBadge.style.display = 'inline-flex';
|
||||
} else {
|
||||
nextComponentInfo.style.display = 'none';
|
||||
if (lastBadge) lastBadge.style.display = 'none';
|
||||
}
|
||||
|
||||
const weightSectionEl = document.querySelector('.weight-section');
|
||||
if (data.status === 'no_recipe') {
|
||||
stopUnloadingSoundLoop();
|
||||
const remainingEl = document.getElementById('remainingWeight');
|
||||
remainingEl.innerHTML = `${data.total_mixture != null ? data.total_mixture : '0'}<span class="weight-unit"> кг</span>`;
|
||||
remainingEl.className = 'remaining-weight';
|
||||
|
||||
document.getElementById('currentLoaded').textContent = '---';
|
||||
document.getElementById('totalComponent').textContent = '---';
|
||||
document.getElementById('totalMixtureWeight').textContent = Math.round(data.total_mixture);
|
||||
if (weightSectionEl) weightSectionEl.classList.add('center-weight');
|
||||
} else {
|
||||
const remainingEl = document.getElementById('remainingWeight');
|
||||
const rw = data.remaining_weight != null ? data.remaining_weight : 0;
|
||||
remainingEl.innerHTML = `${rw}<span class="weight-unit"> кг</span>`;
|
||||
remainingEl.className = Number(rw) < 0 ? 'remaining-weight negative' : 'remaining-weight';
|
||||
|
||||
document.getElementById('currentLoaded').textContent = roundToStep5(data.current_loaded);
|
||||
document.getElementById('totalComponent').textContent = roundToStep5(data.total_component);
|
||||
document.getElementById('totalMixtureWeight').textContent = roundToStep5(data.total_mixture);
|
||||
if (weightSectionEl) weightSectionEl.classList.remove('center-weight');
|
||||
|
||||
const isMixingNow = !!(data && (data.is_mixing_mode || data.mixing_timer_active));
|
||||
if (isMixingNow) {
|
||||
stopUnloadingSoundLoop();
|
||||
} else {
|
||||
const totalComponent = parseFloat(data.total_component) || 0;
|
||||
const currentLoaded = parseFloat(data.current_loaded) || 0;
|
||||
if (data.status === 'active' && totalComponent > 0) {
|
||||
const threshold = totalComponent * 0.95;
|
||||
if (currentLoaded >= threshold) {
|
||||
startUnloadingSoundLoop('weight');
|
||||
} else if (unloadingSoundReason === 'weight') {
|
||||
stopUnloadingSoundLoop();
|
||||
}
|
||||
} else {
|
||||
stopUnloadingSoundLoop();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const navButtons = document.getElementById('navButtonsOverlay');
|
||||
navButtons.style.display = data.show_nav_buttons ? 'grid' : 'none';
|
||||
|
||||
if (data.status === 'active') {
|
||||
document.getElementById('recipeName').textContent = data.recipe_name || '—';
|
||||
document.getElementById('currentIndex').textContent = String((data.current_index != null ? data.current_index : 0) + 1);
|
||||
document.getElementById('totalComponents').textContent = String(data.total_components != null ? data.total_components : 0);
|
||||
document.getElementById('recipeInfo').style.display = 'block';
|
||||
} else {
|
||||
document.getElementById('recipeInfo').style.display = 'none';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('ДУБЛЕР: Ошибка получения данных:', error);
|
||||
connectionRetries++;
|
||||
stopUnloadingSoundLoop();
|
||||
|
||||
if (connectionRetries >= maxRetries) {
|
||||
updateConnectionStatus(false);
|
||||
document.getElementById('componentName').textContent = 'Соединение потеряно';
|
||||
document.getElementById('remainingWeight').innerHTML = '---<span class="weight-unit"></span>';
|
||||
document.getElementById('currentLoaded').textContent = '---';
|
||||
document.getElementById('totalComponent').textContent = '---';
|
||||
document.getElementById('totalMixtureWeight').textContent = '---';
|
||||
document.getElementById('navButtonsOverlay').style.display = 'none';
|
||||
document.getElementById('recipeInfo').style.display = 'none';
|
||||
document.getElementById('nextComponentInfo').style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function startUpdates() {
|
||||
if (!kioskPaired || kioskStarted) return;
|
||||
kioskStarted = true;
|
||||
if (!duplicateInitialLoadDone && window.WespKioskSkeleton) {
|
||||
window.WespKioskSkeleton.mountDuplicatePanelSkeleton(
|
||||
document.getElementById('recipeInfo'),
|
||||
document.querySelector('.weight-section')
|
||||
);
|
||||
}
|
||||
updateWeightDisplay();
|
||||
updateInterval = setInterval(updateWeightDisplay, POLL_MS);
|
||||
}
|
||||
|
||||
function flashNavButton(btn) {
|
||||
if (!btn) return;
|
||||
var color = btn.classList.contains('prev-btn') ? '#374151' : '#1d4ed8';
|
||||
btn.style.backgroundColor = color;
|
||||
setTimeout(function () {
|
||||
btn.style.removeProperty('background-color');
|
||||
}, 150);
|
||||
}
|
||||
|
||||
document.getElementById('prevBtnOverlay').addEventListener('click', function() {
|
||||
if (!kioskPaired) return;
|
||||
fetch('/api/send_navigation_command', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ command: 'prev' })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success') {
|
||||
console.log('ДУБЛЕР: Команда "предыдущий" отправлена на основную страницу');
|
||||
flashNavButton(document.getElementById('prevBtnOverlay'));
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('ДУБЛЕР: Ошибка отправки команды:', error));
|
||||
});
|
||||
|
||||
document.getElementById('nextBtnOverlay').addEventListener('click', function() {
|
||||
if (!kioskPaired) return;
|
||||
fetch('/api/send_navigation_command', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ command: 'next' })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success') {
|
||||
console.log('ДУБЛЕР: Команда "следующий" отправлена на основную страницу');
|
||||
flashNavButton(document.getElementById('nextBtnOverlay'));
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('ДУБЛЕР: Ошибка отправки команды:', error));
|
||||
});
|
||||
|
||||
window.addEventListener('beforeunload', function() {
|
||||
if (updateInterval) {
|
||||
clearInterval(updateInterval);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="/static/js/kiosk-theme.js"></script>
|
||||
<script src="/static/js/kiosk-pairing.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
window.WespKioskTheme.setup({ withToggle: true });
|
||||
window.WespKioskPairing.setup({
|
||||
onPaired: function () {
|
||||
kioskPaired = true;
|
||||
startUpdates();
|
||||
},
|
||||
onUnpaired: function () {
|
||||
kioskPaired = false;
|
||||
kioskStarted = false;
|
||||
if (updateInterval) {
|
||||
clearInterval(updateInterval);
|
||||
updateInterval = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="/static/js/kiosk-dialog.js"></script>
|
||||
<link href="/static/css/wesp-update-banner.css" rel="stylesheet">
|
||||
<script src="/static/js/wesp-update-notifier.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (window.WespUpdateNotifier) {
|
||||
WespUpdateNotifier.init({ dialog: window.WespKioskDialog || window.WespDialog });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Reference in New Issue
Block a user