Added error fields in mission form

apps/dispatch/app/_components/navbar/Settings.tsx

@@ -16,31 +16,37 @@ export const SettingsBtn = () => {
 		queryKey: ["user", session.data?.user.id],
 		queryFn: () => getUserAPI(session.data!.user.id),
 	});
+	const testSoundRef = useRef<HTMLAudioElement | null>(null);
 
 	const editUserMutation = useMutation({
 		mutationFn: ({ user }: { user: Prisma.UserUpdateInput }) =>
 			editUserAPI(session.data!.user.id, user),
 	});
 
+	useEffect(() => {
+		if (typeof window !== "undefined") {
+			testSoundRef.current = new Audio("/sounds/Melder3.wav");
+		}
+	}, []);
+
 	const modalRef = useRef<HTMLDialogElement>(null);
 
 	const [inputDevices, setInputDevices] = useState<MediaDeviceInfo[]>([]);
 	const [selectedDevice, setSelectedDevice] = useState<string | null>(
 		user?.settingsMicDevice || null,
 	);
-	const [showIndication, setShowInducation] = useState<boolean>(false);
+	const [showIndication, setShowIndication] = useState<boolean>(false);
 	const [micVol, setMicVol] = useState<number>(1);
 	const [dmeVolume, setDmeVol] = useState<number>(1);
 
 	const setMic = useAudioStore((state) => state.setMic);
 
-	console.log("user", user);
-
 	useEffect(() => {
 		if (user) {
 			setSelectedDevice(user.settingsMicDevice);
 			setMic(user.settingsMicDevice, user.settingsMicVolume || 1);
 			setMicVol(user.settingsMicVolume || 1);
+			setDmeVol(user.settingsDmeVolume || 1);
 		}
 	}, [user, setMic]);
 
@@ -76,7 +82,7 @@ export const SettingsBtn = () => {
 									value={selectedDevice ? selectedDevice : ""}
 									onChange={(e) => {
 										setSelectedDevice(e.target.value);
-										setShowInducation(true);
+										setShowIndication(true);
 									}}
 								>
 									<option key={0} value={0} disabled>
@@ -102,9 +108,7 @@ export const SettingsBtn = () => {
 								onChange={(e) => {
 									const value = parseFloat(e.target.value);
 									setMicVol(value);
-									// Hier kannst du den Lautstärkewert verwenden
-									setShowInducation(true);
-									console.log("Lautstärke:", value);
+									setShowIndication(true);
 								}}
 								value={micVol}
 								className="range range-xs range-accent w-full"
@@ -119,27 +123,23 @@ export const SettingsBtn = () => {
 						{showIndication && (
 							<MicVolumeBar deviceId={selectedDevice ? selectedDevice : ""} volumeInput={micVol} />
 						)}
-						{/* <MicVolumeIndication deviceId={selectedDevice ? selectedDevice : ""} volumeInput={40} /> */}
-						{/* <MicVolumeIndication deviceId={selectedDevice ? selectedDevice : ""} volumeInput={40
-						}  />
-						{/* FÜGE HIER BITTE DEN MIKROFONAUSSCHLAG EIN WIE IN DER V1 */}
 						<div className="divider w-full" />
 					</div>
 					<p className="flex items-center gap-2 text-base mb-2">
-						<Volume2 size={20} /> Ausgabelautstärke
+						<Volume2 size={20} /> Melder Lautstärke
 					</p>
 					<div className="w-full">
 						<input
 							type="range"
 							min={0}
-							max={3}
+							max={1}
 							step={0.01}
 							onChange={(e) => {
 								const value = parseFloat(e.target.value);
 								setDmeVol(value);
-								// Hier kannst du den Lautstärkewert verwenden
-								setShowInducation(true);
-								console.log("Lautstärke:", value);
+								if (!testSoundRef.current) return;
+								testSoundRef.current.volume = value;
+								testSoundRef.current.play();
 							}}
 							value={dmeVolume}
 							className="range range-xs range-accent w-full"
@@ -147,8 +147,6 @@ export const SettingsBtn = () => {
 						<div className="flex justify-between px-2.5 mt-2 text-xs">
 							<span>0</span>
 							<span>100</span>
-							<span>200</span>
-							<span>300</span>
 						</div>
 					</div>
 
@@ -159,6 +157,7 @@ export const SettingsBtn = () => {
 							onSubmit={() => false}
 							onClick={() => {
 								modalRef.current?.close();
+								testSoundRef.current?.pause();
 							}}
 						>
 							Schließen
@@ -168,13 +167,15 @@ export const SettingsBtn = () => {
 							type="submit"
 							onSubmit={() => false}
 							onClick={async () => {
-								await editUserMutation.mutateAsync({
+								testSoundRef.current?.pause();
+								const res = await editUserMutation.mutateAsync({
 									user: {
 										settingsMicDevice: selectedDevice,
 										settingsMicVolume: micVol,
 										settingsDmeVolume: dmeVolume,
 									},
 								});
+								console.log("res", res);
 								setMic(selectedDevice, micVol);
 								modalRef.current?.close();
 								toast.success("Einstellungen gespeichert");