+ );
+ }
+
+ return
+
+
+
+
+}
+
// Render function to display all torrents
async function displayTorrents() {
// Get the torrents container
const torrentsContainer = document.getElementById('output');
- render(, torrentsContainer);
-}
-
-// Function to update HTML for a torrent row
-function updateTorrentRow(torrentRow: HTMLDivElement, detailsResponse: TorrentDetails, statsResponse: TorrentStats) {
- // Calculate download percentage
- const totalBytes = statsResponse.snapshot.total_bytes;
- const downloadedBytes = statsResponse.snapshot.have_bytes;
- const downloadPercentage = (downloadedBytes / totalBytes) * 100;
-
- // Display basic information about the torrent
- const largestFileName = getLargestFileName(detailsResponse);
- const downloadSpeed = statsResponse.download_speed.human_readable;
- const eta = getCompletionETA(statsResponse);
- const peers = `${statsResponse.snapshot.peer_stats.live} / ${statsResponse.snapshot.peer_stats.seen}`;
-
- // Update or create columns in the torrent row
- updateOrCreateColumnContent(torrentRow, 'Name', largestFileName);
- updateOrCreateColumnContent(torrentRow, 'Size', `${formatBytesToGB(totalBytes)} GB`);
- updateOrCreateColumnWithProgressBar(torrentRow, 'Progress', downloadPercentage);
- updateOrCreateColumnContent(torrentRow, 'Download Speed', downloadSpeed);
- updateOrCreateColumnContent(torrentRow, 'ETA', eta);
- updateOrCreateColumnContent(torrentRow, 'Peers', peers);
-}
-
-// Function to update or create the content of a column in a torrent row
-function updateOrCreateColumnContent(torrentRow: HTMLDivElement, human_label: string, value: string) {
- let label = human_label.toLowerCase().replace(" ", "-");
- let column = torrentRow.querySelector(`.column-${label}`);
-
- // If the column doesn't exist, create a new one
- if (!column) {
- column = document.createElement('div');
- column.classList.add(`column-${label}`, 'me-3', 'p-2');
- torrentRow.appendChild(column);
- }
-
- // Update the content of the existing or newly created column
- const contentParagraph = column.querySelector('p:last-child');
- if (contentParagraph) {
- contentParagraph.textContent = value;
- } else {
- column.innerHTML = `
${human_label}
${value}
`;
- }
-}
-
-
-// Function to update or create the content of a progress bar column in a torrent row
-function updateOrCreateColumnWithProgressBar(torrentRow: HTMLDivElement, label: string, percentage: number) {
- let column = torrentRow.querySelector('.column-progress');
-
- // If the column doesn't exist, create a new one
- if (!column) {
- column = document.createElement('div');
- column.classList.add('column-progress', 'me-3', 'p-2');
- torrentRow.appendChild(column);
- }
-
- // Update the value of the progress bar in the existing or newly created column
- const progressBar = column.querySelector('.progress-bar') as HTMLElement;
- const progressPercentage = column.querySelector('p:last-child') as HTMLElement;
-
- if (progressBar && progressPercentage) {
- progressBar.style.width = `${percentage}%`;
- progressPercentage.textContent = `${percentage.toFixed(2)}%`;
- } else {
- column.innerHTML = `
-
${label}
-
-
-
-
${percentage.toFixed(2)}%
`;
- }
-}
-
-
-// Function to render HTML for a torrent row
-function renderTorrentRow(torrentsContainer: HTMLElement, torrentId: number, detailsResponse: TorrentDetails, statsResponse: TorrentStats) {
- // Check if the torrent row already exists
- let torrentRow = document.getElementById(`torrent-${torrentId}`) as HTMLDivElement;
-
- // If the torrent row doesn't exist, create a new one
- if (!torrentRow) {
- torrentRow = document.createElement('div');
- torrentRow.id = `torrent-${torrentId}`;
- torrentRow.classList.add('torrent-row', 'd-flex', 'flex-row', 'p-3', 'bg-light', 'rounded', 'mb-3');
- torrentsContainer.appendChild(torrentRow);
- }
-
- // Update columns in the torrent row
- updateTorrentRow(torrentRow, detailsResponse, statsResponse);
-
- return torrentRow;
-}
-
-
-// Function to create a column div
-function createColumn(label: string, value: string, columnClass: string): HTMLDivElement {
- const columnDiv = document.createElement('div');
- columnDiv.classList.add(columnClass, 'me-3', 'p-2');
- columnDiv.innerHTML = `
${label}
${value}
`;
- return columnDiv;
-}
-
-
-// Function to create a column div with a progress bar
-function createColumnWithProgressBar(label: string, percentage: number): HTMLDivElement {
- const columnDiv = document.createElement('div');
- columnDiv.classList.add('column', 'me-3', 'p-2');
- columnDiv.innerHTML = `
-
${label}
-
-
-
-
${percentage.toFixed(2)}%
`;
- return columnDiv;
+ ReactDOM.render(, torrentsContainer);
}
// Function to format bytes to GB
@@ -391,29 +345,11 @@ function getCompletionETA(stats: TorrentStats): string {
// Helper function to display API errors in an alert
function displayApiError(error: ApiError): void {
- const errorAlert = document.getElementById('error-alert');
- if (errorAlert) {
- errorAlert.innerHTML = `
-