feat: режим индикаторов без цветовой кодировки + переустройство /setup

Новая настройка app_settings.indicator_mode (color | accessible), переключается на /setup. В режиме accessible сигналы, которые раньше держались только на цвете, переходят на форму/текст: - качество цены (0-9) — 5-ступенчатый signal-meter вместо градиентной точки/числа; единый модуль web/static/price-quality.js, ветвление по window.QF_INDICATOR_MODE; - вкладка «Ценообразование»: ведущая колонка-meter вместо заливки строк, пометка W вместо амбер-подсветки world-цен, ⚠ вместо красного «загрязнённого» итога. - GET/PUT /api/settings/ui (без рестарта), регистрируется в обоих наборах роутов. /setup переустроен: две колонки одной высоты, кнопка «Вернуться в приложение», исправлен <title>. Документация: bible-local 02/03/04 + decisions/2026-08-31-accessible-indicator-mode.md Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LbRvQgPZpM4SJTaX3iLrXk
2026-08-31 18:08:38 +03:00
parent d97ac447ca
commit 681ec15e2b
15 changed files with 453 additions and 52 deletions
@@ -8,6 +8,7 @@
    <link rel="stylesheet" href="/static/app.css">
    <script src="/static/vendor/tailwindcss.browser.js"></script>
    <script src="/static/vendor/htmx-1.9.10.min.js"></script>
+    <script>window.QF_INDICATOR_MODE = "{{ .IndicatorMode }}";</script>
    <script src="/static/price-quality.js"></script>
    <style>
        .htmx-request { opacity: 0.5; }
@@ -222,6 +222,7 @@
                <table class="w-full text-sm border-collapse">
                    <thead class="bg-gray-50 text-gray-700">
                        <tr>
+                            {{if eq .IndicatorMode "accessible"}}<th class="px-2 py-2 border-b" title="Качество цены"><span class="sr-only">Качество цены</span></th>{{end}}
                            <th class="px-2 py-2 text-left border-b whitespace-nowrap">PN вендора</th>
                            <th class="px-2 py-2 text-left border-b">Описание</th>
                            <th class="px-2 py-2 text-left border-b">LOT</th>
@@ -233,11 +234,11 @@
                        </tr>
                    </thead>
                    <tbody id="pricing-body-buy">
-                        <tr><td colspan="8" class="px-2 py-8 text-center text-gray-400">Загрузите BOM во вкладке «BOM»</td></tr>
+                        <tr><td colspan="{{if eq .IndicatorMode "accessible"}}9{{else}}8{{end}}" class="px-2 py-8 text-center text-gray-400">Загрузите BOM во вкладке «BOM»</td></tr>
                    </tbody>
                    <tfoot id="pricing-foot-buy" class="hidden bg-gray-50 font-semibold">
                        <tr>
-                            <td colspan="4" class="px-2 py-2 text-right">Итого:</td>
+                            <td colspan="{{if eq .IndicatorMode "accessible"}}5{{else}}4{{end}}" class="px-2 py-2 text-right">Итого:</td>
                            <td class="px-2 py-2 text-right" id="pricing-total-buy-estimate">—</td>
                            <td class="px-2 py-2 text-right stock-price-col" id="pricing-total-buy-warehouse">—</td>
                            <td class="px-2 py-2 text-right" id="pricing-total-buy-competitor">—</td>
@@ -271,6 +272,7 @@
                <table class="w-full text-sm border-collapse">
                    <thead class="bg-gray-50 text-gray-700">
                        <tr>
+                            {{if eq .IndicatorMode "accessible"}}<th class="px-2 py-2 border-b" title="Качество цены"><span class="sr-only">Качество цены</span></th>{{end}}
                            <th class="px-2 py-2 text-left border-b whitespace-nowrap">PN вендора</th>
                            <th class="px-2 py-2 text-left border-b">Описание</th>
                            <th class="px-2 py-2 text-left border-b">LOT</th>
@@ -282,11 +284,11 @@
                        </tr>
                    </thead>
                    <tbody id="pricing-body-sale">
