feat: apply new Мои Товары design system across all templates
Replace Pico CSS with custom design: dark sidebar layout, Golos Text + JetBrains Mono fonts, orange accent (#FF5500), new component classes (cards, tables, buttons, tags, toggles, alerts, tabs, login split-panel). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mguschin
@@ -1,210 +1,212 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Подключения — ЭВОСИНК{% endblock %}
|
||||
{% block title %}Подключения — Мои Товары{% endblock %}
|
||||
{% block page_title %}Подключения{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-center">
|
||||
<div class="col-sm-10 col-md-8 col-lg-6">
|
||||
<div class="pg-title">Подключения</div>
|
||||
<div class="pg-sub">Управление интеграциями с Эвотор и VK Market</div>
|
||||
|
||||
<h1 style="font-size:1.3rem; margin-bottom:1.5rem;">
|
||||
<i class="bi bi-plug me-2"></i>Подключения
|
||||
</h1>
|
||||
{% if request.query_params.get('success') %}
|
||||
<div class="alert alert-gr">
|
||||
<span><i class="bi bi-check-circle"></i></span>
|
||||
<div>Подключение сохранено.</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if request.query_params.get('success') %}
|
||||
<div role="alert" class="alert alert-success mb-3">
|
||||
<p>Подключение сохранено.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ── Evotor ── #}
|
||||
<article class="card mb-4">
|
||||
<header class="d-flex align-center justify-between">
|
||||
<span><i class="bi bi-cpu me-2"></i><strong>Эвотор</strong></span>
|
||||
{% if evotor %}
|
||||
<span class="badge badge-success"><i class="bi bi-check-circle me-1"></i>Подключено</span>
|
||||
{% else %}
|
||||
<span class="badge badge-secondary">Не подключено</span>
|
||||
{% endif %}
|
||||
</header>
|
||||
|
||||
{% if evotor %}
|
||||
<ul class="list-group mb-3">
|
||||
<li class="list-group-item">
|
||||
<span class="text-muted small">Токен</span>
|
||||
<span class="font-monospace small">{{ evotor.access_token[:8] }}••••••••</span>
|
||||
</li>
|
||||
{% if evotor.evotor_user_id %}
|
||||
<li class="list-group-item">
|
||||
<span class="text-muted small">Evotor User ID</span>
|
||||
<span class="font-monospace small">{{ evotor.evotor_user_id }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="list-group-item">
|
||||
<span class="text-muted small">Подключено</span>
|
||||
<span>{{ evotor.connected_at | datefmt }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="text-muted small">Обновлено</span>
|
||||
<span>{{ evotor.updated_at | datefmt }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
<div class="card-body">
|
||||
<details {% if not evotor %}open{% endif %}>
|
||||
<summary>
|
||||
{% if evotor %}Обновить токен{% else %}Ввести API-токен{% endif %}
|
||||
</summary>
|
||||
<form method="post" action="/connections/evotor" class="mt-3">
|
||||
<label>
|
||||
API-токен Эвотор
|
||||
<input type="text" name="access_token"
|
||||
placeholder="Вставьте токен из личного кабинета Эвотор"
|
||||
value="{{ evotor.access_token if evotor else '' }}"
|
||||
required autocomplete="off">
|
||||
</label>
|
||||
<label>
|
||||
Evotor User ID <span class="text-muted small">(необязательно)</span>
|
||||
<input type="text" name="evotor_user_id"
|
||||
placeholder="Например: 01234567-89ab-cdef-0123-456789abcdef"
|
||||
value="{{ evotor.evotor_user_id if evotor and evotor.evotor_user_id else '' }}"
|
||||
autocomplete="off">
|
||||
</label>
|
||||
<button type="submit">
|
||||
<i class="bi bi-save me-1"></i>Сохранить
|
||||
</button>
|
||||
</form>
|
||||
</details>
|
||||
|
||||
{% if evotor %}
|
||||
<div class="d-flex gap-2 mt-3" style="flex-wrap:wrap; align-items:center;">
|
||||
<button type="button" class="outline sm" onclick="testConnection('evotor', this)">
|
||||
<i class="bi bi-wifi me-1"></i>Проверить соединение
|
||||
</button>
|
||||
<span id="evotor-test-result" class="small"></span>
|
||||
</div>
|
||||
<form method="post" action="/connections/evotor/disconnect"
|
||||
class="mt-2"
|
||||
onsubmit="return confirm('Отключить Эвотор? Кешированные данные каталога останутся.')">
|
||||
<button type="submit" class="outline danger sm">
|
||||
<i class="bi bi-plug me-1"></i>Отключить
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{# ── VK ── #}
|
||||
<article class="card mb-4">
|
||||
<header class="d-flex align-center justify-between">
|
||||
<span><i class="bi bi-badge-vr me-2"></i><strong>ВКонтакте (Маркет)</strong></span>
|
||||
{% if vk %}
|
||||
<span class="badge badge-success"><i class="bi bi-check-circle me-1"></i>Подключено</span>
|
||||
{% else %}
|
||||
<span class="badge badge-secondary">Не подключено</span>
|
||||
{% endif %}
|
||||
</header>
|
||||
|
||||
{% if vk %}
|
||||
<ul class="list-group mb-3">
|
||||
<li class="list-group-item">
|
||||
<span class="text-muted small">Токен</span>
|
||||
<span class="font-monospace small">{{ vk.access_token[:8] }}••••••••</span>
|
||||
</li>
|
||||
{% if vk.vk_user_id %}
|
||||
<li class="list-group-item">
|
||||
<span class="text-muted small">ID сообщества</span>
|
||||
<span class="font-monospace small">{{ vk.vk_user_id }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if vk.first_name or vk.last_name %}
|
||||
<li class="list-group-item">
|
||||
<span class="text-muted small">Аккаунт</span>
|
||||
<span>{{ vk.first_name }} {{ vk.last_name }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="list-group-item">
|
||||
<span class="text-muted small">Подключено</span>
|
||||
<span>{{ vk.connected_at | datefmt }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="text-muted small">Обновлено</span>
|
||||
<span>{{ vk.updated_at | datefmt }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mt-3">
|
||||
<a href="/vk-auth" role="button">
|
||||
<i class="bi bi-box-arrow-in-right me-1"></i>
|
||||
{% if vk %}Переподключить ВКонтакте{% else %}Войти через ВКонтакте{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<details class="mt-3">
|
||||
<summary class="text-muted small">Ввести токен вручную</summary>
|
||||
<form method="post" action="/connections/vk" class="mt-2">
|
||||
<label>
|
||||
Токен доступа VK
|
||||
<input type="text" name="access_token"
|
||||
placeholder="vk1.a.xxxxxxxxxxxxxxxx…"
|
||||
value="{{ vk.access_token if vk else '' }}"
|
||||
required autocomplete="off">
|
||||
</label>
|
||||
<label>
|
||||
ID сообщества ВКонтакте
|
||||
<input type="text" name="vk_group_id"
|
||||
placeholder="Например: 229744980"
|
||||
value="{{ vk.vk_user_id if vk and vk.vk_user_id else '' }}"
|
||||
autocomplete="off">
|
||||
<small class="text-muted">Числовой ID группы/паблика с включённым Маркетом (без минуса)</small>
|
||||
</label>
|
||||
<button type="submit">
|
||||
<i class="bi bi-save me-1"></i>Сохранить
|
||||
</button>
|
||||
</form>
|
||||
</details>
|
||||
|
||||
{% if vk %}
|
||||
<div class="d-flex gap-2 mt-3" style="flex-wrap:wrap; align-items:center;">
|
||||
<button type="button" class="outline sm" onclick="testConnection('vk', this)">
|
||||
<i class="bi bi-wifi me-1"></i>Проверить соединение
|
||||
</button>
|
||||
<span id="vk-test-result" class="small"></span>
|
||||
</div>
|
||||
<form method="post" action="/connections/vk/disconnect"
|
||||
class="mt-2"
|
||||
onsubmit="return confirm('Отключить ВКонтакте?')">
|
||||
<button type="submit" class="outline danger sm">
|
||||
<i class="bi bi-plug me-1"></i>Отключить
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
<div class="g2" style="align-items:start;">
|
||||
|
||||
{# ── Evotor ── #}
|
||||
<div class="card">
|
||||
<div class="card-hd">
|
||||
<div>
|
||||
<div class="card-title"><i class="bi bi-cpu" style="margin-right:6px;"></i>Эвотор</div>
|
||||
<div class="card-sub">Платформа кассовых решений и товарного учёта</div>
|
||||
</div>
|
||||
{% if evotor %}
|
||||
<span class="tag tag-gr"><span class="dot g"></span>Подключено</span>
|
||||
{% else %}
|
||||
<span class="tag tag-dim"><span class="dot d"></span>Не подключено</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if evotor %}
|
||||
<div class="conn-detail" style="margin-bottom:16px;">
|
||||
<div class="conn-row">
|
||||
<span class="conn-k">Токен</span>
|
||||
<span class="conn-v">{{ evotor.access_token[:8] }}••••••••</span>
|
||||
</div>
|
||||
{% if evotor.evotor_user_id %}
|
||||
<div class="conn-row">
|
||||
<span class="conn-k">Evotor User ID</span>
|
||||
<span class="conn-v">{{ evotor.evotor_user_id }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="conn-row">
|
||||
<span class="conn-k">Подключено</span>
|
||||
<span class="conn-v">{{ evotor.connected_at | datefmt }}</span>
|
||||
</div>
|
||||
<div class="conn-row">
|
||||
<span class="conn-k">Обновлено</span>
|
||||
<span class="conn-v">{{ evotor.updated_at | datefmt }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<details {% if not evotor %}open{% endif %} style="margin-bottom:14px;">
|
||||
<summary class="btn btn-outline btn-sm" style="cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;">
|
||||
<i class="bi bi-pencil"></i>
|
||||
{% if evotor %}Обновить токен{% else %}Ввести API-токен{% endif %}
|
||||
</summary>
|
||||
<form method="post" action="/connections/evotor" style="margin-top:12px;">
|
||||
<div class="form-row">
|
||||
<label class="form-lbl">API-токен Эвотор</label>
|
||||
<input class="inp" type="text" name="access_token"
|
||||
placeholder="Вставьте токен из личного кабинета Эвотор"
|
||||
value="{{ evotor.access_token if evotor else '' }}"
|
||||
required autocomplete="off">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="form-lbl">Evotor User ID <span style="font-weight:400;text-transform:none;letter-spacing:0;">(необязательно)</span></label>
|
||||
<input class="inp" type="text" name="evotor_user_id"
|
||||
placeholder="Например: 01234567-89ab-cdef-0123-456789abcdef"
|
||||
value="{{ evotor.evotor_user_id if evotor and evotor.evotor_user_id else '' }}"
|
||||
autocomplete="off">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-sm">
|
||||
<i class="bi bi-save"></i> Сохранить
|
||||
</button>
|
||||
</form>
|
||||
</details>
|
||||
|
||||
{% if evotor %}
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
|
||||
<button type="button" class="btn btn-outline btn-sm" onclick="testConnection('evotor', this)">
|
||||
<i class="bi bi-wifi"></i> Проверить соединение
|
||||
</button>
|
||||
<span id="evotor-test-result" style="font-size:12px;"></span>
|
||||
</div>
|
||||
<form method="post" action="/connections/evotor/disconnect" style="margin-top:10px;"
|
||||
onsubmit="return confirm('Отключить Эвотор? Кешированные данные каталога останутся.')">
|
||||
<button type="submit" class="btn btn-danger btn-sm">
|
||||
<i class="bi bi-plug"></i> Отключить
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# ── VK ── #}
|
||||
<div class="card">
|
||||
<div class="card-hd">
|
||||
<div>
|
||||
<div class="card-title"><i class="bi bi-badge-vr" style="margin-right:6px;"></i>ВКонтакте (Маркет)</div>
|
||||
<div class="card-sub">market.* API, версия 5.199</div>
|
||||
</div>
|
||||
{% if vk %}
|
||||
<span class="tag tag-gr"><span class="dot g"></span>Подключено</span>
|
||||
{% else %}
|
||||
<span class="tag tag-dim"><span class="dot d"></span>Не подключено</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if vk %}
|
||||
<div class="conn-detail" style="margin-bottom:16px;">
|
||||
<div class="conn-row">
|
||||
<span class="conn-k">Токен</span>
|
||||
<span class="conn-v">{{ vk.access_token[:8] }}••••••••</span>
|
||||
</div>
|
||||
{% if vk.vk_user_id %}
|
||||
<div class="conn-row">
|
||||
<span class="conn-k">ID сообщества</span>
|
||||
<span class="conn-v">{{ vk.vk_user_id }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if vk.first_name or vk.last_name %}
|
||||
<div class="conn-row">
|
||||
<span class="conn-k">Аккаунт</span>
|
||||
<span class="conn-v">{{ vk.first_name }} {{ vk.last_name }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="conn-row">
|
||||
<span class="conn-k">Подключено</span>
|
||||
<span class="conn-v">{{ vk.connected_at | datefmt }}</span>
|
||||
</div>
|
||||
<div class="conn-row">
|
||||
<span class="conn-k">Обновлено</span>
|
||||
<span class="conn-v">{{ vk.updated_at | datefmt }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="margin-bottom:14px;">
|
||||
<a href="/vk-auth" class="btn btn-primary btn-sm">
|
||||
<i class="bi bi-box-arrow-in-right"></i>
|
||||
{% if vk %}Переподключить ВКонтакте{% else %}Войти через ВКонтакте{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<details style="margin-bottom:14px;">
|
||||
<summary class="btn btn-outline btn-sm" style="cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;">
|
||||
<i class="bi bi-key"></i> Ввести токен вручную
|
||||
</summary>
|
||||
<form method="post" action="/connections/vk" style="margin-top:12px;">
|
||||
<div class="form-row">
|
||||
<label class="form-lbl">Токен доступа VK</label>
|
||||
<input class="inp" type="text" name="access_token"
|
||||
placeholder="vk1.a.xxxxxxxxxxxxxxxx…"
|
||||
value="{{ vk.access_token if vk else '' }}"
|
||||
required autocomplete="off">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="form-lbl">ID сообщества ВКонтакте</label>
|
||||
<input class="inp" type="text" name="vk_group_id"
|
||||
placeholder="Например: 229744980"
|
||||
value="{{ vk.vk_user_id if vk and vk.vk_user_id else '' }}"
|
||||
autocomplete="off">
|
||||
<div style="font-size:11px;color:#9EA8BE;margin-top:4px;">Числовой ID группы/паблика с включённым Маркетом (без минуса)</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-sm">
|
||||
<i class="bi bi-save"></i> Сохранить
|
||||
</button>
|
||||
</form>
|
||||
</details>
|
||||
|
||||
{% if vk %}
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
|
||||
<button type="button" class="btn btn-outline btn-sm" onclick="testConnection('vk', this)">
|
||||
<i class="bi bi-wifi"></i> Проверить соединение
|
||||
</button>
|
||||
<span id="vk-test-result" style="font-size:12px;"></span>
|
||||
</div>
|
||||
<form method="post" action="/connections/vk/disconnect" style="margin-top:10px;"
|
||||
onsubmit="return confirm('Отключить ВКонтакте?')">
|
||||
<button type="submit" class="btn btn-danger btn-sm">
|
||||
<i class="bi bi-plug"></i> Отключить
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
async function testConnection(provider, btn) {
|
||||
const resultEl = document.getElementById(provider + '-test-result');
|
||||
btn.disabled = true;
|
||||
resultEl.textContent = 'Проверяем…';
|
||||
resultEl.style.color = '';
|
||||
try {
|
||||
const resp = await fetch('/connections/' + provider + '/test', {method: 'POST'});
|
||||
const data = await resp.json();
|
||||
resultEl.textContent = data.message;
|
||||
resultEl.style.color = data.ok ? 'var(--pico-color-green-500, #2d8a4e)' : 'var(--pico-color-red-500, #c0392b)';
|
||||
} catch (e) {
|
||||
resultEl.textContent = 'Ошибка сети';
|
||||
resultEl.style.color = 'var(--pico-color-red-500, #c0392b)';
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
const resultEl = document.getElementById(provider + '-test-result');
|
||||
btn.disabled = true;
|
||||
resultEl.textContent = 'Проверяем…';
|
||||
resultEl.style.color = '';
|
||||
try {
|
||||
const resp = await fetch('/connections/' + provider + '/test', {method: 'POST'});
|
||||
const data = await resp.json();
|
||||
resultEl.textContent = data.message;
|
||||
resultEl.style.color = data.ok ? '#17A865' : '#E53935';
|
||||
} catch (e) {
|
||||
resultEl.textContent = 'Ошибка сети';
|
||||
resultEl.style.color = '#E53935';
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user