build 4.6 Demo
This commit is contained in:
DaStra3003
@@ -0,0 +1,196 @@
|
||||
"use client"
|
||||
import { getApiUrl } from "@/config/api"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useRouter, useParams } from "next/navigation"
|
||||
import { ArrowLeft, FileIcon, Upload, LogOut } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
import { ProtectedRoute } from "@/components/protected-route"
|
||||
import { FileUpload } from "@/components/file-upload"
|
||||
import type { Device, DeviceFile } from "@/types/device"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { getDeviceImage } from "@/components/device-images"
|
||||
import axios from "axios"
|
||||
import Image from "next/image"
|
||||
|
||||
interface ApiCapture {
|
||||
id: number
|
||||
filename: string
|
||||
upload: string
|
||||
firmware_version: string
|
||||
ip: string
|
||||
state: string
|
||||
}
|
||||
|
||||
const getDeviceById = async (deviceId: string) => {
|
||||
try {
|
||||
const deviceResponse = await axios.get(getApiUrl(`get_device_by_id/${deviceId}`))
|
||||
const deviceData = deviceResponse.data
|
||||
|
||||
const filesResponse = await axios.get(getApiUrl(`get_file_by_device/${deviceId}`))
|
||||
const filesData = filesResponse.data
|
||||
|
||||
const files: DeviceFile[] = filesData.map((file: ApiCapture) => ({
|
||||
id: String(file.id),
|
||||
name: file.filename,
|
||||
uploadedAt: file.upload,
|
||||
firmwareVersion: file.firmware_version,
|
||||
ipAddress: file.ip,
|
||||
status: file.state === "pending" ? "pending" : "scanned",
|
||||
}))
|
||||
|
||||
return {
|
||||
id: String(deviceData.id),
|
||||
name: deviceData.product.product_name,
|
||||
type: deviceData.product.device_type.device_type,
|
||||
manufacturer: deviceData.product.manufacturer.name,
|
||||
serialNumber: deviceData.serial,
|
||||
comment: deviceData.comment,
|
||||
lastScanned: new Date(deviceData.created).toLocaleDateString("en-GB"),
|
||||
files,
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch device details:", error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export default function DeviceDetailPage() {
|
||||
const params = useParams()
|
||||
const id = params?.id as string
|
||||
const router = useRouter()
|
||||
const [device, setDevice] = useState<Device | null>(null)
|
||||
const [showUpload, setShowUpload] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchDeviceDetails = async () => {
|
||||
const deviceDetails = await getDeviceById(id)
|
||||
if (!deviceDetails) {
|
||||
router.push("/devices")
|
||||
} else {
|
||||
setDevice(deviceDetails)
|
||||
}
|
||||
}
|
||||
|
||||
fetchDeviceDetails()
|
||||
}, [id, router])
|
||||
|
||||
const handleViewResults = (fileId: string) => {
|
||||
router.push(`/scan-results?fileId=${fileId}`)
|
||||
}
|
||||
|
||||
if (!device) {
|
||||
return <div className="min-h-screen bg-background" />
|
||||
}
|
||||
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
{({ logout }) => (
|
||||
<div className="min-h-screen bg-background p-4 flex items-start">
|
||||
<div className="flex gap-4 max-w-[1400px] mx-auto justify-center w-full h-[calc(100vh-32px)]">
|
||||
<div className="flex-1 space-y-8">
|
||||
<Card className="w-full h-full flex flex-col">
|
||||
<CardHeader>
|
||||
<div className="flex justify-end items-center mb-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
logout()
|
||||
router.push("/login")
|
||||
}}
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
<span className="sr-only">Logout</span>
|
||||
</Button>
|
||||
</div>
|
||||
{!showUpload && (
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-1 space-y-2">
|
||||
<CardTitle className="text-2xl">{device.name}</CardTitle>
|
||||
<CardDescription className="space-y-1">
|
||||
<span className="block">Type: {device.type}</span>
|
||||
<span className="block">Manufacturer: {device.manufacturer}</span>
|
||||
<span className="block">Serial Number: {device.serialNumber}</span>
|
||||
{device.comment && <span className="block">Comment: {device.comment}</span>}
|
||||
{device.lastScanned && (
|
||||
<span className="block">Last Scanned: {device.lastScanned}</span>
|
||||
)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="w-40 h-40 rounded-full overflow-hidden flex-shrink-0 border">
|
||||
<Image
|
||||
src={getDeviceImage(device.type) || "/images/logos/Placeholder.png"}
|
||||
alt={device.name}
|
||||
width={160}
|
||||
height={160}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="flex-grow overflow-hidden relative">
|
||||
{showUpload ? (
|
||||
<FileUpload onBack={() => setShowUpload(false)} deviceId={id} />
|
||||
) : (
|
||||
<div className="space-y-6 h-full flex flex-col">
|
||||
<Button onClick={() => setShowUpload(true)} className="w-auto">
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
Upload New File
|
||||
</Button>
|
||||
|
||||
<div className="space-y-4 flex-grow overflow-hidden">
|
||||
<h3 className="text-lg font-semibold">Device Files</h3>
|
||||
<ScrollArea className="h-[calc(100%-60px)] pr-4">
|
||||
{device.files && device.files.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{device.files.map((file) => (
|
||||
<div key={file.id} className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div className="flex items-center space-x-4">
|
||||
<FileIcon className="h-6 w-6 text-muted-foreground" />
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium">{file.name}</p>
|
||||
<div className="text-sm text-muted-foreground space-y-0.5">
|
||||
<p>Uploaded: {new Date(file.uploadedAt).toLocaleDateString("de-DE")}</p>
|
||||
{file.firmwareVersion && <p>Firmware: {file.firmwareVersion}</p>}
|
||||
{file.ipAddress && <p>IP Address: {file.ipAddress}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="default"
|
||||
className="bg-emerald-600 hover:bg-emerald-700"
|
||||
onClick={() => handleViewResults(file.id)}
|
||||
>
|
||||
View Results
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
No files uploaded yet. Upload a file to start scanning.
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end mt-auto pt-4">
|
||||
<Button onClick={() => router.push("/devices")}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Devices
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ProtectedRoute>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user