-                        <tr><td colspan="8" class="px-2 py-8 text-center text-gray-400">Загрузите BOM во вкладке «BOM»</td></tr>
+                        <tr><td colspan="{{if eq .IndicatorMode "accessible"}}9{{else}}8{{end}}" class="px-2 py-8 text-center text-gray-400">Загрузите BOM во вкладке «BOM»</td></tr>
                    </tbody>
                    <tfoot id="pricing-foot-sale" class="hidden bg-gray-50 font-semibold">
                        <tr>
-                            <td colspan="4" class="px-2 py-2 text-right">Итого:</td>
+                            <td colspan="{{if eq .IndicatorMode "accessible"}}5{{else}}4{{end}}" class="px-2 py-2 text-right">Итого:</td>
                            <td class="px-2 py-2 text-right" id="pricing-total-sale-estimate">—</td>
                            <td class="px-2 py-2 text-right stock-price-col" id="pricing-total-sale-warehouse">—</td>
                            <td class="px-2 py-2 text-right" id="pricing-total-sale-competitor">—</td>
@@ -4506,6 +4508,17 @@ async function renderPricingTab() {
    // families since applyCustomPrice() strips those on vendor-price cells via regex.
    const WORLD_CLS = 'bg-amber-50 text-amber-700';

+    // Colour-blind-safe mode: leading signal-meter column, no row tint, and the
+    // amber world-fallback cell tint is replaced by a text marker.
+    const ACCESSIBLE_MODE = window.QF_INDICATOR_MODE === 'accessible';
+    const worldCls  = (w) => (!ACCESSIBLE_MODE && w) ? WORLD_CLS : '';
+    const worldMark = (w) => (ACCESSIBLE_MODE && w)
+        ? '<sup class="text-gray-500 font-semibold" title="Цена-заглушка из прайслиста WORLD">W</sup>'
+        : '';
+    const meterCell = (q, bt) => ACCESSIBLE_MODE
+        ? `<td class="pricing-quality-meter px-2 py-1.5 align-middle ${bt || ''}">${qualityMeterHtml(q)}</td>`
+        : '';
+
    // ─── Build shared row data (unit prices for display, totals for math) ────
    // Each BOM row is exploded into per-LOT sub-rows; grouped by vendor PN via groupStart/groupSize.
    const cartQtyMap = {};
@@ -4636,7 +4649,7 @@ async function renderPricingTab() {
    // ─── Populate Buy table ──────────────────────────────────────────────────
    tbodyBuy.innerHTML = '';
    if (!rowData.length) {
-        tbodyBuy.innerHTML = '<tr><td colspan="8" class="px-2 py-8 text-center text-gray-400">Нет данных для отображения</td></tr>';
+        tbodyBuy.innerHTML = `<tr><td colspan="${ACCESSIBLE_MODE ? 9 : 8}" class="px-2 py-8 text-center text-gray-400">Нет данных для отображения</td></tr>`;
        tfootBuy.classList.add('hidden');
    } else {
        let totEst = 0, totWh = 0, totComp = 0, totVendor = 0;
@@ -4670,12 +4683,13 @@ async function renderPricingTab() {
                <td${rs} class="px-2 py-1.5 text-xs text-gray-500 truncate max-w-xs border-t border-gray-200 align-top">${escapeHtml(r.desc)}</td>`;
            })() : '';
            tr.innerHTML = `
+                ${meterCell(r.priceQuality, borderTop)}
                ${pnDescHtml}
                <td class="px-2 py-1.5 text-xs ${borderTop}">${r.lotCell}</td>
                <td class="px-2 py-1.5 text-right text-xs ${borderTop}">${r.qty}</td>
-                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${r.estWorld  ? WORLD_CLS : ''}">${r.estUnit > 0 ? formatCurrency(r.estUnit) : '—'}</td>
-                <td class="px-2 py-1.5 text-right text-xs stock-price-col ${borderTop} ${r.whWorld   ? WORLD_CLS : ''}">${r.warehouseUnit != null ? formatCurrency(r.warehouseUnit) : '—'}</td>
-                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${r.compWorld ? WORLD_CLS : ''}">${r.competitorUnit != null ? formatCurrency(r.competitorUnit) : '—'}</td>
+                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${worldCls(r.estWorld)}">${r.estUnit > 0 ? formatCurrency(r.estUnit) : '—'}${worldMark(r.estWorld)}</td>
+                <td class="px-2 py-1.5 text-right text-xs stock-price-col ${borderTop} ${worldCls(r.whWorld)}">${r.warehouseUnit != null ? formatCurrency(r.warehouseUnit) : '—'}${worldMark(r.whWorld)}</td>
+                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${worldCls(r.compWorld)}">${r.competitorUnit != null ? formatCurrency(r.competitorUnit) : '—'}${worldMark(r.compWorld)}</td>
                <td class="px-2 py-1.5 text-right text-xs pricing-vendor-price-buy ${borderTop} ${r.vendorOrigUnit == null ? 'text-gray-400' : ''}">${r.vendorOrigUnit != null ? formatCurrency(r.vendorOrigUnit) : '—'}</td>
            `;
            tbodyBuy.appendChild(tr);
@@ -4690,7 +4704,7 @@ async function renderPricingTab() {
    // ─── Populate Sale table ─────────────────────────────────────────────────
    tbodySale.innerHTML = '';
    if (!rowData.length) {
-        tbodySale.innerHTML = '<tr><td colspan="8" class="px-2 py-8 text-center text-gray-400">Нет данных для отображения</td></tr>';
+        tbodySale.innerHTML = `<tr><td colspan="${ACCESSIBLE_MODE ? 9 : 8}" class="px-2 py-8 text-center text-gray-400">Нет данных для отображения</td></tr>`;
        tfootSale.classList.add('hidden');
    } else {
        let totEst = 0, totWh = 0, totComp = 0;
@@ -4727,12 +4741,13 @@ async function renderPricingTab() {
                <td${rs} class="px-2 py-1.5 text-xs text-gray-500 truncate max-w-xs border-t border-gray-200 align-top">${escapeHtml(r.desc)}</td>`;
            })() : '';
            tr.innerHTML = `
+                ${meterCell(r.priceQuality, borderTop)}
                ${pnDescHtml}
                <td class="px-2 py-1.5 text-xs ${borderTop}">${r.lotCell}</td>
                <td class="px-2 py-1.5 text-right text-xs ${borderTop}">${r.qty}</td>
-                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${r.estWorld  ? WORLD_CLS : ''}">${saleEstUnit  > 0    ? formatCurrency(saleEstUnit)  : '—'}</td>
-                <td class="px-2 py-1.5 text-right text-xs stock-price-col ${borderTop} ${r.whWorld   ? WORLD_CLS : ''}">${saleWhUnit   != null ? formatCurrency(saleWhUnit)   : '—'}</td>
-                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${r.compWorld ? WORLD_CLS : ''}">${saleCompUnit != null ? formatCurrency(saleCompUnit) : '—'}</td>
+                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${worldCls(r.estWorld)}">${saleEstUnit  > 0    ? formatCurrency(saleEstUnit)  : '—'}${worldMark(r.estWorld)}</td>
+                <td class="px-2 py-1.5 text-right text-xs stock-price-col ${borderTop} ${worldCls(r.whWorld)}">${saleWhUnit   != null ? formatCurrency(saleWhUnit)   : '—'}${worldMark(r.whWorld)}</td>
+                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${worldCls(r.compWorld)}">${saleCompUnit != null ? formatCurrency(saleCompUnit) : '—'}${worldMark(r.compWorld)}</td>
                <td class="px-2 py-1.5 text-right text-xs pricing-vendor-price-sale ${borderTop} text-gray-400">—</td>
            `;
            tbodySale.appendChild(tr);
@@ -4779,10 +4794,15 @@ function _setPricingTotal(elId, has, total, worldTotal, count, totalRows) {
        parts.push(`Цены есть не для всех позиций: ${count} из ${totalRows}`);
    }

-    // Red is reserved for a sum that actually leans on world stand-in prices.
-    el.className = `${el.className} ${share > 0 ? 'text-red-600' : ''} pricing-total-tip`
+    // A sum that leans on world stand-in prices is flagged: by red in color
+    // mode, by a leading ⚠ glyph in accessible mode. The hover popup carries the
+    // exact share (and the coverage line, when some positions have no price) in
+    // both modes.
+    const accessible = window.QF_INDICATOR_MODE === 'accessible';
+    el.className = `${el.className} ${share > 0 && !accessible ? 'text-red-600' : ''} pricing-total-tip`
        .replace(/\s+/g, ' ').trim();
-    el.innerHTML = `${formatCurrency(total)}<span class="pricing-total-tip__body">${parts.join('<br>')}</span>`;
+    const mark = share > 0 && accessible ? '<span title="Часть суммы — цена-заглушка WORLD">⚠</span> ' : '';
+    el.innerHTML = `${mark}${formatCurrency(total)}<span class="pricing-total-tip__body">${parts.join('<br>')}</span>`;
 }

 // One decimal, comma separator, no trailing ",0".
@@ -4,26 +4,39 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OFS - Настройка подключения</title>
+    <title>QuoteForge — Настройки</title>
    <link rel="stylesheet" href="/static/app.css">
    <script src="/static/vendor/tailwindcss.browser.js"></script>
 </head>
-<body class="bg-gray-100 min-h-screen flex items-center justify-center">
-    <div class="max-w-md w-full mx-4">
-        <div class="bg-white rounded-lg shadow-lg p-8">
-            <div class="text-center mb-8">
-                <h1 class="text-2xl font-bold text-blue-600">QuoteForge</h1>
-                <p class="text-gray-600 mt-2">Настройка подключения к базе данных</p>
-            </div>
-
-            <div class="bg-amber-50 border border-amber-300 rounded-md p-3 mb-4 flex items-start gap-2">
-                <svg class="w-5 h-5 text-amber-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
+<body class="bg-gray-100 min-h-screen">
+    <div class="max-w-4xl w-full mx-auto px-4 py-10">
+        {{if .Settings}}
+        <div class="mb-4">
+            <a href="/" class="inline-flex items-center gap-1.5 text-sm text-blue-600 hover:text-blue-800">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
-                <p class="text-sm text-amber-800"><span class="font-semibold">Важно:</span> не закрывайте консольное окно приложения — без него программа не работает.</p>
-            </div>
+                Вернуться в приложение
+            </a>
+        </div>
+        {{end}}
+        <div class="text-center mb-6">
+            <h1 class="text-2xl font-bold text-blue-600">QuoteForge</h1>
+            <p class="text-gray-600 mt-1">Настройки</p>
+        </div>

-            <form id="setup-form" class="space-y-4">
+        <div class="bg-amber-50 border border-amber-300 rounded-md p-3 mb-6 flex items-start gap-2">
+            <svg class="w-5 h-5 text-amber-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
+            </svg>
+            <p class="text-sm text-amber-800"><span class="font-semibold">Важно:</span> не закрывайте консольное окно приложения — без него программа не работает.</p>
+        </div>
+
+        <div class="grid gap-6 md:grid-cols-2">
+        <div class="bg-white rounded-lg shadow-lg p-6 flex flex-col">
+            <h2 class="text-lg font-semibold text-gray-800 mb-4">Подключение к базе данных</h2>
+
+            <form id="setup-form" class="space-y-4 flex flex-col flex-1">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Хост сервера</label>
                    <input type="text" name="host" id="host"
@@ -68,13 +81,7 @@

                <div id="status" class="hidden p-3 rounded-md text-sm"></div>

-                <div class="flex space-x-3 pt-4">
-                    {{if .Settings}}
-                    <a href="/"
-                       class="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition text-center">
-                        Назад
-                    </a>
-                    {{end}}
+                <div class="flex space-x-3 pt-4 mt-auto">
                    <button type="button" onclick="testConnection()"
                            class="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition">
                        Проверить
@@ -87,8 +94,56 @@
            </form>
        </div>

-        <p class="text-center text-gray-500 text-sm mt-4">
-            QuoteForge - Конфигуратор серверов
+        <div class="bg-white rounded-lg shadow-lg p-6 flex flex-col">
+            <h2 class="text-lg font-semibold text-gray-800">Индикаторы</h2>
+            <p class="text-sm text-gray-600 mt-1 mb-4">
+                Часть подсказок в интерфейсе передаётся только цветом: качество цены в спецификации
+                и на вкладке «Ценообразование», цены-заглушки, неполные итоги. Выберите режим без
+                цветовой кодировки, если цвета трудно различать.
+            </p>
+
+            <div class="space-y-3">
+                <label class="flex items-start gap-3 p-3 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-50">
+                    <input type="radio" name="indicator-mode" value="color" class="mt-1"
+                           {{if ne .IndicatorMode "accessible"}}checked{{end}}>
+                    <span class="flex-1">
+                        <span class="block text-sm font-medium text-gray-800">Цветовая индикация</span>
+                        <span class="block text-xs text-gray-500 mt-0.5">Шкала «красный → жёлтый → зелёный», подсветка ячеек.</span>
+                        <span class="inline-flex items-center gap-1.5 mt-2">
+                            <span class="inline-block w-2 h-2 rounded-full" style="background-color:rgb(220,38,38)"></span>
+                            <span class="inline-block w-2 h-2 rounded-full" style="background-color:rgb(234,179,8)"></span>
+                            <span class="inline-block w-2 h-2 rounded-full" style="background-color:rgb(22,163,74)"></span>
+                        </span>
+                    </span>
+                </label>
+
+                <label class="flex items-start gap-3 p-3 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-50">
+                    <input type="radio" name="indicator-mode" value="accessible" class="mt-1"
+                           {{if eq .IndicatorMode "accessible"}}checked{{end}}>
+                    <span class="flex-1">
+                        <span class="block text-sm font-medium text-gray-800">Без цветовой кодировки</span>
+                        <span class="block text-xs text-gray-500 mt-0.5">Значок-«сигнал» из 5 столбиков и текстовые пометки вместо цвета.</span>
+                        <span class="inline-flex items-end gap-2 mt-2">
+                            <span class="qf-quality-meter"><i></i><i></i><i></i><i></i><i></i></span>
+                            <span class="qf-quality-meter"><i class="on"></i><i class="on"></i><i></i><i></i><i></i></span>
+                            <span class="qf-quality-meter"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i></span>
+                        </span>
+                    </span>
+                </label>
+            </div>
+
+            <div class="mt-auto pt-4">
+                <div id="indicator-status" class="hidden mb-3 p-2 rounded-md text-sm"></div>
+                <button type="button" onclick="saveIndicatorMode()"
+                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
+                    Сохранить
+                </button>
+            </div>
+        </div>
+        </div>
+
+        <p class="text-center text-gray-500 text-sm mt-8">
+            QuoteForge {{.AppVersion}} — Конфигуратор серверов
        </p>
    </div>

@@ -159,6 +214,31 @@
            }
        }

+        async function saveIndicatorMode() {
+            const mode = document.querySelector('input[name="indicator-mode"]:checked')?.value || 'color';
+            const box = document.getElementById('indicator-status');
+            box.className = 'mb-3 p-2 rounded-md text-sm bg-blue-100 text-blue-800';
+            box.textContent = 'Сохранение...';
+            try {
+                const resp = await fetch('/api/settings/ui', {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ indicator_mode: mode }),
+                });
+                const data = await resp.json();
+                if (resp.ok) {
+                    box.className = 'mb-3 p-2 rounded-md text-sm bg-green-100 text-green-800';
+                    box.textContent = '✓ Сохранено. Изменения появятся при следующем открытии страниц.';
+                } else {
+                    box.className = 'mb-3 p-2 rounded-md text-sm bg-red-100 text-red-800';
+                    box.textContent = data.error || 'Не удалось сохранить';
+                }
+            } catch (e) {
+                box.className = 'mb-3 p-2 rounded-md text-sm bg-red-100 text-red-800';
+                box.textContent = 'Ошибка сети: ' + e.message;
+            }
+        }
+
        async function checkServerReady() {
            let attempts = 0;
            const maxAttempts = 30; // 30 seconds max