sarlink/mapmaker
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI redesign

Browse Source
This commit is contained in:
Shihaam Abdul Rahman
2025-12-13 01:53:24 +05:00
parent 4007445396
commit af5e3b6a3f
23 changed files with 949 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
public/src/components/map/MapItemsLayer.tsx
View File

@@ -157,21 +157,21 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
>
{!shouldSuppressPopups && (
<Popup>
<div className="text-sm" style={{ minWidth: '200px' }}>
<div className="font-semibold">{item.properties.name || 'Cable'}</div>
<div className="text-gray-600">Type: {cableType}</div>
<div className="text-sm dark:bg-gray-800 dark:text-white" style={{ minWidth: '200px' }}>
<div className="font-semibold text-gray-900 dark:text-white">{item.properties.name || 'Cable'}</div>
<div className="text-gray-600 dark:text-gray-400">Type: {cableType}</div>
{startDevice && (
<div className="text-gray-600 mt-1">
<div className="text-gray-600 dark:text-gray-400 mt-1">
From: {startDevice.properties.name || startDevice.type}
</div>
)}
{endDevice && (
<div className="text-gray-600">
<div className="text-gray-600 dark:text-gray-400">
To: {endDevice.properties.name || endDevice.type}
</div>
)}
{item.properties.notes && (
<div className="text-gray-600 mt-2 pt-2 border-t border-gray-200">
<div className="text-gray-600 dark:text-gray-400 mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
{item.properties.notes}
</div>
)}
@@ -180,7 +180,7 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
<img
src={item.properties.image}
alt="Attachment"
className="w-full rounded border border-gray-200"
className="w-full rounded border border-gray-200 dark:border-gray-700"
style={{ maxHeight: '150px', objectFit: 'contain' }}
/>
</div>
@@ -244,20 +244,20 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
>
{!shouldSuppressPopups && (
<Popup>
<div className="text-sm" style={{ minWidth: '200px' }}>
<div className="font-semibold">{item.properties.name || 'Wireless Mesh'}</div>
<div className="text-sm dark:bg-gray-800 dark:text-white" style={{ minWidth: '200px' }}>
<div className="font-semibold text-gray-900 dark:text-white">{item.properties.name || 'Wireless Mesh'}</div>
{startAp && (
<div className="text-gray-600 mt-1">
<div className="text-gray-600 dark:text-gray-400 mt-1">
From: {startAp.properties.name || startAp.type}
</div>
)}
{endAp && (
<div className="text-gray-600">
<div className="text-gray-600 dark:text-gray-400">
To: {endAp.properties.name || endAp.type}
</div>
)}
{item.properties.notes && (
<div className="text-gray-600 mt-2 pt-2 border-t border-gray-200">
<div className="text-gray-600 dark:text-gray-400 mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
{item.properties.notes}
</div>
)}
@@ -266,7 +266,7 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
<img
src={item.properties.image}
alt="Attachment"
className="w-full rounded border border-gray-200"
className="w-full rounded border border-gray-200 dark:border-gray-700"
style={{ maxHeight: '150px', objectFit: 'contain' }}
/>
</div>
@@ -306,19 +306,19 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
>
{!shouldSuppressPopups && (
<Popup>
<div className="text-sm" style={{ minWidth: '200px' }}>
<div className="font-semibold">{item.properties.name || item.type}</div>
<div className="text-gray-600">Type: {item.type}</div>
<div className="text-sm dark:bg-gray-800 dark:text-white" style={{ minWidth: '200px' }}>
<div className="font-semibold text-gray-900 dark:text-white">{item.properties.name || item.type}</div>
<div className="text-gray-600 dark:text-gray-400">Type: {item.type}</div>
{item.properties.port_count && (
<div className="text-gray-600">
<div className="text-gray-600 dark:text-gray-400">
Ports: {item.properties.connections?.length || 0} / {item.properties.port_count}
</div>
)}
{/* Show port connections details */}
{item.properties.connections && item.properties.connections.length > 0 && (
<div className="mt-2 pt-2 border-t border-gray-200">
<div className="font-semibold text-gray-700 mb-1">Port Connections:</div>
<div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
<div className="font-semibold text-gray-700 dark:text-gray-300 mb-1">Port Connections:</div>
{item.properties.connections
.sort((a: any, b: any) => a.port_number - b.port_number)
.map((conn: any) => {
@@ -337,7 +337,7 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
const cableType = cable.properties.cable_type;
return (
<div key={conn.cable_id} className="text-xs text-gray-600 ml-2">
<div key={conn.cable_id} className="text-xs text-gray-600 dark:text-gray-400 ml-2">
Port {conn.port_number} → {otherDevice
? `${otherDevice.properties.name || otherDevice.type} (${cableType})`
: `${cableType} cable`}
@@ -349,7 +349,7 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
{/* Show wireless mesh count for APs */}
{['indoor_ap', 'outdoor_ap'].includes(item.type) && (
<div className="text-gray-600">
<div className="text-gray-600 dark:text-gray-400">
Wireless mesh: {items.filter(i =>
i.type === 'wireless_mesh' &&
(i.properties.start_ap_id === item.id || i.properties.end_ap_id === item.id)
@@ -366,8 +366,8 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
if (meshLinks.length > 0) {
return (
<div className="mt-2 pt-2 border-t border-gray-200">
<div className="font-semibold text-gray-700 mb-1">Mesh Connections:</div>
<div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
<div className="font-semibold text-gray-700 dark:text-gray-300 mb-1">Mesh Connections:</div>
{meshLinks.map((mesh) => {
const otherApId = mesh.properties.start_ap_id === item.id
? mesh.properties.end_ap_id
@@ -378,7 +378,7 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
: null;
return (
<div key={mesh.id} className="text-xs text-gray-600 ml-2">
<div key={mesh.id} className="text-xs text-gray-600 dark:text-gray-400 ml-2">
→ {otherAp ? (otherAp.properties.name || otherAp.type) : 'Unknown AP'}
</div>
);
@@ -390,7 +390,7 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
})()}
{item.properties.notes && (
<div className="text-gray-600 mt-2 pt-2 border-t border-gray-200">
<div className="text-gray-600 dark:text-gray-400 mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
{item.properties.notes}
</div>
)}
@@ -399,7 +399,7 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
<img
src={item.properties.image}
alt="Attachment"
className="w-full rounded border border-gray-200"
className="w-full rounded border border-gray-200 dark:border-gray-700"
style={{ maxHeight: '150px', objectFit: 'contain' }}
/>
</div>