codey/codey.lol
1
0
Fork 0
Code Issues Pull Requests Activity

misc

Browse Source
This commit is contained in:
codey
2025-12-17 13:33:31 -05:00
parent e18aa3f42c
commit c49bfe5a3d
38 changed files with 2436 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/TRip/RequestManagement.jsx
View File

@@ -163,12 +163,19 @@ export default function RequestManagement() {
return `${pct}%`;
};
const computePct = (p) => {
if (p === null || p === undefined || p === "") return 0;
const num = Number(p);
if (Number.isNaN(num)) return 0;
return Math.min(100, Math.max(0, num > 1 ? Math.round(num) : Math.round(num * 100)));
};
const progressBarTemplate = (rowData) => {
const p = rowData.progress;
if (p === null || p === undefined || p === "") return "—";
const num = Number(p);
if (Number.isNaN(num)) return "—";
const pct = Math.min(100, Math.max(0, num > 1 ? Math.round(num) : num * 100));
const pct = computePct(p);
const getProgressColor = () => {
if (rowData.status === "Failed") return "bg-red-500";
@@ -179,14 +186,22 @@ export default function RequestManagement() {
};
return (
<div className="progress-bar-container">
<div className="progress-bar-track">
<div className="rm-progress-container">
<div className="rm-progress-track" style={{ flex: 1, minWidth: 0 }}>
<div
className={`progress-bar-fill ${getProgressColor()}`}
style={{ width: `${pct}%` }}
className={`rm-progress-fill ${getProgressColor()}`}
style={{
'--rm-progress': (pct / 100).toString(),
borderTopRightRadius: pct === 100 ? '999px' : 0,
borderBottomRightRadius: pct === 100 ? '999px' : 0
}}
data-pct={pct}
aria-valuenow={pct}
aria-valuemin={0}
aria-valuemax={100}
/>
</div>
<span className="progress-bar-text">{pct}%</span>
<span className="rm-progress-text" style={{ marginLeft: 8, flex: 'none' }}>{pct}%</span>
</div>
);
};
@@ -348,7 +363,7 @@ export default function RequestManagement() {
<div className="space-y-4 text-sm">
{/* --- Metadata Card --- */}
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md grid grid-cols-2 gap-4">
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md grid grid-cols-1 sm:grid-cols-2 gap-4">
{selectedRequest.id && <p className="col-span-2 break-all"><strong>ID:</strong> {selectedRequest.id}</p>}
{selectedRequest.target && <p><strong>Target:</strong> {selectedRequest.target}</p>}
{selectedRequest.tracks && <p><strong># Tracks:</strong> {selectedRequest.tracks}</p>}
@@ -363,7 +378,7 @@ export default function RequestManagement() {
</div>
{/* --- Status / Progress Card --- */}
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md grid grid-cols-2 gap-4">
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md grid grid-cols-1 sm:grid-cols-2 gap-4">
{selectedRequest.status && (
<p>
<strong>Status:</strong>{" "}
@@ -375,14 +390,22 @@ export default function RequestManagement() {
{selectedRequest.progress !== undefined && selectedRequest.progress !== null && (
<div className="col-span-2">
<strong>Progress:</strong>
<div className="progress-bar-container mt-2">
<div className="progress-bar-track progress-bar-track-lg">
<div className="rm-progress-container mt-2">
<div className="rm-progress-track rm-progress-track-lg">
<div
className={`progress-bar-fill ${selectedRequest.status === "Failed" ? "bg-red-500" : selectedRequest.status === "Finished" ? "bg-green-500" : "bg-blue-500"}`}
style={{ width: `${Math.min(100, Math.max(0, Number(selectedRequest.progress) > 1 ? Math.round(selectedRequest.progress) : selectedRequest.progress * 100))}%` }}
className={`rm-progress-fill ${selectedRequest.status === "Failed" ? "bg-red-500" : selectedRequest.status === "Finished" ? "bg-green-500" : "bg-blue-500"}`}
style={{
'--rm-progress': (computePct(selectedRequest.progress) / 100).toString(),
borderTopRightRadius: computePct(selectedRequest.progress) >= 100 ? '999px' : 0,
borderBottomRightRadius: computePct(selectedRequest.progress) >= 100 ? '999px' : 0
}}
data-pct={computePct(selectedRequest.progress)}
aria-valuenow={Math.min(100, Math.max(0, Number(selectedRequest.progress) > 1 ? Math.round(selectedRequest.progress) : selectedRequest.progress * 100))}
aria-valuemin={0}
aria-valuemax={100}
/>
</div>
<span className="progress-bar-text">{formatProgress(selectedRequest.progress)}</span>
<span className="rm-progress-text">{formatProgress(selectedRequest.progress)}</span>
</div>
</div>
)}