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

Mission Marker Home & Log Page

Browse Source
This commit is contained in:
nocnico
2025-04-24 23:29:50 +02:00
parent 25d5b0dbb5
commit 9684d79e21
4 changed files with 152 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/dispatch/app/_store/missionsStore.ts
View File

@@ -23,10 +23,10 @@ export const useMissionsStore = create<MissionStore>((set) => ({
missionAdditionalInfo: "",
addressLat: 52.520008,
addressLng: 13.404954,
missionKeywordName: "Test",
missionKeywordCategory: "Test",
missionKeywordAbbreviation: "Test",
missionPatientInfo: "Test",
missionKeywordName: "TestKName",
missionKeywordCategory: "TestKCategory",
missionKeywordAbbreviation: "TestKAbbreviation",
missionPatientInfo: "TestPatientInfo",
missionStationIds: [],
createdUserId: "1",
missionLog: [],
@@ -73,7 +73,7 @@ export const useMissionsStore = create<MissionStore>((set) => ({
});
if (!res.ok) return undefined;
const data = await res.json();
set({ missions: data });
//set({ missions: data });
return undefined;
},
setMission: (mission) =>

3
apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx
View File

@@ -47,6 +47,7 @@ export const FMS_STATUS_TEXT_COLORS: { [key: string]: string } = {
"7": "rgb(243,27,25)",
"8": "rgb(255,143,0)",
"9": "rgb(9,212,33)",
N: "rgb(153,153,153)",
};
const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
@@ -97,7 +98,7 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
});
}}
>
<Minimize2 className="text-white " size={15} />
<Minimize2 className="text-white" size={16} />
</div>
<div

35
apps/dispatch/app/dispatch/_components/map/MissionMarkers.tsx
View File

