Card über den Map

components/DataSheet.js

@@ -14,7 +14,6 @@ function DataSheet() {
     // Füge hier weitere Stationen hinzu, falls nötig
   ];
 
-  // Initialisiere den Zustand mit allen Stationen als nicht gecheckt (false)
   const [checkedStations, setCheckedStations] = useState(
     stationListing.reduce((acc, station) => {
       acc[station.id] = false;
@@ -40,15 +39,15 @@ function DataSheet() {
   return (
     <div
       id="mainDataSheet"
-      className="absolute top-12 right-3 w-1/6 min-w-[300px] z-10 bg-gray-100 border border-gray-300"
+      className="absolute top-3 right-3 w-1/6 min-w-[300px] z-10 bg-white p-2 rounded-lg shadow-lg"
     >
-      <div className="bg-white shadow rounded-lg overflow-hidden">
+      <div className="flex flex-col gap-4 p-4">
-        <div className="bg-gray-200 border-b border-gray-300 p-3">
+        <div className="flex items-center justify-between ">
-          <form>
+          {/* Dropdown */}
           <select
             onChange={handleStationChange}
             id="stationListing"
-              className="w-full border-none p-2 rounded"
+            className="border-solid-1 p-2 rounded ml-1 " // Margin Left für Abstand zum Icon
           >
             <option>Station wählen</option>
             {stationListing.map((station) => (
@@ -57,17 +56,15 @@ function DataSheet() {
               </option>
             ))}
           </select>
-          </form>
+          {/* Icon */}
-          <div className="text-right">
+          <img
-            <button onClick={resetView} className="p-1 focus:outline-none">
+            src="/img/expand-icon.svg" // Pfad zu deinem SVG-Bild
-              <i
+            alt="Expand"
-                className="fi-arrows-out text-gray-800 text-lg"
+            className="h-6 w-6 ml-2" // Margin Left für Abstand zum Dropdown
-                title="Ansicht zurücksetzen"
+          />
-              ></i>
-            </button>
         </div>
-        </div>
+
-        <div className="flex flex-col p-4 gap-2">
+        {/* Liste der Stationen mit Checkboxen */}
         {stationListing.map((station) => (
           <div key={station.id} className="flex items-center">
             <input
@@ -76,7 +73,6 @@ function DataSheet() {
               className="accent-blue-500 checked:bg-blue-500"
               checked={checkedStations[station.id]}
               onChange={() => handleCheckboxChange(station.id)}
-                // Wenn du möchtest, dass die Checkboxen nicht veränderbar sind, entferne den onChange-Handler und setze `readOnly`
             />
             <label
               htmlFor={`box-${station.id}`}
@@ -88,7 +84,6 @@ function DataSheet() {
         ))}
       </div>
     </div>
-    </div>
   );
 }
 

components/ExpandIcon.js

@@ -0,0 +1,22 @@
+const ExpandIcon = () => {
+  return (
+    <svg
+      width="64"
+      height="64"
+      viewBox="0 0 64 64"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="4"
+    >
+      <path d="M16 16L8 8M16 16H8V8" />
+      <path d="M48 16L56 8M48 16H56V8" />
+      <path d="M16 48L8 56M16 48H8V56" />
+      <path d="M48 48L56 56M48 48H56V56" />
+    </svg>
+  );
+};
+
+export default ExpandIcon;

components/MapComponent.js

@@ -522,7 +522,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       : `TileMap/img/icons/marker-icon-${iconNumber}.png`;
 
     // Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen
-    if (path.includes("critical") || path.includes("major")) {
+    if (
+      path.includes("critical") ||
+      path.includes("major") ||
+      path.includes("minor") ||
+      path.includes("system")
+    ) {
       // Setze Bouncing-Optionen
       marker.setBouncingOptions({
         bounceHeight: 15, // Höhe des Bounces
@@ -617,7 +622,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         })
       );
       // Check if the icon path includes 'critical' and initiate bouncing
-      if (iconPath.includes("critical") || iconPath.includes("major")) {
+      if (
+        iconPath.includes("critical") ||
+        iconPath.includes("major") ||
+        iconPath.includes("minor") ||
+        iconPath.includes("system")
+      ) {
         marker.setBouncingOptions({
           bounceHeight: 15,
           contractHeight: 12,

public/img/expand-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+</svg>