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,53 +39,49 @@ 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="bg-gray-200 border-b border-gray-300 p-3">
-          <form>
-            <select
-              onChange={handleStationChange}
-              id="stationListing"
-              className="w-full border-none p-2 rounded"
-            >
-              <option>Station wählen</option>
-              {stationListing.map((station) => (
-                <option key={station.id} value={station.id}>
-                  {station.name}
-                </option>
-              ))}
-            </select>
-          </form>
-          <div className="text-right">
-            <button onClick={resetView} className="p-1 focus:outline-none">
-              <i
-                className="fi-arrows-out text-gray-800 text-lg"
-                title="Ansicht zurücksetzen"
-              ></i>
-            </button>
-          </div>
-        </div>
-        <div className="flex flex-col p-4 gap-2">
-          {stationListing.map((station) => (
-            <div key={station.id} className="flex items-center">
-              <input
-                type="checkbox"
-                id={`box-${station.id}`}
-                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}`}
-                className="text-sm font-bold ml-2"
-              >
+      <div className="flex flex-col gap-4 p-4">
+        <div className="flex items-center justify-between ">
+          {/* Dropdown */}
+          <select
+            onChange={handleStationChange}
+            id="stationListing"
+            className="border-solid-1 p-2 rounded ml-1 " // Margin Left für Abstand zum Icon
+          >
+            <option>Station wählen</option>
+            {stationListing.map((station) => (
+              <option key={station.id} value={station.id}>
                 {station.name}
-              </label>
-            </div>
-          ))}
+              </option>
+            ))}
+          </select>
+          {/* Icon */}
+          <img
+            src="/img/expand-icon.svg" // Pfad zu deinem SVG-Bild
+            alt="Expand"
+            className="h-6 w-6 ml-2" // Margin Left für Abstand zum Dropdown
+          />
         </div>
+
+        {/* Liste der Stationen mit Checkboxen */}
+        {stationListing.map((station) => (
+          <div key={station.id} className="flex items-center">
+            <input
+              type="checkbox"
+              id={`box-${station.id}`}
+              className="accent-blue-500 checked:bg-blue-500"
+              checked={checkedStations[station.id]}
+              onChange={() => handleCheckboxChange(station.id)}
+            />
+            <label
+              htmlFor={`box-${station.id}`}
+              className="text-sm font-bold ml-2"
+            >
+              {station.name}
+            </label>
+          </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>