переделка интерфейса редактора

templates/edit_post.html

@@ -12,7 +12,8 @@
             margin: 0 auto;
         }
         .preview-image {
-            max-height: 400px;
+            max-width: 200px;
+            max-height: 200px;
             object-fit: contain;
         }
         .required:after {
@@ -41,69 +42,136 @@
                 <form id="post-form">
                     <input type="hidden" id="post-id" value="{{ post_id if post_id else '' }}">
 
-                    <div class="mb-3">
+                    <!-- Заголовок и поле Название вверху -->
-                        <label for="vk_post_id" class="form-label required">VK ID поста</label>
-                        <input type="text" class="form-control" id="vk_post_id" required>
-                        <div class="form-text">Числовой идентификатор поста во ВКонтакте</div>
-                    </div>
-
                     <div class="mb-3">
                         <label for="shortname" class="form-label">Название</label>
                         <input type="text" class="form-control" id="shortname" maxlength="100">
                         <div class="form-text">Короткое имя поста (максимум 100 символов)</div>
                     </div>
 
-                    <div class="mb-3">
+                    <!-- Секция с площадкой слева и изображением справа -->
-                        <label for="action_number" class="form-label">Номер события в системе расписания</label>
+                    <div class="row mb-3">
-                        <input type="number" class="form-control" id="action_number">
+                        <div class="col-md-6">
-                    </div>
+                            <label for="auto_unit" class="form-label">Площадка:</label>
-
-                    <div class="mb-3">
-                        <label for="auto_unit" class="form-label">Площадка</label>
                             <select class="form-control" id="auto_unit">
                                 <option value="">Выберите площадку</option>
                             </select>
                             <div class="form-text">Выберите площадку из списка доступных</div>
                         </div>
+                        <div class="col-md-6 text-center">
+                            <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>
 
+                    <!-- VK ID -->
+                    <div class="row mb-3">
+                        <div class="col-md-6">
+                            <label for="vk_post_id" class="form-label">VK ID:</label>
+                            <input type="text" class="form-control" id="vk_post_id" required>
+                            <div class="form-text">Числовой идентификатор поста во ВКонтакте</div>
+                        </div>
+                    </div>
+
+                    <!-- Переключатели -->
+                    <div class="row mb-3">
+                        <div class="col-md-3">
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="is_event">
+                                <label class="form-check-label" for="is_event">Событие</label>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="is_poll">
+                                <label class="form-check-label" for="is_poll">Опрос</label>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="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>
+                        <div class="col-md-3">
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="published_in_tg">
+                                <label class="form-check-label" for="published_in_tg">Опубликовано в TG</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Текстовое поле поста -->
                     <div class="mb-3">
                         <label for="text" class="form-label required">Текст поста</label>
                         <textarea class="form-control" id="text" rows="4" required></textarea>
                     </div>
 
-                    <div class="mb-3">
+                    <!-- URL изображения -->
-                        <label for="image_url" class="form-label">URL изображения</label>
+                    <div class="row mb-3">
+                        <div class="col-md-2">
+                            <label for="image_url" class="form-label">Картинка:</label>
+                        </div>
+                        <div class="col-md-10">
                             <input type="url" class="form-control" id="image_url">
                             <div class="form-text">Ссылка на изображение для поста</div>
                         </div>
-
-                    <div class="mb-3 text-center" id="image-preview-container" style="display: none;">
-                        <img id="image-preview" class="preview-image img-thumbnail">
                     </div>
 
-                    <div class="mb-3">
+                    <!-- URL поста ВК с датой -->
-                        <label for="vk_post_url" class="form-label">Ссылка на пост VK</label>
+                    <div class="row mb-3">
+                        <div class="col-md-2">
+                            <label for="vk_post_url" class="form-label">Пост в ВК:</label>
+                        </div>
+                        <div class="col-md-6">
                             <input type="url" class="form-control" id="vk_post_url">
                         </div>
-
+                        <div class="col-md-2">
-                    <div class="mb-3">
+                            <label for="published_at" class="form-label">датирован:</label>
-                        <label for="published_at" class="form-label">Дата публикации</label>
+                        </div>
+                        <div class="col-md-2">
                             <input type="datetime-local" class="form-control" id="published_at">
-                        <div class="form-text">Формат: ГГГГ-ММ-ДД ЧЧ:ММ</div>
+                        </div>
                     </div>
 
-                    <!-- Новое поле: is_event -->
+                    <!-- Дата публикации в TG -->
-                    <div class="mb-3 form-check form-switch">
+                    <div class="row mb-3">
-                        <input class="form-check-input" type="checkbox" id="is_event">
+                        <div class="col-md-4">
-                        <label class="form-check-label" for="is_event">Это событие</label>
+                            <label for="tg_publication_date" class="form-label">Опубликовано в TG:</label>
+                        </div>
+                        <div class="col-md-8">
+                            <input type="datetime-local" class="form-control" id="tg_publication_date">
+                        </div>
                     </div>
 
-                    <div class="mb-3 form-check form-switch">
+                    <!-- ID TG в одну строку -->
-                        <input class="form-check-input" type="checkbox" id="is_poll">
+                    <div class="row mb-3">
-                        <label class="form-check-label" for="is_poll">Это опрос</label>
+                        <div class="col-md-2">
+                            <label for="tg_message_id" class="form-label">ID TG:</label>
+                        </div>
+                        <div class="col-md-2">
+                            <input type="number" class="form-control" id="tg_message_id">
+                        </div>
+                        <div class="col-md-2">
+                            <label for="tg_poll_id" class="form-label">ID опроса TG:</label>
+                        </div>
+                        <div class="col-md-2">
+                            <input type="number" class="form-control" id="tg_poll_id">
+                        </div>
+                        <div class="col-md-2">
+                            <label for="tg_markpost_id" class="form-label">ID отметок TG:</label>
+                        </div>
+                        <div class="col-md-2">
+                            <input type="number" class="form-control" id="tg_markpost_id">
+                        </div>
                     </div>
 
+                    <!-- Блок параметров опроса -->
                     <div id="poll-fields" style="display: none;">
+                        <div class="border-top mt-4 pt-3">
+                            <h5>Параметры опроса</h5>
+                            
                             <div class="mb-3">
                                 <label for="poll_question" class="form-label">Вопрос опроса</label>
                                 <input type="text" class="form-control" id="poll_question">
@@ -124,44 +192,13 @@
                                 <label for="poll_end_date" class="form-label">Дата окончания опроса</label>
                                 <input type="datetime-local" class="form-control" id="poll_end_date">
                             </div>
-                    </div>
-
-                    <div class="border-top mt-4 pt-3">
-                        <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="mb-3 form-check form-switch">
-                            <input class="form-check-input" type="checkbox" id="published_in_tg">
-                            <label class="form-check-label" for="published_in_tg">Опубликовано в Telegram</label>
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="tg_publication_date" class="form-label">Дата публикации в Telegram</label>
-                            <input type="datetime-local" class="form-control" id="tg_publication_date">
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="tg_message_id" class="form-label">ID сообщения в Telegram</label>
-                            <input type="number" class="form-control" id="tg_message_id">
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="tg_poll_id" class="form-label">ID опроса в Telegram</label>
-                            <input type="number" class="form-control" id="tg_poll_id">
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="tg_markpost_id" class="form-label">ID поста для отметок в Telegram</label>
-                            <input type="number" class="form-control" id="tg_markpost_id">
-                        </div>
 
                             <div class="mb-3">
                                 <label for="tg_poll_results" class="form-label">Результаты опроса</label>
                                 <textarea class="form-control" id="tg_poll_results" rows="4"></textarea>
                             </div>
                         </div>
+                    </div>
 
                     <div class="d-flex justify-content-end mt-4">
                         <button type="button" class="btn btn-secondary me-2" id="cancel-btn">Отмена</button>
@@ -282,17 +319,25 @@
                 // Заполняем форму
                 document.getElementById('vk_post_id').value = post.vk_post_id || '';
                 document.getElementById('shortname').value = post.shortname || '';
-                document.getElementById('action_number').value = post.action_number || '';
                 document.getElementById('auto_unit').value = post.auto_unit || '';
                 document.getElementById('text').value = post.text || '';
                 document.getElementById('image_url').value = post.image_url || '';
                 document.getElementById('vk_post_url').value = post.vk_post_url || '';
 
                 // Форматирование дат для input[type=datetime-local]
+                // Конвертация UTC в локальное время с округлением до минут
                 const formatForInput = (dateStr) => {
                     if (!dateStr) return '';
                     const date = new Date(dateStr);
-                    return date.toISOString().slice(0, 16);
+                    // Округляем до минут (убираем секунды и миллисекунды)
+                    date.setSeconds(0, 0);
+                    // Возвращаем в локальном времени в формате YYYY-MM-DDTHH:MM
+                    const year = date.getFullYear();
+                    const month = String(date.getMonth() + 1).padStart(2, '0');
+                    const day = String(date.getDate()).padStart(2, '0');
+                    const hours = String(date.getHours()).padStart(2, '0');
+                    const minutes = String(date.getMinutes()).padStart(2, '0');
+                    return `${year}-${month}-${day}T${hours}:${minutes}`;
                 };
 
                 document.getElementById('published_at').value = formatForInput(post.published_at);
@@ -329,6 +374,16 @@
             }
         }
 
