change header styling for feature infos

cismet · Sep 19, 2024 · 596d585 · 596d585
1 parent d10597e
commit 596d585
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/apps/geoportal/src/app/components/feature-info/FeatureInfoBox.tsx b/apps/geoportal/src/app/components/feature-info/FeatureInfoBox.tsx
@@ -13,6 +13,7 @@ import { getLayers } from "../../store/slices/mapping";
 import { getActionLinksForFeature } from "react-cismap/tools/uiHelper";
 import { useState } from "react";
 import { additionalInfoFactory } from "@carma-collab/wuppertal/geoportal";
+import { truncateString } from "./featureInfoHelper";
 
 const FeatureInfoBox = () => {
   const [open, setOpen] = useState(false);
@@ -64,9 +65,12 @@ const FeatureInfoBox = () => {
         pixelwidth={350}
         currentFeature={selectedFeature}
         hideNavigator={true}
-        header="Informationen"
-        headerColor="#0078a8"
         {...selectedFeature?.properties}
+        headerColor={
+          selectedFeature?.properties.headerColor
+            ? selectedFeature.properties.headerColor
+            : "#0078a8"
+        }
         title={
           selectedFeature?.properties?.title.includes("undefined")
             ? undefined
@@ -79,6 +83,20 @@ const FeatureInfoBox = () => {
             ? "Auf die Karte klicken um Informationen abzurufen"
             : "Layer hinzufügen um Informationen abrufen zu können"
         }
+        header={
+          <div
+            className="w-full py-0.5 pl-1"
+            style={{
+              backgroundColor: selectedFeature?.properties.headerColor
+                ? selectedFeature.properties.headerColor
+                : "#0078a8",
+            }}
+          >
+            {selectedFeature?.properties.header
+              ? truncateString(selectedFeature.properties.header, 66)
+              : "Informationen"}
+          </div>
+        }
         noCurrentFeatureContent=""
         secondaryInfoBoxElements={featureHeaders}
         links={links}

diff --git a/apps/geoportal/src/app/components/feature-info/featureInfoHelper.tsx b/apps/geoportal/src/app/components/feature-info/featureInfoHelper.tsx
@@ -15,6 +15,13 @@ export const getLeafNodes = (node, result: any = {}): any => {
   return result;
 };
 
+export const truncateString = (text: string, num: number) => {
+  if (text.length > num) {
+    return text.slice(0, num) + "...";
+  }
+  return text;
+};
+
 export const objectToFeature = (jsonOutput: any, code: string) => {
   if (!jsonOutput) {
     return {