a working product with ugly ui
This commit is contained in:
387
public/src/components/map/ItemContextMenu.tsx
Normal file
387
public/src/components/map/ItemContextMenu.tsx
Normal file
@@ -0,0 +1,387 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { mapItemService } from '../../services/mapItemService';
|
||||
|
||||
interface ItemContextMenuProps {
|
||||
item: any;
|
||||
position: { x: number; y: number };
|
||||
onClose: () => void;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
export function ItemContextMenu({ item, position, onClose, onUpdate }: ItemContextMenuProps) {
|
||||
const [showRenameDialog, setShowRenameDialog] = useState(false);
|
||||
const [showNotesDialog, setShowNotesDialog] = useState(false);
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [showPortConfigDialog, setShowPortConfigDialog] = useState(false);
|
||||
const [newName, setNewName] = useState(item.properties.name || '');
|
||||
const [notes, setNotes] = useState(item.properties.notes || '');
|
||||
const [imageData, setImageData] = useState<string | null>(item.properties.image || null);
|
||||
const [portCount, setPortCount] = useState(item.properties.port_count || 5);
|
||||
const [deleteConnectedCables, setDeleteConnectedCables] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const isSwitch = item.type === 'switch';
|
||||
const isDevice = ['switch', 'indoor_ap', 'outdoor_ap'].includes(item.type);
|
||||
const hasConnections = item.properties.connections && item.properties.connections.length > 0;
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, [onClose]);
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
// If device with connections and user wants to delete connected cables
|
||||
if (isDevice && deleteConnectedCables && hasConnections) {
|
||||
// First delete all connected cables
|
||||
const { mapItemService: itemService } = await import('../../services/mapItemService');
|
||||
const allItems = await itemService.getMapItems(item.map_id);
|
||||
|
||||
// Find all cables connected to this device
|
||||
const connectedCableIds = item.properties.connections.map((conn: any) => conn.cable_id);
|
||||
const cablesToDelete = allItems.filter((i: any) =>
|
||||
i.type === 'cable' && connectedCableIds.includes(i.id)
|
||||
);
|
||||
|
||||
// Delete each cable
|
||||
for (const cable of cablesToDelete) {
|
||||
await itemService.deleteMapItem(item.map_id, cable.id);
|
||||
}
|
||||
}
|
||||
|
||||
// Delete the device/item itself
|
||||
await mapItemService.deleteMapItem(item.map_id, item.id);
|
||||
onUpdate();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete item:', error);
|
||||
alert('Failed to delete item');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRename = async () => {
|
||||
try {
|
||||
await mapItemService.updateMapItem(item.map_id, item.id, {
|
||||
properties: {
|
||||
...item.properties,
|
||||
name: newName,
|
||||
},
|
||||
});
|
||||
onUpdate();
|
||||
setShowRenameDialog(false);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Failed to rename item:', error);
|
||||
alert('Failed to rename item');
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
// Check file size (max 2MB)
|
||||
if (file.size > 2 * 1024 * 1024) {
|
||||
alert('Image too large. Please use an image smaller than 2MB.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file type
|
||||
if (!file.type.startsWith('image/')) {
|
||||
alert('Please select an image file.');
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
setImageData(reader.result as string);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const handleRemoveImage = () => {
|
||||
setImageData(null);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveNotes = async () => {
|
||||
try {
|
||||
await mapItemService.updateMapItem(item.map_id, item.id, {
|
||||
properties: {
|
||||
...item.properties,
|
||||
notes: notes,
|
||||
image: imageData,
|
||||
},
|
||||
});
|
||||
onUpdate();
|
||||
setShowNotesDialog(false);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Failed to save notes:', error);
|
||||
alert('Failed to save notes');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSavePortConfig = async () => {
|
||||
try {
|
||||
await mapItemService.updateMapItem(item.map_id, item.id, {
|
||||
properties: {
|
||||
...item.properties,
|
||||
port_count: portCount,
|
||||
},
|
||||
});
|
||||
onUpdate();
|
||||
setShowPortConfigDialog(false);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Failed to save port configuration:', error);
|
||||
alert('Failed to save port configuration');
|
||||
}
|
||||
};
|
||||
|
||||
if (showPortConfigDialog) {
|
||||
return (
|
||||
<div
|
||||
ref={menuRef}
|
||||
className="fixed bg-white rounded-lg shadow-xl border border-gray-200 p-4"
|
||||
style={{ left: position.x, top: position.y, zIndex: 10000, minWidth: '250px' }}
|
||||
>
|
||||
<h3 className="font-semibold mb-2">Configure Ports</h3>
|
||||
<label className="block text-sm text-gray-600 mb-2">
|
||||
Total number of ports:
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="96"
|
||||
value={portCount}
|
||||
onChange={(e) => setPortCount(parseInt(e.target.value) || 1)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded mb-3"
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleSavePortConfig();
|
||||
if (e.key === 'Escape') { setShowPortConfigDialog(false); onClose(); }
|
||||
}}
|
||||
/>
|
||||
<div className="text-xs text-gray-500 mb-3">
|
||||
Currently used: {item.properties.connections?.length || 0} ports
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleSavePortConfig}
|
||||
className="flex-1 px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setShowPortConfigDialog(false); onClose(); }}
|
||||
className="flex-1 px-3 py-1.5 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (showDeleteDialog) {
|
||||
return (
|
||||
<div
|
||||
ref={menuRef}
|
||||
className="fixed bg-white rounded-lg shadow-xl border border-gray-200 p-4"
|
||||
style={{ left: position.x, top: position.y, zIndex: 10000, minWidth: '300px' }}
|
||||
>
|
||||
<h3 className="font-semibold text-lg mb-2">Delete Item</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Are you sure you want to delete <span className="font-semibold">{item.properties.name || item.type}</span>?
|
||||
{item.type === 'cable' && item.properties.start_device_id && (
|
||||
<span className="block mt-2 text-sm">This will also remove the connection from the connected devices.</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
{/* Checkbox for deleting connected cables */}
|
||||
{isDevice && hasConnections && (
|
||||
<label className="flex items-center gap-2 mb-4 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={deleteConnectedCables}
|
||||
onChange={(e) => setDeleteConnectedCables(e.target.checked)}
|
||||
className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">
|
||||
Also delete {item.properties.connections.length} connected cable{item.properties.connections.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="flex-1 px-3 py-2 bg-red-600 text-white rounded hover:bg-red-700 font-medium"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setShowDeleteDialog(false); setDeleteConnectedCables(false); onClose(); }}
|
||||
className="flex-1 px-3 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (showRenameDialog) {
|
||||
return (
|
||||
<div
|
||||
ref={menuRef}
|
||||
className="fixed bg-white rounded-lg shadow-xl border border-gray-200 p-4"
|
||||
style={{ left: position.x, top: position.y, zIndex: 10000, minWidth: '250px' }}
|
||||
>
|
||||
<h3 className="font-semibold mb-2">Rename Item</h3>
|
||||
<input
|
||||
type="text"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded mb-3"
|
||||
placeholder="Enter new name"
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleRename();
|
||||
if (e.key === 'Escape') { setShowRenameDialog(false); onClose(); }
|
||||
}}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleRename}
|
||||
className="flex-1 px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setShowRenameDialog(false); onClose(); }}
|
||||
className="flex-1 px-3 py-1.5 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (showNotesDialog) {
|
||||
return (
|
||||
<div
|
||||
ref={menuRef}
|
||||
className="fixed bg-white rounded-lg shadow-xl border border-gray-200 p-4"
|
||||
style={{ left: position.x, top: position.y, zIndex: 10000, minWidth: '350px', maxWidth: '400px' }}
|
||||
>
|
||||
<h3 className="font-semibold mb-2">Edit Notes</h3>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded mb-3"
|
||||
placeholder="Enter notes"
|
||||
rows={4}
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Escape') { setShowNotesDialog(false); onClose(); }
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Image upload section */}
|
||||
<div className="mb-3">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Attach Image (optional)
|
||||
</label>
|
||||
{imageData ? (
|
||||
<div className="relative">
|
||||
<img
|
||||
src={imageData}
|
||||
alt="Attached"
|
||||
className="w-full rounded border border-gray-300 mb-2"
|
||||
style={{ maxHeight: '200px', objectFit: 'contain' }}
|
||||
/>
|
||||
<button
|
||||
onClick={handleRemoveImage}
|
||||
className="absolute top-2 right-2 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-700"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleImageUpload}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
|
||||
/>
|
||||
)}
|
||||
<p className="text-xs text-gray-500 mt-1">Max size: 2MB</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleSaveNotes}
|
||||
className="flex-1 px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setShowNotesDialog(false); onClose(); }}
|
||||
className="flex-1 px-3 py-1.5 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={menuRef}
|
||||
className="fixed bg-white rounded-lg shadow-xl border border-gray-200 py-1"
|
||||
style={{ left: position.x, top: position.y, zIndex: 10000, minWidth: '180px' }}
|
||||
>
|
||||
<button
|
||||
onClick={() => setShowRenameDialog(true)}
|
||||
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100"
|
||||
>
|
||||
Rename
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowNotesDialog(true)}
|
||||
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100"
|
||||
>
|
||||
{item.properties.notes ? 'Edit Notes' : 'Add Notes'}
|
||||
</button>
|
||||
{isSwitch && (
|
||||
<button
|
||||
onClick={() => setShowPortConfigDialog(true)}
|
||||
className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100"
|
||||
>
|
||||
Configure Ports
|
||||
</button>
|
||||
)}
|
||||
<div className="border-t border-gray-200 my-1"></div>
|
||||
<button
|
||||
onClick={() => setShowDeleteDialog(true)}
|
||||
className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user