JS and its ecosystem is absolute garbage
This commit is contained in:
Igor Katson
parent
9f26ea5963
commit
f1c1486417
9 changed files with 223 additions and 194 deletions
|
|
@ -12,19 +12,8 @@
|
|||
<body>
|
||||
<div id="app-container" class="container text-center">
|
||||
<h1 class="mt-3 mb-4">rqbit web 0.0.1-alpha</h1>
|
||||
<!-- Error Alert Container -->
|
||||
<div id="error-alert"></div>
|
||||
<div id="output" class="output-container"></div>
|
||||
<div id="buttons-container" class="mt-3">
|
||||
<button id="add-magnet-button" class="btn btn-primary mr-2">Add Torrent from Magnet Link</button>
|
||||
<input type="file" id="file-input" accept=".torrent" style="display:none;">
|
||||
<button id="upload-file-button" class="btn btn-secondary">Upload .torrent File</button>
|
||||
</div>
|
||||
<div id="output"></div>
|
||||
</div>
|
||||
<!-- Include Bootstrap JS and Popper.js (required for Bootstrap) -->
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
<script type="module" src="src/index.tsx"></script>
|
||||
</body>
|
||||
|
|
|
|||
89
crates/librqbit/webui/webui/package-lock.json
generated
89
crates/librqbit/webui/webui/package-lock.json
generated
|
|
@ -5,10 +5,14 @@
|
|||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"preact": "^10.13.1"
|
||||
"preact": "^10.13.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@preact/preset-vite": "^2.5.0",
|
||||
"@types/react": "^18.2.38",
|
||||
"@types/react-dom": "^18.2.16",
|
||||
"typescript": "^5.3.2",
|
||||
"vite": "^4.3.2"
|
||||
}
|
||||
|
|
@ -855,6 +859,38 @@
|
|||
"node": ">= 8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
|
||||
"integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "18.2.38",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.38.tgz",
|
||||
"integrity": "sha512-cBBXHzuPtQK6wNthuVMV6IjHAFkdl/FOPFIlkd81/Cd1+IqkHu/A+w4g43kaQQoYHik/ruaQBDL72HyCy1vuMw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "18.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.16.tgz",
|
||||
"integrity": "sha512-766c37araZ9vxtYs25gvY2wNdFWsT2ZiUvOd0zMhTaoGj6B911N8CKQWgXXJoPMLF3J82thpRqQA7Rf3rBwyJw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/scheduler": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.7.tgz",
|
||||
"integrity": "sha512-8g25Nl3AuB1KulTlSUsUhUo/oBgBU6XIXQ+XURpeioEbEJvkO7qI4vDfREv3vJYHHzqXjcAHvoJy4pTtSQNZtA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
|
|
@ -963,6 +999,12 @@
|
|||
"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
|
||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
|
|
@ -1124,8 +1166,7 @@
|
|||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
|
||||
},
|
||||
"node_modules/jsesc": {
|
||||
"version": "2.5.2",
|
||||
|
|
@ -1157,6 +1198,17 @@
|
|||
"integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/lru-cache": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
|
||||
|
|
@ -1257,6 +1309,29 @@
|
|||
"url": "https://opencollective.com/preact"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.8",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
|
||||
|
|
@ -1290,6 +1365,14 @@
|
|||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.23.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
|
||||
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
|
||||
|
|
|
|||
|
|
@ -3,15 +3,17 @@
|
|||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"build": "vite build && ./post-build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"preact": "^10.13.1"
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@preact/preset-vite": "^2.5.0",
|
||||
"@types/react": "^18.2.38",
|
||||
"@types/react-dom": "^18.2.16",
|
||||
"typescript": "^5.3.2",
|
||||
"vite": "^4.3.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
25
crates/librqbit/webui/webui/post-build
Executable file
25
crates/librqbit/webui/webui/post-build
Executable file
|
|
@ -0,0 +1,25 @@
|
|||
#!/usr/bin/env python
|
||||
|
||||
import os
|
||||
import json
|
||||
|
||||
os.chdir('dist')
|
||||
|
||||
with open('manifest.json', 'r') as f:
|
||||
manifest = json.load(f)
|
||||
|
||||
for replacements in manifest.values():
|
||||
js_file = replacements['file']
|
||||
target_file = replacements['src']
|
||||
|
||||
with open(target_file, 'r') as f:
|
||||
target_content = f.read()
|
||||
|
||||
target_content = target_content.replace("/" + js_file, 'app.js')
|
||||
with open(target_file, 'w') as f:
|
||||
f.write(target_content)
|
||||
|
||||
os.rename(js_file, 'app.js')
|
||||
|
||||
os.rmdir('assets')
|
||||
os.remove('manifest.json')
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,9 +1,23 @@
|
|||
import { Fragment, h, render, Component } from 'preact';
|
||||
import { useEffect, useState } from 'preact/hooks';
|
||||
import { Fragment, createContext, useContext, useEffect, useRef, useState } from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
|
||||
// Define API URL and base path
|
||||
const apiUrl = (window.origin === 'null' || window.origin === 'http://localhost:3031') ? 'http://localhost:3030' : '';
|
||||
|
||||
interface ErrorType {
|
||||
status: number,
|
||||
statusText: number,
|
||||
body: number,
|
||||
};
|
||||
|
||||
let defaultContext: {
|
||||
setError: any,
|
||||
} = {
|
||||
setError: null,
|
||||
};
|
||||
|
||||
const AppContext = createContext(defaultContext);
|
||||
|
||||
// Interface for the Torrent API response
|
||||
interface Torrent {
|
||||
id: number;
|
||||
|
|
@ -119,14 +133,13 @@ async function getTorrentStats(index: number): Promise<TorrentStats> {
|
|||
return makeRequest('GET', `/torrents/${index}/stats`);
|
||||
}
|
||||
|
||||
function TorrentRow(props) {
|
||||
const { detailsResponse, statsResponse } = this.props;
|
||||
function TorrentRow({ detailsResponse, statsResponse }) {
|
||||
const totalBytes = statsResponse.snapshot.total_bytes;
|
||||
const downloadedBytes = statsResponse.snapshot.have_bytes;
|
||||
const downloadPercentage = (downloadedBytes / totalBytes) * 100;
|
||||
|
||||
return (
|
||||
<div class="torrent-row d-flex flex-row p-3 bg-light rounded mb-3">
|
||||
<div className="torrent-row d-flex flex-row p-3 bg-light rounded mb-3">
|
||||
{/* Create and render columns */}
|
||||
<Column label="Name" value={getLargestFileName(detailsResponse)} />
|
||||
<Column label="Size" value={`${formatBytesToGB(totalBytes)} GB`} />
|
||||
|
|
@ -140,21 +153,21 @@ function TorrentRow(props) {
|
|||
|
||||
// Define a Preact component for a column
|
||||
const Column = ({ label, value }) => (
|
||||
<div class={`column-${label.toLowerCase().replace(" ", "-")} me-3 p-2`}>
|
||||
<p class="font-weight-bold">{label}</p>
|
||||
<div className={`column-${label.toLowerCase().replace(" ", "-")} me-3 p-2`}>
|
||||
<p className="font-weight-bold">{label}</p>
|
||||
<p>{value}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Define a Preact component for a column with a progress bar
|
||||
const ColumnWithProgressBar = ({ label, percentage }) => (
|
||||
<div class="column-progress me-3 p-2">
|
||||
<p class="font-weight-bold">{label}</p>
|
||||
<div class="progress mb-1">
|
||||
<div class="progress-bar" style={`width: ${percentage}%;`}></div>
|
||||
<div className="column-progress me-3 p-2">
|
||||
<p className="font-weight-bold">{label}</p>
|
||||
<div className="progress mb-1">
|
||||
<div className="progress-bar" style={{ width: `${percentage}%` }}></div>
|
||||
</div>
|
||||
<p class="mb-1">{percentage.toFixed(2)}%</p>
|
||||
</div>
|
||||
<p className="mb-1">{percentage.toFixed(2)}%</p>
|
||||
</div >
|
||||
);
|
||||
|
||||
const DeferredTorrent = ({ torrent }) => {
|
||||
|
|
@ -209,160 +222,101 @@ const DeferredTorrent = ({ torrent }) => {
|
|||
updateStatsResponse(stats);
|
||||
});
|
||||
await Promise.all([a, b]);
|
||||
// setTimeout(update, 5000);
|
||||
setTimeout(update, 500);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let timer = setTimeout(update, 0);
|
||||
return () => clearTimeout(timer);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return <TorrentRow detailsResponse={detailsResponse} statsResponse={statsResponse} />
|
||||
}
|
||||
|
||||
const Root = () => {
|
||||
var globalCtx = null;
|
||||
|
||||
const TorrentsList = () => {
|
||||
const [torrents, updateTorrents] = useState([]);
|
||||
globalCtx = useContext(AppContext);
|
||||
const update = async () => {
|
||||
let response = await makeRequest('GET', '/torrents');
|
||||
updateTorrents(response.torrents);
|
||||
// setTimeout(update, 500);
|
||||
setTimeout(update, 500);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let timer = setTimeout(update, 0);
|
||||
return () => clearTimeout(timer);
|
||||
});
|
||||
}, []);
|
||||
|
||||
let torrentsComponents = torrents.map((t: Torrent) =>
|
||||
<DeferredTorrent key={t.id} torrent={t} />
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{torrents.map((t: Torrent) => {
|
||||
<Fragment key={t.id}>
|
||||
<DeferredTorrent torrent={t} />
|
||||
</Fragment>
|
||||
})}
|
||||
</>
|
||||
<div>
|
||||
{torrentsComponents}
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
const Root = () => {
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const Error = ({ error }) => {
|
||||
if (error == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let ctx = useContext(AppContext);
|
||||
|
||||
return (<div className="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<strong>Error ${error.status}:</strong> {error.statusText}<br />
|
||||
{error.body}
|
||||
<button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close" onClick={() => ctx.setError(null)}>Close</button>
|
||||
</div>);
|
||||
};
|
||||
|
||||
const FileInput = () => {
|
||||
const inputRef = useRef();
|
||||
|
||||
const inputOnChange = (e) => {
|
||||
let file = e.target.files[0];
|
||||
makeRequest('POST', '/torrents?overwrite=true', file);
|
||||
// e.target.clear();
|
||||
}
|
||||
|
||||
const onClick = (e) => {
|
||||
inputRef.current.click();
|
||||
}
|
||||
|
||||
return (<div>
|
||||
<input type="file" ref={inputRef} id="file-input" accept=".torrent" onChange={inputOnChange} style={{ display: 'none' }} />
|
||||
<button id="upload-file-button" className="btn btn-secondary" onClick={onClick}>Upload .torrent File</button>
|
||||
</div>);
|
||||
};
|
||||
|
||||
const Buttons = () => {
|
||||
return (
|
||||
<div id="buttons-container" className="mt-3">
|
||||
<button id="add-magnet-button" className="btn btn-primary mr-2" onClick={addTorrentFromMagnet}>Add Torrent from Magnet Link</button>
|
||||
<FileInput />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <AppContext.Provider value={{ setError: setError }}>
|
||||
<Error error={error} />
|
||||
<TorrentsList />
|
||||
<Buttons />
|
||||
</AppContext.Provider >
|
||||
}
|
||||
|
||||
// Render function to display all torrents
|
||||
async function displayTorrents() {
|
||||
// Get the torrents container
|
||||
const torrentsContainer = document.getElementById('output');
|
||||
render(<Root />, 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 = `<p class="font-weight-bold">${human_label}</p><p>${value}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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 = `
|
||||
<p class="font-weight-bold">${label}</p>
|
||||
<div class="progress mb-1">
|
||||
<div class="progress-bar" role="progressbar" style="width: ${percentage}%;"></div>
|
||||
</div>
|
||||
<p class="mb-1">${percentage.toFixed(2)}%</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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 = `<p class="font-weight-bold">${label}</p><p>${value}</p>`;
|
||||
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 = `
|
||||
<p class="font-weight-bold">${label}</p>
|
||||
<div class="progress mb-1">
|
||||
<div class="progress-bar" role="progressbar" style="width: ${percentage}%;"></div>
|
||||
</div>
|
||||
<p class="mb-1">${percentage.toFixed(2)}%</p>`;
|
||||
return columnDiv;
|
||||
ReactDOM.render(<Root />, 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 = `
|
||||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<strong>Error ${error.status}:</strong> ${error.statusText}<br>
|
||||
${error.body}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="clearErrorAlert()"></button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to clear the error alert
|
||||
function clearErrorAlert(): void {
|
||||
const errorAlert = document.getElementById('error-alert');
|
||||
if (errorAlert) {
|
||||
errorAlert.innerHTML = ''; // Clear the content
|
||||
}
|
||||
globalCtx.setError(error);
|
||||
}
|
||||
|
||||
// List all torrents on page load and set up auto-refresh
|
||||
async function init(): Promise<void> {
|
||||
console.log('init');
|
||||
await displayTorrents();
|
||||
}
|
||||
|
||||
|
|
@ -436,9 +372,6 @@ async function handleFileInputChange(): Promise<void> {
|
|||
}
|
||||
}
|
||||
|
||||
// Add event listeners for buttons
|
||||
document.getElementById('add-magnet-button')?.addEventListener('click', addTorrentFromMagnet);
|
||||
|
||||
// Update the event listener for the file input button
|
||||
const fileInputButton = document.getElementById('upload-file-button');
|
||||
fileInputButton?.addEventListener('click', () => {
|
||||
|
|
|
|||
|
|
@ -6,15 +6,12 @@
|
|||
"noEmit": true,
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
|
||||
/* Preact Config */
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "preact",
|
||||
"skipLibCheck": true,
|
||||
"paths": {
|
||||
"react": ["./node_modules/preact/compat/"],
|
||||
"react-dom": ["./node_modules/preact/compat/"]
|
||||
}
|
||||
},
|
||||
"include": ["node_modules/vite/client.d.ts", "**/*"]
|
||||
}
|
||||
"include": [
|
||||
"node_modules/vite/client.d.ts",
|
||||
"**/*"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import preact from '@preact/preset-vite';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [preact()],
|
||||
server: {
|
||||
port: 3031
|
||||
},
|
||||
build: {
|
||||
manifest: true
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue