Bitrix24Tasker

Веб-приложение для просмотра и управления задачами Bitrix24 с расширенными возможностями фильтрации и визуализации.

Это приложение является экспериментом по вайб-кодингу, описанным в статье "Вайб-кодинг глазами старого разработчика" https://habr.com/ru/articles/943856/

Описание

Bitrix24Tasker — это Flask-приложение, которое предоставляет удобный интерфейс для работы с задачами из Bitrix24. Приложение загружает задачи через Bitrix24 REST API и отображает их в многоколоночном интерфейсе с группировкой по ответственным лицам.

Основные возможности

1. Фильтрация задач по участию пользователя

Приложение автоматически фильтрует и отображает только те задачи, в которых текущий пользователь участвует в одной из следующих ролей:

• Исполнитель
• Постановщик задачи
• Соисполнитель
• Наблюдатель

2. Фильтрация по статусу завершения

• Галочка "в т.ч. завершённые": По умолчанию снята — скрывает задачи со статусами 4 (Ожидает контроля) и 5 (Завершена)
• При установке галочки отображаются все задачи, независимо от статуса

3. Фильтрация по проектам

• Выпадающий список проектов с динамически формируемым содержимым:
  • "Все проекты" — показывает все задачи пользователя
  • "Без проекта" — показывает только задачи без привязки к проекту
  • Список проектов пользователя — отображаются только те проекты, в которых у пользователя есть задачи
• Каждый пункт списка показывает количество задач в скобках
• Проекты отсортированы в алфавитном порядке (русская локаль)

4. Визуальное оформление задач

Статусы задач Bitrix24:

• 2 — Ждет выполнения
• 3 — Выполняется
• 4 — Ожидает контроля (серый цвет, одинарное зачёркивание)
• 5 — Завершена (зелёный цвет, двойное зачёркивание)
• 6 — Отложена

Цветовое кодирование:

