Files
pyTorrent/pytorrent/static/js/torrentDetails.js
Mateusz Gruszczyński 5bb32234d4 changes_2
2026-05-20 07:36:59 +02:00

2 lines
21 KiB
JavaScript

export const torrentDetailsSource = " function formatDateTime(seconds){ const n=Number(seconds||0); if(!n) return '-'; try{ return new Date(n*1000).toLocaleString(); }catch(e){ return '-'; } }\n function joinRemotePath(base,name){\n const b=String(base||'').trim();\n const n=String(name||'').trim();\n if(!b && !n) return '-';\n if(!n) return b || '-';\n if(!b) return n;\n return `${b.replace(/\\/+$/,'')}/${n.replace(/^\\/+/,'')}`;\n }\n function renderGeneral(){\n const t=torrents.get(selectedHash);\n if(!t){ $('detailPane').innerHTML='Select a torrent.'; return; }\n const labels=labelNames(t.label).map(l=>`<span class=\"chip label-mini\"><i class=\"fa-solid fa-tag\"></i> ${esc(l)}</span>`).join(' ') || '<span class=\"text-muted\">-</span>';\n const ratioGroup=t.ratio_group ? `<span class=\"badge text-bg-info\">${esc(t.ratio_group)}</span>` : '<span class=\"text-muted\">Not assigned</span>';\n const statusClass=t.status==='Seeding'?'success':t.status==='Downloading'?'primary':t.status==='Checking'?'warning':t.status==='Paused'?'secondary':t.status==='Stopped'?'dark':'secondary';\n const fullPath=joinRemotePath(t.path,t.name);\n const cards=[\n ['Size', esc(t.size_h||'-')],\n ['Downloaded', esc(t.down_total_h||'-')],\n ['Uploaded', esc(t.up_total_h||'-')],\n ['Ratio', esc(t.ratio??'-')],\n ['Download speed', esc(t.down_rate_h||'-')],\n ['Upload speed', esc(t.up_rate_h||'-')],\n ['Seeds / Peers', `${esc(t.seeds??0)} / ${esc(t.peers??0)}`],\n ['ETA', esc(t.eta_h||'-')],\n ['Added', esc(formatDateTime(t.created))],\n ['Priority', esc(t.priority??'-')],\n ].map(([label,value])=>`<div class=\"general-stat\"><b>${label}</b><span>${value}</span></div>`).join('');\n $('detailPane').innerHTML=`\n <section class=\"general-summary\">\n <div class=\"general-summary-main\">\n <div class=\"general-title-row\"><h6>${esc(t.name||'-')}</h6><span class=\"badge text-bg-${statusClass}\">${esc(t.status||'-')}</span></div>\n <div class=\"general-path\"><b>Directory</b><span>${esc(t.path||'-')}</span></div>\n <div class=\"general-path\"><b>Full data path</b><span>${esc(fullPath)}</span></div>\n </div>\n <div class=\"general-summary-side\"><b>Hash</b><code>${esc(t.hash||'-')}</code></div>\n </section>\n <div class=\"general-grid\">${cards}</div>\n <div class=\"general-meta\"><div><b>Labels</b><span>${labels}</span></div><div><b>Ratio rule</b><span>${ratioGroup}</span></div><div><b>Message</b><span>${esc(t.message||'-')}</span></div></div>`;\n }\n const FILE_PRIORITY_LABELS = {0: \"Skip\", 1: \"Normal\", 2: \"High\"};\n function priorityClass(priority){ priority=Number(priority||0); return priority===2?\"text-bg-success\":priority===0?\"text-bg-secondary\":\"text-bg-primary\"; }\n function renderFilePrioritySelect(f){ const p=Number(f.priority||0); return `<select class=\"form-select form-select-sm file-priority\" data-index=\"${esc(f.index)}\"><option value=\"0\" ${p===0?\"selected\":\"\"}>Skip</option><option value=\"1\" ${p===1?\"selected\":\"\"}>Normal</option><option value=\"2\" ${p===2?\"selected\":\"\"}>High</option></select>`; }\n function selectedFileIndexes(){ return [...document.querySelectorAll('#detailPane .file-check:checked')].map(cb=>Number(cb.dataset.index)); }\n function downloadSelectedFiles(){\n if(!selectedHash) return;\n const indexes=selectedFileIndexes();\n if(!indexes.length) return toastMessage('toast.noFilesSelected','warning');\n if(indexes.length===1){ downloadResponse(`/api/torrents/${encodeURIComponent(selectedHash)}/files/${indexes[0]}/download`,{},'file.bin','Preparing file...').catch(e=>toast(e.message,'danger')); return; }\n downloadZip(indexes);\n }\n async function downloadZip(indexes=null){\n if(!selectedHash) return;\n try{\n await downloadResponse(`/api/torrents/${encodeURIComponent(selectedHash)}/files/download.zip`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({indexes})},`${selectedHash.slice(0,12)}-files.zip`,'Preparing ZIP...');\n }catch(e){ toast(e.message,'danger'); }\n }\n function renderFiles(files){\n const pane=$('detailPane');\n const rows=(files||[]).map(f=>`<tr data-file-index=\"${esc(f.index)}\"><td class=\"sel\"><input class=\"file-check\" type=\"checkbox\" data-index=\"${esc(f.index)}\"></td><td class=\"path\" title=\"${esc(f.path)}\">${esc(f.path)}</td><td>${esc(f.size_h)}</td><td>${progressBar(f.progress ?? 0, 'file-progress')}</td><td><span class=\"badge ${priorityClass(f.priority)}\">${esc(FILE_PRIORITY_LABELS[Number(f.priority||0)]||f.priority)}</span></td><td>${renderFilePrioritySelect(f)}</td><td><button class=\"btn btn-xs btn-outline-secondary file-download-one\" type=\"button\" data-index=\"${esc(f.index)}\"><i class=\"fa-solid fa-download\"></i></button></td></tr>`).join('');\n pane.innerHTML=`<div class=\"files-toolbar\"><div class=\"files-action-strip\" role=\"group\" aria-label=\"File actions\"><div class=\"files-action-section\"><span class=\"files-action-label\">Priority</span><button class=\"btn btn-sm btn-outline-secondary file-priority-bulk\" type=\"button\" data-priority=\"0\"><i class=\"fa-solid fa-ban\"></i> Skip selected</button><button class=\"btn btn-sm btn-outline-primary file-priority-bulk\" type=\"button\" data-priority=\"1\"><i class=\"fa-solid fa-bars\"></i> Normal selected</button><button class=\"btn btn-sm btn-outline-success file-priority-bulk\" type=\"button\" data-priority=\"2\"><i class=\"fa-solid fa-arrow-up\"></i> High selected</button></div><span class=\"files-action-separator\" aria-hidden=\"true\"></span><div class=\"files-action-section\"><span class=\"files-action-label\">Download</span><button class=\"btn btn-sm btn-outline-secondary file-download-selected\" type=\"button\"><i class=\"fa-solid fa-download\"></i> Download selected</button><button class=\"btn btn-sm btn-outline-secondary file-download-zip\" type=\"button\"><i class=\"fa-solid fa-file-zipper\"></i> Download all ZIP</button><button class=\"btn btn-sm btn-outline-secondary file-tree-refresh\" type=\"button\"><i class=\"fa-solid fa-folder-tree\"></i> Tree</button></div></div><span class=\"small text-muted\">Changes are applied immediately in rTorrent.</span></div><div id=\"fileTreePanel\" class=\"file-tree-panel d-none\"></div><table class=\"table table-sm detail-table file-priority-table\"><thead><tr><th><input id=\"fileSelectAll\" type=\"checkbox\"></th><th>Path</th><th>Size</th><th>Done</th><th>Priority</th><th>Set priority</th><th>Get</th></tr></thead><tbody>${rows || '<tr><td colspan=\"7\" class=\"empty\">No files.</td></tr>'}</tbody></table>`;\n }\n function fileTreeNode(node){\n const children=(node.children||[]).map(fileTreeNode).join('');\n if(node.type==='file') return `<li><span class=\"file-tree-file\" data-index=\"${esc(node.index)}\"><i class=\"fa-regular fa-file\"></i> ${esc(node.name||node.path)} <small>${esc(node.size_h||'')}</small></span></li>`;\n return `<li><details open><summary><i class=\"fa-regular fa-folder-open\"></i> ${esc(node.name||'Files')} <small>${esc(node.size_h||'')}</small> <span class=\"file-tree-actions\"><button class=\"btn btn-xs btn-outline-secondary folder-priority\" data-path=\"${esc(node.path||'')}\" data-priority=\"0\"><i class=\"fa-solid fa-ban\"></i> Skip</button><button class=\"btn btn-xs btn-outline-primary folder-priority\" data-path=\"${esc(node.path||'')}\" data-priority=\"1\"><i class=\"fa-solid fa-bars\"></i> Normal</button><button class=\"btn btn-xs btn-outline-success folder-priority\" data-path=\"${esc(node.path||'')}\" data-priority=\"2\"><i class=\"fa-solid fa-arrow-up\"></i> High</button></span></summary><ul>${children}</ul></details></li>`;\n }\n async function loadFileTree(){\n if(!selectedHash) return;\n const box=$('fileTreePanel');\n if(!box) return;\n box.classList.toggle('d-none');\n if(box.classList.contains('d-none')) return;\n box.innerHTML='<span class=\"spinner-border spinner-border-sm\"></span> Loading tree...';\n try{ const j=await (await fetch(`/api/torrents/${encodeURIComponent(selectedHash)}/files/tree`)).json(); if(!j.ok) throw new Error(j.error||'Tree failed'); box.innerHTML=`<ul class=\"file-tree-root\">${fileTreeNode(j.tree||{})}</ul>`; }\n catch(e){ box.innerHTML=`<div class=\"text-danger\">${esc(e.message)}</div>`; }\n }\n async function setFilePriorities(items){\n if(!selectedHash || !items.length) return;\n setBusy(true);\n try{\n const res=await fetch(`/api/torrents/${encodeURIComponent(selectedHash)}/files/priority`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({files:items})});\n const j=await res.json();\n if(!j.ok || (j.errors&&j.errors.length)) throw new Error(j.errors?.[0]?.error || j.error || 'Priority update failed');\n toast(`Updated ${j.updated?.length||items.length} file priority item(s)`,'success');\n await loadDetails('files');\n }catch(e){ toast(e.message,'danger'); } finally{ setBusy(false); }\n }\n\n const CHUNK_DENSITY_OPTIONS = {\n compact: {label: 'Compact', maxCells: 2400},\n normal: {label: 'Normal', maxCells: 1400},\n detailed: {label: 'Detailed', maxCells: 700},\n };\n const CHUNK_FILTER_OPTIONS = [\n ['all', 'All'],\n ['problem', 'Missing + partial'],\n ['missing', 'Missing'],\n ['partial', 'Partial'],\n ['seen', 'Seen by peers'],\n ['complete', 'Complete'],\n ];\n let chunkFilterMode = localStorage.getItem('chunkFilterMode') || 'all';\n let chunkDensityMode = localStorage.getItem('chunkDensityMode') || 'normal';\n let lastChunkData = null;\n\n function chunkMaxCellsForDensity(){\n // Note: Density changes the API grouping level and the CSS cell size together.\n return CHUNK_DENSITY_OPTIONS[chunkDensityMode]?.maxCells || CHUNK_DENSITY_OPTIONS.normal.maxCells;\n }\n function chunkCellsForFilter(cells){\n const list = Array.isArray(cells) ? cells : [];\n if(chunkFilterMode === 'all') return list;\n if(chunkFilterMode === 'problem') return list.filter(cell => ['missing','partial'].includes(cell.status));\n return list.filter(cell => cell.status === chunkFilterMode);\n }\n function chunkStatusLabel(status){\n return ({complete:'Complete', partial:'Partial', missing:'Missing', seen:'Seen by peers'}[status] || 'Unknown');\n }\n function chunkCellTitle(cell){\n const first = cell.first_chunk ?? '-';\n const last = cell.last_chunk ?? first;\n const pct = Number(cell.percent||0).toFixed(1).replace(/\\.0$/,'');\n const completed = Number(cell.completed ?? 0);\n const total = Number(cell.total ?? cell.unit_count ?? 1);\n const grouped = cell.grouped ? `Grouped visual cell: ${cell.unit_count || 1} piece(s)` : 'Single piece';\n return [\n `Pieces: ${first}-${last}`,\n `Status: ${chunkStatusLabel(cell.status)}`,\n `Progress: ${pct}%`,\n `Complete pieces: ${completed}/${total}`,\n grouped,\n ].join(' | ');\n }\n function chunkCellMarkup(cell){\n const pct = Math.max(0, Math.min(100, Number(cell.percent || 0)));\n const cls = `chunk-cell chunk-${esc(cell.status || 'missing')}${cell.grouped ? ' is-grouped' : ''}`;\n return `<button class=\"${cls}\" type=\"button\" data-first-chunk=\"${esc(cell.first_chunk)}\" data-last-chunk=\"${esc(cell.last_chunk)}\" title=\"${esc(chunkCellTitle(cell))}\" aria-label=\"${esc(chunkCellTitle(cell))}\"><span style=\"height:${pct}%\"></span></button>`;\n }\n function renderChunkLegend(summary){\n const items=[['complete','Complete'],['partial','Partial'],['missing','Missing'],['seen','Seen by peers']];\n return items.map(([key,label])=>`<span class=\"chunk-legend-item\"><i class=\"chunk-dot chunk-${key}\"></i>${label} <b>${esc(summary?.[key]??0)}</b></span>`).join('');\n }\n function renderChunkControls(){\n const filters = CHUNK_FILTER_OPTIONS.map(([value,label]) => `<option value=\"${esc(value)}\" ${chunkFilterMode === value ? 'selected' : ''}>${esc(label)}</option>`).join('');\n const densities = Object.entries(CHUNK_DENSITY_OPTIONS).map(([value,cfg]) => `<option value=\"${esc(value)}\" ${chunkDensityMode === value ? 'selected' : ''}>${esc(cfg.label)}</option>`).join('');\n return `<div class=\"chunk-controls\"><label><span>Filter</span><select id=\"chunkFilterMode\" class=\"form-select form-select-sm\">${filters}</select></label><label><span>Density</span><select id=\"chunkDensityMode\" class=\"form-select form-select-sm\">${densities}</select></label></div>`;\n }\n function selectedChunkRange(){\n const selected=[...document.querySelectorAll('#detailPane .chunk-cell.is-selected')].map(el=>({first:Number(el.dataset.firstChunk||0),last:Number(el.dataset.lastChunk||0)}));\n if(!selected.length) return null;\n return {first_chunk:Math.min(...selected.map(x=>x.first)),last_chunk:Math.max(...selected.map(x=>x.last)),count:selected.length};\n }\n function updateChunkSelectionInfo(){\n const info=$('chunkSelectionInfo');\n if(!info) return;\n const range=selectedChunkRange();\n const filteredCount=document.querySelectorAll('#detailPane .chunk-cell').length;\n const totalCount=lastChunkData?.cells?.length || 0;\n if(range){\n info.textContent=`Selected ${range.count} cell(s), pieces ${range.first_chunk}-${range.last_chunk}.`;\n return;\n }\n const filterText=chunkFilterMode === 'all' ? '' : ` Showing ${filteredCount}/${totalCount} cell(s).`;\n info.textContent=`Select one or more visual cells to prioritize files that overlap that range.${filterText}`;\n }\n function renderChunks(data){\n const pane=$('detailPane');\n const chunks=data||{};\n lastChunkData=chunks;\n const allCells=chunks.cells||[];\n const cells=chunkCellsForFilter(allCells);\n const grouped=chunks.grouped?'<span class=\"badge text-bg-warning\">grouped for performance</span>':'';\n const meta=[\n ['Piece size', chunks.chunk_size_h || '-'],\n ['Pieces', chunks.size_chunks ?? 0],\n ['Complete pieces', chunks.completed_chunks ?? 0],\n ['Hashed pieces', chunks.chunks_hashed ?? 0],\n ['Visual cells', chunks.visual_cells ?? allCells.length],\n ].map(([label,value])=>`<div class=\"chunk-stat\"><b>${esc(label)}</b><span>${esc(value)}</span></div>`).join('');\n pane.innerHTML=`\n <div class=\"chunks-panel\">\n <div class=\"chunks-toolbar\">\n <div class=\"chunks-title\"><i class=\"fa-solid fa-grip\"></i> Chunks ${grouped}</div>\n <div class=\"chunks-actions\">\n <button class=\"btn btn-sm btn-outline-primary chunk-action-recheck\" type=\"button\"><i class=\"fa-solid fa-shield-halved\"></i> Recheck torrent</button>\n <button class=\"btn btn-sm btn-outline-success chunk-action-prioritize\" type=\"button\"><i class=\"fa-solid fa-arrow-up\"></i> High priority files for selection</button>\n <button class=\"btn btn-sm btn-outline-secondary chunk-refresh\" type=\"button\"><i class=\"fa-solid fa-rotate\"></i> Refresh</button>\n </div>\n </div>\n <div class=\"chunk-stats\">${meta}</div>\n <div class=\"chunk-tools-row\">\n <div class=\"chunk-legend\">${renderChunkLegend(chunks.summary||{})}</div>\n ${renderChunkControls()}\n </div>\n <div id=\"chunkSelectionInfo\" class=\"chunk-selection-info\"></div>\n <div class=\"chunk-grid\" data-density=\"${esc(chunkDensityMode)}\" style=\"--chunk-count:${Math.max(1, Math.min(96, cells.length || 1))}\">${cells.map(chunkCellMarkup).join('') || '<div class=\"empty\">No chunk cells for this filter.</div>'}</div>\n </div>`;\n updateChunkSelectionInfo();\n }\n async function runChunkAction(action,payload={}){\n if(!selectedHash) return toastMessage('toast.noTorrentSelected','warning');\n setBusy(true);\n try{\n const j=await post(`/api/torrents/${encodeURIComponent(selectedHash)}/chunks/${action}`,payload);\n toast(j.message || appMessage('toast.chunkActionDone',{action}),'success');\n await loadDetails('chunks');\n }catch(e){ toast(e.message,'danger'); }\n finally{ setBusy(false); }\n }\n document.addEventListener('change', e=>{\n const filter=e.target.closest('#chunkFilterMode');\n if(filter){\n chunkFilterMode=filter.value || 'all';\n localStorage.setItem('chunkFilterMode', chunkFilterMode);\n if(lastChunkData && activeTab()==='chunks') renderChunks(lastChunkData);\n return;\n }\n const density=e.target.closest('#chunkDensityMode');\n if(density){\n chunkDensityMode=density.value || 'normal';\n localStorage.setItem('chunkDensityMode', chunkDensityMode);\n if(activeTab()==='chunks') loadDetails('chunks');\n }\n });\n function peerBadges(p){\n const badges=[];\n if(p.encrypted) badges.push('<span class=\"badge text-bg-success\">enc</span>');\n if(p.incoming) badges.push('<span class=\"badge text-bg-info\">in</span>');\n if(p.snubbed) badges.push('<span class=\"badge text-bg-warning\">snub</span>');\n if(p.banned) badges.push('<span class=\"badge text-bg-danger\">ban</span>');\n return badges.join(' ') || '<span class=\"text-muted\">-</span>';\n }\n function renderPeers(peers){\n const rows=(peers||[]).map(p=>[flag(p.country_iso),`<span class=\"peer-ip\">${esc(p.ip)}<a class=\"peer-ip-link\" href=\"https://ipinfo.io/${encodeURIComponent(p.ip||'')}\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"Open IP info\"><i class=\"fa-solid fa-link\"></i></a></span>`,esc(p.country),esc(p.city),esc(p.client),progressBar(p.completed,'peer-progress'),esc(p.down_rate_h),esc(p.up_rate_h),esc(p.port),peerBadges(p)]);\n $('detailPane').innerHTML=table(['Flag','IP','Country','City','Client','%','DL','UL','Port','Flags'],rows);\n }\n function fmtTs(value){ const n=Number(value||0); if(!n) return '-'; try{return new Date(n*1000).toLocaleString();}catch(e){return String(n);} }\n function trackerSeedsPeers(t){ const hasScrape = t.seeds !== null || t.peers !== null; return hasScrape ? `${t.seeds ?? \"-\"} / ${t.peers ?? \"-\"}` : \"-\"; }\n function renderTrackers(trackers){\n // Note: Tracker URL editing is intentionally replaced by safe deletion; adding trackers remains unchanged.\n const pane=$('detailPane');\n const list=trackers||[];\n const canDelete=list.length>1;\n const rows=list.map(t=>{\n const idx=esc(t.index), url=esc(t.url);\n const deleteDisabled=canDelete ? '' : ' disabled title=\"At least one tracker must remain\"';\n return [`<span class=\"text-muted\">#${idx}</span>`, `<span class=\"tracker-url-text\">${url || '<span class=\"text-muted\">-</span>'}</span>`, t.enabled?'yes':'no', esc(trackerSeedsPeers(t)), esc(t.downloaded ?? '-'), fmtTs(t.last_announce), `<div class=\"tracker-actions\"><button class=\"btn btn-xs btn-outline-danger tracker-delete\" data-index=\"${idx}\"${deleteDisabled}><i class=\"fa-solid fa-trash\"></i> Delete</button></div>`];\n });\n pane.innerHTML=`<div class=\"tracker-toolbar\"><div class=\"input-group input-group-sm\"><input id=\"trackerAddUrl\" class=\"form-control tracker-add-input\" placeholder=\"https://tracker.example/announce\"><button id=\"trackerAddBtn\" class=\"btn btn-outline-primary\"><i class=\"fa-solid fa-plus\"></i> Add tracker</button></div><button id=\"trackerReannounceBtn\" class=\"btn btn-sm btn-outline-primary\"><i class=\"fa-solid fa-bullhorn\"></i> Reannounce</button></div>${table(['#','URL','On','Seeds / Peers','Done','Last announce','Actions'], rows.length?rows:[[ '<span class=\"text-muted\">-</span>','<span class=\"text-muted\">No trackers.</span>','','','','','' ]])}`;\n }\n async function trackerAction(action,payload={}){\n if(!selectedHash) return toastMessage('toast.noTorrentSelected','warning');\n setBusy(true);\n try{\n const j=await post(`/api/torrents/${encodeURIComponent(selectedHash)}/trackers/${action}`,payload);\n toast(j.message || appMessage('toast.trackerActionDone',{action}),'success');\n await loadDetails('trackers');\n }catch(e){toast(e.message,'danger');}\n finally{setBusy(false);}\n }\n async function loadDetails(tab){ const t=torrents.get(selectedHash); if($('peersRefreshBox')) $('peersRefreshBox').classList.toggle('d-none', tab!=='peers'); setupPeersRefresh(tab); if(!t)return; if(tab==='general') return renderGeneral(); if(tab==='log'){ $('detailPane').innerHTML=`<pre>${esc(t.message||'No logs')}</pre>`; return; } const pane=$('detailPane'); pane.innerHTML=`<div class=\"loading-line\"><span class=\"spinner-border spinner-border-sm\"></span> Loading ${esc(tab)}...</div>`; try{ const detailUrl = tab==='chunks' ? `/api/torrents/${encodeURIComponent(selectedHash)}/chunks?max_cells=${chunkMaxCellsForDensity()}` : `/api/torrents/${encodeURIComponent(selectedHash)}/${tab}`; const res=await fetch(detailUrl,{headers:{'Accept':'application/json'}}); const text=await res.text(); let json; try{ json=JSON.parse(text); }catch(parseErr){ throw new Error(`Invalid API response for ${tab}. HTTP ${res.status}`); } if(!res.ok || !json.ok) throw new Error(json.error||`HTTP ${res.status}`); if(tab!==activeTab()) return; if(tab==='files') renderFiles(json.files||[]); if(tab==='chunks') renderChunks(json.chunks||{}); if(tab==='peers') renderPeers(json.peers||[]); if(tab==='trackers') renderTrackers(json.trackers||[]); }catch(e){pane.innerHTML=`<div class=\"text-danger\">${esc(e.message)}</div>`;} }\n";