418 lines
15 KiB
TypeScript
418 lines
15 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { X, ChevronLeft, ChevronRight, Printer, HardDrive, Network, Box, FolderOpen, MoreVertical, Play, Pause, SkipForward, SkipBack, RotateCcw } from 'lucide-react';
|
|
import { motion, AnimatePresence } from 'motion/react';
|
|
import FileBrowser from './FileBrowser';
|
|
|
|
interface Device {
|
|
id: string;
|
|
number: string;
|
|
type: 'printer' | 'drive' | 'network' | 'other' | 'meatloaf';
|
|
name?: string;
|
|
enabled: boolean | number;
|
|
url?: string;
|
|
mode?: number;
|
|
}
|
|
|
|
interface DeviceDetailOverlayProps {
|
|
device: Device;
|
|
config: any;
|
|
setConfig: (config: any) => void;
|
|
onClose: () => void;
|
|
onNavigate: (direction: 'prev' | 'next') => void;
|
|
hasPrev: boolean;
|
|
hasNext: boolean;
|
|
}
|
|
|
|
export default function DeviceDetailOverlay({
|
|
device,
|
|
config,
|
|
setConfig,
|
|
onClose,
|
|
onNavigate,
|
|
hasPrev,
|
|
hasNext
|
|
}: DeviceDetailOverlayProps) {
|
|
const [touchStart, setTouchStart] = useState(0);
|
|
const [touchEnd, setTouchEnd] = useState(0);
|
|
const [showFileBrowser, setShowFileBrowser] = useState(false);
|
|
const [showCommandMenu, setShowCommandMenu] = useState(false);
|
|
const [selectedMediaIndex, setSelectedMediaIndex] = useState(0);
|
|
|
|
const minSwipeDistance = 50;
|
|
|
|
const onTouchStart = (e: React.TouchEvent) => {
|
|
setTouchEnd(0);
|
|
setTouchStart(e.targetTouches[0].clientX);
|
|
};
|
|
|
|
const onTouchMove = (e: React.TouchEvent) => {
|
|
setTouchEnd(e.targetTouches[0].clientX);
|
|
};
|
|
|
|
const onTouchEnd = () => {
|
|
if (!touchStart || !touchEnd) return;
|
|
|
|
const distance = touchStart - touchEnd;
|
|
const isLeftSwipe = distance > minSwipeDistance;
|
|
const isRightSwipe = distance < -minSwipeDistance;
|
|
|
|
if (isLeftSwipe && hasNext) {
|
|
onNavigate('next');
|
|
}
|
|
if (isRightSwipe && hasPrev) {
|
|
onNavigate('prev');
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
onClose();
|
|
} else if (e.key === 'ArrowLeft' && hasPrev) {
|
|
onNavigate('prev');
|
|
} else if (e.key === 'ArrowRight' && hasNext) {
|
|
onNavigate('next');
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [hasPrev, hasNext, onClose, onNavigate]);
|
|
|
|
const updateDeviceSetting = (path: string[], value: any) => {
|
|
const newConfig = JSON.parse(JSON.stringify(config));
|
|
let current = newConfig;
|
|
|
|
for (let i = 0; i < path.length - 1; i++) {
|
|
current = current[path[i]];
|
|
}
|
|
|
|
current[path[path.length - 1]] = value;
|
|
setConfig(newConfig);
|
|
};
|
|
|
|
const getDevicePath = (): string[] => {
|
|
const [type, num] = device.id.split('-');
|
|
return ['iec', 'devices', type, num];
|
|
};
|
|
|
|
const getDeviceData = () => {
|
|
const path = getDevicePath();
|
|
let current = config;
|
|
for (const key of path) {
|
|
current = current?.[key];
|
|
}
|
|
return current || {};
|
|
};
|
|
|
|
const deviceData = getDeviceData();
|
|
|
|
const getDeviceIcon = (type: Device['type']) => {
|
|
switch (type) {
|
|
case 'printer':
|
|
return <Printer className="w-6 h-6" />;
|
|
case 'drive':
|
|
return <HardDrive className="w-6 h-6" />;
|
|
case 'network':
|
|
return <Network className="w-6 h-6" />;
|
|
default:
|
|
return <Box className="w-6 h-6" />;
|
|
}
|
|
};
|
|
|
|
// Detect if URL is part of a media set (e.g., disk1.d64, disk2.d64)
|
|
const detectMediaSet = () => {
|
|
if (!deviceData.url) return null;
|
|
|
|
const match = deviceData.url.match(/^(.+?)(\d+)(\.[^.]+)$/);
|
|
if (!match) return null;
|
|
|
|
const [, prefix, num, ext] = match;
|
|
const currentNum = parseInt(num);
|
|
|
|
// Generate potential media set
|
|
const mediaSet = [];
|
|
for (let i = 1; i <= 10; i++) {
|
|
mediaSet.push(`${prefix}${i}${ext}`);
|
|
}
|
|
|
|
return {
|
|
prefix,
|
|
extension: ext,
|
|
currentIndex: currentNum - 1,
|
|
files: mediaSet
|
|
};
|
|
};
|
|
|
|
const mediaSet = detectMediaSet();
|
|
|
|
const switchMedia = (index: number) => {
|
|
if (!mediaSet) return;
|
|
const path = getDevicePath();
|
|
updateDeviceSetting([...path, 'url'], mediaSet.files[index]);
|
|
setSelectedMediaIndex(index);
|
|
};
|
|
|
|
const sendCommand = (command: string) => {
|
|
console.log(`Sending command to device ${device.number}: ${command}`);
|
|
// In a real app, this would send the command to the device
|
|
setShowCommandMenu(false);
|
|
};
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 bg-black/50 z-50"
|
|
onClick={onClose}
|
|
>
|
|
<motion.div
|
|
initial={{ y: '100%' }}
|
|
animate={{ y: 0 }}
|
|
exit={{ y: '100%' }}
|
|
transition={{ type: 'spring', damping: 30, stiffness: 300 }}
|
|
className="absolute inset-0 bg-white overflow-y-auto"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onTouchStart={onTouchStart}
|
|
onTouchMove={onTouchMove}
|
|
onTouchEnd={onTouchEnd}
|
|
>
|
|
<div className="sticky top-0 bg-white border-b border-neutral-200 z-10">
|
|
<div className="flex items-center justify-between p-4">
|
|
<button onClick={onClose} className="p-2 -m-2">
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
<div className="flex items-center gap-2">
|
|
<div className={deviceData.enabled ? 'text-blue-600' : 'text-neutral-400'}>
|
|
{getDeviceIcon(device.type)}
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-xs text-neutral-500 capitalize">{device.type}</div>
|
|
<div className="font-medium">#{device.number}</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowCommandMenu(!showCommandMenu)}
|
|
className="p-2 -m-2 relative"
|
|
>
|
|
<MoreVertical className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
{showCommandMenu && (
|
|
<div className="absolute right-4 top-16 bg-white rounded-lg shadow-lg border border-neutral-200 py-2 min-w-[200px] z-20">
|
|
<button
|
|
onClick={() => sendCommand('RESET')}
|
|
className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2"
|
|
>
|
|
<RotateCcw className="w-4 h-4" />
|
|
Reset Device
|
|
</button>
|
|
<button
|
|
onClick={() => sendCommand('EJECT')}
|
|
className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2"
|
|
>
|
|
<SkipBack className="w-4 h-4" />
|
|
Eject Media
|
|
</button>
|
|
<button
|
|
onClick={() => sendCommand('MOUNT')}
|
|
className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2"
|
|
>
|
|
<Play className="w-4 h-4" />
|
|
Mount Media
|
|
</button>
|
|
<button
|
|
onClick={() => sendCommand('STATUS')}
|
|
className="w-full px-4 py-2 text-left hover:bg-neutral-50"
|
|
>
|
|
Get Status
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between px-4 pb-4">
|
|
<button
|
|
onClick={() => onNavigate('prev')}
|
|
disabled={!hasPrev}
|
|
className={`p-2 rounded-lg ${
|
|
hasPrev
|
|
? 'text-blue-600 bg-blue-50'
|
|
: 'text-neutral-300 bg-neutral-50'
|
|
}`}
|
|
>
|
|
<ChevronLeft className="w-5 h-5" />
|
|
</button>
|
|
<span className="text-sm text-neutral-500">Swipe to navigate</span>
|
|
<button
|
|
onClick={() => onNavigate('next')}
|
|
disabled={!hasNext}
|
|
className={`p-2 rounded-lg ${
|
|
hasNext
|
|
? 'text-blue-600 bg-blue-50'
|
|
: 'text-neutral-300 bg-neutral-50'
|
|
}`}
|
|
>
|
|
<ChevronRight className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 space-y-6">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-sm text-neutral-500 block mb-2">Device Name</label>
|
|
<input
|
|
type="text"
|
|
value={deviceData.name || device.name || `Device ${device.number}`}
|
|
onChange={(e) => {
|
|
const path = getDevicePath();
|
|
updateDeviceSetting([...path, 'name'], e.target.value);
|
|
}}
|
|
className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-sm text-neutral-500 block mb-2">Type</label>
|
|
<div className="px-3 py-2 bg-neutral-50 border border-neutral-200 rounded-lg text-neutral-700">
|
|
{device.type.charAt(0).toUpperCase() + device.type.slice(1)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-sm text-neutral-500">Enabled</label>
|
|
<button
|
|
onClick={() => {
|
|
const path = getDevicePath();
|
|
updateDeviceSetting([...path, 'enabled'], deviceData.enabled ? 0 : 1);
|
|
}}
|
|
className={`relative w-12 h-6 rounded-full transition-colors ${
|
|
deviceData.enabled ? 'bg-blue-600' : 'bg-neutral-300'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
|
|
deviceData.enabled ? 'translate-x-6' : 'translate-x-0.5'
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{deviceData.url !== undefined && (
|
|
<div>
|
|
<label className="text-sm text-neutral-500 block mb-2">URL</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={deviceData.url}
|
|
onChange={(e) => {
|
|
const path = getDevicePath();
|
|
updateDeviceSetting([...path, 'url'], e.target.value);
|
|
}}
|
|
className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
|
|
/>
|
|
<button
|
|
onClick={() => setShowFileBrowser(true)}
|
|
className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
|
|
>
|
|
<FolderOpen className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{mediaSet && (
|
|
<div className="mt-3">
|
|
<label className="text-sm text-neutral-500 block mb-2">Media Set</label>
|
|
<div className="flex gap-2 flex-wrap">
|
|
{mediaSet.files.slice(0, 5).map((file, index) => {
|
|
// Attempt to extract a title from the filename, fallback to filename
|
|
// Example: /path/to/Game Disk.d64 or /path/to/disk1.d64
|
|
const fileName = file.split('/').pop() || file;
|
|
// If you have a title mapping, replace this logic
|
|
const title = fileName.replace(/\.[^.]+$/, '');
|
|
return (
|
|
<button
|
|
key={index}
|
|
onClick={() => switchMedia(index)}
|
|
className={`px-3 py-1.5 rounded-lg text-sm ${
|
|
deviceData.url === file
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
|
|
}`}
|
|
>
|
|
{`${index + 1}: ${title}`}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{deviceData.mode !== undefined && (
|
|
<div>
|
|
<label className="text-sm text-neutral-500 block mb-2">Mode</label>
|
|
<input
|
|
type="number"
|
|
value={deviceData.mode}
|
|
onChange={(e) => {
|
|
const path = getDevicePath();
|
|
updateDeviceSetting([...path, 'mode'], parseInt(e.target.value));
|
|
}}
|
|
className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{deviceData.type && (
|
|
<div>
|
|
<label className="text-sm text-neutral-500 block mb-2">Device Type</label>
|
|
<div className="px-3 py-2 bg-neutral-50 border border-neutral-200 rounded-lg text-neutral-700">
|
|
{deviceData.type}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{deviceData.baud !== undefined && (
|
|
<div>
|
|
<label className="text-sm text-neutral-500 block mb-2">Baud Rate</label>
|
|
<input
|
|
type="number"
|
|
value={deviceData.baud}
|
|
onChange={(e) => {
|
|
const path = getDevicePath();
|
|
updateDeviceSetting([...path, 'baud'], parseInt(e.target.value));
|
|
}}
|
|
className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-neutral-200">
|
|
<h3 className="text-sm text-neutral-500 mb-2">Device ID</h3>
|
|
<code className="text-xs text-neutral-600 bg-neutral-50 px-2 py-1 rounded">
|
|
{device.id}
|
|
</code>
|
|
</div>
|
|
</div>
|
|
|
|
{showFileBrowser && (
|
|
<FileBrowser
|
|
currentPath={deviceData.url || '/'}
|
|
onSelect={(path) => {
|
|
const devicePath = getDevicePath();
|
|
updateDeviceSetting([...devicePath, 'url'], path);
|
|
}}
|
|
onClose={() => setShowFileBrowser(false)}
|
|
/>
|
|
)}
|
|
</motion.div>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
);
|
|
}
|