Files
2026-07-17 12:57:18 +03:00

850 lines
28 KiB
HTML

<!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>