From d2c6e0a5b242309187d9d494307afe767d5a9c29 Mon Sep 17 00:00:00 2001
From: winet <tolya.bogomolov2019@gmail.com>
Date: Thu, 7 Mar 2024 16:18:21 +1000
Subject: [PATCH] tabs

---
 app/blueprints/frontend/static/tabs.js     |  35 +++++
 app/blueprints/frontend/templates/parse.j2 | 175 +++++++++++----------
 2 files changed, 123 insertions(+), 87 deletions(-)
 create mode 100644 app/blueprints/frontend/static/tabs.js

diff --git a/app/blueprints/frontend/static/tabs.js b/app/blueprints/frontend/static/tabs.js
new file mode 100644
index 0000000..dee11f5
--- /dev/null
+++ b/app/blueprints/frontend/static/tabs.js
@@ -0,0 +1,35 @@
+const tabs_lists = document.querySelectorAll('.nav-tabs[role="tablist"]');
+let tabs = [];
+
+tabs_lists.forEach((tabs_list) => {
+    tabs = [...tabs, ...tabs_list.querySelectorAll('[role="tab"]')];
+})
+
+tabs.forEach((tab) => {
+    tab.addEventListener('hide.bs.tab', event => {
+        const id_content_hide = event.target.getAttribute('data-bs-target');
+        const id_content_show = event.relatedTarget.getAttribute('data-bs-target');
+
+        console.log('==== Hide ====');
+        const content_hide = document.querySelector(id_content_hide);
+        content_hide.querySelectorAll('input, textarea, button').forEach((el) => {
+            console.log(el);
+            el.disabled = true;
+        });
+
+        console.log('==== Show ====');
+        const content_show = document.querySelector(id_content_show);
+        content_show.querySelectorAll('input, textarea, button').forEach((el) => {
+            console.log(el);
+            el.disabled = false;
+        });
+    });
+
+    if (!tab.getAttribute('aria-selected')) {
+        const id_content_hide = tab.getAttribute('data-bs-target')
+        const content_hide = document.querySelector(`#${id_content_hide}`);
+        content_hide.querySelectorAll('input, textarea, button').forEach((el) => {
+            el.disabled = true;
+        });
+    }
+})
\ No newline at end of file
diff --git a/app/blueprints/frontend/templates/parse.j2 b/app/blueprints/frontend/templates/parse.j2
index bbdc5d5..2a633dd 100644
--- a/app/blueprints/frontend/templates/parse.j2
+++ b/app/blueprints/frontend/templates/parse.j2
@@ -1,101 +1,102 @@
 {% extends "base.j2" %}
 
 {% block title %}
-PaperParser: Парсинг
+Парсинг
 {% endblock title %}
 
 {% block main %}
-<div class="container">
-    <!-- Actions -->
-    <section id="actions-section" class="mb-3">
-        <div class="separator">
-            <h2>Действия</h2>
-            <hr class="divider">
-        </div>
-        <section id="actions-parse-add-section">
-            <label for="" class="form-label">Парсинг пользователей и добавление в группу</label>
-            <div class="row row-cols-1 row-cols-sm-2">
-                <div class="col mb-3">
-                    <form hx-post="/api/users/parse/{{session_id}}" hx-swap="innerHTML" hx-target="#cards-grid" hx-indicator="#loading-spinner" class="input-group" id="group-from-form">
+<form method="post" action="/test" class="container">
+    <div class="row">
+        <!-- Actions -->
+        <section class="col-lg mb-3">
+            <div class="separator">
+                <h2>Действия</h2>
+                <hr class="divider">
+            </div>
+            <nav class="mb-3">
+                <div class="nav nav-tabs" id="nav-tab" role="tablist">
+                    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#actions-parse-section" type="button" role="tab" aria-controls="actions-parse-section" aria-selected="true">Сбор</button>
+                    <button class="nav-link" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#actions-add-section" type="button" role="tab" aria-controls="actions-add-section" aria-selected="false">Добавление</button>
+                    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#actions-message-section" type="button" role="tab" aria-controls="actions-message-section" aria-selected="false">Рассылка</button>
+                </div>
+            </nav>
+            <div class="tab-content" id="nav-tabContent">
+                
+                <section class="tab-pane fade show active" id="actions-parse-section">
                         <div class="form-floating">
-                            <input type="text" class="form-control" name="group" id="group-from-input"
-                                placeholder="Группа для парсинга">
+                            <input type="text" class="form-control" name="group" id="group-from-input" placeholder="Группа для парсинга">
                             <label for="group-from-input">Группа для парсинга</label>
                         </div>
