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

Make Panel scrollable and on-top of map to prevent rerendering of map

Browse Source
This commit is contained in:
nocnico
2025-04-21 19:48:06 +02:00
parent b19cc864d3
commit e81d4a918a
5 changed files with 18 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/dispatch/app/dispatch/_components/pannel/MissionForm.tsx
View File

@@ -170,9 +170,11 @@ export const MissionForm: React.FC = () => {
/> />
</div> </div>
<button type="submit" className="btn btn-primary mt-4"> <div className="min-h-[140px]">
Alarmieren <button type="submit" className="btn btn-primary mt-4">
</button> Alarmieren
</button>
</div>
</form> </form>
); );
}; };

34
apps/dispatch/app/dispatch/_components/pannel/Missions.tsx
View File

@@ -1,34 +0,0 @@
import { useMissionsStore } from "_store/missionsStore";
export const Missions = () => {
const { missions } = useMissionsStore();
return (
<div>
<table className="table table-xs">
<thead>
<tr>
<th>ID</th>
<th>Einsatzmittel</th>
<th>Ort</th>
<th></th>
</tr>
</thead>
<tbody>
{missions.map((mission) => (
<tr key={mission.id}>
<td>{mission.id}</td>
<td>{mission.missionCategory}</td>
<td>
{mission.addressStreet}, {mission.addressCity}
</td>
<td>
<button className="btn btn-sm">Details</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
};

2
apps/dispatch/app/dispatch/_components/pannel/OpenButton.tsx
View File

@@ -14,7 +14,7 @@ export const OpenButton = () => {
isOpen && "transform translate-x-full", isOpen && "transform translate-x-full",
)} )}
> >
Open Neuer Einsatz
</button> </button>
); );
}; };

5
apps/dispatch/app/dispatch/_components/pannel/Pannel.tsx
View File

@@ -1,20 +1,19 @@
import { usePannelStore } from "_store/pannelStore"; import { usePannelStore } from "_store/pannelStore";
import { cn } from "helpers/cn"; import { cn } from "helpers/cn";
import { MissionForm } from "./MissionForm"; import { MissionForm } from "./MissionForm";
import { Trash2 } from "lucide-react";
export const Pannel = () => { export const Pannel = () => {
const { isOpen, setOpen } = usePannelStore(); const { isOpen, setOpen } = usePannelStore();
return ( return (
<div className={cn("flex-1 max-w-[600px] z-9999999")}> <div className={cn("flex-1 max-w-[600px] z-9999999")}>
<div className="bg-base-100 h-full w-full"> <div className="bg-base-100 min-h-screen h-full max-h-screen w-full overflow-auto">
<div className="flex flex-row justify-between items-center p-4"> <div className="flex flex-row justify-between items-center p-4">
<h1 className="text-xl font-bold">Neuer Einsatz</h1> <h1 className="text-xl font-bold">Neuer Einsatz</h1>
<button className="btn" onClick={() => setOpen(false)}> <button className="btn" onClick={() => setOpen(false)}>
Schließen Schließen
</button> </button>
</div> </div>
<div className="divider" /> <div className="divider m-0" />
<div className="p-4"> <div className="p-4">
<MissionForm /> <MissionForm />
</div> </div>

20
apps/dispatch/app/dispatch/page.tsx
View File

@@ -2,7 +2,6 @@
import { OpenButton } from "dispatch/_components/pannel/OpenButton"; import { OpenButton } from "dispatch/_components/pannel/OpenButton";
import { Pannel } from "dispatch/_components/pannel/Pannel"; import { Pannel } from "dispatch/_components/pannel/Pannel";
import MapToastCard2 from "dispatch/_components/toast/ToastCard";
import { usePannelStore } from "_store/pannelStore"; import { usePannelStore } from "_store/pannelStore";
import { cn } from "helpers/cn"; import { cn } from "helpers/cn";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
@@ -11,19 +10,20 @@ const Map = dynamic(() => import("./_components/map/Map"), { ssr: false });
export default () => { export default () => {
const { isOpen } = usePannelStore(); const { isOpen } = usePannelStore();
return ( return (
<div <div className="relative flex-1 flex transition-all duration-500 ease w-full">
className={cn(
"relative flex-1 flex transition-all duration-500 ease",
!isOpen && "w-[calc(100%+400px)]",
isOpen && "w-[100%]",
)}
>
{/* <MapToastCard2 /> */} {/* <MapToastCard2 /> */}
<div className="flex-1 relative flex"> <div className="flex flex-1 relative">
<OpenButton /> <OpenButton />
<Map /> <Map />
</div> </div>
<Pannel /> <div
className={cn(
"absolute right-0 w-[500px] z-999 transition-transform",
isOpen ? "translate-x-0" : "translate-x-full",
)}
>
<Pannel />
</div>
</div> </div>
); );
}; };