s1d3sw1ped/jiggablend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

massive changes and it works

Browse Source
This commit is contained in:
Justin Harms
2025-11-23 10:58:24 -06:00
parent 30aa969433
commit 2a0ff98834
3499 changed files with 7770 additions and 634687 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
web/src/components/JobList.jsx
View File

@@ -34,13 +34,26 @@ export default function JobList() {
}
};
const handleDelete = async (jobId) => {
if (!confirm('Are you sure you want to permanently delete this job? This action cannot be undone.')) return;
try {
await jobs.delete(jobId);
loadJobs();
if (selectedJob && selectedJob.id === jobId) {
setSelectedJob(null);
}
} catch (error) {
alert('Failed to delete job: ' + error.message);
}
};
const getStatusColor = (status) => {
const colors = {
pending: 'bg-yellow-100 text-yellow-800',
running: 'bg-blue-100 text-blue-800',
completed: 'bg-green-100 text-green-800',
failed: 'bg-red-100 text-red-800',
cancelled: 'bg-gray-100 text-gray-800',
pending: 'bg-yellow-400/20 text-yellow-400',
running: 'bg-orange-400/20 text-orange-400',
completed: 'bg-green-400/20 text-green-400',
failed: 'bg-red-400/20 text-red-400',
cancelled: 'bg-gray-500/20 text-gray-400',
};
return colors[status] || colors.pending;
};
@@ -48,7 +61,7 @@ export default function JobList() {
if (loading) {
return (
<div className="flex justify-center items-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-500"></div>
</div>
);
}
@@ -56,7 +69,7 @@ export default function JobList() {
if (jobList.length === 0) {
return (
<div className="text-center py-12">
<p className="text-gray-500 text-lg">No jobs yet. Submit a job to get started!</p>
<p className="text-gray-400 text-lg">No jobs yet. Submit a job to get started!</p>
</div>
);
}
@@ -67,29 +80,29 @@ export default function JobList() {
{jobList.map((job) => (
<div
key={job.id}
className="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border-l-4 border-purple-600"
className="bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border-l-4 border-orange-500 border border-gray-700"
>
<div className="flex justify-between items-start mb-4">
<h3 className="text-xl font-semibold text-gray-900">{job.name}</h3>
<h3 className="text-xl font-semibold text-gray-100">{job.name}</h3>
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(job.status)}`}>
{job.status}
</span>
</div>
<div className="space-y-2 text-sm text-gray-600 mb-4">
<div className="space-y-2 text-sm text-gray-400 mb-4">
<p>Frames: {job.frame_start} - {job.frame_end}</p>
<p>Format: {job.output_format}</p>
<p>Created: {new Date(job.created_at).toLocaleString()}</p>
</div>
<div className="mb-4">
<div className="flex justify-between text-xs text-gray-600 mb-1">
<div className="flex justify-between text-xs text-gray-400 mb-1">
<span>Progress</span>
<span>{job.progress.toFixed(1)}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="w-full bg-gray-700 rounded-full h-2">
<div
className="bg-purple-600 h-2 rounded-full transition-all duration-300"
className="bg-orange-500 h-2 rounded-full transition-all duration-300"
style={{ width: `${job.progress}%` }}
></div>
</div>
@@ -98,18 +111,27 @@ export default function JobList() {
<div className="flex gap-2">
<button
onClick={() => setSelectedJob(job)}
className="flex-1 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium"
className="flex-1 px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-500 transition-colors font-medium"
>
View Details
</button>
{(job.status === 'pending' || job.status === 'running') && (
<button
onClick={() => handleCancel(job.id)}
className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-medium"
className="px-4 py-2 bg-gray-700 text-gray-200 rounded-lg hover:bg-gray-600 transition-colors font-medium"
>
Cancel
</button>
)}
{(job.status === 'completed' || job.status === 'failed' || job.status === 'cancelled') && (
<button
onClick={() => handleDelete(job.id)}
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-500 transition-colors font-medium"
title="Delete job"
>
Delete
</button>
)}
</div>
</div>
))}