-                        <button type="submit" class="btn btn-outline-primary">Спарсить</button>
-                    </form>
-                </div>
-                <div class="col mb-3">
-                    <form hx-post="/api/tasks/session/{{session_id}}" hx-swap="none" hx-indicator="#loading-spinner" class="input-group" id="group-to-form">
-                        <div class="form-floating">
-                            <input type="text" name="url" class="form-control" id="group-to-input"
-                                placeholder="Группа, в которую нужно добавить">
-                            <label for="group-to-input">Группа для добавления</label>
+                </section>
+                
+                <section class="tab-pane fade" id="actions-add-section">
+                    <div class="form-floating">
+                        <input type="text" name="url" class="form-control" id="group-to-input"
+                            placeholder="Группа для добавлнеия">
+                        <label for="group-to-input">Группа для добавления</label>
+                    </div>
+                </section>
+
+                
+                <section class="tab-pane fade" id="actions-message-section">
+                        <div class="d-flex flex-column gap-3">
+                            <div>
+                                <textarea class="form-control" name="message" rows="8" id="message-textarea"
+                                    placeholder="Напишите здесь своё сообщение"></textarea>
+                            </div>
+                            <div class="mb-3">
+                                <label for="formFile" class="form-label">Выберите изображение</label>
+                                <input class="form-control" name="file" type="file" id="picture-file-input">
+                            </div>
                         </div>
-                        <button type="submit" name="task" value="add" class="btn btn-outline-secondary">Добавить</button>
-                    </form>
-                </div>
+                </section>
             </div>
         </section>
 
-        <section id="actions-message-section">
-            <form hx-post="/api/tasks/session/{{session_id}}" hx-swap="none" hx-indicator="#loading-spinner" id="message-form">
-                <label for="" class="form-label">Сообщение для пользователей</label>
-                <div class="row row-cols-1 row-cols-sm-2">
-                    <div class="col">
-                        <div class="mb-3">
-                            <textarea class="form-control" name="message" rows="8" id="message-textarea"
-                                placeholder="Напишите здесь своё сообщение"></textarea>
-                        </div>
-                    </div>
-                    <div class="col">
-                        <div class="mb-3">
-                            <label for="formFile" class="form-label">Выберите изображение</label>
-                            <input class="form-control" name="file" type="file" id="picture-file-input">
-                        </div>
-                        <div class="mb-3">
-                            <button type="submit" name="task" value="message" class="btn btn-outline-primary" style="width: 100%;">
-                                Отправить сообщение
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </section>
-    </section>
-
-    <!-- Users -->
-    <section id="users-section" class="mb-3">
-        <div id="separator">
-            <div class="d-flex justify-content-between">
-                <div class="d-flex gap-2 align-items-center">
-                    <h2 style="margin-bottom: 0;">Пользователи</h2>
-                    <div class="spinner-container htmx-indicator" id="loading-spinner">
-                        <div class="spinner-border" role="status">
-                            <span class="visually-hidden">Loading...</span>
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <button class="btn btn-outline-primary disabled" onClick="exportToCSV()">Экспорт</button>
-                    <button 
-                        class="btn btn-outline-danger"
-                        hx-delete="/api/users/{{session_id}}"
-                        hx-swap="innerHTML"
-                        hx-target="#cards-grid"
-                        hx-confirm="Вы уверены, что хотите удалить пользователей для этой сессии?"
-                        hx-indicator="#loading-spinner"
-                    >
-                        Удалить
-                    </button>
-                </div>
-
+        <section class="col-lg mb-3">
+            <div class="separator">
+                <h2>Настройки</h2>
+                <hr class="divider">
             </div>
-            <hr class="divider">
-        </div>
-        <div id="cards-grid" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
-            {{ users_template }}
-        </div>
-    </section>
-</div>
-{% endblock main %}
\ No newline at end of file
+
+            <div class="mb-3 form-floating">
+                <input
+                    type="text"
+                    class="form-control"
+                    name="collection"
+                    id="task-name-input"
+                    placeholder="Название задачи"
+                >
+                <label for="task-name-input">Название задачи</label>
+            </div>
+            
+            <section class="d-flex flex-column gap-3 mb-3">
+                <div class="input-group">
+                    <div class="form-floating">
+                        <input
+                            type="text"
+                            class="form-control"
+                            name="collection"
+                            id="collection-name-input"
+                            placeholder="Группа для парсинга"
+                        >
+                        <label for="collection-name-input">Название базы пользователей</label>
+                    </div>
+                    <button type="submit" class="btn btn-outline-primary">Добавить</button>
+                </div>
+
+                <select class="form-select flex-fill" size="3">
+                    {% for collection in collections %}
+                        <option value="{{collection.id}}">{{ collection.name }}</option>
+                    {% endfor %}
+                </select>
+            </section>
+            <button type="submit" class="w-100 btn btn-primary">Создать задачу</button>
+        </section>
+    </div>
+</form>
+{% endblock main %}
+
+{% block scripts %}
+    <script src="{{ url_for('static', filename='frontend/tabs.js') }}"></script>
+{% endblock scripts %}
\ No newline at end of file