@@ -1,5 +1,5 @@
import { useMissionsStore } from "_store/missionsStore";
import { Marker, Popup, useMap } from "react-leaflet";
import { Marker, useMap } from "react-leaflet";
import { DivIcon, Marker as LMarker, Popup as LPopup } from "leaflet";
import { useMapStore } from "_store/mapStore";
import {
@@ -11,10 +11,12 @@ import {
useState,
} from "react";
import { cn } from "helpers/cn";
import { Cross, House, Minimize2, Route } from "lucide-react";
import { ClipboardList, Cross, House, Minimize2, Route } from "lucide-react";
import { SmartPopup, useConflict, useSmartPopup } from "_components/SmartPopup";
import { Mission, MissionState } from "@repo/db";
import FMSStatusHistory from "./_components/MissionMarkerTabs";
import Einsatzdetails, {
FMSStatusHistory,
} from "./_components/MissionMarkerTabs";
export const MISSION_STATUS_COLORS: Record<MissionState, string> = {
draft: "#0092b8",
@@ -31,11 +33,13 @@ export const MISSION_STATUS_TEXT_COLORS: Record<MissionState, string> = {
const MissionPopupContent = ({ mission }: { mission: Mission }) => {
const setMissionTab = useMapStore((state) => state.setMissionTab);
const currentTab = useMapStore(
(state) => state.missionTabs[mission.id] || "home",
(state) =>
state.missionTabs[mission.id] ||
("home" as "home" | "details" | "chat" | "log"),
);
const handleTabChange = useCallback(
(tab: "home" | "details" | "chat") => {
(tab: "home" | "details" | "chat" | "log") => {
if (currentTab !== tab) {
setMissionTab(mission.id, tab);
}
@@ -46,11 +50,13 @@ const MissionPopupContent = ({ mission }: { mission: Mission }) => {
const renderTabContent = useMemo(() => {
switch (currentTab) {
case "home":
return <FMSStatusHistory />;
return <Einsatzdetails />;
case "details":
return <div>Details Content</div>;
case "chat":
return <div>Chat Content</div>;
case "log":
return <FMSStatusHistory />;
default:
return <span className="text-gray-100">Error</span>;
}
@@ -72,7 +78,7 @@ const MissionPopupContent = ({ mission }: { mission: Mission }) => {
});
}}
>
<Minimize2 className="text-white" />
<Minimize2 className="text-white" size={16} />
</div>
<div
@@ -142,6 +148,19 @@ const MissionPopupContent = ({ mission }: { mission: Mission }) => {
>
<Cross className="text-sm" />
</div>
<div
className="p-2 px-4 flex justify-center items-center cursor-pointer ml-auto"
style={{
backgroundColor: `${MISSION_STATUS_COLORS[mission.state]}`,
borderBottom:
currentTab === "log"
? `5px solid ${MISSION_STATUS_TEXT_COLORS[mission.state]}`
: "5px solid transparent",
}}
onClick={() => handleTabChange("log")}
>
<ClipboardList className="text-sm" />
</div>
</div>
</div>
<div>{renderTabContent}</div>
@@ -239,7 +258,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
"
></div>
<span class="text-white text-[15px] text-nowrap">
${mission.missionSummary}
${mission.missionKeywordCategory}
</span>
<div
data-id="${mission.id}"

144
apps/dispatch/app/dispatch/_components/map/_components/MissionMarkerTabs.tsx
View File

@@ -1,41 +1,132 @@
"use client";
import React from "react";
import React, { useState } from "react";
import { FMS_STATUS_TEXT_COLORS } from "../AircraftMarker";
import {
Ban,
BellRing,
Flag,
Hash,
ListCollapse,
LocateFixed,
MapPin,
Navigation,
Plus,
Repeat2,
} from "lucide-react";
const Einsatzdetails = () => {
return (
<div className="p-4 text-base-content">
<h2 className="flex items-center gap-2 text-lg font-bold mb-3">
<Flag /> Einsatzdetails
</h2>
<ul className="text-base-content font-semibold">
<li className="flex items-center gap-2 mb-1">
<BellRing size={16} /> AB_ATMUNG
</li>
<li className="flex items-center gap-2 mb-1">
<ListCollapse size={16} />
Gleichbleibende Atembeschwerden
</li>
<li className="flex items-center gap-2 mt-3">
<Hash size={16} />
__202504161
</li>
</ul>
<div className="divider mt-0 mb-0" />
<div className="text-sm font-semibold">
<p className="flex items-center gap-2">
<MapPin size={16} /> 52.520008, 13.404954
</p>
<p className="flex items-center gap-2">
<Navigation size={16} /> Alexanderplatz
</p>
<p className="flex items-center gap-2">
<LocateFixed size={16} /> Berlin, 10178
</p>
</div>
<div className="divider mt-0 mb-0" />
<div className="flex items-center gap-2 w-full pr-2">
<button className="btn btn-sm btn-info btn-outline btn-block basis-5/8">
<span className="flex items-center gap-2">
<BellRing size={16} /> Alarmieren
</span>
</button>
<button className="btn btn-sm btn-primary btn-dash btn-block basis-3/8">
<span className="flex items-center gap-2">
<Repeat2 size={18} /> Daten übernehmen
</span>
</button>
</div>
</div>
);
};
const FMSStatusHistory = () => {
const [isAddingNote, setIsAddingNote] = useState(false);
const [note, setNote] = useState("");
const dummyData = [
{ status: "3", time: "12:00", unit: "RTW", unitshort: "RTW" },
{ status: "3", time: "12:01", unit: "Christoph 31", unitshort: "CHX31" },
{ status: "4", time: "12:09", unit: "RTW", unitshort: "RTW" },
{ status: "4", time: "12:11", unit: "Christoph 31", unitshort: "CHX31" },
{ status: "7", time: "12:34", unit: "RTW", unitshort: "RTW" },
{
status: "N",
time: "12:39",
unit: "RTH defekt, verbleibt an Einsatzort",
unitshort: "",
},
{ status: "1", time: "12:38", unit: "Christoph 31", unitshort: "CHX31" },
{ status: "7", time: "12:34", unit: "RTW", unitshort: "RTW" },
{ status: "4", time: "12:11", unit: "Christoph 31", unitshort: "CHX31" },
{ status: "4", time: "12:09", unit: "RTW", unitshort: "RTW" },
{ status: "3", time: "12:01", unit: "Christoph 31", unitshort: "CHX31" },
{ status: "3", time: "12:00", unit: "RTW", unitshort: "RTW" },
];
return (
<div className="p-4">
<div className="flex items-center gap-2">
{[
...new Map(dummyData.map((entry) => [entry.unit, entry])).values(),
].map((entry, index, array) => (
<React.Fragment key={index}>
<div className="flex items-center gap-2">
<span
className="font-bold text-base"
style={{
color: FMS_STATUS_TEXT_COLORS[entry.status],
}}
>
{entry.status}
</span>
<span className="text-base-content">{entry.unitshort}</span>
</div>
{index < array.length - 1 && <span className="mx-1">|</span>}
</React.Fragment>
))}
{!isAddingNote ? (
<button
className="text-base-content text-base cursor-pointer"
onClick={() => setIsAddingNote(true)}
>
<span className="flex items-center gap-2">
<Plus size={18} /> Notiz hinzufügen
</span>
</button>
) : (
<div className="flex items-center gap-2 w-full">
<input
type="text"
placeholder=""
className="input input-sm text-base-content"
value={note}
onChange={(e) => setNote(e.target.value)}
/>
<button
className="btn btn-sm btn-primary btn-outline"
onClick={() => {
console.log("Note submitted:", note);
setIsAddingNote(false);
setNote("");
}}
>
<Plus size={20} />
</button>
<button
className="btn btn-sm btn-outline"
onClick={() => {
setIsAddingNote(false);
setNote("");
}}
>
<Ban size={20} />
</button>
</div>
)}
</div>
<div className="divider m-0" />
<ul className="space-y-2">
<ul className="space-y-2 max-h-[300px] overflow-y-auto overflow-x-auto">
{dummyData.map((entry, index) => (
<li key={index} className="flex items-center gap-2">
<span className="text-base-content">{entry.time}</span>
@@ -55,4 +146,5 @@ const FMSStatusHistory = () => {
);
};
export default FMSStatusHistory;
export { FMSStatusHistory };
export default Einsatzdetails;