jason
bcb8a95fae
- Replace ADMIN_PASSWORD_HASH with ADMIN_PASSWORD in auth route and docker-compose - Remove bcryptjs / @types/bcryptjs dependencies - Delete scripts/hashPassword.ts (no longer needed) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import { useDraggable } from '@dnd-kit/core';
|
|
import type { ModuleType } from '../../types';
|
|
import {
|
|
MODULE_TYPE_LABELS,
|
|
MODULE_TYPE_COLORS,
|
|
MODULE_U_DEFAULTS,
|
|
MODULE_PORT_DEFAULTS,
|
|
} from '../../lib/constants';
|
|
import { cn } from '../../lib/utils';
|
|
|
|
const ALL_TYPES: ModuleType[] = [
|
|
'SWITCH', 'AGGREGATE_SWITCH', 'ROUTER', 'FIREWALL', 'PATCH_PANEL',
|
|
'MODEM', 'SERVER', 'NAS', 'PDU', 'AP', 'BLANK', 'OTHER',
|
|
];
|
|
|
|
function PaletteItem({ type }: { type: ModuleType }) {
|
|
const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
|
|
id: `palette-${type}`,
|
|
data: { type },
|
|
});
|
|
|
|
const colors = MODULE_TYPE_COLORS[type];
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
{...listeners}
|
|
{...attributes}
|
|
className={cn(
|
|
'flex items-center gap-2 px-2 py-1.5 rounded border text-left w-full cursor-grab active:cursor-grabbing transition-all select-none',
|
|
colors.bg,
|
|
colors.border,
|
|
isDragging ? 'opacity-40' : 'hover:brightness-125'
|
|
)}
|
|
aria-label={`Drag ${MODULE_TYPE_LABELS[type]} onto a rack slot`}
|
|
>
|
|
<div className={cn('w-2 h-2 rounded-sm shrink-0 brightness-150', colors.bg)} />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-xs font-medium text-white truncate">
|
|
{MODULE_TYPE_LABELS[type]}
|
|
</div>
|
|
<div className="text-[10px] text-slate-400">
|
|
{MODULE_U_DEFAULTS[type]}U · {MODULE_PORT_DEFAULTS[type]} ports
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function DevicePalette() {
|
|
return (
|
|
<aside className="w-44 shrink-0 flex flex-col bg-slate-800 border-r border-slate-700 overflow-y-auto">
|
|
<div className="px-3 py-2 border-b border-slate-700">
|
|
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Devices</p>
|
|
<p className="text-[10px] text-slate-600 mt-0.5">Drag onto a slot or click a slot</p>
|
|
</div>
|
|
<div className="flex flex-col gap-1 p-2">
|
|
{ALL_TYPES.map((type) => (
|
|
<PaletteItem key={type} type={type} />
|
|
))}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|