import { Form, Head, Link } from '@inertiajs/react'; import { useState } from 'react'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; type Item = { id: number; name: string; slug?: string }; type Model = Item & { device_vendor_id: number; device_type_id: number }; type Props = { device: | (Record & { connection_ports?: Record; }) | null; vendors: Item[]; types: Item[]; models: Model[]; }; export default function DeviceForm({ device, vendors, types, models }: Props) { const editing = !!device; const initialVendor = vendors.find( (vendor) => vendor.id === Number(device?.device_vendor_id), ); const [vendorSlug, setVendorSlug] = useState(initialVendor?.slug ?? ''); const fields = [ ['name', 'Nama Perangkat'], ['management_address', 'IP / Domain Management'], ['location', 'Lokasi'], ]; const protocolProfiles: Record> = { mikrotik: [['routeros_api', 'Port RouterOS API', 8728]], zte: [['ssh', 'Port SSH', 22]], hsgq: [ ['ssh', 'Port SSH', 22], ['telnet', 'Port Telnet', 23], ], hisfocus: [ ['telnet', 'Port Telnet', 23], ['web_http', 'Port WebGUI HTTP', 80], ], }; const flexibleProtocols: Array<[string, string, number]> = [ ['ssh', 'Port SSH', 22], ['telnet', 'Port Telnet', 23], ['web_http', 'Port WebGUI HTTP', 80], ['snmp', 'Port SNMP', 161], ['vendor_api', 'Port Vendor API', 0], ]; const protocols = protocolProfiles[vendorSlug] ?? flexibleProtocols; return ( <>

{editing ? 'Edit' : 'Tambah'} Perangkat

Data teknis lainnya akan diambil otomatis saat perangkat pertama kali terhubung.

{({ processing, errors }) => ( Informasi Perangkat {fields.map(([name, label]) => (
))}

Koneksi Management

Kosongkan port jika protokol tersebut tidak tersedia pada perangkat.

{protocols.map( ([ protocol, label, defaultPort, ]) => (
), )}