mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2025-12-04 23:31:55 +01:00
parent 9fa21a488a
commit fb509607c1
96 changed files with 5839 additions and 1609 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
apps/website/app/teams/[id]/page.tsx
View File

@@ -2,24 +2,22 @@
import { useState, useEffect, useCallback } from 'react';
import { useParams } from 'next/navigation';
import Image from 'next/image';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import { getImageService } from '@/lib/di-container';
import TeamRoster from '@/components/teams/TeamRoster';
import TeamStandings from '@/components/teams/TeamStandings';
import TeamAdmin from '@/components/teams/TeamAdmin';
import JoinTeamButton from '@/components/teams/JoinTeamButton';
import {
Team,
getTeam,
getTeamMembers,
getCurrentDriverId,
isTeamOwnerOrManager,
TeamMembership,
removeTeamMember,
updateTeamMemberRole,
TeamRole,
} from '@/lib/racingLegacyFacade';
getGetTeamDetailsQuery,
getGetTeamMembersQuery,
getTeamMembershipRepository,
} from '@/lib/di-container';
import { useEffectiveDriverId } from '@/lib/currentDriver';
import type { Team, TeamMembership, TeamRole } from '@gridpilot/racing';
type Tab = 'overview' | 'roster' | 'standings' | 'admin';
@@ -32,50 +30,87 @@ export default function TeamDetailPage() {
const [activeTab, setActiveTab] = useState<Tab>('overview');
const [loading, setLoading] = useState(true);
const [isAdmin, setIsAdmin] = useState(false);
const currentDriverId = useEffectiveDriverId();
const loadTeamData = useCallback(() => {
const teamData = getTeam(teamId);
if (!teamData) {
const loadTeamData = useCallback(async () => {
setLoading(true);
try {
const detailsQuery = getGetTeamDetailsQuery();
const membersQuery = getGetTeamMembersQuery();
const details = await detailsQuery.execute({ teamId, driverId: currentDriverId });
const teamMemberships = await membersQuery.execute({ teamId });
const adminStatus =
teamMemberships.some(
(m) =>
m.driverId === currentDriverId &&
(m.role === 'owner' || m.role === 'manager'),
) ?? false;
setTeam(details.team);
setMemberships(teamMemberships);
setIsAdmin(adminStatus);
} finally {
setLoading(false);
return;
}
const teamMemberships = getTeamMembers(teamId);
const currentDriverId = getCurrentDriverId();
const adminStatus = isTeamOwnerOrManager(teamId, currentDriverId);
setTeam(teamData);
setMemberships(teamMemberships);
setIsAdmin(adminStatus);
setLoading(false);
}, [teamId]);
}, [teamId, currentDriverId]);
useEffect(() => {
loadTeamData();
void loadTeamData();
}, [loadTeamData]);
const handleUpdate = () => {
loadTeamData();
};
const handleRemoveMember = (driverId: string) => {
const handleRemoveMember = async (driverId: string) => {
if (!confirm('Are you sure you want to remove this member?')) {
return;
}
try {
const currentDriverId = getCurrentDriverId();
removeTeamMember(teamId, driverId, currentDriverId);
const membershipRepo = getTeamMembershipRepository();
const performer = await membershipRepo.getMembership(teamId, currentDriverId);
if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
throw new Error('Only owners or managers can remove members');
}
const membership = await membershipRepo.getMembership(teamId, driverId);
if (!membership) {
throw new Error('Member not found');
}
if (membership.role === 'owner') {
throw new Error('Cannot remove the team owner');
}
await membershipRepo.removeMembership(teamId, driverId);
handleUpdate();
} catch (error) {
alert(error instanceof Error ? error.message : 'Failed to remove member');
}
};
const handleChangeRole = (driverId: string, newRole: TeamRole) => {
const handleChangeRole = async (driverId: string, newRole: TeamRole) => {
try {
const currentDriverId = getCurrentDriverId();
updateTeamMemberRole(teamId, driverId, newRole, currentDriverId);
const membershipRepo = getTeamMembershipRepository();
const performer = await membershipRepo.getMembership(teamId, currentDriverId);
if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
throw new Error('Only owners or managers can update roles');
}
const membership = await membershipRepo.getMembership(teamId, driverId);
if (!membership) {
throw new Error('Member not found');
}
if (membership.role === 'owner') {
throw new Error('Cannot change the owner role');
}
await membershipRepo.saveMembership({
...membership,
role: newRole,
});
handleUpdate();
} catch (error) {
alert(error instanceof Error ? error.message : 'Failed to change role');
@@ -131,10 +166,14 @@ export default function TeamDetailPage() {
<Card className="mb-6">
<div className="flex items-start justify-between">
<div className="flex items-start gap-6">
<div className="w-24 h-24 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0">
<span className="text-4xl font-bold text-gray-500">
{team.tag}
</span>
<div className="w-24 h-24 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
<Image
src={getImageService().getTeamLogo(team.id)}
alt={team.name}
width={96}
height={96}
className="w-full h-full object-cover"
/>
</div>
<div>

163
apps/website/app/teams/page.tsx
View File

@@ -2,12 +2,21 @@
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import TeamCard from '@/components/teams/TeamCard';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import Card from '@/components/ui/Card';
import CreateTeamForm from '@/components/teams/CreateTeamForm';
import { getAllTeams, getTeamMembers, type Team } from '@/lib/racingLegacyFacade';
import TeamLadderRow from '@/components/teams/TeamLadderRow';
import { getGetAllTeamsQuery, getGetTeamMembersQuery, getDriverStats } from '@/lib/di-container';
import type { Team } from '@gridpilot/racing';
type TeamLadderItem = {
team: Team;
memberCount: number;
rating: number | null;
totalWins: number;
totalRaces: number;
};
export default function TeamsPage() {
const router = useRouter();
@@ -15,25 +24,72 @@ export default function TeamsPage() {
const [showCreateForm, setShowCreateForm] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [memberFilter, setMemberFilter] = useState('all');
const [memberCounts, setMemberCounts] = useState<Record<string, number>>({});
const [teamStats, setTeamStats] = useState<Record<string, Omit<TeamLadderItem, 'team' | 'memberCount'>>>({});
const loadTeams = async () => {
const allTeamsQuery = getGetAllTeamsQuery();
const teamMembersQuery = getGetTeamMembersQuery();
const allTeams = await allTeamsQuery.execute();
setTeams(allTeams);
const counts: Record<string, number> = {};
const stats: Record<string, Omit<TeamLadderItem, 'team' | 'memberCount'>> = {};
await Promise.all(
allTeams.map(async (team) => {
const memberships = await teamMembersQuery.execute({ teamId: team.id });
counts[team.id] = memberships.length;
const memberDriverIds = memberships.map((m) => m.driverId);
let ratingSum = 0;
let ratingCount = 0;
let totalWins = 0;
let totalRaces = 0;
for (const driverId of memberDriverIds) {
const statsForDriver = getDriverStats(driverId);
if (!statsForDriver) continue;
if (typeof statsForDriver.rating === 'number') {
ratingSum += statsForDriver.rating;
ratingCount += 1;
}
totalWins += statsForDriver.wins ?? 0;
totalRaces += statsForDriver.totalRaces ?? 0;
}
const averageRating =
ratingCount > 0 ? ratingSum / ratingCount : null;
stats[team.id] = {
rating: averageRating,
totalWins,
totalRaces,
};
}),
);
setMemberCounts(counts);
setTeamStats(stats);
};
useEffect(() => {
loadTeams();
void loadTeams();
}, []);
const loadTeams = () => {
const allTeams = getAllTeams();
setTeams(allTeams);
};
const handleCreateSuccess = (teamId: string) => {
setShowCreateForm(false);
loadTeams();
void loadTeams();
router.push(`/teams/${teamId}`);
};
const filteredTeams = teams.filter((team) => {
const memberCount = getTeamMembers(team.id).length;
const memberCount = memberCounts[team.id] ?? 0;
const matchesSearch = team.name.toLowerCase().includes(searchQuery.toLowerCase());
const matchesMemberCount =
memberFilter === 'all' ||
@@ -44,6 +100,30 @@ export default function TeamsPage() {
return matchesSearch && matchesMemberCount;
});
const sortedTeams = [...filteredTeams].sort((a, b) => {
const statsA = teamStats[a.id];
const statsB = teamStats[b.id];
const ratingA = statsA?.rating ?? null;
const ratingB = statsB?.rating ?? null;
const ratingValA = ratingA === null ? Number.NEGATIVE_INFINITY : ratingA;
const ratingValB = ratingB === null ? Number.NEGATIVE_INFINITY : ratingB;
if (ratingValA !== ratingValB) {
return ratingValB - ratingValA;
}
const winsA = statsA?.totalWins ?? 0;
const winsB = statsB?.totalWins ?? 0;
if (winsA !== winsB) {
return winsB - winsA;
}
return a.name.localeCompare(b.name);
});
const handleTeamClick = (teamId: string) => {
router.push(`/teams/${teamId}`);
};
@@ -118,27 +198,54 @@ export default function TeamsPage() {
</div>
</Card>
<div className="mb-4">
<div className="mb-4 flex items-center justify-between">
<p className="text-sm text-gray-400">
{filteredTeams.length} {filteredTeams.length === 1 ? 'team' : 'teams'} found
{sortedTeams.length} {sortedTeams.length === 1 ? 'team' : 'teams'} found
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredTeams.map((team) => {
const memberCount = getTeamMembers(team.id).length;
return (
<TeamCard
key={team.id}
id={team.id}
name={team.name}
memberCount={memberCount}
leagues={team.leagues}
onClick={() => handleTeamClick(team.id)}
/>
);
})}
</div>
{sortedTeams.length > 0 && (
<Card>
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-charcoal-outline">
<th className="text-left py-3 px-4 font-semibold text-gray-400">#</th>
<th className="text-left py-3 px-4 font-semibold text-gray-400">Team</th>
<th className="text-left py-3 px-4 font-semibold text-gray-400">Rating</th>
<th className="text-left py-3 px-4 font-semibold text-gray-400">Wins</th>
<th className="text-left py-3 px-4 font-semibold text-gray-400">Races</th>
<th className="text-left py-3 px-4 font-semibold text-gray-400">Members</th>
</tr>
</thead>
<tbody>
{sortedTeams.map((team, index) => {
const memberCount = memberCounts[team.id] ?? 0;
const statsForTeam = teamStats[team.id];
const rating = statsForTeam?.rating ?? null;
const totalWins = statsForTeam?.totalWins ?? 0;
const totalRaces = statsForTeam?.totalRaces ?? 0;
const rank = index + 1;
return (
<TeamLadderRow
key={team.id}
rank={rank}
teamId={team.id}
teamName={team.name}
memberCount={memberCount}
teamRating={rating}
totalWins={totalWins}
totalRaces={totalRaces}
/>
);
})}
</tbody>
</table>
</div>
</Card>
)}
{filteredTeams.length === 0 && (
<Card className="text-center py-12">