146 lines
4.7 KiB
TypeScript
146 lines
4.7 KiB
TypeScript
import { Link } from 'react-router-dom'
|
||
import { getTeamDisplayName } from '../lib/match'
|
||
import type { LoadStatus, RoundGroup } from '../types'
|
||
|
||
type TeamSelectionPageProps = {
|
||
areaAInput: string
|
||
areaBInput: string
|
||
groups: RoundGroup[]
|
||
groupSource: 'idle' | 'db' | 'manual'
|
||
loadMessage: string
|
||
loadStatus: LoadStatus
|
||
targetDate: string
|
||
onAreaAInputChange: (value: string) => void
|
||
onAreaBInputChange: (value: string) => void
|
||
onGenerateManualGroups: () => void
|
||
onLoadGroupsFromDb: () => void
|
||
onTargetDateChange: (value: string) => void
|
||
onUseGroup: (groupId: number) => void
|
||
}
|
||
|
||
export function TeamSelectionPage({
|
||
areaAInput,
|
||
areaBInput,
|
||
groups,
|
||
groupSource,
|
||
loadMessage,
|
||
loadStatus,
|
||
targetDate,
|
||
onAreaAInputChange,
|
||
onAreaBInputChange,
|
||
onGenerateManualGroups,
|
||
onLoadGroupsFromDb,
|
||
onTargetDateChange,
|
||
onUseGroup,
|
||
}: TeamSelectionPageProps) {
|
||
const hasGroups = groups.length > 0
|
||
const showInlineStatus = loadStatus !== 'idle' && loadStatus !== 'loaded' && Boolean(loadMessage)
|
||
const sourceLabel =
|
||
groupSource === 'db' ? '資料庫載入' : groupSource === 'manual' ? '手動產生' : '尚未建立'
|
||
|
||
return (
|
||
<section className="page-grid">
|
||
{loadStatus === 'loaded' && loadMessage ? (
|
||
<div className="floating-status-bubble" role="status" aria-live="polite">
|
||
{loadMessage}
|
||
</div>
|
||
) : null}
|
||
|
||
<article className="panel">
|
||
<div className="selection-shell">
|
||
<div className="selection-toolbar">
|
||
<label className="field">
|
||
<span>指定日期</span>
|
||
<input
|
||
type="date"
|
||
value={targetDate}
|
||
onChange={(event) => onTargetDateChange(event.target.value)}
|
||
/>
|
||
</label>
|
||
|
||
<div className="button-stack">
|
||
<button className="primary-button" type="button" onClick={onLoadGroupsFromDb}>
|
||
從資料庫讀取
|
||
</button>
|
||
<button className="secondary-button" type="button" onClick={onGenerateManualGroups}>
|
||
手動產生分組
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{showInlineStatus ? (
|
||
<div className={`status-banner status-banner-${loadStatus}`}>{loadMessage}</div>
|
||
) : null}
|
||
|
||
<div className="double-grid">
|
||
<label className="field">
|
||
<span>A 區名單</span>
|
||
<textarea
|
||
placeholder="每行一位球員"
|
||
value={areaAInput}
|
||
onChange={(event) => onAreaAInputChange(event.target.value)}
|
||
/>
|
||
</label>
|
||
|
||
<label className="field">
|
||
<span>B 區名單</span>
|
||
<textarea
|
||
placeholder="每行一位球員"
|
||
value={areaBInput}
|
||
onChange={(event) => onAreaBInputChange(event.target.value)}
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="selection-hint">
|
||
<span>分組來源：{sourceLabel}</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article className="panel">
|
||
<div className="group-head">
|
||
<div>
|
||
<p className="panel-kicker">Step 2</p>
|
||
<h2>選擇要上場的組別</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="group-board">
|
||
{hasGroups ? (
|
||
groups.map((group) => (
|
||
<article key={group.id} className="group-card">
|
||
<div className="group-head group-head-compact">
|
||
<div>
|
||
<p className="panel-kicker">第 {group.id} 組</p>
|
||
<h3>本組對戰名單</h3>
|
||
</div>
|
||
<div className="group-actions">
|
||
<Link className="primary-button inline-link" to="/scoreboard" onClick={() => onUseGroup(group.id)}>
|
||
進入記分板
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="team-stage-grid">
|
||
{group.teams.map((team) => (
|
||
<article key={`${group.id}-${team.id}`} className="team-stage-card">
|
||
<span className="team-index">隊伍 {team.id}</span>
|
||
<div className="team-name">{getTeamDisplayName(team)}</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</article>
|
||
))
|
||
) : (
|
||
<div className="empty-state">
|
||
<h3>目前還沒有分組</h3>
|
||
<p>先從資料庫讀取指定日期，或輸入 A、B 區名單後手動建立。</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</article>
|
||
</section>
|
||
)
|
||
}
|