From 38aeb28fabb350d0745341b7f9162921b84c9eba Mon Sep 17 00:00:00 2001
From: Anton <mail@antontranelis.de>
Date: Sat, 23 Dec 2023 18:43:42 +0100
Subject: [PATCH] itemColorField to enable profile-colored markers

---
 src/Components/Map/Layer.tsx                  | 36 +++++++++++++++----
 .../Map/Subcomponents/ItemViewPopup.tsx       | 18 +++-------
 src/types.ts                                  |  1 +
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx
index 785266eb..a52e71ef 100644
--- a/src/Components/Map/Layer.tsx
+++ b/src/Components/Map/Layer.tsx
@@ -11,6 +11,7 @@ import { useGetItemTags } from './hooks/useTags'
 import { useAddMarker, useAddPopup, useLeafletRefs } from './hooks/useLeafletRefs'
 import { Popup } from 'leaflet'
 import { useLocation } from 'react-router-dom';
+import { useAssetApi } from '../AppShell/hooks/useAssets'
 
 export const Layer = (props: LayerProps) => {
 
@@ -34,6 +35,8 @@ export const Layer = (props: LayerProps) => {
 
     const isLayerVisible = useIsLayerVisible();
 
+    const assetsApi = useAssetApi();
+
 
     useEffect(() => {
 
@@ -52,7 +55,7 @@ export const Layer = (props: LayerProps) => {
     })
 
     const openPopup = () => {
-        if (window.location.pathname.split("/").length <= 2 || window.location.pathname.split("/")[2]==="") {
+        if (window.location.pathname.split("/").length <= 2 || window.location.pathname.split("/")[2] === "") {
             map.closePopup();
         }
         else {
@@ -100,10 +103,12 @@ export const Layer = (props: LayerProps) => {
 
                         let color1 = "#666";
                         let color2 = "RGBA(35, 31, 32, 0.2)";
-                        if (tags && tags[0]) {
+                        if (props.itemColorField) color1 = getValue(item, props.itemColorField);
+                        else if (tags && tags[0]) {
                             color1 = tags[0].color;
                         }
-                        if (tags && tags[1]) {
+                        if (tags && tags[0] && props.itemColorField) color2 = tags[0].color;
+                        else if (tags && tags[1]) {
                             color2 = tags[1].color;
                         }
                         return (
@@ -118,7 +123,13 @@ export const Layer = (props: LayerProps) => {
                                                 <ItemViewPopup ref={(r) => {
                                                     if (!(item.id in leafletRefs))
                                                         r && addPopup(item, r as Popup);
-                                                }} key={item.id + item.name} itemTitleField={props.itemTitleField} itemAvatarField={props.itemAvatarField} item={item} setItemFormPopup={props.setItemFormPopup} >{child}</ItemViewPopup>
+                                                }} key={item.id + item.name}
+                                                    title={props.itemTitleField && item ? getValue(item, props.itemTitleField) : undefined}
+                                                    avatar={props.itemAvatarField && item ? assetsApi.url + getValue(item, props.itemAvatarField) : undefined}
+                                                    item={item}
+                                                    setItemFormPopup={props.setItemFormPopup}>
+                                                    {child}
+                                                </ItemViewPopup>
                                                 : ""
                                         )
                                         :
@@ -126,10 +137,13 @@ export const Layer = (props: LayerProps) => {
                                             <ItemViewPopup key={item.id + item.name} ref={(r) => {
                                                 if (!(item.id in leafletRefs))
                                                     r && addPopup(item, r as Popup);
-                                            }} item={item} itemTitleField={props.itemTitleField} itemAvatarField={props.itemAvatarField} setItemFormPopup={props.setItemFormPopup} />
+                                            }} title={props.itemTitleField && item ? getValue(item, props.itemTitleField) : undefined}
+                                                avatar={props.itemAvatarField && item ? assetsApi.url + getValue(item, props.itemAvatarField) : undefined}
+                                                item={item}
+                                                setItemFormPopup={props.setItemFormPopup} />
                                         </>)
                                 }
-                                <Tooltip offset={[0, -38]} direction='top'>{item.name}</Tooltip>
+                                <Tooltip offset={[0, -38]} direction='top'>{item.name? item.name : getValue(item, props.itemTitleField)}</Tooltip>
                             </Marker>
                         );
                     })
@@ -151,3 +165,13 @@ export const Layer = (props: LayerProps) => {
         </>
     )
 }
+
+function getValue(obj, path) {
+    if (obj) {
+        for (var i = 0, path = path.split('.'), len = path.length; i < len; i++) {
+            obj = obj[path[i]];
+        };
+        return obj;
+    }
+
+};
\ No newline at end of file
diff --git a/src/Components/Map/Subcomponents/ItemViewPopup.tsx b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
index 8f47e2f0..8bb7adcb 100644
--- a/src/Components/Map/Subcomponents/ItemViewPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
@@ -10,30 +10,20 @@ import { useAssetApi } from '../../AppShell/hooks/useAssets'
 export interface ItemViewPopupProps {
   item: Item,
   children?: React.ReactNode;
-  itemTitleField?: string;
-  itemAvatarField?: string;
+  title?: string;
+  avatar?: string;
   setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
 }
 
-function getValue(obj, path) {
-  if(obj){
-    for (var i=0, path=path.split('.'), len=path.length; i<len; i++){
-      obj = obj[path[i]];
-  };
-  return obj;
-  }
-
-};
-
 
 export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: any) => {
 
-  const assetsApi = useAssetApi();
 
+  
   return (
     <LeafletPopup ref={ref} maxHeight={377} minWidth={275} maxWidth={275} autoPanPadding={[20, 80]}>
       <div className='tw-bg-base-100 tw-text-base-content'>
-        <HeaderView item={props.item} title={props.itemTitleField && props.item? getValue(props.item,props.itemTitleField) : undefined} avatar={props.itemAvatarField && props.item? assetsApi.url+getValue(props.item,props.itemAvatarField) : undefined} setItemFormPopup={props.setItemFormPopup} />
+        <HeaderView item={props.item} title={props.title} avatar={props.avatar} setItemFormPopup={props.setItemFormPopup} />
         <div className='tw-overflow-y-auto tw-max-h-72'>
           {props.children ?
 
diff --git a/src/types.ts b/src/types.ts
index 6aee3b1d..7aba4666 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -23,6 +23,7 @@ export interface LayerProps {
   api?: ItemsApi<any>,
   itemTitleField?: string,
   itemAvatarField?: string,
+  itemColorField?: string,
   setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>,
   itemFormPopup?: ItemFormPopupProps | null,
   clusterRef?: React.MutableRefObject<any>