gitadmin/Zilant2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[ВОЛК] редактирование площадок
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
gitadmin
2025-12-25 21:29:58 +03:00
parent a25ac707e8
commit 2cbc2a1b46
3 changed files with 617 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/edit_category.html
+277
View File
@@ -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>