tabs
This commit is contained in:
parent
09b5b36f86
commit
d2c6e0a5b2
|
|
@ -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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -1,101 +1,102 @@
|
||||||
{% extends "base.j2" %}
|
{% extends "base.j2" %}
|
||||||
|
|
||||||
{% block title %}
|
{% block title %}
|
||||||
PaperParser: Парсинг
|
Парсинг
|
||||||
{% endblock title %}
|
{% endblock title %}
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<div class="container">
|
<form method="post" action="/test" class="container">
|
||||||
<!-- Actions -->
|
<div class="row">
|
||||||
<section id="actions-section" class="mb-3">
|
<!-- Actions -->
|
||||||
<div class="separator">
|
<section class="col-lg mb-3">
|
||||||
<h2>Действия</h2>
|
<div class="separator">
|
||||||
<hr class="divider">
|
<h2>Действия</h2>
|
||||||
</div>
|
<hr class="divider">
|
||||||
<section id="actions-parse-add-section">
|
</div>
|
||||||
<label for="" class="form-label">Парсинг пользователей и добавление в группу</label>
|
<nav class="mb-3">
|
||||||
<div class="row row-cols-1 row-cols-sm-2">
|
<div class="nav nav-tabs" id="nav-tab" role="tablist">
|
||||||
<div class="col mb-3">
|
<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>
|
||||||
<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">
|
<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">
|
<div class="form-floating">
|
||||||
<input type="text" class="form-control" name="group" id="group-from-input"
|
<input type="text" class="form-control" name="group" id="group-from-input" placeholder="Группа для парсинга">
|
||||||
placeholder="Группа для парсинга">
|
|
||||||
<label for="group-from-input">Группа для парсинга</label>
|
<label for="group-from-input">Группа для парсинга</label>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-outline-primary">Спарсить</button>
|
</section>
|
||||||
</form>
|
|
||||||
</div>
|
<section class="tab-pane fade" id="actions-add-section">
|
||||||
<div class="col mb-3">
|
<div class="form-floating">
|
||||||
<form hx-post="/api/tasks/session/{{session_id}}" hx-swap="none" hx-indicator="#loading-spinner" class="input-group" id="group-to-form">
|
<input type="text" name="url" class="form-control" id="group-to-input"
|
||||||
<div class="form-floating">
|
placeholder="Группа для добавлнеия">
|
||||||
<input type="text" name="url" class="form-control" id="group-to-input"
|
<label for="group-to-input">Группа для добавления</label>
|
||||||
placeholder="Группа, в которую нужно добавить">
|
</div>
|
||||||
<label for="group-to-input">Группа для добавления</label>
|
</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>
|
</div>
|
||||||
<button type="submit" name="task" value="add" class="btn btn-outline-secondary">Добавить</button>
|
</section>
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="actions-message-section">
|
<section class="col-lg mb-3">
|
||||||
<form hx-post="/api/tasks/session/{{session_id}}" hx-swap="none" hx-indicator="#loading-spinner" id="message-form">
|
<div class="separator">
|
||||||
<label for="" class="form-label">Сообщение для пользователей</label>
|
<h2>Настройки</h2>
|
||||||
<div class="row row-cols-1 row-cols-sm-2">
|
<hr class="divider">
|
||||||
<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>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<hr class="divider">
|
|
||||||
</div>
|
<div class="mb-3 form-floating">
|
||||||
<div id="cards-grid" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
|
<input
|
||||||
{{ users_template }}
|
type="text"
|
||||||
</div>
|
class="form-control"
|
||||||
</section>
|
name="collection"
|
||||||
</div>
|
id="task-name-input"
|
||||||
{% endblock main %}
|
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 %}
|
||||||
Loading…
Reference in New Issue