feat: Add GroupsPanel component for managing turtle groups and commands
This commit is contained in:
MayaTheShy
327
client/src/components/GroupsPanel.jsx
Normal file
327
client/src/components/GroupsPanel.jsx
Normal file
@@ -0,0 +1,327 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import './GroupsPanel.css';
|
||||
|
||||
const GroupsPanel = ({ turtles, apiUrl, wsUrl }) => {
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [groupName, setGroupName] = useState('');
|
||||
const [groupColor, setGroupColor] = useState('#3b82f6');
|
||||
const [selectedGroup, setSelectedGroup] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState(null);
|
||||
|
||||
const colorPresets = [
|
||||
{ name: 'Blue', value: '#3b82f6' },
|
||||
{ name: 'Green', value: '#10b981' },
|
||||
{ name: 'Red', value: '#ef4444' },
|
||||
{ name: 'Yellow', value: '#f59e0b' },
|
||||
{ name: 'Purple', value: '#8b5cf6' },
|
||||
{ name: 'Pink', value: '#ec4899' },
|
||||
{ name: 'Cyan', value: '#06b6d4' },
|
||||
{ name: 'Orange', value: '#f97316' },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadGroups();
|
||||
|
||||
// Refresh groups every 10 seconds
|
||||
const interval = setInterval(loadGroups, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const loadGroups = async () => {
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/api/groups`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setGroups(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load groups:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const createGroup = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!groupName.trim()) {
|
||||
showMessage('Please enter a group name', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/api/groups`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
groupName: groupName.trim(),
|
||||
color: groupColor
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showMessage('Group created successfully!', 'success');
|
||||
setGroupName('');
|
||||
loadGroups();
|
||||
} else {
|
||||
showMessage('Failed to create group', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showMessage('Error creating group', 'error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteGroup = async (groupId) => {
|
||||
if (!confirm('Are you sure you want to delete this group?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/api/groups/${groupId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showMessage('Group deleted', 'success');
|
||||
if (selectedGroup?.groupId === groupId) {
|
||||
setSelectedGroup(null);
|
||||
}
|
||||
loadGroups();
|
||||
} else {
|
||||
showMessage('Failed to delete group', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showMessage('Error deleting group', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const addTurtleToGroup = async (groupId, turtleId) => {
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/api/groups/${groupId}/members`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ turtleId })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showMessage('Turtle added to group', 'success');
|
||||
loadGroups();
|
||||
} else {
|
||||
showMessage('Failed to add turtle', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showMessage('Error adding turtle', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const removeTurtleFromGroup = async (groupId, turtleId) => {
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/api/groups/${groupId}/members/${turtleId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showMessage('Turtle removed from group', 'success');
|
||||
loadGroups();
|
||||
} else {
|
||||
showMessage('Failed to remove turtle', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showMessage('Error removing turtle', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const sendGroupCommand = async (groupId, command) => {
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/api/groups/${groupId}/command`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ command })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
showMessage(`Command sent to ${data.sentTo} turtles`, 'success');
|
||||
} else {
|
||||
showMessage('Failed to send command', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showMessage('Error sending command', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const showMessage = (text, type) => {
|
||||
setMessage({ text, type });
|
||||
setTimeout(() => setMessage(null), 3000);
|
||||
};
|
||||
|
||||
const getTurtleById = (turtleId) => {
|
||||
return turtles.find(t => t.turtleID === turtleId);
|
||||
};
|
||||
|
||||
const getAvailableTurtles = (groupMembers) => {
|
||||
const memberIds = groupMembers.map(m => m.turtleId);
|
||||
return turtles.filter(t => !memberIds.includes(t.turtleID));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="groups-panel">
|
||||
<div className="groups-header">
|
||||
<h2>👥 Turtle Groups</h2>
|
||||
<div className="group-count">{groups.length} teams</div>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className={`message ${message.type}`}>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Group Form */}
|
||||
<div className="create-group-section">
|
||||
<h3>Create New Group</h3>
|
||||
<form onSubmit={createGroup} className="create-group-form">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Group name..."
|
||||
value={groupName}
|
||||
onChange={(e) => setGroupName(e.target.value)}
|
||||
maxLength={50}
|
||||
disabled={loading}
|
||||
/>
|
||||
<div className="color-picker">
|
||||
{colorPresets.map(preset => (
|
||||
<button
|
||||
key={preset.value}
|
||||
type="button"
|
||||
className={`color-option ${groupColor === preset.value ? 'active' : ''}`}
|
||||
style={{ backgroundColor: preset.value }}
|
||||
onClick={() => setGroupColor(preset.value)}
|
||||
title={preset.name}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<button type="submit" disabled={loading || !groupName.trim()}>
|
||||
{loading ? 'Creating...' : '➕ Create Group'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Groups List */}
|
||||
<div className="groups-list">
|
||||
{groups.length === 0 && (
|
||||
<div className="empty-state">
|
||||
<div className="empty-icon">👥</div>
|
||||
<div className="empty-title">No Groups Yet</div>
|
||||
<div className="empty-text">Create a group to organize your turtles into teams</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{groups.map(group => (
|
||||
<div key={group.groupId} className="group-card">
|
||||
<div className="group-header" style={{ borderLeftColor: group.color }}>
|
||||
<div className="group-title">
|
||||
<div
|
||||
className="group-color-indicator"
|
||||
style={{ backgroundColor: group.color }}
|
||||
/>
|
||||
<h3>{group.groupName}</h3>
|
||||
<span className="member-count">{group.memberCount} members</span>
|
||||
</div>
|
||||
<button
|
||||
className="delete-group-btn"
|
||||
onClick={() => deleteGroup(group.groupId)}
|
||||
title="Delete group"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Group Members */}
|
||||
<div className="group-members">
|
||||
<h4>Members:</h4>
|
||||
{group.members && group.members.length > 0 ? (
|
||||
<div className="members-list">
|
||||
{group.members.map(member => {
|
||||
const turtle = getTurtleById(member.turtleId);
|
||||
return (
|
||||
<div key={member.turtleId} className="member-item">
|
||||
<div className="member-info">
|
||||
<span className="member-icon">🐢</span>
|
||||
<span className="member-name">
|
||||
{turtle?.name || `Turtle ${member.turtleId}`}
|
||||
</span>
|
||||
{turtle && (
|
||||
<span className="member-status" title={turtle.mode}>
|
||||
{turtle.mode === 'exploring' && '🔍'}
|
||||
{turtle.mode === 'mining' && '⛏️'}
|
||||
{turtle.mode === 'returning' && '🏠'}
|
||||
{turtle.mode === 'idle' && '💤'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
className="remove-member-btn"
|
||||
onClick={() => removeTurtleFromGroup(group.groupId, member.turtleId)}
|
||||
title="Remove from group"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="no-members">No members yet</div>
|
||||
)}
|
||||
|
||||
{/* Add Member Dropdown */}
|
||||
{getAvailableTurtles(group.members || []).length > 0 && (
|
||||
<div className="add-member-section">
|
||||
<select
|
||||
onChange={(e) => {
|
||||
if (e.target.value) {
|
||||
addTurtleToGroup(group.groupId, parseInt(e.target.value));
|
||||
e.target.value = '';
|
||||
}
|
||||
}}
|
||||
defaultValue=""
|
||||
>
|
||||
<option value="">➕ Add turtle...</option>
|
||||
{getAvailableTurtles(group.members || []).map(turtle => (
|
||||
<option key={turtle.turtleID} value={turtle.turtleID}>
|
||||
🐢 {turtle.name || `Turtle ${turtle.turtleID}`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Group Commands */}
|
||||
{group.members && group.members.length > 0 && (
|
||||
<div className="group-commands">
|
||||
<h4>Group Commands:</h4>
|
||||
<div className="command-buttons">
|
||||
<button onClick={() => sendGroupCommand(group.groupId, 'explore')}>
|
||||
🔍 Explore
|
||||
</button>
|
||||
<button onClick={() => sendGroupCommand(group.groupId, 'mine')}>
|
||||
⛏️ Mine
|
||||
</button>
|
||||
<button onClick={() => sendGroupCommand(group.groupId, 'returnHome')}>
|
||||
🏠 Return Home
|
||||
</button>
|
||||
<button onClick={() => sendGroupCommand(group.groupId, 'stop')}>
|
||||
⏹️ Stop
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupsPanel;
|
||||
Reference in New Issue
Block a user