+
{children}
diff --git a/frontend/src/components/DeadwoodMap/mobile/MobileLayerRow.tsx b/frontend/src/components/MapControls/mobile/MobileLayerRow.tsx
similarity index 53%
rename from frontend/src/components/DeadwoodMap/mobile/MobileLayerRow.tsx
rename to frontend/src/components/MapControls/mobile/MobileLayerRow.tsx
index cc12db51..36da9bb1 100644
--- a/frontend/src/components/DeadwoodMap/mobile/MobileLayerRow.tsx
+++ b/frontend/src/components/MapControls/mobile/MobileLayerRow.tsx
@@ -1,47 +1,52 @@
+import type { ReactNode } from "react";
import { Switch } from "antd";
interface MobileLayerRowProps {
- /** Small square thumbnail illustrating the layer */
- thumb: string;
+ thumb?: string;
+ icon?: ReactNode;
title: string;
description?: string;
checked: boolean;
- /** Legend swatch tying the row to the layer's color on the map */
swatchColor?: string;
- /** Optional count shown after the title (e.g. number of points) */
count?: number;
+ secondaryAction?: ReactNode;
+ toggleLabel?: string;
onChange: (checked: boolean) => void;
}
-/**
- * Compact toggleable row for a data layer in the mobile settings drawer.
- * The whole row is tappable; the switch is the visible state affordance
- * and remains the keyboard/screen-reader control.
- */
const MobileLayerRow = ({
thumb,
+ icon,
title,
description,
checked,
swatchColor,
count,
+ secondaryAction,
+ toggleLabel,
onChange,
}: MobileLayerRowProps) => (
onChange(!checked)}
>
-
-
+ {(thumb || icon) && (
+
+ {thumb ? (
+
+ )}
{swatchColor && (
@@ -63,11 +68,16 @@ const MobileLayerRow = ({
)}
+ {secondaryAction && (
+
event.stopPropagation()}>
+ {secondaryAction}
+
+ )}
event.stopPropagation()}>
diff --git a/frontend/src/components/DeadwoodMap/mobile/MobileLayerTile.tsx b/frontend/src/components/MapControls/mobile/MobileLayerTile.tsx
similarity index 59%
rename from frontend/src/components/DeadwoodMap/mobile/MobileLayerTile.tsx
rename to frontend/src/components/MapControls/mobile/MobileLayerTile.tsx
index 8977ad41..74d60b19 100644
--- a/frontend/src/components/DeadwoodMap/mobile/MobileLayerTile.tsx
+++ b/frontend/src/components/MapControls/mobile/MobileLayerTile.tsx
@@ -1,19 +1,12 @@
import { CheckOutlined } from "@ant-design/icons";
interface MobileLayerTileProps {
- /** Thumbnail image source */
thumb: string;
- /** Primary label */
title: string;
- /** Whether this tile is currently active/selected */
active: boolean;
onClick: () => void;
}
-/**
- * Tappable thumbnail tile for single-select choices (e.g. base map style)
- * in the mobile settings drawer.
- */
const MobileLayerTile = ({
thumb,
title,
@@ -24,34 +17,29 @@ const MobileLayerTile = ({
type="button"
onClick={onClick}
aria-pressed={active}
- className={`group relative min-w-0 overflow-hidden rounded-[18px] border bg-white p-0 text-left shadow-[0_1px_2px_rgba(15,23,42,0.06)] transition ${
+ className={`group relative min-w-0 overflow-hidden rounded-2xl border bg-slate-100 p-0 text-left shadow-[0_1px_2px_rgba(15,23,42,0.06)] transition ${
active
? "border-emerald-700 ring-2 ring-emerald-700/20"
: "border-slate-200 active:border-slate-300"
}`}
>
-
+
+ {title}
+
{active && (
)}
-
-
- {title}
-
-
);
diff --git a/frontend/src/components/MapControls/mobile/MobileMapSectionHeading.tsx b/frontend/src/components/MapControls/mobile/MobileMapSectionHeading.tsx
new file mode 100644
index 00000000..f6f5ce94
--- /dev/null
+++ b/frontend/src/components/MapControls/mobile/MobileMapSectionHeading.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+interface MobileMapSectionHeadingProps {
+ children: ReactNode;
+}
+
+export default function MobileMapSectionHeading({
+ children,
+}: MobileMapSectionHeadingProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/frontend/src/components/DeadwoodMap/mobile/mobileMapThumbnails.ts b/frontend/src/components/MapControls/mobile/mobileMapThumbnails.ts
similarity index 100%
rename from frontend/src/components/DeadwoodMap/mobile/mobileMapThumbnails.ts
rename to frontend/src/components/MapControls/mobile/mobileMapThumbnails.ts
diff --git a/frontend/src/components/PriwaField/PriwaFieldMap.tsx b/frontend/src/components/PriwaField/PriwaFieldMap.tsx
index 6f11b6ec..63543983 100644
--- a/frontend/src/components/PriwaField/PriwaFieldMap.tsx
+++ b/frontend/src/components/PriwaField/PriwaFieldMap.tsx
@@ -1,4 +1,4 @@
-import { Alert, App, Button, FloatButton, Tooltip } from "antd";
+import { Alert, App, Button, Tooltip } from "antd";
import {
AimOutlined,
EnvironmentOutlined,
@@ -42,7 +42,9 @@ import PriwaPointListPanel from "./PriwaPointListPanel";
import PriwaOfflineStatus from "./PriwaOfflineStatus";
import PriwaBefallsgruppeEditor from "./PriwaBefallsgruppeEditor";
import PriwaBaseLayerControl from "./PriwaBaseLayerControl";
+import PriwaMapLayersSheet from "./PriwaMapLayersSheet";
import PriwaMobileFieldTools from "./PriwaMobileFieldTools";
+import PriwaMobilePrimaryActions from "./PriwaMobilePrimaryActions";
import PriwaOfflineAreaSelection from "./PriwaOfflineAreaSelection";
import PriwaOfflineMapPanel from "./PriwaOfflineMapPanel";
import PriwaReviewWorkbench, {
@@ -89,6 +91,8 @@ interface PriwaFieldMapProps {
projectName: string;
warnkarteOverlay?: IPriwaWarnkarteOverlay | null;
warnkarteVisible?: boolean;
+ warnkarteLoading?: boolean;
+ onWarnkarteVisibilityChange?: (visible: boolean) => void;
additionalMapControl?: ReactNode;
reviewDetailMode?: PriwaReviewDetailMode;
mosaics?: IPriwaMosaic[];
@@ -117,6 +121,8 @@ interface PriwaFieldMapProps {
onSyncNow?: () => Promise;
}
+type PriwaMapPanel = "layers" | "offline" | "trees";
+
export default function PriwaFieldMap({
points,
projectId,
@@ -125,6 +131,8 @@ export default function PriwaFieldMap({
projectName,
warnkarteOverlay = null,
warnkarteVisible = true,
+ warnkarteLoading = false,
+ onWarnkarteVisibilityChange,
additionalMapControl,
reviewDetailMode,
mosaics = [],
@@ -198,7 +206,9 @@ export default function PriwaFieldMap({
const [focusedPointId, setFocusedPointId] = useState(null);
const [reviewPointId, setReviewPointId] = useState(null);
const [baseLayer, setBaseLayer] = useState("aerial");
- const [isOfflineMapModeActive, setOfflineMapModeActive] = useState(false);
+ const [activeMapPanel, setActiveMapPanel] = useState(
+ null,
+ );
const [viewportExtent3857, setViewportExtent3857] =
useState(null);
const mapInteraction = usePriwaMapInteractionMode();
@@ -226,6 +236,9 @@ export default function PriwaFieldMap({
mapRef,
mapInteraction.isSelectingOfflineArea,
);
+ const isOfflineMapModeActive = activeMapPanel === "offline";
+ const isMapLayersOpen = activeMapPanel === "layers";
+ const isTreeListOpen = activeMapPanel === "trees";
useEffect(() => {
isMobileRef.current = isMobile;
@@ -589,6 +602,11 @@ export default function PriwaFieldMap({
);
}, [isMobile]);
+ const zoomToWarnkarteFromSheet = useCallback(() => {
+ zoomToWarnkarte();
+ setActiveMapPanel(null);
+ }, [zoomToWarnkarte]);
+
const focusPointOnMap = useCallback(
(point: IPriwaPoint) => {
selectMatchedMosaicForPoint(point);
@@ -714,10 +732,28 @@ export default function PriwaFieldMap({
const startOfflineAreaSelection = useCallback(() => {
setDrawerOpen(false);
setPointListOpen(false);
- setOfflineMapModeActive(false);
+ setActiveMapPanel("offline");
setMode("select-offline-area");
}, [setMode]);
+ const cancelOfflineAreaSelection = useCallback(() => {
+ setMode("browse");
+ setActiveMapPanel("offline");
+ }, [setMode]);
+
+ const dismissOfflineAreaSelection = useCallback(() => {
+ setMode("browse");
+ setActiveMapPanel(null);
+ }, [setMode]);
+
+ const toggleOfflineMapPanel = useCallback(() => {
+ setActiveMapPanel((current) => (current === "offline" ? null : "offline"));
+ }, []);
+
+ const toggleMapLayersPanel = useCallback(() => {
+ setActiveMapPanel((current) => (current === "layers" ? null : "layers"));
+ }, []);
+
const requestDeferredOrientationPermission = useCallback(
(event: PointerEvent) => {
if (!userLocation.needsOrientationPermission) return;
@@ -790,7 +826,7 @@ export default function PriwaFieldMap({
`Basiskarte offline gespeichert (${area.cachedTileCount}/${area.tileCount} Kacheln)`,
);
setMode("browse");
- setOfflineMapModeActive(true);
+ setActiveMapPanel("offline");
} catch (error) {
message.error(
error instanceof Error
@@ -841,8 +877,24 @@ export default function PriwaFieldMap({
>
- {mapInteraction.mode === "browse" && (
-
+ {mapInteraction.mode === "browse" && isMobile && (
+
+
setActiveMapPanel("trees")}
+ onCloseTreeList={() => setActiveMapPanel(null)}
+ onEditPoint={openPointForEditing}
+ onZoomToPoint={focusPointOnMap}
+ />
+
+ )}
+
+ {mapInteraction.mode === "browse" && !isMobile && (
+
)}
- {isMobile &&
- !isDrawerOpen &&
- !isPointListOpen &&
- !isOfflineMapModeActive &&
- mapInteraction.mode === "browse" && (
- userLocation.locateUser(true)}
+ />
{!isMobile && !isPointListOpen && (
setMode("browse")}
+ isMobile={isMobile}
+ onCancel={cancelOfflineAreaSelection}
+ onDismiss={dismissOfflineAreaSelection}
onConfirm={handleCacheBasemapArea}
/>
)}
@@ -1002,7 +1043,8 @@ export default function PriwaFieldMap({
isSupported={isOfflineBasemapSupported}
needsRefresh={offlineBasemapNeedsRefresh}
syncSummary={syncSummary}
- onClose={() => setOfflineMapModeActive(false)}
+ isMobile={isMobile}
+ onClose={() => setActiveMapPanel(null)}
onStartSelection={startOfflineAreaSelection}
onClear={handleClearBasemapArea}
onRefresh={handleRefreshBasemapAreas}
@@ -1010,6 +1052,22 @@ export default function PriwaFieldMap({
/>
)}
+ {mapInteraction.mode === "browse" && isMobile && (
+ setActiveMapPanel(null)}
+ onBaseLayerChange={setBaseLayer}
+ onWarnkarteVisibilityChange={(visible) =>
+ onWarnkarteVisibilityChange?.(visible)
+ }
+ onZoomToWarnkarte={zoomToWarnkarteFromSheet}
+ />
+ )}
+
{mapInteraction.mode === "browse" && (
{locationHintLabel && (
@@ -1025,7 +1083,7 @@ export default function PriwaFieldMap({
isSupported={isOfflineBasemapSupported}
needsRefresh={offlineBasemapNeedsRefresh}
syncSummary={syncSummary}
- onToggle={() => setOfflineMapModeActive((current) => !current)}
+ onToggle={toggleOfflineMapPanel}
/>
)}
diff --git a/frontend/src/components/PriwaField/PriwaMapLayersSheet.test.ts b/frontend/src/components/PriwaField/PriwaMapLayersSheet.test.ts
new file mode 100644
index 00000000..83c85bdd
--- /dev/null
+++ b/frontend/src/components/PriwaField/PriwaMapLayersSheet.test.ts
@@ -0,0 +1,49 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import PriwaMapLayersSheet from "./PriwaMapLayersSheet";
+
+describe("PriwaMapLayersSheet", () => {
+ it("combines base maps and Warnkarte in one compact mobile sheet", () => {
+ const html = renderToStaticMarkup(
+ createElement(PriwaMapLayersSheet, {
+ open: true,
+ baseLayer: "aerial",
+ warnkarteAvailable: true,
+ warnkarteLoading: false,
+ warnkarteVisible: true,
+ onClose: () => undefined,
+ onBaseLayerChange: () => undefined,
+ onWarnkarteVisibilityChange: () => undefined,
+ onZoomToWarnkarte: () => undefined,
+ }),
+ );
+
+ expect(html).toContain('data-mobile-bottom-sheet-snap="compact"');
+ expect(html).toContain("Luftbild");
+ expect(html).toContain("Topografische Karte");
+ expect(html).toContain("Warnkarte");
+ expect(html).toContain('aria-label="Zur Warnkarte zoomen"');
+ expect(html).toContain('aria-label="Kartenebenen schließen"');
+ });
+
+ it("keeps the Warnkarte toggle available when data must be loaded", () => {
+ const html = renderToStaticMarkup(
+ createElement(PriwaMapLayersSheet, {
+ open: true,
+ baseLayer: "topographic",
+ warnkarteAvailable: false,
+ warnkarteLoading: false,
+ warnkarteVisible: true,
+ onClose: () => undefined,
+ onBaseLayerChange: () => undefined,
+ onWarnkarteVisibilityChange: () => undefined,
+ onZoomToWarnkarte: () => undefined,
+ }),
+ );
+
+ expect(html).toContain("Beim Aktivieren laden");
+ expect(html).not.toContain('aria-label="Zur Warnkarte zoomen"');
+ });
+});
diff --git a/frontend/src/components/PriwaField/PriwaMapLayersSheet.tsx b/frontend/src/components/PriwaField/PriwaMapLayersSheet.tsx
new file mode 100644
index 00000000..a5282552
--- /dev/null
+++ b/frontend/src/components/PriwaField/PriwaMapLayersSheet.tsx
@@ -0,0 +1,117 @@
+import { Button, Tooltip } from "antd";
+import { FullscreenOutlined, WarningOutlined } from "@ant-design/icons";
+
+import MobileBottomSheet from "../MapControls/mobile/MobileBottomSheet";
+import MobileLayerRow from "../MapControls/mobile/MobileLayerRow";
+import MobileLayerTile from "../MapControls/mobile/MobileLayerTile";
+import MobileMapSectionHeading from "../MapControls/mobile/MobileMapSectionHeading";
+import { mobileMapThumbnails } from "../MapControls/mobile/mobileMapThumbnails";
+import type { PriwaBaseLayer } from "./types";
+
+interface PriwaMapLayersSheetProps {
+ open: boolean;
+ baseLayer: PriwaBaseLayer;
+ warnkarteAvailable: boolean;
+ warnkarteLoading: boolean;
+ warnkarteVisible: boolean;
+ onClose: () => void;
+ onBaseLayerChange: (layer: PriwaBaseLayer) => void;
+ onWarnkarteVisibilityChange: (visible: boolean) => void;
+ onZoomToWarnkarte: () => void;
+}
+
+const baseLayerOptions: Array<{
+ value: PriwaBaseLayer;
+ label: string;
+ image: string;
+}> = [
+ {
+ value: "aerial",
+ label: "Luftbild",
+ image: mobileMapThumbnails.satellite,
+ },
+ {
+ value: "topographic",
+ label: "Topografische Karte",
+ image: mobileMapThumbnails.streets,
+ },
+];
+
+export default function PriwaMapLayersSheet({
+ open,
+ baseLayer,
+ warnkarteAvailable,
+ warnkarteLoading,
+ warnkarteVisible,
+ onClose,
+ onBaseLayerChange,
+ onWarnkarteVisibilityChange,
+ onZoomToWarnkarte,
+}: PriwaMapLayersSheetProps) {
+ const isWarnkarteActive = warnkarteAvailable && warnkarteVisible;
+
+ return (
+
+
+
+ Basiskarte
+
+ {baseLayerOptions.map((option) => (
+ onBaseLayerChange(option.value)}
+ />
+ ))}
+
+
+
+
+ Zusätzliche Ebene
+
+
+ ) : null
+ }
+ />
+
+
+ );
+}
diff --git a/frontend/src/components/PriwaField/PriwaMobileFieldTools.tsx b/frontend/src/components/PriwaField/PriwaMobileFieldTools.tsx
index ccea415e..b7946fd2 100644
--- a/frontend/src/components/PriwaField/PriwaMobileFieldTools.tsx
+++ b/frontend/src/components/PriwaField/PriwaMobileFieldTools.tsx
@@ -2,6 +2,7 @@ import { SearchOutlined, UnorderedListOutlined } from "@ant-design/icons";
import { Button, Drawer, Empty, Input, Tooltip } from "antd";
import { useMemo, useState } from "react";
+import MapLayersIcon from "../MapControls/mobile/MapLayersIcon";
import { indexPriwaBefallsgruppenByTreeId } from "./priwaBefallsgruppenState";
import PriwaPointCompactList from "./PriwaPointCompactList";
import type { IPriwaBefallsgruppe, IPriwaPoint } from "./types";
@@ -9,6 +10,11 @@ import type { IPriwaBefallsgruppe, IPriwaPoint } from "./types";
interface PriwaMobileFieldToolsProps {
points: IPriwaPoint[];
groups: IPriwaBefallsgruppe[];
+ isLayersOpen: boolean;
+ isTreeListOpen: boolean;
+ onOpenLayers: () => void;
+ onOpenTreeList: () => void;
+ onCloseTreeList: () => void;
onEditPoint: (point: IPriwaPoint) => void;
onZoomToPoint: (point: IPriwaPoint) => void;
}
@@ -16,10 +22,14 @@ interface PriwaMobileFieldToolsProps {
export default function PriwaMobileFieldTools({
points,
groups,
+ isLayersOpen,
+ isTreeListOpen,
+ onOpenLayers,
+ onOpenTreeList,
+ onCloseTreeList,
onEditPoint,
onZoomToPoint,
}: PriwaMobileFieldToolsProps) {
- const [isTreeListOpen, setTreeListOpen] = useState(false);
const [query, setQuery] = useState("");
const groupByTreeId = useMemo(
() => indexPriwaBefallsgruppenByTreeId(groups),
@@ -38,18 +48,30 @@ export default function PriwaMobileFieldTools({
const showPointOnMap = (point: IPriwaPoint) => {
onZoomToPoint(point);
- setTreeListOpen(false);
+ onCloseTreeList();
};
return (
<>
+
+
+
+
+
+
+
;
}
@@ -24,7 +27,9 @@ const selectionMaxHeight = `${Math.round(
export default function PriwaOfflineAreaSelection({
plan,
cacheState,
+ isMobile,
onCancel,
+ onDismiss,
onConfirm,
}: PriwaOfflineAreaSelectionProps) {
const isValid =
@@ -39,6 +44,59 @@ export default function PriwaOfflineAreaSelection({
)
: 0;
+ const content = (
+
+
+ Karte verschieben oder zoomen
+
+
+ Der klare Rahmen wird für Luftbild und topografische Karte gespeichert.
+
+ {plan && (
+
+ {Math.round(plan.areaKm2 * 100)} ha ·{" "}
+ {plan.tileCount.toLocaleString("de-DE")} Kacheln
+ {!isValid && " · Bereich bitte verkleinern"}
+
+ )}
+ {cacheState.isCaching && (
+
0 ? "exception" : "active"}
+ />
+ )}
+ {cacheState.errorMessage && (
+
+ {cacheState.errorMessage}
+
+ )}
+
+
+ Abbrechen
+
+ {
+ if (plan) void onConfirm(plan);
+ }}
+ >
+ Bereich herunterladen
+
+
+
-
-
-
- Karte verschieben oder zoomen
+ {isMobile ? (
+
+ {content}
+
+ ) : (
+
+ {content}
-
- Der klare Rahmen wird für Luftbild und topografische Karte
- gespeichert.
-
- {plan && (
-
- {Math.round(plan.areaKm2 * 100)} ha ·{" "}
- {plan.tileCount.toLocaleString("de-DE")} Kacheln
- {!isValid && " · Bereich bitte verkleinern"}
-
- )}
- {cacheState.isCaching && (
-
0 ? "exception" : "active"}
- />
- )}
- {cacheState.errorMessage && (
-
- {cacheState.errorMessage}
-
- )}
-
-
- Abbrechen
-
- {
- if (plan) void onConfirm(plan);
- }}
- >
- Bereich herunterladen
-
-
-
+ )}
;
@@ -41,6 +43,7 @@ export default function PriwaOfflineMapPanel({
needsRefresh,
readyAreaCount,
syncSummary,
+ isMobile,
onClose,
onStartSelection,
onClear,
@@ -59,31 +62,14 @@ export default function PriwaOfflineMapPanel({
: 0;
const syncLabel = getSyncLabel(syncSummary);
- return (
-
-
-
-
Offline-Karten
-
- {Math.round(coverageRatio * 100)} % der aktuellen Kartenansicht sind
- offline verfügbar.
-
-
-
}
- aria-label="Offline-Karten schließen"
- onClick={onClose}
- />
+ const content = (
+
+
+ {Math.round(coverageRatio * 100)} % der aktuellen Kartenansicht sind
+ offline verfügbar.
-
{hasAreas && (
-
+
{readyAreaCount} von {areas.length} Bereichen bereit · {totalAreaHa}{" "}
ha
@@ -164,6 +150,42 @@ export default function PriwaOfflineMapPanel({
Offline-Karten werden von diesem Browser nicht unterstützt.
)}
+
+ );
+
+ if (isMobile) {
+ return (
+
+ {content}
+
+ );
+ }
+
+ return (
+
+
+ Offline-Karten
+
+ {content}
);
}
diff --git a/frontend/src/components/PriwaField/PriwaWarnkarteMapControls.tsx b/frontend/src/components/PriwaField/PriwaWarnkarteMapControls.tsx
index bc4729e0..656243de 100644
--- a/frontend/src/components/PriwaField/PriwaWarnkarteMapControls.tsx
+++ b/frontend/src/components/PriwaField/PriwaWarnkarteMapControls.tsx
@@ -7,20 +7,16 @@ import {
import { Button, Tooltip } from "antd";
interface PriwaWarnkarteVisibilityControlProps {
- hasOverlay: boolean;
isVisible: boolean;
onToggle: () => void;
}
export function PriwaWarnkarteVisibilityControl({
- hasOverlay,
isVisible,
onToggle,
}: PriwaWarnkarteVisibilityControlProps) {
const label = isVisible ? "Warnkarte ausblenden" : "Warnkarte einblenden";
- if (!hasOverlay) return null;
-
return (
fetchPriwaWarnkarteVersions(projectId, token!),
});
+ const activeOverlay = activeQuery.data ?? null;
+ const refetchActiveOverlay = activeQuery.refetch;
const requireToken = () => {
if (!token) throw new Error("Die Anmeldung ist abgelaufen.");
@@ -119,17 +121,30 @@ export function usePriwaWarnkarte(projectId: string, canManage: boolean) {
setSelectedOverlay(null);
}, []);
+ const activateOverlay = useCallback(async () => {
+ if (selectedOverlay?.features.length || activeOverlay?.features.length) {
+ setVisible(true);
+ return true;
+ }
+
+ const result = await refetchActiveOverlay();
+ const isAvailable = !!result.data?.features.length;
+ setVisible(isAvailable);
+ return isAvailable;
+ }, [activeOverlay, refetchActiveOverlay, selectedOverlay]);
+
return {
- activeOverlay: activeQuery.data ?? null,
- displayedOverlay: selectedOverlay ?? activeQuery.data ?? null,
+ activeOverlay,
+ displayedOverlay: selectedOverlay ?? activeOverlay,
isVisible,
- overlayError: activeQuery.error,
+ isLoadingOverlay: activeQuery.isFetching,
selectedOverlay,
versions: versionsQuery.data ?? [],
versionsError: versionsQuery.error,
isLoadingVersions: versionsQuery.isLoading,
clearSelectedVersion,
- toggleVisibility: () => setVisible((visible) => !visible),
+ activateOverlay,
+ setVisibility: setVisible,
importFile,
archiveVersion,
restoreVersion,
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4103b89b..03da1b04 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -406,49 +406,10 @@
}
}
-.priwa-add-point-fab {
- width: 52px !important;
- height: 52px !important;
- color: #2d6b3f !important;
- box-shadow:
- 0 8px 24px rgb(15 23 42 / 18%),
- 0 2px 6px rgb(15 23 42 / 14%) !important;
-}
-
-.priwa-add-point-fab .ant-float-btn-body {
- background: #ffffff !important;
- border: 1px solid rgb(226 232 240) !important;
-}
-
-.priwa-add-point-fab:hover .ant-float-btn-body,
-.priwa-add-point-fab:focus-visible .ant-float-btn-body {
- background: #f8fafc !important;
- border-color: #2d6b3f !important;
-}
-
-.priwa-add-point-fab .ant-float-btn-body,
-.priwa-add-point-fab .ant-float-btn-content,
-.priwa-add-point-fab .ant-float-btn-icon {
- width: 100%;
- height: 100%;
-}
-
-.priwa-add-point-fab .ant-float-btn-content,
-.priwa-add-point-fab .ant-float-btn-icon {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
.priwa-comment-form-item.ant-form-item {
margin-bottom: 30px !important;
}
-.priwa-add-point-fab .anticon {
- font-size: 20px;
- color: #2d6b3f !important;
-}
-
.priwa-point-table-row-focused > td,
.priwa-point-table-row-focused:hover > td {
background: #ecfdf5 !important;
diff --git a/frontend/src/pages/PriwaField.tsx b/frontend/src/pages/PriwaField.tsx
index b55a806a..a83cba91 100644
--- a/frontend/src/pages/PriwaField.tsx
+++ b/frontend/src/pages/PriwaField.tsx
@@ -5,7 +5,7 @@ import { usePriwaMosaics } from "../components/PriwaField/usePriwaMosaics";
import { usePriwaBefallsgruppen } from "../components/PriwaField/usePriwaBefallsgruppen";
import { usePriwaProjectMemberships } from "../hooks/usePriwaProjectMemberships";
import { useIsMobile } from "../hooks/useIsMobile";
-import { Alert, Button, Result, Spin } from "antd";
+import { Alert, App, Button, Result, Spin } from "antd";
import PriwaWarnkarteAdminPanel from "../components/PriwaField/PriwaWarnkarteAdminPanel";
import PriwaWarnkarteLegend from "../components/PriwaField/PriwaWarnkarteLegend";
import {
@@ -17,6 +17,7 @@ import type { PriwaReviewDetailMode } from "../components/PriwaField/PriwaReview
import { useCallback, useMemo, useState } from "react";
export default function PriwaField() {
+ const { message } = App.useApp();
const [isWarnkarteAdminOpen, setWarnkarteAdminOpen] = useState(false);
const { isOnline, serviceWorker } = usePriwaOfflineStatus();
const {
@@ -60,11 +61,31 @@ export default function PriwaField() {
activeMembership?.projectId ?? "",
canManageWarnkarte,
);
+ const activateWarnkarte = warnkarte.activateOverlay;
+ const setWarnkarteVisibility = warnkarte.setVisibility;
const { clearSelectedVersion } = warnkarte;
const closeWarnkarteAdmin = useCallback(() => {
clearSelectedVersion();
setWarnkarteAdminOpen(false);
}, [clearSelectedVersion]);
+ const handleWarnkarteVisibilityChange = useCallback(
+ async (visible: boolean) => {
+ if (!visible) {
+ setWarnkarteVisibility(false);
+ return;
+ }
+
+ const isAvailable = await activateWarnkarte();
+ if (!isAvailable) {
+ message.error({
+ content: "Warnkarte konnte nicht geladen werden",
+ duration: 3,
+ key: "priwa-warnkarte-load-error",
+ });
+ }
+ },
+ [activateWarnkarte, message, setWarnkarteVisibility],
+ );
const warnkarteDetailMode = useMemo(
() =>
canManageWarnkarte && isWarnkarteAdminOpen
@@ -169,12 +190,14 @@ export default function PriwaField() {
}
const hasWarnkarte = !!warnkarte.displayedOverlay?.features.length;
+ const isWarnkarteActive = hasWarnkarte && warnkarte.isVisible;
const warnkarteControls = (
<>
+ void handleWarnkarteVisibilityChange(!isWarnkarteActive)
+ }
/>
{canManageWarnkarte && (
+ void handleWarnkarteVisibilityChange(visible)
+ }
additionalMapControl={warnkarteControls}
reviewDetailMode={warnkarteDetailMode}
isLoadingPoints={isLoadingPoints || isRefetching}
@@ -229,14 +256,6 @@ export default function PriwaField() {
sourceDate={warnkarte.displayedOverlay?.source_date ?? null}
/>
)}
- {warnkarte.overlayError && (
- 
+
+
+ {title}
+
{active && (