wineT
/
PaperParser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tabs

This commit is contained in:
Анатолий Богомолов 2024-03-07 16:18:21 +10:00
parent 09b5b36f86
commit d2c6e0a5b2
2 changed files with 123 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/blueprints/frontend/static/tabs.js Normal file
View File

@ -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;
});
}
})

139
app/blueprints/frontend/templates/parse.j2
View File

@ -1,101 +1,102 @@
{% extends "base.j2" %}
{% block title %}
PaperParser: Парсинг
Парсинг
{% endblock title %}
{% block main %}
<div class="container">
<form method="post" action="/test" class="container">
<div class="row">
<!-- Actions -->
<section id="actions-section" class="mb-3">
<section class="col-lg 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">
<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>
</div>
<button type="submit" name="task" value="add" class="btn btn-outline-secondary">Добавить</button>
</form>
</div>
</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">
<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>
<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>
</div>
</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>
</div>
<section class="col-lg mb-3">
<div class="separator">
<h2>Настройки</h2>
<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 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>
</div>
<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 %}