120 lines
4.5 KiB
HTML
120 lines
4.5 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Отправить сообщение{% endblock %}
|
||
|
||
{% block content %}
|
||
<h1 class="text-2xl font-semibold">Отправить сообщение</h1>
|
||
<p class="mt-1 text-sm text-slate-600">
|
||
Сообщение уйдёт в основной чат <span class="font-mono">{{ chat_id }}</span> от имени бота.
|
||
</p>
|
||
|
||
{% if saved %}
|
||
<div class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800">
|
||
Сообщение отправлено.
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if errors %}
|
||
<ul class="mt-4 list-disc rounded-lg border border-red-200 bg-red-50 p-3 pl-8 text-sm text-red-700">
|
||
{% for error in errors %}<li>{{ error }}</li>{% endfor %}
|
||
</ul>
|
||
{% endif %}
|
||
|
||
<form
|
||
method="post"
|
||
action="/send"
|
||
enctype="multipart/form-data"
|
||
class="mt-6 max-w-3xl space-y-4"
|
||
onsubmit="return confirm('Отправить сообщение в чат?');"
|
||
>
|
||
<input type="hidden" name="csrf_token" value="{{ request.session.get('csrf', '') }}" />
|
||
|
||
<div>
|
||
<label class="text-sm font-medium text-slate-700">Текст</label>
|
||
<div class="mt-1">
|
||
{% with editor_id="send-text", editor_name="text", editor_value=text, editor_max=max_message, editor_rows=12 %}
|
||
{% include "partials/editor.html" %}
|
||
{% endwith %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid gap-3 lg:grid-cols-2">
|
||
<div>
|
||
<label class="text-xs text-slate-500">Кнопки — по одной в строке: <span class="font-mono">Текст | https://…</span></label>
|
||
<textarea
|
||
name="buttons"
|
||
rows="3"
|
||
placeholder="Канал | https://t.me/…"
|
||
class="mt-1 w-full rounded-lg border border-slate-300 p-2 font-mono text-xs focus:border-sky-500 focus:outline-none"
|
||
>{{ buttons_text }}</textarea>
|
||
<p class="mt-1 text-xs text-slate-500">До {{ max_buttons }} кнопок.</p>
|
||
</div>
|
||
<div>
|
||
<label class="text-xs text-slate-500">Картинка (JPEG/PNG/WebP, до 5 МБ)</label>
|
||
<input type="file" name="image" accept="image/jpeg,image/png,image/webp"
|
||
class="mt-2 block w-full text-xs text-slate-600" />
|
||
<p class="mt-1 text-xs text-slate-500">С фото текст уходит подписью — не больше {{ max_caption }} символов.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<button type="submit" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700">
|
||
Отправить
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
|
||
hx-post="/preview"
|
||
hx-include="closest form"
|
||
hx-target="#preview"
|
||
hx-swap="innerHTML"
|
||
>
|
||
Предпросмотр
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="mt-8 max-w-3xl">
|
||
<h2 class="text-lg font-medium">Предпросмотр</h2>
|
||
<div id="preview" class="mt-2">
|
||
<p class="text-sm text-slate-400">Нажмите «Предпросмотр», чтобы увидеть текст с тестовыми тегами.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-10">
|
||
<h2 class="text-lg font-medium">Последние отправки</h2>
|
||
{% if recent %}
|
||
<div class="mt-3 overflow-x-auto rounded-lg border border-slate-200 bg-white">
|
||
<table class="min-w-full divide-y divide-slate-200 text-sm">
|
||
<thead class="bg-slate-50 text-left text-slate-600">
|
||
<tr>
|
||
<th class="px-4 py-3 font-medium">Когда</th>
|
||
<th class="px-4 py-3 font-medium">Текст</th>
|
||
<th class="px-4 py-3 font-medium">Фото</th>
|
||
<th class="px-4 py-3 font-medium">Статус</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-slate-100">
|
||
{% for item in recent %}
|
||
<tr>
|
||
<td class="px-4 py-3 text-slate-600">{{ item.sent_at.strftime("%d.%m.%Y %H:%M") }}</td>
|
||
<td class="px-4 py-3 text-slate-700">{{ item.preview }}</td>
|
||
<td class="px-4 py-3">{{ "да" if item.has_image else "—" }}</td>
|
||
<td class="px-4 py-3">
|
||
{% if item.success %}
|
||
<span class="text-emerald-700">отправлено</span>
|
||
{% else %}
|
||
<span class="text-red-600">{{ item.error or "ошибка" }}</span>
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{% else %}
|
||
<p class="mt-2 text-sm text-slate-500">Отправок ещё не было.</p>
|
||
{% endif %}
|
||
</div>
|
||
{% endblock %}
|