влад
@@ -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>
|
||||
Reference in New Issue
Block a user