PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

some Fixes, see #45

Browse Source
This commit is contained in:
PxlLoewe
2025-07-05 00:59:22 -07:00
parent 80d2704852
commit 2cdbab9f28
9 changed files with 240 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
packages/shared-components/components/PenaltyDropdown.tsx
View File

@@ -17,96 +17,122 @@ export const PenaltyDropdown = ({
btnTip?: string;
Icon: ReactNode;
}) => {
const [open, setOpen] = useState(true);
const [reason, setReason] = useState("");
const [until, setUntil] = useState<string>("default");
return (
<details className="dropdown dropdown-left dropdown-center">
<summary className={cn("btn btn-xs btn-square btn-soft", btnClassName)}>{Icon}</summary>
<div
className="dropdown-content bg-base-100 rounded-box z-1 p-4 shadow-sm space-y-4 shadow-md"
style={{ minWidth: "500px", right: "40px" }}
>
<h2 className="text-xl font-blod text-center">{btnName}</h2>
<textarea
value={reason}
onChange={(e) => setReason(e.target.value)}
className="input w-full"
placeholder="Begründung"
style={{ minHeight: "100px" }}
/>
{showDatePicker && (
<select
className="select w-full select-bordered"
value={until}
onChange={(e) => setUntil(e.target.value)}
>
<option value="default" disabled>
Keine
</option>
<option value="1h">1 Stunde</option>
<option value="6h">6 Stunden</option>
<option value="12h">12 Stunden</option>
<option value="24h">24 Stunden</option>
<option value="72h">72 Stunden</option>
<option value="1w">1 Woche</option>
<option value="2w">2 Wochen</option>
<option value="1m">1 Monat</option>
<option value="3m">3 Monate</option>
<option value="6m">6 Monate</option>
<option value="1y">1 Jahr</option>
</select>
)}
<div className="dropdown dropdown-open">
<div tabIndex={0} role="button"></div>
<div className="indicator">
<button
className={cn("btn w-full btn-square btn-soft tooltip tooltip-bottom", btnClassName)}
data-tip={btnTip}
onClick={() => {
let untilDate: Date | null = null;
if (until !== "default") {
const now = new Date();
switch (until) {
case "1h":
untilDate = new Date(now.getTime() + 1 * 60 * 60 * 1000);
break;
case "6h":
untilDate = new Date(now.getTime() + 6 * 60 * 60 * 1000);
break;
case "12h":
untilDate = new Date(now.getTime() + 12 * 60 * 60 * 1000);
break;
case "24h":
untilDate = new Date(now.getTime() + 24 * 60 * 60 * 1000);
break;
case "72h":
untilDate = new Date(now.getTime() + 72 * 60 * 60 * 1000);
break;
case "1w":
untilDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
break;
case "2w":
untilDate = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000);
break;
case "1m":
untilDate = new Date(now.setMonth(now.getMonth() + 1));
break;
case "3m":
untilDate = new Date(now.setMonth(now.getMonth() + 3));
break;
case "6m":
untilDate = new Date(now.setMonth(now.getMonth() + 6));
break;
case "1y":
untilDate = new Date(now.setFullYear(now.getFullYear() + 1));
break;
default:
untilDate = null;
}
}
onClick({ reason, until: untilDate });
}}
className={cn("btn btn-xs btn-square btn-soft cursor-pointer", btnClassName)}
onClick={() => setOpen(!open)}
>
{Icon} {btnName}
{Icon}
</button>
</div>
{open && (
<div
className="dropdown-content bg-base-100 rounded-box z-1 p-4 shadow-sm space-y-4 shadow-md"
style={{ minWidth: "500px", right: "40px" }}
>
<button
className="absolute top-2 right-2 btn btn-xs btn-circle btn-ghost"
onClick={() => setOpen(false)}
type="button"
>
<span className="text-xl leading-none">&times;</span>
</button>
<h2 className="text-xl font-bold text-center">{btnName}</h2>
<textarea
value={reason}
onChange={(e) => setReason(e.target.value)}
className="input w-full"
placeholder="Begründung"
style={{ minHeight: "100px" }}
/>
{showDatePicker && (
<select
className="select w-full select-bordered"
value={until}
onChange={(e) => setUntil(e.target.value)}
>
<option value="default" disabled>
Keine
</option>
<option value="1h">1 Stunde</option>
<option value="6h">6 Stunden</option>
<option value="12h">12 Stunden</option>
<option value="24h">24 Stunden</option>
<option value="72h">72 Stunden</option>
<option value="1w">1 Woche</option>
<option value="2w">2 Wochen</option>
<option value="1m">1 Monat</option>
<option value="3m">3 Monate</option>
<option value="6m">6 Monate</option>
<option value="1y">1 Jahr</option>
</select>
)}
<button
className={cn("btn w-full btn-square btn-soft tooltip tooltip-bottom", btnClassName)}
data-tip={btnTip}
onClick={() => {
let untilDate: Date | null = null;
if (until !== "default") {
const now = new Date();
switch (until) {
case "1h":
untilDate = new Date(now.getTime() + 1 * 60 * 60 * 1000);
break;
case "6h":
untilDate = new Date(now.getTime() + 6 * 60 * 60 * 1000);
break;
case "12h":
untilDate = new Date(now.getTime() + 12 * 60 * 60 * 1000);
break;
case "24h":
untilDate = new Date(now.getTime() + 24 * 60 * 60 * 1000);
break;
case "72h":
untilDate = new Date(now.getTime() + 72 * 60 * 60 * 1000);
break;
case "1w":
untilDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
break;
case "2w":
untilDate = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000);
break;
case "1m":
untilDate = new Date(now.setMonth(now.getMonth() + 1));
break;
case "3m":
untilDate = new Date(now.setMonth(now.getMonth() + 3));
break;
case "6m":
untilDate = new Date(now.setMonth(now.getMonth() + 6));
break;
case "1y":
untilDate = new Date(now.setFullYear(now.getFullYear() + 1));
break;
default:
untilDate = null;
}
}
onClick({ reason, until: untilDate });
}}
>
{Icon} {btnName}
</button>
</div>
)}
</div>
);
return (
<details className={"dropdown dropdown-left dropdown-center dropdown-open"}>
<summary
className={cn("btn btn-xs btn-square btn-soft", btnClassName)}
onClick={() => setOpen(true)}
></summary>
</details>
);
};