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

restyle TeamPanel and Calendar

Browse Source
This commit is contained in:
julius
2025-12-19 09:18:16 +01:00
parent 1968c21c96
commit e2677b60a3
3 changed files with 154 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
frontend/src/TeamPanel.tsx
View File

@@ -70,29 +70,21 @@ const TeamPanel = () => {
(team) => team.id == teams?.activeTeam
)[0];
return (
<div className="team-panel">
<h1>{activeTeam.name}</h1>
<div>
<input type="text" value={activeTeam.location || ""} disabled />
<br />
<input type="text" value={activeTeam.country || ""} disabled />
<hr style={{ width: "100%" }} />
<h2>players</h2>
<section className="section">
<h1 className="title">{activeTeam.name}</h1>
<h2 className="subtitle">
{activeTeam.location}, {activeTeam.country}
</h2>
<div className="box">
<h2 className="title is-4">Players</h2>
{players ? (
<div
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "center",
}}
>
<div className="buttons">
{players.map((p) => (
<button
className={
"team-player " +
"button is-primary is-light " +
p.gender +
(p.id === player.id ? " active-player" : "")
(p.id === player.id ? " is-focused is-active" : "")
}
key={p.id}
onClick={() => {
@@ -104,7 +96,7 @@ const TeamPanel = () => {
</button>
))}
<button
className="team-player new-player"
className="button is-success is-light new-player"
key="add-player"
onClick={() => {
setPlayer(newPlayerTemplate);
@@ -117,12 +109,14 @@ const TeamPanel = () => {
) : (
<span className="loader" />
)}
<hr style={{ width: "100%" }} />
</div>
<form className="new-player-inputs" onSubmit={handleSubmit}>
<div>
<label>name</label>
<form className="container block" onSubmit={handleSubmit}>
<div className="field">
<label className="label">name</label>
<div className="control">
<input
className="input"
type="text"
required
value={player.display_name}
@@ -138,9 +132,12 @@ const TeamPanel = () => {
}}
/>
</div>
<div>
<label>username</label>
</div>
<div className="field">
<label className="label">username</label>
<div className="control">
<input
className="input"
type="text"
required
disabled={player.id !== 0}
@@ -151,24 +148,31 @@ const TeamPanel = () => {
}}
/>
</div>
<div>
<label>gender</label>
<select
name="gender"
value={player.gender}
onChange={(e) => {
setPlayer({ ...player, 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 className="field">
<label className="label">gender</label>
<div className="control">
<div className="select">
<select
name="gender"
value={player.gender}
onChange={(e) => {
setPlayer({ ...player, 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>
<label>number (optional)</label>
</div>
<div className="field">
<label className="label">number (optional)</label>
<div className="control">
<input
className="input"
type="text"
value={player.number || ""}
onChange={(e) => {
@@ -177,9 +181,12 @@ const TeamPanel = () => {
}}
/>
</div>
<div>
<label>email (optional)</label>
</div>
<div className="field">
<label className="label">email (optional)</label>
<div className="control">
<input
className="input"
type="email"
value={player.email || ""}
onChange={(e) => {
@@ -188,36 +195,33 @@ const TeamPanel = () => {
}}
/>
</div>
<div style={{ margin: "auto" }}>
{error?.message && (
<span
style={{
color: error.ok ? "green" : "red",
}}
>
{error.message}
</span>
)}
</div>
<div style={{ margin: "auto" }}>
<button className="team-player new-player">
{player.id === 0 ? "add player" : "modify player"}
</button>
</div>
{player.id !== 0 && (
<div style={{ margin: "auto" }}>
<button
className="team-player disable-player"
onClick={handleDisable}
>
remove player
</button>
</div>
{error?.message && (
<p className={"help" + (error.ok ? " is-success" : " is-danger")}>
{error.message}
</p>
)}
</form>
</div>
</div>
<div className="field is-grouped">
<button
className={
"button is-light" +
(player.id === 0 ? " is-success" : " is-link")
}
>
{player.id === 0 ? "add player" : "modify player"}
</button>
{player.id !== 0 && (
<button
className="button is-danger is-light"
onClick={handleDisable}
>
remove player
</button>
)}
</div>
</form>
<Calendar playerId={player.id} />
</div>
</section>
);
} else <span className="loader" />;
};