mchus/QuoteForge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 47 Wiki Activity

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

Browse Source 
Новая настройка 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
This commit is contained in:
Mikhail Chusavitin
2026-08-31 18:08:38 +03:00
co-authored by Claude Sonnet 5
parent d97ac447ca
commit 681ec15e2b
15 changed files with 453 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/setup.html
+104 -24
View File
@@ -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