julius/cutt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of git.0124816.xyz:julius/cutt

Browse Source
This commit is contained in:
julius
2025-12-19 09:22:06 +00:00
parent caaf180ca4 a703a12ebf
commit 4b4a9ba8d4
1 changed files with 146 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
frontend/src/TeamPanel.tsx
View File

@@ -70,158 +70,169 @@ const TeamPanel = () => {
(team) => team.id == teams?.activeTeam (team) => team.id == teams?.activeTeam
)[0]; )[0];
return ( return (
<section className="section"> <>
<h1 className="title">{activeTeam.name}</h1> <section className="section">
<h2 className="subtitle"> <h1 className="title">{activeTeam.name}</h1>
{activeTeam.location}, {activeTeam.country} <h2 className="subtitle">
</h2> {activeTeam.location}, {activeTeam.country}
<div className="box"> </h2>
<h2 className="title is-4">Players</h2> <div className="box">
{players ? ( <h2 className="title is-4">Players</h2>
<div className="buttons"> {players ? (
{players.map((p) => ( <div className="buttons">
{players.map((p) => (
<button
className={
"button is-primary is-light " +
p.gender +
(p.id === player.id ? " is-focused is-active" : "")
}
key={p.id}
onClick={() => {
setPlayer(p);
setError({ ok: true, message: "" });
}}
>
{p.display_name}
</button>
))}
<button <button
className={ className="button is-success is-light new-player"
"button is-primary is-light " + key="add-player"
p.gender +
(p.id === player.id ? " is-focused is-active" : "")
}
key={p.id}
onClick={() => { onClick={() => {
setPlayer(p); setPlayer(newPlayerTemplate);
setError({ ok: true, message: "" }); setError({ ok: true, message: "" });
}} }}
> >
{p.display_name} +
</button> </button>
))} </div>
<button ) : (
className="button is-success is-light new-player" <span className="loader" />
key="add-player" )}
onClick={() => { </div>
setPlayer(newPlayerTemplate);
setError({ ok: true, message: "" });
}}
>
+
</button>
</div>
) : (
<span className="loader" />
)}
</div>
<form className="container block" onSubmit={handleSubmit}> <form className="container block" onSubmit={handleSubmit}>
<div className="field"> <div className="field">
<label className="label">name</label> <label className="label">name</label>
<div className="control"> <div className="control">
<input <input
className="input" className="input"
type="text" type="text"
required required
value={player.display_name} value={player.display_name}
onChange={(e) => {
setPlayer({
...player,
...(player.id === 0 && {
username: e.target.value.toLowerCase().replace(/\W/g, ""),
}),
display_name: e.target.value,
});
setError({ ok: true, message: "" });
}}
/>
</div>
</div>
<div className="field">
<label className="label">username</label>
<div className="control">
<input
className="input"
type="text"
required
disabled={player.id !== 0}
value={player.username}
onChange={(e) => {
setPlayer({ ...player, username: e.target.value });
setError({ ok: true, message: "" });
}}
/>
</div>
</div>
<div className="field">
<label className="label">gender</label>
<div className="control">
<div className="select">
<select
name="gender"
value={player.gender}
onChange={(e) => { onChange={(e) => {
setPlayer({ ...player, gender: e.target.value as Gender }); setPlayer({
...player,
...(player.id === 0 && {
username: e.target.value
.toLowerCase()
.replace(/\W/g, ""),
}),
display_name: e.target.value,
});
setError({ ok: true, message: "" }); setError({ ok: true, message: "" });
}} }}
> />
<option value={undefined}></option>
<option value="fmp">FMP</option>
<option value="mmp">MMP</option>
</select>
</div> </div>
</div> </div>
</div> <div className="field">
<div className="field"> <label className="label">username</label>
<label className="label">number (optional)</label> <div className="control">
<div className="control"> <input
<input className="input"
className="input" type="text"
type="text" required
value={player.number || ""} disabled={player.id !== 0}
onChange={(e) => { value={player.username}
setPlayer({ ...player, number: e.target.value }); onChange={(e) => {
setError({ ok: true, message: "" }); setPlayer({ ...player, username: e.target.value });
}} setError({ ok: true, message: "" });
/> }}
/>
</div>
</div> </div>
</div> <div className="field">
<div className="field"> <label className="label">gender</label>
<label className="label">email (optional)</label> <div className="control">
<div className="control"> <div className="select">
<input <select
className="input" name="gender"
type="email" value={player.gender}
value={player.email || ""} onChange={(e) => {
onChange={(e) => { setPlayer({
setPlayer({ ...player, email: e.target.value }); ...player,
setError({ ok: true, message: "" }); gender: e.target.value as Gender,
}} });
/> setError({ ok: true, message: "" });
}}
>
<option value={undefined}></option>
<option value="fmp">FMP</option>
<option value="mmp">MMP</option>
</select>
</div>
</div>
</div> </div>
{error?.message && ( <div className="field">
<p className={"help" + (error.ok ? " is-success" : " is-danger")}> <label className="label">number (optional)</label>
{error.message} <div className="control">
</p> <input
)} className="input"
</div> type="text"
<div className="field is-grouped"> value={player.number || ""}
<button onChange={(e) => {
className={ setPlayer({ ...player, number: e.target.value });
"button is-light" + setError({ ok: true, message: "" });
(player.id === 0 ? " is-success" : " is-link") }}
} />
> </div>
{player.id === 0 ? "add player" : "modify player"} </div>
</button> <div className="field">
{player.id !== 0 && ( <label className="label">email (optional)</label>
<div className="control">
<input
className="input"
type="email"
value={player.email || ""}
onChange={(e) => {
setPlayer({ ...player, email: e.target.value });
setError({ ok: true, message: "" });
}}
/>
</div>
{error?.message && (
<p
className={"help" + (error.ok ? " is-success" : " is-danger")}
>
{error.message}
</p>
)}
</div>
<div className="field is-grouped">
<button <button
className="button is-danger is-light" className={
onClick={handleDisable} "button is-light" +
(player.id === 0 ? " is-success" : " is-link")
}
> >
remove player {player.id === 0 ? "add player" : "modify player"}
</button> </button>
)} {player.id !== 0 && (
</div> <button
</form> className="button is-danger is-light"
<Calendar playerId={player.id} /> onClick={handleDisable}
</section> >
remove player
</button>
)}
</div>
</form>
</section>
<section className="section">
<Calendar playerId={player.id} />
</section>
</>
); );
} else <span className="loader" />; } else <span className="loader" />;
}; };