StuffAnThings/qbit_manage
1
1
Fork 0
mirror of https://github.com/StuffAnThings/qbit_manage.git synced 2025-10-12 23:08:31 +08:00
Code Issues Projects Releases Packages Wiki Activity
qbit_manage/web-ui
History
Exact
bobokun 5baf943e27
feat(ui): add integrated documentation viewer with collapsible sections 
Add comprehensive documentation system that displays markdown content directly in the web UI configuration forms. Each configuration section now includes collapsible documentation panels that fetch and render relevant markdown files from the docs directory.

- Add DocumentationViewer component with markdown rendering and GitHub-style alerts
- Implement /api/docs endpoint to serve documentation files securely
- Add documentation sections to all configuration schemas (qbt, settings, commands, etc.)
- Include responsive tables, code copy buttons, and proper styling for dark/light themes
- Fix Docker installation example to use relative config path
- Enhance form rendering to support documentation field types with lazy loading
2025-08-23 10:24:24 -04:00
..
css feat(ui): add integrated documentation viewer with collapsible sections 2025-08-23 10:24:24 -04:00
img 4.5.4 (#910) 2025-08-16 22:28:26 -04:00
js feat(ui): add integrated documentation viewer with collapsible sections 2025-08-23 10:24:24 -04:00
index.html feat(ui): add integrated documentation viewer with collapsible sections 2025-08-23 10:24:24 -04:00
README.md v4.5.0 (#862) 2025-07-11 19:13:41 -04:00

README.md

qBit Manage Web UI

Overview

The qBit Manage Web UI provides a modern interface for configuring and managing qBit Manage. It offers real-time editing of YAML configuration files through an intuitive visual interface, eliminating the need for manual file editing.

Project Structure

web-ui/
├── css/               # Stylesheets
│   ├── components/    # Component-specific styles
│   ├── main.css       # Global styles
│   ├── responsive.css # Responsive layouts
│   └── themes.css     # Theme definitions
├── img/               # Application images and icons
├── js/                # Application logic
│   ├── api.js         # Backend communication
│   ├── app.js         # Main application
│   ├── components/    # UI components
│   ├── config-schemas/ # Configuration schemas
│   └── utils/         # Helper functions
└── index.html         # Application entry point

Key Features

  • Visual Configuration Editor: Intuitive forms for editing YAML configurations
  • Real-time Validation: Instant feedback on configuration errors
  • Undo/Redo History: Track and revert changes with history management
  • Theme Support: Light/dark mode with system preference detection
  • Responsive Design: Works on desktop and mobile devices
  • YAML Preview: Real-time preview of generated configuration

Configuration Sections

The UI organizes configuration into logical sections:

  1. Commands: Manage script execution workflows
  2. qBittorrent Connection: Configure qBittorrent API access
  3. Settings: Application preferences and behavior
  4. Directory Paths: Define important filesystem locations
  5. Categories: Torrent category management
  6. Category Changes: Bulk category modification rules
  7. Tracker Configuration: Per-tracker settings
  8. No Hard Links: Category-specific hardlink handling
  9. Share Limits: Ratio and seeding time rules
  10. Recycle Bin: Deleted torrent management
  11. Orphaned Files: Cleanup of unregistered files
  12. Notifications: Alert configuration
  13. Logs: View application logs

Technical Architecture

Frontend Components

  • ConfigForm.js: Dynamic form generator based on JSON schemas
  • CommandPanel.js: Interface for executing management commands
  • LogViewer.js: Real-time log display component
  • HistoryManager.js: Undo/Redo functionality implementation

API Integration

The UI communicates with the backend through a RESTful API:

sequenceDiagram
    participant UI as Web UI
    participant API as FastAPI Backend
    participant QBM as qBit Manage

    UI->>API: HTTP Request (GET/POST)
    API->>QBM: Process Configuration
    QBM-->>API: YAML Validation
    API-->>UI: Response with Status

Key API endpoints:

  • GET /api/configs: List available configurations
  • PUT /api/configs/{filename}: Update configuration file
  • POST /api/run-command: Execute management commands
  • GET /api/logs: Stream application logs

Error handling includes:

  • JWT authentication
  • Automatic retry on network failures
  • Websocket support for real-time updates

Usage Notes

  1. Ensure the qBit Manage backend is running
  2. Open index.html in a modern browser
  3. Select a configuration file from the dropdown
  4. Navigate sections using the sidebar
  5. Use the preview button to see generated YAML
  6. Save changes when complete

Keyboard Shortcuts:

  • Ctrl+S: Save current configuration
  • Ctrl+R: Toggle Run Commands modal
  • Ctrl+Z: Undo last change
  • Ctrl+Y: Redo last change
  • Ctrl+/: Toggle Help modal
  • Ctrl+P or Cmd+P: Toggle YAML preview
  • Escape: Close modals/panels