Fix width of reason column of monitoring menu

P7-AIS · Nov 20, 2024 · 8961911 · 8961911
1 parent ea65109
commit 8961911
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/src/components/monitoringMenu.tsx b/src/components/monitoringMenu.tsx
@@ -29,11 +29,10 @@ export default function MonitoringMenu({ monitoredVessels, zoomToVessel }: IMoni
       </div>
       {!isCollapsed && (
         <>
-          <div id="title-row" className="px-2 pr-6 py-2 grid grid-cols-4 gap-4 font-medium">
-            <p className="text-left">MMSI</p>
-            <p className="text-right">Trust</p>
-            <p className="text-left">Reason</p>
-            <p className="text-center">Find vessel</p>
+          <div id="title-row" className="px-2 pr-6 py-2 flex flex-row gap-4 font-medium">
+            <p className="w-20">MMSI</p>
+            <p className="w-12">Trust</p>
+            <p className="w-[200px]">Reason</p>
           </div>
           <div id="rows-container" className="max-h-[50vh] overflow-y-auto divide-y rounded-md">
             {sortedMonitoredVessels.map((vessel, index) => (

diff --git a/src/components/monitoringMenuRow.tsx b/src/components/monitoringMenuRow.tsx
@@ -19,29 +19,46 @@ export default function MonitoringMenuRow({ monitoredVessel, zoomToCallback }: I
     }
   }
 
+  function convertToReasons(reason: string | undefined): string[] {
+    const separator = ' | '
+    if (reason === undefined || reason.length === 0) {
+      return []
+    }
+    return reason.split(separator)
+  }
+
   function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
     e.stopPropagation()
     setSelectedVesselmmsi(monitoredVessel.mmsi)
     zoomToCallback(monitoredVessel)
   }
+
   return (
     <div
-      className={`${selectedVesselmmsi === monitoredVessel.mmsi && 'font-bold'} grid grid-cols-4 gap-4 items-center hover:cursor-pointer text-sm`}
+      className={`${selectedVesselmmsi === monitoredVessel.mmsi && 'font-bold'} flex flex-row gap-4 items-center hover:cursor-pointer text-sm`}
       onClick={handleRowSelect}
     >
-      <p className="text-left font-mono">{monitoredVessel.mmsi}</p>
-      <p className="text-right font-mono">{(Math.round(monitoredVessel.trustworthiness * 1000) / 10).toFixed(2)}%</p>
-      <p title={monitoredVessel.reason} className="text-left truncate">
-        {monitoredVessel.reason}
-      </p>
+      <p className="font-mono w-20">{monitoredVessel.mmsi}</p>
+      <p className="font-mono w-12">{(Math.round(monitoredVessel.trustworthiness * 1000) / 10).toFixed(2)}%</p>
+      {selectedVesselmmsi === monitoredVessel.mmsi ? (
+        <div className="truncate w-[200px] flex flex-row gap-1 flex-wrap">
+          {convertToReasons(monitoredVessel.reason).map((reason, index) => (
+            <span key={index} className="block bg-white bg-opacity-10 rounded-md px-2 py-1 font-normal text-sm">
+              {reason}
+            </span>
+          ))}
+        </div>
+      ) : (
+        <p title={monitoredVessel.reason} className="w-[200px] truncate">
+          {monitoredVessel.reason}
+        </p>
+      )}
 
-      {selectedVesselmmsi === monitoredVessel.mmsi && (
+      {selectedVesselmmsi === monitoredVessel.mmsi ? (
         <button className="blue-badge" onClick={handleClick}>
           Zoom
         </button>
-      )}
-
-      {selectedVesselmmsi !== monitoredVessel.mmsi && (
+      ) : (
         <div className="grey-badge text-center hover:cursor-default">Zoom</div>
       )}
     </div>