This commit is contained in:
@@ -0,0 +1,277 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% if category_id %}Редактирование площадки{% else %}Добавление площадки{% endif %}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
.form-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.preview-image {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.required:after {
|
||||
content: " *";
|
||||
color: red;
|
||||
}
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1050;
|
||||
}
|
||||
.form-label {
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
height: 38px;
|
||||
}
|
||||
.form-control, .form-select {
|
||||
height: 38px;
|
||||
}
|
||||
textarea.form-control {
|
||||
height: auto;
|
||||
}
|
||||
.label-narrow {
|
||||
flex: 0 0 140px;
|
||||
}
|
||||
.field-wide {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container py-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2>{% if category_id %}Редактирование площадки{% else %}Добавление площадки{% endif %}</h2>
|
||||
<a href="#" id="back-button" class="btn btn-outline-secondary">
|
||||
<i class="fas fa-arrow-left me-1"></i> Назад
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card form-container">
|
||||
<div class="card-body">
|
||||
<form id="category-form">
|
||||
<input type="hidden" id="category-id" value="{{ category_id if category_id else '' }}">
|
||||
|
||||
<!-- ID -->
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="label-narrow">
|
||||
<label for="id" class="form-label required">ID:</label>
|
||||
</div>
|
||||
<div class="field-wide">
|
||||
<input type="text" class="form-control" id="id" maxlength="255" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Название -->
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="label-narrow">
|
||||
<label for="title" class="form-label">Название:</label>
|
||||
</div>
|
||||
<div class="field-wide">
|
||||
<input type="text" class="form-control" id="title" maxlength="2048">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Описание -->
|
||||
<div class="mb-3">
|
||||
<label for="description" class="form-label">Описание:</label>
|
||||
<textarea class="form-control" id="description" rows="6"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- URL изображения и предпросмотр -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="label-narrow">
|
||||
<label for="image_url" class="form-label">Картинка:</label>
|
||||
</div>
|
||||
<div class="field-wide">
|
||||
<input type="url" class="form-control" id="image_url" maxlength="2048">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 text-end">
|
||||
<div id="image-preview-container" style="display: none;">
|
||||
<img id="image-preview" class="preview-image img-thumbnail" style="max-width: 200px; max-height: 200px; object-fit: contain;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TG ID -->
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="label-narrow">
|
||||
<label for="tg_id" class="form-label">TG ID:</label>
|
||||
</div>
|
||||
<div style="flex: 0 0 200px;">
|
||||
<input type="text" class="form-control" id="tg_id" pattern="[0-9]*" inputmode="numeric">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Переключатель публикации -->
|
||||
<div class="mb-3 form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="marked_for_publication">
|
||||
<label class="form-check-label" for="marked_for_publication">Отметить для публикации</label>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-end mt-4">
|
||||
<button type="button" class="btn btn-secondary me-2" id="cancel-btn">Отмена</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{% if category_id %}Обновить{% else %}Создать{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Контейнер для уведомлений -->
|
||||
<div class="toast-container">
|
||||
<div id="success-toast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
<i class="fas fa-check-circle me-2"></i> Площадка успешно сохранена!
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
const PREFIX = "{{ g.prefix }}";
|
||||
console.log("Category Editor Prefix is:", PREFIX);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const categoryId = document.getElementById('category-id').value;
|
||||
const form = document.getElementById('category-form');
|
||||
const imageUrlInput = document.getElementById('image_url');
|
||||
const imagePreviewContainer = document.getElementById('image-preview-container');
|
||||
const imagePreview = document.getElementById('image-preview');
|
||||
const successToast = new bootstrap.Toast(document.getElementById('success-toast'));
|
||||
|
||||
// Обработчики кнопок отмены и назад
|
||||
const cancelHandler = () => {
|
||||
if (categoryId) {
|
||||
window.location.href = `${PREFIX}/?selected_category=${categoryId}&tab=categories`;
|
||||
} else {
|
||||
window.location.href = `${PREFIX}/?tab=categories`;
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('cancel-btn').addEventListener('click', cancelHandler);
|
||||
document.getElementById('back-button').addEventListener('click', cancelHandler);
|
||||
|
||||
// Предпросмотр изображения
|
||||
imageUrlInput.addEventListener('change', () => {
|
||||
const url = imageUrlInput.value.trim();
|
||||
if (url) {
|
||||
imagePreview.src = `${PREFIX}/image_proxy?url=${encodeURIComponent(url)}`;
|
||||
imagePreviewContainer.style.display = 'block';
|
||||
} else {
|
||||
imagePreviewContainer.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Загрузка данных категории при редактировании
|
||||
if (categoryId) {
|
||||
loadCategoryData(categoryId);
|
||||
}
|
||||
|
||||
// Обработка отправки формы
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
await saveCategory(categoryId);
|
||||
});
|
||||
});
|
||||
|
||||
// Загрузка данных категории
|
||||
async function loadCategoryData(categoryId) {
|
||||
try {
|
||||
const response = await fetch(`${PREFIX}/api/categories/${encodeURIComponent(categoryId)}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Площадка не найдена');
|
||||
}
|
||||
|
||||
const category = await response.json();
|
||||
|
||||
// Заполняем форму
|
||||
document.getElementById('id').value = category.id || '';
|
||||
document.getElementById('title').value = category.title || '';
|
||||
document.getElementById('description').value = category.description || '';
|
||||
document.getElementById('image_url').value = category.image_url || '';
|
||||
document.getElementById('tg_id').value = category.tg_id || '';
|
||||
document.getElementById('marked_for_publication').checked = category.marked_for_publication || false;
|
||||
|
||||
// Показываем предпросмотр изображения, если есть
|
||||
if (category.image_url) {
|
||||
const imagePreview = document.getElementById('image-preview');
|
||||
const imagePreviewContainer = document.getElementById('image-preview-container');
|
||||
imagePreview.src = `${PREFIX}/image_proxy?url=${encodeURIComponent(category.image_url)}`;
|
||||
imagePreviewContainer.style.display = 'block';
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Ошибка загрузки данных площадки: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Сохранение категории
|
||||
async function saveCategory(categoryId) {
|
||||
const form = document.getElementById('category-form');
|
||||
const formData = {
|
||||
id: document.getElementById('id').value.trim(),
|
||||
title: document.getElementById('title').value.trim(),
|
||||
description: document.getElementById('description').value.trim(),
|
||||
image_url: document.getElementById('image_url').value.trim(),
|
||||
tg_id: document.getElementById('tg_id').value.trim() || null,
|
||||
marked_for_publication: document.getElementById('marked_for_publication').checked
|
||||
};
|
||||
|
||||
if (!formData.id) {
|
||||
alert('ID площадки обязателен для заполнения');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const url = categoryId
|
||||
? `${PREFIX}/api/categories/${encodeURIComponent(categoryId)}`
|
||||
: `${PREFIX}/api/categories`;
|
||||
const method = categoryId ? 'PUT' : 'POST';
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.success) {
|
||||
const successToast = new bootstrap.Toast(document.getElementById('success-toast'));
|
||||
successToast.show();
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = `${PREFIX}/?selected_category=${encodeURIComponent(formData.id)}&tab=categories`;
|
||||
}, 1000);
|
||||
} else {
|
||||
throw new Error(result.error || 'Ошибка сохранения площадки');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Ошибка сохранения площадки: ' + error.message);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+166
-6
@@ -702,6 +702,7 @@
|
||||
<th class="sortable-header">ID</th>
|
||||
<th class="sortable-header">Название</th>
|
||||
<th class="sortable-header">Статус</th>
|
||||
<th class="text-end">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
@@ -711,7 +712,7 @@
|
||||
<table class="table table-hover mb-0">
|
||||
<tbody id="categories-table">
|
||||
<tr>
|
||||
<td colspan="3" class="text-center py-5">
|
||||
<td colspan="4" class="text-center py-5">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Загрузка...</span>
|
||||
</div>
|
||||
@@ -783,6 +784,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно подтверждения удаления площадки -->
|
||||
<div class="modal fade" id="deleteCategoryModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Подтверждение удаления</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p id="delete-category-message">Вы уверены, что хотите удалить эту площадку? Это действие нельзя отменить.</p>
|
||||
<input type="hidden" id="delete-category-id">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
|
||||
<button type="button" class="btn btn-danger" id="confirm-category-delete">Удалить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно для выбора площадок -->
|
||||
<div class="modal fade" id="venuesModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
@@ -918,6 +939,15 @@
|
||||
const eventId = document.getElementById('delete-event-id').value;
|
||||
deleteEvent(eventId);
|
||||
});
|
||||
{% if g.workmode == 'VOLK' %}
|
||||
const confirmCategoryDeleteBtn = document.getElementById('confirm-category-delete');
|
||||
if (confirmCategoryDeleteBtn) {
|
||||
confirmCategoryDeleteBtn.addEventListener('click', () => {
|
||||
const categoryId = document.getElementById('delete-category-id').value;
|
||||
deleteCategory(categoryId);
|
||||
});
|
||||
}
|
||||
{% endif %}
|
||||
// Обработчики для вкладок
|
||||
document.getElementById('posts-tab').addEventListener('click', () => {
|
||||
if (document.getElementById('posts-table').children.length === 1) {
|
||||
@@ -1848,7 +1878,7 @@
|
||||
if (categories.length === 0) {
|
||||
tableBody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="3" class="text-center py-5 text-muted">
|
||||
<td colspan="4" class="text-center py-5 text-muted">
|
||||
<i class="fas fa-inbox fa-3x mb-3"></i>
|
||||
<p>Нет доступных площадок</p>
|
||||
</td>
|
||||
@@ -1872,15 +1902,42 @@
|
||||
<td>${category.id || '-'}</td>
|
||||
<td class="category-name-preview" title="${category.title || ''}">${category.title || 'Без названия'}</td>
|
||||
<td>${publicationBadge}${publishedBadge}</td>
|
||||
<td class="text-end action-buttons">
|
||||
<button class="btn btn-sm btn-outline-warning edit-category-btn">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-danger delete-category-btn">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>`;
|
||||
tableBody.innerHTML += row;
|
||||
});
|
||||
// Добавляем обработчики событий для кнопок
|
||||
document.querySelectorAll('.edit-category-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const categoryId = e.target.closest('tr').dataset.id;
|
||||
window.location.href = `${PREFIX}/edit_category/${encodeURIComponent(categoryId)}`;
|
||||
});
|
||||
});
|
||||
document.querySelectorAll('.delete-category-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const categoryId = e.target.closest('tr').dataset.id;
|
||||
document.getElementById('delete-category-id').value = categoryId;
|
||||
// Проверяем наличие привязанных событий
|
||||
checkCategoryEventsBeforeDelete(categoryId);
|
||||
});
|
||||
});
|
||||
// Клик по строке категории
|
||||
document.querySelectorAll('.category-row').forEach(row => {
|
||||
row.addEventListener('click', (e) => {
|
||||
const categoryId = row.dataset.id;
|
||||
showCategoryDetails(categoryId);
|
||||
highlightSelectedCategory(categoryId);
|
||||
if (!e.target.closest('.action-buttons')) {
|
||||
const categoryId = row.dataset.id;
|
||||
showCategoryDetails(categoryId);
|
||||
highlightSelectedCategory(categoryId);
|
||||
}
|
||||
});
|
||||
});
|
||||
// Переинициализируем разделители колонок для категорий
|
||||
@@ -1891,7 +1948,7 @@
|
||||
} catch (error) {
|
||||
tableBody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="3" class="text-center py-5 text-danger">
|
||||
<td colspan="4" class="text-center py-5 text-danger">
|
||||
<i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
|
||||
<p>Ошибка загрузки данных</p>
|
||||
<button class="btn btn-sm btn-outline-primary mt-2" onclick="loadCategoriesList()">
|
||||
@@ -1952,6 +2009,19 @@
|
||||
// Создаем HTML для деталей
|
||||
let detailsHtml = `
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div></div>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-info me-2" id="toggle-category-pub-btn">
|
||||
${category.marked_for_publication ?
|
||||
'<i class="fas fa-times-circle me-1"></i>Снять с публикации' :
|
||||
'<i class="fas fa-check-circle me-1"></i>Отметить для публикации'}
|
||||
</button>
|
||||
<button class="btn btn-sm btn-warning" onclick="location.href='${PREFIX}/edit_category/${encodeURIComponent(category.id)}'">
|
||||
<i class="fas fa-edit me-1"></i>Редактировать
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8">
|
||||
<div class="mb-2">
|
||||
@@ -1995,6 +2065,14 @@
|
||||
detailsHtml += `</div>`;
|
||||
detailsPanel.innerHTML = detailsHtml;
|
||||
|
||||
// Обработчик для кнопки переключения публикации категории
|
||||
const togglePubBtn = document.getElementById('toggle-category-pub-btn');
|
||||
if (togglePubBtn) {
|
||||
togglePubBtn.addEventListener('click', () => {
|
||||
toggleCategoryPublication(category.id);
|
||||
});
|
||||
}
|
||||
|
||||
// Проверяем, загрузилось ли изображение
|
||||
if (category.image_url) {
|
||||
const img = document.getElementById('category-image');
|
||||
@@ -2028,6 +2106,88 @@
|
||||
console.error('Ошибка загрузки деталей категории:', error);
|
||||
}
|
||||
}
|
||||
// Переключение статуса публикации категории
|
||||
async function toggleCategoryPublication(categoryId) {
|
||||
try {
|
||||
const response = await fetch(`${PREFIX}/api/categories/${encodeURIComponent(categoryId)}/toggle_publication`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
});
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
// Обновляем детали категории
|
||||
showCategoryDetails(categoryId);
|
||||
// Обновляем список категорий
|
||||
loadCategoriesList();
|
||||
} else {
|
||||
alert('Ошибка изменения статуса публикации: ' + (data.error || 'неизвестная ошибка'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка переключения статуса публикации:', error);
|
||||
alert('Произошла ошибка при изменении статуса публикации');
|
||||
}
|
||||
}
|
||||
// Проверка наличия событий перед удалением категории
|
||||
async function checkCategoryEventsBeforeDelete(categoryId) {
|
||||
try {
|
||||
const response = await fetch(`${PREFIX}/api/categories/${encodeURIComponent(categoryId)}/events_count`);
|
||||
const data = await response.json();
|
||||
const eventCount = data.count || 0;
|
||||
|
||||
if (eventCount > 0) {
|
||||
const message = `У площадки есть ${eventCount} привязанных событий. Вы уверены, что хотите удалить эту площадку? Это действие нельзя отменить.`;
|
||||
document.getElementById('delete-category-message').textContent = message;
|
||||
} else {
|
||||
document.getElementById('delete-category-message').textContent = 'Вы уверены, что хотите удалить эту площадку? Это действие нельзя отменить.';
|
||||
}
|
||||
|
||||
const deleteModal = new bootstrap.Modal(document.getElementById('deleteCategoryModal'));
|
||||
deleteModal.show();
|
||||
} catch (error) {
|
||||
console.error('Ошибка проверки событий:', error);
|
||||
// Показываем модальное окно без проверки
|
||||
document.getElementById('delete-category-message').textContent = 'Вы уверены, что хотите удалить эту площадку? Это действие нельзя отменить.';
|
||||
const deleteModal = new bootstrap.Modal(document.getElementById('deleteCategoryModal'));
|
||||
deleteModal.show();
|
||||
}
|
||||
}
|
||||
// Удаление категории
|
||||
async function deleteCategory(categoryId) {
|
||||
try {
|
||||
const response = await fetch(`${PREFIX}/api/categories/${encodeURIComponent(categoryId)}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteCategoryModal'));
|
||||
deleteModal.hide();
|
||||
loadCategoriesList();
|
||||
// Сбрасываем детали категории
|
||||
document.getElementById('category-details').innerHTML = `
|
||||
<div class="text-center text-muted py-5">
|
||||
<i class="fas fa-info-circle fa-3x mb-3"></i>
|
||||
<p>Выберите площадку для просмотра деталей</p>
|
||||
</div>`;
|
||||
} else {
|
||||
if (result.error === 'Cannot delete category with linked events') {
|
||||
alert(`Невозможно удалить площадку: у неё есть ${result.event_count} привязанных событий.`);
|
||||
} else {
|
||||
alert('Ошибка удаления площадки: ' + (result.error || 'неизвестная ошибка'));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка удаления площадки:', error);
|
||||
alert('Произошла ошибка при удалении площадки');
|
||||
}
|
||||
}
|
||||
// Функция загрузки постов
|
||||
async function loadPosts() {
|
||||
const tableBody = document.getElementById('posts-table');
|
||||
|
||||
Reference in New Issue
Block a user