initial commit

web/src/components/JobList.jsx

@@ -0,0 +1,128 @@
+import { useState, useEffect } from 'react';
+import { jobs } from '../utils/api';
+import JobDetails from './JobDetails';
+
+export default function JobList() {
+  const [jobList, setJobList] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedJob, setSelectedJob] = useState(null);
+
+  useEffect(() => {
+    loadJobs();
+    const interval = setInterval(loadJobs, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const loadJobs = async () => {
+    try {
+      const data = await jobs.list();
+      setJobList(data);
+    } catch (error) {
+      console.error('Failed to load jobs:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = async (jobId) => {
+    if (!confirm('Are you sure you want to cancel this job?')) return;
+    try {
+      await jobs.cancel(jobId);
+      loadJobs();
+    } catch (error) {
+      alert('Failed to cancel 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',
+    };
+    return colors[status] || colors.pending;
+  };
+
+  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>
+    );
+  }
+
+  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>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {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"
+          >
+            <div className="flex justify-between items-start mb-4">
+              <h3 className="text-xl font-semibold text-gray-900">{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">
+              <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">
+                <span>Progress</span>
+                <span>{job.progress.toFixed(1)}%</span>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-2">
+                <div
+                  className="bg-purple-600 h-2 rounded-full transition-all duration-300"
+                  style={{ width: `${job.progress}%` }}
+                ></div>
+              </div>
+            </div>
+
+            <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"
+              >
+                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"
+                >
+                  Cancel
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {selectedJob && (
+        <JobDetails
+          job={selectedJob}
+          onClose={() => setSelectedJob(null)}
+          onUpdate={loadJobs}
+        />
+      )}
+    </>
+  );
+}
+