+        // Функция конвертации локального времени в UTC для отправки на сервер
+        const convertLocalToUTC = (localString) => {
+            if (!localString) return null;
+            const date = new Date(localString);
+            // Округляем до минут
+            date.setSeconds(0, 0);
+            // Возвращаем в UTC формате для сервера
+            return date.toISOString().slice(0, 19).replace('T', ' ');
+        };
+
         // Сохранение поста
         async function savePost() {
             const postId = document.getElementById('post-id').value;
@@ -349,21 +404,20 @@
                 const formData = {
                     vk_post_id: document.getElementById('vk_post_id').value,
                     shortname: document.getElementById('shortname').value,
-                    action_number: document.getElementById('action_number').value,
                     auto_unit: document.getElementById('auto_unit').value,
                     text: document.getElementById('text').value,
                     image_url: document.getElementById('image_url').value,
                     vk_post_url: document.getElementById('vk_post_url').value,
-                    published_at: document.getElementById('published_at').value,
+                    published_at: convertLocalToUTC(document.getElementById('published_at').value),
                     is_event: document.getElementById('is_event').checked,  // Новое поле
                     is_poll: document.getElementById('is_poll').checked,
                     poll_question: document.getElementById('poll_question').value,
                     poll_options: document.getElementById('poll_options').value,
                     poll_multiple: document.getElementById('poll_multiple').checked,
-                    poll_end_date: document.getElementById('poll_end_date').value,
+                    poll_end_date: convertLocalToUTC(document.getElementById('poll_end_date').value),
                     marked_for_publication: document.getElementById('marked_for_publication').checked,
                     published_in_tg: document.getElementById('published_in_tg').checked,
-                    tg_publication_date: document.getElementById('tg_publication_date').value,
+                    tg_publication_date: convertLocalToUTC(document.getElementById('tg_publication_date').value),
                     tg_message_id: document.getElementById('tg_message_id').value,
                     tg_poll_id: document.getElementById('tg_poll_id').value,
                     tg_markpost_id: document.getElementById('tg_markpost_id').value,