diff --git a/frontend/src/components/map/MapMarker.tsx b/frontend/src/components/map/MapMarker.tsx index bf2c5e95..fabce698 100644 --- a/frontend/src/components/map/MapMarker.tsx +++ b/frontend/src/components/map/MapMarker.tsx @@ -70,37 +70,48 @@ const markerClusterHtmlStyles = (color: string) => ` font-family: Nunito, sans-serif; `; -const makerWrapperStyles = (isSelected: boolean) => ` - background-color: ${isSelected ? 'white' : ''}; +const makerWrapperStyles = (isSelected: boolean, isHighlighted: boolean) => ` + background-color: ${isSelected || isHighlighted ? 'white' : ''}; width: 2.5rem; height: 2.5rem; border-radius: 3rem; position: relative; left: -1rem; top: -1rem; - box-shadow: rgba(0, 0, 0, ${isSelected ? '0.35' : '0'}) 0px 5px 15px; + box-shadow: rgba(0, 0, 0, ${isSelected || isHighlighted ? '0.35' : '0'}) 0px 5px 15px; `; -export const TreeMarkerIcon = (color: string, isSelected: boolean) => +const makerClusterWrapperStyles = (isHighlighted: boolean) => ` + background-color: ${isHighlighted ? 'white' : ''}; + width: 2.75rem; + height: 2.75rem; + border-radius: 3rem; + position: relative; + left: -1.25rem; + top: -1.25rem; + box-shadow: rgba(0, 0, 0, ${isHighlighted ? '0.35' : '0'}) 0px 5px 15px; +`; + +export const TreeMarkerIcon = (color: string, isSelected: boolean, isHighlighted: boolean) => L.divIcon({ iconAnchor: [0, 24], popupAnchor: [0, -36], html: - `
+ `
${isSelected ? iconToSvg(Check) : iconToSvg(TreeIcon)}
`, }); -export const ClusterIcon = (color: string, isSelected: boolean, includedTrees: number) => +export const ClusterIcon = (color: string, isHighlighted: boolean, includedTrees: number) => L.divIcon({ iconAnchor: [0, 24], popupAnchor: [0, -36], html: - `
+ `
- ${isSelected ? iconToSvg(Check) : includedTrees} + ${includedTrees}
`, }); diff --git a/frontend/src/components/map/TreeMarker.tsx b/frontend/src/components/map/TreeMarker.tsx index 3c7f5735..52fe4b15 100644 --- a/frontend/src/components/map/TreeMarker.tsx +++ b/frontend/src/components/map/TreeMarker.tsx @@ -12,12 +12,14 @@ interface WithAllTreesProps { onClick?: (tree: Tree) => void selectedTrees?: number[] trees: Tree[] + hasHighlightedTree?: number } export const WithAllTrees = ({ onClick, selectedTrees = [], trees, + hasHighlightedTree, }: WithAllTreesProps) => { const getStatusColor = (wateringStatus: EntitiesWateringStatus) => { const statusDetails = getWateringStatusDetails( @@ -30,9 +32,13 @@ export const WithAllTrees = ({ return selectedTrees.includes(treeId) } + const isHighlighted = (treeId: number) => { + return hasHighlightedTree === treeId + } + return trees.map((tree) => ( void - selectedClusters?: number[] clusters: TreeCluster[] + hasHighlightedCluster?: number, } export const WithAllClusters = ({ onClick, - selectedClusters = [], - clusters + clusters, + hasHighlightedCluster, }: WithAllClustersProps) => { const getStatusColor = (wateringStatus: EntitiesWateringStatus) => { const statusDetails = getWateringStatusDetails( @@ -60,13 +66,13 @@ export const WithAllClusters = ({ return statusDetails.colorHex } - const isSelected = (treeId: number) => { - return selectedClusters.includes(treeId) + const isHighlighted = (clusterId: number) => { + return hasHighlightedCluster === clusterId } return clusters.map((cluster) => ( void onClickCluster?: (cluster: TreeCluster) => void selectedTrees?: number[] - selectedClusters?: number[] trees: Tree[] clusters: TreeCluster[] zoomThreshold?: number - activeFilter?: boolean, + activeFilter?: boolean + hasHighlightedTree?: number, + hasHighlightedCluster?: number, } export const WithTreesAndClusters = ({ onClickTree, onClickCluster, selectedTrees = [], - selectedClusters = [], trees, clusters, zoomThreshold = 17, activeFilter = false, + hasHighlightedTree, + hasHighlightedCluster, }: WithTreesAndClustersProps) => { const { zoom } = useStore((state) => ({ zoom: state.map.zoom, @@ -104,8 +112,8 @@ export const WithTreesAndClusters = ({ return ( <> {zoom >= zoomThreshold || activeFilter - ? - : } + ? + : } ) diff --git a/frontend/src/components/tree/TreeDashboard.tsx b/frontend/src/components/tree/TreeDashboard.tsx index 2982aa02..169db8c5 100644 --- a/frontend/src/components/tree/TreeDashboard.tsx +++ b/frontend/src/components/tree/TreeDashboard.tsx @@ -69,7 +69,7 @@ const TreeDashboard = ({ treeId }: TreeDashboardProps) => { {tree.description &&

{tree.description}

}
{tree.treeClusterId && ( diff --git a/frontend/src/components/treecluster/TreeClusterDashboard.tsx b/frontend/src/components/treecluster/TreeClusterDashboard.tsx index c2cc9449..0454676b 100644 --- a/frontend/src/components/treecluster/TreeClusterDashboard.tsx +++ b/frontend/src/components/treecluster/TreeClusterDashboard.tsx @@ -8,6 +8,7 @@ import ButtonLink from '@/components/general/links/ButtonLink' import { Pencil } from 'lucide-react' import { getWateringStatusDetails } from '@/hooks/useDetailsForWateringStatus' import { Link } from '@tanstack/react-router' +import GeneralLink from '../general/links/GeneralLink' interface TreeClusterDashboardProps { clusterId: string @@ -28,7 +29,11 @@ const TreeClusterDashboard = ({ clusterId }: TreeClusterDashboardProps) => {

Bewässerungsgruppe: {treecluster.name}

-

{treecluster.description}

+

{treecluster.description}

+
) @@ -139,13 +142,15 @@ export const Route = createFileRoute('/_protected/map/')({ component: MapViewWithProvider, validateSearch: mapFilterSchema, - loaderDeps: ({ search: { status, hasCluster, plantingYears } }) => ({ + loaderDeps: ({ search: { status, hasCluster, plantingYears, tree, cluster } }) => ({ status: status || [], hasCluster: hasCluster || undefined, plantingYears: plantingYears || [], + tree: tree || undefined, + cluster: cluster || undefined, }), - loader: ({ deps: { status, hasCluster, plantingYears } }) => { - return { status, hasCluster, plantingYears } + loader: ({ deps: { status, hasCluster, plantingYears, tree, cluster } }) => { + return { status, hasCluster, plantingYears, tree, cluster } }, })