evo-sync/web/templates/connections.html

{% extends "base.html" %}
{% block title %}Подключения — Мои Товары{% endblock %}
{% block page_title %}Подключения{% endblock %}

{% block content %}
<div class="pg-title">Подключения</div>
<div class="pg-sub">Управление интеграциями с Эвотор и VK Market</div>

{% if request.query_params.get('success') %}
<div class="alert alert-gr">
  <span><i class="bi bi-check-circle"></i></span>
  <div>Подключение сохранено.</div>
</div>
{% endif %}

<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 ? '#17A865' : '#E53935';
  } catch (e) {
    resultEl.textContent = 'Ошибка сети';
    resultEl.style.color = '#E53935';
  } finally {
    btn.disabled = false;
  }
}
</script>
{% endblock %}