• Обычные задачи — стандартный цвет текста
• Задачи со статусом 4 (Ожидает контроля) — серый цвет (#888) с одинарным зачёркиванием
• Задачи со статусом 5 (Завершена) — зелёный цвет (#27ae60) с двойным зачёркиванием
• Просроченные задачи — красный цвет (#e74c3c) для незавершённых задач (статусы не равны 4 или 5), у которых срок исполнения меньше или равен текущей дате

5. Отображение информации о задачах

Каждая задача представлена в виде:

• Кликабельная ссылка на задачу в Bitrix24 (формат: протокол://домен/company/personal/user/ID_пользователя/tasks/task/view/ID_задачи/)
• Название задачи (без подчёркивания ссылки)
• Стрелочка → (если указан срок)
• Срок выполнения в формате DD.MM.YYYY (преобразуется из ISO формата типа 2025-05-31T18:00:00+03:00)

6. Группировка и сортировка

• Группировка: Задачи группируются по ответственным лицам
• Сортировка групп:
  1. По количеству задач (по убыванию)
  2. По имени ответственного (по алфавиту, русская локаль)
• Сортировка внутри группы: По дате дедлайна (по убыванию)
• Отображение: Аватар и имя ответственного лица в заголовке группы

7. Многоколоночная вёрстка

• Адаптивная колоночная раскладка (CSS columns)
• Ширина колонки: 340px (на экранах < 800px — 220px, на экранах < 500px — 100%)
• Промежуток между колонками: 24px
• Задачи одной группы не разрываются между колонками

8. Информационная панель

Верхняя панель отображает:

• Слева: "Список задач" и информация о текущем пользователе (аватар и имя)
• В центре: Фильтр по проектам и галочка "в т.ч. завершённые"
• Справа:
  • Счётчики: "Загружено задач" (общее количество) и "Отобрано задач" (после фильтрации)
  • Индикатор загрузки: спиннер во время загрузки, галочка после завершения

9. Потоковая загрузка задач

• Задачи загружаются постранично (по 50 за раз) с сервера Bitrix24
• Используется потоковая передача данных (Server-Sent Events style)
• Задачи отображаются по мере поступления, без ожидания полной загрузки
• Счётчики обновляются в реальном времени

Технологии

Backend (Python)

• Flask — веб-фреймворк
• requests — для работы с Bitrix24 REST API
• Потоковая передача данных через генераторы Python

Frontend

• Vanilla JavaScript — без использования фреймворков
• Fetch API — для асинхронных запросов
• ReadableStream — для потоковой обработки данных
• CSS3 — адаптивная вёрстка с использованием CSS Columns

API Bitrix24

• tasks.task.list — получение списка задач
• user.current — получение информации о текущем пользователе

Установка и запуск

Требования

• Python 3.7+
• Webhook URL от Bitrix24

Установка зависимостей

pip install flask requests

Настройка

Установите переменную окружения с webhook URL вашего Bitrix24:

Windows (PowerShell):

$env:BITRIX_WEBHOOK = "https://your-domain.bitrix24.ru/rest/USER_ID/WEBHOOK_CODE/"

Linux/macOS:

export BITRIX_WEBHOOK="https://your-domain.bitrix24.ru/rest/USER_ID/WEBHOOK_CODE/"

Запуск

python bitrix24_server.py

Приложение будет доступно по адресу: http://localhost:5000

Структура проекта

Bitrix24Tasker/
├── bitrix24_server.py      # Flask-сервер и API для работы с Bitrix24
├── templates/
│   └── index.html          # HTML-шаблон главной страницы
├── static/
│   ├── tasks.js            # JavaScript для загрузки и отображения задач
│   └── style.css           # Стили интерфейса
└── README.md               # Документация проекта

API Endpoints

GET /

Главная страница приложения

GET /api/tasks

Возвращает поток задач в формате JSON (по одной задаче на строку)

Формат ответа:

{
  "title": "Название задачи",
  "responsible": "Имя ответственного",
  "responsible_icon": "URL аватара",
  "creator": "Имя постановщика",
  "is_filtered": true,
  "deadline": "2025-05-31T18:00:00+03:00",
  "createdDate": "2025-01-15T10:30:00+03:00",
  "status": "3",
  "closed": false,
  "group": {
    "id": "426",
    "name": "Название проекта",
    "image": "URL изображения проекта",
    "opened": false,
    "membersCount": 28
  },
  "id": "12345"
}

GET /api/user

Возвращает информацию о текущем пользователе

Формат ответа:

{
  "name": "Имя Фамилия",
  "icon": "URL аватара",
  "id": "123",
  "baseUrl": "https://your-domain.bitrix24.ru"
}

Особенности реализации

Определение задач пользователя

Задача считается задачей пользователя (is_filtered: true), если пользователь:

• Является исполнителем (responsibleId)
• Является постановщиком (createdBy)
• Указан в списке соисполнителей (accomplices)
• Указан в списке наблюдателей (auditors)

Обработка относительных URL

Все относительные пути (аватары, изображения проектов) автоматически преобразуются в абсолютные URL с использованием домена из webhook.

Обработка дат

Даты в формате ISO 8601 (2025-05-31T18:00:00+03:00) преобразуются в читаемый формат DD.MM.YYYY для отображения пользователю.

Адаптивность

• Интерфейс адаптируется под разные размеры экрана
• На мобильных устройствах задачи отображаются в одну колонку
• Все элементы интерфейса масштабируются корректно

Визуальный дизайн

• Фон: Светло-серый с сеткой (#f8f9fa с линиями #e9ecef)
• Шрифт: Segoe UI, Arial, Helvetica Neue
• Размер шрифта: 13px (базовый)
• Шапка: Серый фон (#f3f4f6) с закруглёнными краями
• Высота шапки: 32px

Автор

st-korn

Лицензия

Не указана