feat: Add TaskPanel component for managing tasks with create, update, and delete functionalities
This commit is contained in:
MayaTheShy
428
client/src/components/TaskPanel.jsx
Normal file
428
client/src/components/TaskPanel.jsx
Normal file
@@ -0,0 +1,428 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import './TaskPanel.css';
|
||||||
|
|
||||||
|
const TaskPanel = ({ turtles, apiUrl }) => {
|
||||||
|
const [tasks, setTasks] = useState([]);
|
||||||
|
const [filter, setFilter] = useState('all'); // all, pending, in_progress, completed, failed
|
||||||
|
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [message, setMessage] = useState(null);
|
||||||
|
|
||||||
|
// Form state
|
||||||
|
const [taskType, setTaskType] = useState('mine_area');
|
||||||
|
const [priority, setPriority] = useState(5);
|
||||||
|
const [assignedTurtleId, setAssignedTurtleId] = useState('');
|
||||||
|
const [parameters, setParameters] = useState({
|
||||||
|
x1: '', y1: '', z1: '',
|
||||||
|
x2: '', y2: '', z2: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const taskTypes = [
|
||||||
|
{ value: 'mine_area', label: '⛏️ Mine Area', icon: '⛏️' },
|
||||||
|
{ value: 'explore', label: '🔍 Explore', icon: '🔍' },
|
||||||
|
{ value: 'gather', label: '📦 Gather Resources', icon: '📦' },
|
||||||
|
{ value: 'build', label: '🏗️ Build Structure', icon: '🏗️' },
|
||||||
|
{ value: 'transport', label: '🚚 Transport Items', icon: '🚚' },
|
||||||
|
{ value: 'clear_area', label: '🧹 Clear Area', icon: '🧹' },
|
||||||
|
];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadTasks();
|
||||||
|
|
||||||
|
// Refresh tasks every 10 seconds
|
||||||
|
const interval = setInterval(loadTasks, 10000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [filter]);
|
||||||
|
|
||||||
|
const loadTasks = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const url = filter === 'all'
|
||||||
|
? `${apiUrl}/api/tasks`
|
||||||
|
: `${apiUrl}/api/tasks?status=${filter}`;
|
||||||
|
|
||||||
|
const response = await fetch(url);
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setTasks(data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load tasks:', error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const createTask = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Validate coordinates
|
||||||
|
const coords = ['x1', 'y1', 'z1', 'x2', 'y2', 'z2'];
|
||||||
|
const hasCoords = coords.some(key => parameters[key] !== '');
|
||||||
|
|
||||||
|
if (hasCoords && !coords.every(key => parameters[key] !== '')) {
|
||||||
|
showMessage('Please fill all coordinates or leave them empty', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const taskData = {
|
||||||
|
taskType,
|
||||||
|
priority: parseInt(priority),
|
||||||
|
assignedTurtleId: assignedTurtleId ? parseInt(assignedTurtleId) : null,
|
||||||
|
parameters: hasCoords ? {
|
||||||
|
x1: parseInt(parameters.x1),
|
||||||
|
y1: parseInt(parameters.y1),
|
||||||
|
z1: parseInt(parameters.z1),
|
||||||
|
x2: parseInt(parameters.x2),
|
||||||
|
y2: parseInt(parameters.y2),
|
||||||
|
z2: parseInt(parameters.z2)
|
||||||
|
} : {}
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${apiUrl}/api/tasks`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(taskData)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
showMessage('Task created successfully!', 'success');
|
||||||
|
setShowCreateForm(false);
|
||||||
|
resetForm();
|
||||||
|
loadTasks();
|
||||||
|
} else {
|
||||||
|
showMessage('Failed to create task', 'error');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showMessage('Error creating task', 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateTaskStatus = async (taskId, status, result = null) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${apiUrl}/api/tasks/${taskId}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ status, result })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
showMessage('Task updated', 'success');
|
||||||
|
loadTasks();
|
||||||
|
} else {
|
||||||
|
showMessage('Failed to update task', 'error');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showMessage('Error updating task', 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteTask = async (taskId) => {
|
||||||
|
if (!confirm('Are you sure you want to delete this task?')) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${apiUrl}/api/tasks/${taskId}`, {
|
||||||
|
method: 'DELETE'
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
showMessage('Task deleted', 'success');
|
||||||
|
loadTasks();
|
||||||
|
} else {
|
||||||
|
showMessage('Failed to delete task', 'error');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showMessage('Error deleting task', 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
setTaskType('mine_area');
|
||||||
|
setPriority(5);
|
||||||
|
setAssignedTurtleId('');
|
||||||
|
setParameters({ x1: '', y1: '', z1: '', x2: '', y2: '', z2: '' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const showMessage = (text, type) => {
|
||||||
|
setMessage({ text, type });
|
||||||
|
setTimeout(() => setMessage(null), 3000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTaskIcon = (type) => {
|
||||||
|
const taskType = taskTypes.find(t => t.value === type);
|
||||||
|
return taskType ? taskType.icon : '📋';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'pending': return '#94a3b8';
|
||||||
|
case 'in_progress': return '#3b82f6';
|
||||||
|
case 'completed': return '#10b981';
|
||||||
|
case 'failed': return '#ef4444';
|
||||||
|
default: return '#94a3b8';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPriorityLabel = (priority) => {
|
||||||
|
if (priority >= 8) return { label: 'Critical', color: '#ef4444' };
|
||||||
|
if (priority >= 6) return { label: 'High', color: '#f59e0b' };
|
||||||
|
if (priority >= 4) return { label: 'Medium', color: '#3b82f6' };
|
||||||
|
return { label: 'Low', color: '#94a3b8' };
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="task-panel">
|
||||||
|
<div className="task-header">
|
||||||
|
<h2>📋 Task Queue</h2>
|
||||||
|
<button
|
||||||
|
className="create-task-btn"
|
||||||
|
onClick={() => setShowCreateForm(!showCreateForm)}
|
||||||
|
>
|
||||||
|
{showCreateForm ? '✕ Cancel' : '➕ New Task'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{message && (
|
||||||
|
<div className={`message ${message.type}`}>
|
||||||
|
{message.text}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Create Task Form */}
|
||||||
|
{showCreateForm && (
|
||||||
|
<div className="create-task-form">
|
||||||
|
<h3>Create New Task</h3>
|
||||||
|
<form onSubmit={createTask}>
|
||||||
|
<div className="form-row">
|
||||||
|
<label>
|
||||||
|
Task Type:
|
||||||
|
<select value={taskType} onChange={(e) => setTaskType(e.target.value)}>
|
||||||
|
{taskTypes.map(type => (
|
||||||
|
<option key={type.value} value={type.value}>
|
||||||
|
{type.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Priority (1-10):
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="10"
|
||||||
|
value={priority}
|
||||||
|
onChange={(e) => setPriority(e.target.value)}
|
||||||
|
/>
|
||||||
|
<span className="priority-value" style={{ color: getPriorityLabel(priority).color }}>
|
||||||
|
{priority} - {getPriorityLabel(priority).label}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Assign to Turtle (optional):
|
||||||
|
<select value={assignedTurtleId} onChange={(e) => setAssignedTurtleId(e.target.value)}>
|
||||||
|
<option value="">Any available turtle</option>
|
||||||
|
{turtles.map(turtle => (
|
||||||
|
<option key={turtle.turtleID} value={turtle.turtleID}>
|
||||||
|
🐢 {turtle.name || `Turtle ${turtle.turtleID}`}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="coordinates-section">
|
||||||
|
<h4>Coordinates (optional):</h4>
|
||||||
|
<div className="coordinates-grid">
|
||||||
|
<div className="coord-group">
|
||||||
|
<span>Start:</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="X1"
|
||||||
|
value={parameters.x1}
|
||||||
|
onChange={(e) => setParameters({...parameters, x1: e.target.value})}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="Y1"
|
||||||
|
value={parameters.y1}
|
||||||
|
onChange={(e) => setParameters({...parameters, y1: e.target.value})}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="Z1"
|
||||||
|
value={parameters.z1}
|
||||||
|
onChange={(e) => setParameters({...parameters, z1: e.target.value})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="coord-group">
|
||||||
|
<span>End:</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="X2"
|
||||||
|
value={parameters.x2}
|
||||||
|
onChange={(e) => setParameters({...parameters, x2: e.target.value})}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="Y2"
|
||||||
|
value={parameters.y2}
|
||||||
|
onChange={(e) => setParameters({...parameters, y2: e.target.value})}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="Z2"
|
||||||
|
value={parameters.z2}
|
||||||
|
onChange={(e) => setParameters({...parameters, z2: e.target.value})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="submit-btn">
|
||||||
|
Create Task
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Filter Tabs */}
|
||||||
|
<div className="task-filters">
|
||||||
|
<button
|
||||||
|
className={filter === 'all' ? 'active' : ''}
|
||||||
|
onClick={() => setFilter('all')}
|
||||||
|
>
|
||||||
|
All ({tasks.length})
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={filter === 'pending' ? 'active' : ''}
|
||||||
|
onClick={() => setFilter('pending')}
|
||||||
|
>
|
||||||
|
Pending
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={filter === 'in_progress' ? 'active' : ''}
|
||||||
|
onClick={() => setFilter('in_progress')}
|
||||||
|
>
|
||||||
|
In Progress
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={filter === 'completed' ? 'active' : ''}
|
||||||
|
onClick={() => setFilter('completed')}
|
||||||
|
>
|
||||||
|
Completed
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={filter === 'failed' ? 'active' : ''}
|
||||||
|
onClick={() => setFilter('failed')}
|
||||||
|
>
|
||||||
|
Failed
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tasks List */}
|
||||||
|
<div className="tasks-list">
|
||||||
|
{loading && <div className="loading">Loading tasks...</div>}
|
||||||
|
|
||||||
|
{!loading && tasks.length === 0 && (
|
||||||
|
<div className="empty-state">
|
||||||
|
<div className="empty-icon">📋</div>
|
||||||
|
<div className="empty-title">No Tasks Found</div>
|
||||||
|
<div className="empty-text">
|
||||||
|
{filter === 'all'
|
||||||
|
? 'Create a task to get started!'
|
||||||
|
: `No ${filter.replace('_', ' ')} tasks`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tasks.map(task => {
|
||||||
|
const priorityInfo = getPriorityLabel(task.priority);
|
||||||
|
const turtle = turtles.find(t => t.turtleID === task.assignedTurtleId);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={task.taskId} className="task-card">
|
||||||
|
<div className="task-card-header">
|
||||||
|
<div className="task-title">
|
||||||
|
<span className="task-icon">{getTaskIcon(task.taskType)}</span>
|
||||||
|
<span className="task-type">
|
||||||
|
{taskTypes.find(t => t.value === task.taskType)?.label || task.taskType}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="task-badges">
|
||||||
|
<span
|
||||||
|
className="priority-badge"
|
||||||
|
style={{ backgroundColor: priorityInfo.color }}
|
||||||
|
>
|
||||||
|
{priorityInfo.label}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className="status-badge"
|
||||||
|
style={{ backgroundColor: getStatusColor(task.status) }}
|
||||||
|
>
|
||||||
|
{task.status.replace('_', ' ')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{task.assignedTurtleId && (
|
||||||
|
<div className="task-assignment">
|
||||||
|
🐢 {turtle?.name || `Turtle ${task.assignedTurtleId}`}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{task.parameters && Object.keys(task.parameters).length > 0 && (
|
||||||
|
<div className="task-parameters">
|
||||||
|
<strong>Area:</strong> ({task.parameters.x1}, {task.parameters.y1}, {task.parameters.z1}) →
|
||||||
|
({task.parameters.x2}, {task.parameters.y2}, {task.parameters.z2})
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{task.result && (
|
||||||
|
<div className="task-result">
|
||||||
|
<strong>Result:</strong> {task.result}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="task-actions">
|
||||||
|
{task.status === 'pending' && (
|
||||||
|
<>
|
||||||
|
<button onClick={() => updateTaskStatus(task.taskId, 'in_progress')}>
|
||||||
|
▶️ Start
|
||||||
|
</button>
|
||||||
|
<button onClick={() => deleteTask(task.taskId)}>
|
||||||
|
🗑️ Delete
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{task.status === 'in_progress' && (
|
||||||
|
<>
|
||||||
|
<button onClick={() => updateTaskStatus(task.taskId, 'completed', 'Task completed')}>
|
||||||
|
✅ Complete
|
||||||
|
</button>
|
||||||
|
<button onClick={() => updateTaskStatus(task.taskId, 'failed', 'Task failed')}>
|
||||||
|
❌ Fail
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{(task.status === 'completed' || task.status === 'failed') && (
|
||||||
|
<button onClick={() => deleteTask(task.taskId)}>
|
||||||
|
🗑️ Delete
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="task-timestamp">
|
||||||
|
Created: {new Date(task.createdAt).toLocaleString()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TaskPanel;
|
||||||
Reference in New Issue
Block a user