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

Fahrzeugauswahl überarbeitet

Browse Source
This commit is contained in:
PxlLoewe
2025-07-01 02:19:00 -07:00
parent 169a05ed8f
commit 157394767f
9 changed files with 249 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
apps/dispatch/app/_components/Select.tsx
View File

@@ -1,16 +1,8 @@
"use client";
import { FieldValues, Path, RegisterOptions, UseFormReturn } from "react-hook-form";
import { FieldValues, Path } from "react-hook-form";
import SelectTemplate, { Props as SelectTemplateProps, StylesConfig } from "react-select";
import { cn } from "@repo/shared-components";
import dynamic from "next/dynamic";
import { CSSProperties } from "react";
interface SelectProps<T extends FieldValues> extends Omit<SelectTemplateProps, "form"> {
label?: any;
name: Path<T>;
form: UseFormReturn<T> | any;
formOptions?: RegisterOptions<T>;
}
const customStyles: StylesConfig<any, false> = {
control: (provided) => ({
@@ -28,7 +20,7 @@ const customStyles: StylesConfig<any, false> = {
...provided,
backgroundColor: state.isSelected ? "hsl(var(--p))" : "hsl(var(--b1))",
color: "var(--color-primary-content)",
"&:hover": { backgroundColor: "var(--color-base-200)" }, // DaisyUI secondary color
"&:hover": { backgroundColor: "var(--color-base-200)" },
}),
multiValueLabel: (provided) => ({
...provided,
@@ -46,53 +38,55 @@ const customStyles: StylesConfig<any, false> = {
...provided,
backgroundColor: "var(--color-base-100)",
borderRadius: "0.5rem",
zIndex: 9999,
}),
};
const SelectCom = <T extends FieldValues>({
name,
label = name,
interface SelectProps extends Omit<SelectTemplateProps, "form" | "value" | "onChange"> {
label?: any;
value: any;
onChange: (value: any) => void;
error?: string;
}
const SelectCom = ({
label,
placeholder = label,
form,
formOptions,
value,
onChange,
error,
className,
...inputProps
}: SelectProps<T>) => {
}: SelectProps) => {
return (
<div>
<div className="relative">
<span className="label-text text-lg flex items-center gap-2">{label}</span>
<SelectTemplate
onChange={(newValue: any) => {
if (Array.isArray(newValue)) {
form.setValue(name, newValue.map((v: any) => v.value) as any, {
shouldDirty: true,
});
if ((inputProps as any)?.isMulti) {
onChange(Array.isArray(newValue) ? newValue.map((v: any) => v.value) : []);
} else {
form.setValue(name, newValue.value, {
shouldDirty: true,
});
onChange(newValue ? newValue.value : null);
}
form.trigger(name);
form.Dirty;
}}
value={
(inputProps as any)?.isMulti
? (inputProps as any).options?.filter((o: any) => form.watch(name)?.includes(o.value))
: (inputProps as any).options?.find((o: any) => o.value === form.watch(name))
? (inputProps as any).options?.filter(
(o: any) => Array.isArray(value) && value.includes(o.value),
)
: (inputProps as any).options?.find((o: any) => o.value === value)
}
styles={customStyles as any}
className={cn("w-full placeholder:text-neutral-600", className)}
placeholder={placeholder}
{...inputProps}
/>
{form.formState.errors[name]?.message && (
<p className="text-error">{form.formState.errors[name].message as string}</p>
)}
{error && <p className="text-error">{error}</p>}
</div>
);
};
const SelectWrapper = <T extends FieldValues>(props: SelectProps<T>) => <SelectCom {...props} />;
const SelectWrapper = <T extends FieldValues>(props: SelectProps) => <SelectCom {...props} />;
export const Select = dynamic(() => Promise.resolve(SelectWrapper), {
ssr: false,

1
apps/dispatch/app/_components/left/Chat.tsx
View File

@@ -140,6 +140,7 @@ export const Chat = () => {
{chat.notification && <span className="indicator-item status status-info" />}
</a>
<div className="tab-content bg-base-100 border-base-300 p-6 overflow-y-auto max-h-[250px]">
{/* So macht man kein overflow handeling, weiß ich. Aber es funktioniert... */}
{chat.messages.map((chatMessage) => {
const isSender = chatMessage.senderId === session.data?.user.id;
return (

22
apps/dispatch/app/_components/map/BaseMaps.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { usePannelStore } from "_store/pannelStore";
import { Control, Icon, LatLngExpression } from "leaflet";
import { useEffect, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import {
LayerGroup,
LayersControl,
@@ -73,9 +73,9 @@ const StationsLayer = ({ attribution }: { attribution: Control.Attribution }) =>
queryKey: ["stations"],
queryFn: () => getStationsAPI(),
});
console.log("StationsLayer: stations", stations);
const [selectedStations, setSelectedStations] = useState<Station["id"][]>([]);
const [stationsWithIcon, setStationsWithIcon] = useState<(Station & { icon?: string })[]>([]); // Zustand für die Stationen mit Icon
const attributionText = "";
const resetSelection = () => {
@@ -94,27 +94,29 @@ const StationsLayer = ({ attribution }: { attribution: Control.Attribution }) =>
}
};
useEffect(() => {
// Erstelle die Icons für alle Stationen
const [stationsWithIcon, setStationsWithIcon] = useState<(Station & { icon: string })[]>([]);
useEffect(() => {
if (!stations) {
setStationsWithIcon([]);
return;
}
const fetchIcons = async () => {
if (!stations) return;
const urls = await Promise.all(
stations.map(async (station) => {
return createCustomMarker(station.operator);
return await createCustomMarker(station.operator);
}),
);
setStationsWithIcon(stations.map((station, index) => ({ ...station, icon: urls[index] })));
setStationsWithIcon(stations.map((station, index) => ({ ...station, icon: urls[index]! })));
};
fetchIcons();
}, [stations]);
return (
<FeatureGroup>
{stationsWithIcon.map((station) => {
{stationsWithIcon?.map((station) => {
const coordinates: LatLngExpression = [station.latitude, station.longitude];
const typeLabel = station.bosUse.charAt(0).toUpperCase();
const typeLabel = station.bosUse?.charAt(0).toUpperCase();
return (
<Marker

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

@@ -48,6 +48,7 @@ import { HPGValidationRequired } from "_helpers/hpgValidationRequired";
import { getOsmAddress } from "_querys/osm";
import { hpgStateToFMSStatus } from "_helpers/hpgStateToFmsStatus";
import { cn } from "@repo/shared-components";
import { StationsSelect } from "(app)/dispatch/_components/StationSelect";
const Einsatzdetails = ({
mission,
@@ -420,39 +421,6 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
},
});
const stationsOptions = [
...(allStations
?.filter((s) => !mission.missionStationIds.includes(s.id))
?.map((station) => ({
label: station.bosCallsign,
value: station.id,
type: "station" as const,
isOnline: !!connectedAircrafts?.find((a) => a.stationId === station.id),
})) || []),
...(!mission.hpgFireEngineState || mission.hpgFireEngineState === "NOT_REQUESTED"
? [{ label: "Feuerwehr", value: "FW", type: "vehicle" as const }]
: []),
...(!mission.hpgAmbulanceState || mission.hpgAmbulanceState === "NOT_REQUESTED"
? [{ label: "Rettungsdienst", value: "RTW", type: "vehicle" as const }]
: []),
...(!mission.hpgPoliceState || mission.hpgPoliceState === "NOT_REQUESTED"
? [{ label: "Polizei", value: "POL", type: "vehicle" as const }]
: []),
].sort((a, b) => {
// 1. Vehicles first
if (a.type === "vehicle" && b.type !== "vehicle") return -1;
if (a.type !== "vehicle" && b.type === "vehicle") return 1;
// 2. Online stations before offline stations
if (a.type === "station" && b.type === "station") {
if (a.isOnline && !b.isOnline) return -1;
if (!a.isOnline && b.isOnline) return 1;
}
// 3. Otherwise, sort alphabetically by label
return a.label.localeCompare(b.label);
});
const dispatcherConnected = useDispatchConnectionStore((s) => s.status) === "connected";
const HPGVehicle = ({ state, name }: { state: HpgState; name: string }) => (
@@ -503,70 +471,57 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
const connectedAircraft = connectedAircrafts?.find(
(aircraft) => aircraft.stationId === station.id,
);
console.log("connectedAircraft", connectedAircraft);
return (
<li key={index} className="flex items-center gap-2">
{connectedAircraft && (
<span
className="font-bold text-base"
style={{
color: FMS_STATUS_TEXT_COLORS[connectedAircraft.fmsStatus],
}}
>
{connectedAircraft.fmsStatus}
</span>
)}
<span className="text-base-content">
<div>
<span className="font-bold">{station.bosCallsign}</span>
{/* {item.min > 0 && (
<>
<br />
Ankunft in ca. {item.min} min
</>
)} */}
</div>
<span
className="font-bold text-base"
style={{
color: FMS_STATUS_TEXT_COLORS[connectedAircraft?.fmsStatus || "6"],
}}
>
{connectedAircraft?.fmsStatus || "6"}
</span>
<span className="text-base-content flex flex-col ">
<span className="font-bold">{station.bosCallsign}</span>
{!connectedAircraft && (
<span className="text-gray-400 text-xs">Kein Benutzer verbunden</span>
)}
</span>
</li>
);
})}
{mission.hpgAmbulanceState && <HPGVehicle state={mission.hpgAmbulanceState} name="RTW" />}
{mission.hpgFireEngineState && (
{mission.hpgAmbulanceState && mission.hpgAmbulanceState !== "NOT_REQUESTED" && (
<HPGVehicle state={mission.hpgAmbulanceState} name="RTW" />
)}
{mission.hpgFireEngineState && mission.hpgFireEngineState !== "NOT_REQUESTED" && (
<HPGVehicle state={mission.hpgFireEngineState} name="Feuerwehr" />
)}
{mission.hpgPoliceState && <HPGVehicle state={mission.hpgPoliceState} name="Polizei" />}
{mission.hpgPoliceState && mission.hpgPoliceState !== "NOT_REQUESTED" && (
<HPGVehicle state={mission.hpgPoliceState} name="Polizei" />
)}
</ul>
{dispatcherConnected && (
<div>
<div className="divider mt-0 mb-0" />
<div className="flex items-center gap-2">
{/* TODO: make it a small multiselect */}
<select
className="select select-sm select-primary select-bordered flex-1"
onChange={(e) => {
const value = e.target.value;
const parsedValue = !isNaN(Number(value)) ? parseInt(value, 10) : value;
setSelectedStation(parsedValue as number | "RTW" | "POL" | "FW" | null);
<StationsSelect
menuPlacement="top"
className="min-w-[320px] flex-1"
isMulti={false}
onChange={(v: any) => {
setSelectedStation(v);
}}
value={selectedStation || "default"}
>
<option disabled value={"default"}>
Rettungsmittel auswählen
</option>
{stationsOptions.map((option) => (
<option
key={option.value}
value={option.value}
className={cn(
"flex gap-2",
"isOnline" in option && option?.isOnline && "text-green-500",
)}
>
{option.label}
{"isOnline" in option && option?.isOnline && " (Online)"}
</option>
))}
</select>
selectedStations={mission.missionStationIds}
filterSelected
vehicleStates={{
hpgAmbulanceState: mission.hpgAmbulanceState || undefined,
hpgFireEngineState: mission.hpgFireEngineState || undefined,
hpgPoliceState: mission.hpgPoliceState || undefined,
}}
/>
<button
className="btn btn-sm btn-primary btn-outline"
onClick={async () => {