import React from 'react'
import { Head, Link, router, usePage } from '@inertiajs/react'
import BeforeAfterSlider from '../../components/enhance/BeforeAfterSlider'
import EnhanceStatusBadge from '../../components/enhance/EnhanceStatusBadge'
import EnhanceStubWarning from '../../components/enhance/EnhanceStubWarning'
import { formatEnhanceDate } from '../../utils/enhanceFormatting'
function formatDate(value) {
return formatEnhanceDate(value)
}
function DetailRow({ label, value }) {
return (
{label}
{value}
)
}
export default function EnhanceShow() {
const { props } = usePage()
const job = props.job || {}
const flash = props.flash || {}
const errors = props.errors || {}
const statusKey = String(job.status || '').toLowerCase()
const statusCopy = {
pending: 'Waiting to be queued.',
queued: 'Waiting for processor.',
processing: 'Enhancing image.',
completed: 'Enhanced image ready.',
failed: 'Enhancement failed.',
cancelled: 'Cancelled.',
expired: 'Enhanced output expired and cleaned files were removed.',
}[statusKey] || 'Unknown status.'
React.useEffect(() => {
if (!['pending', 'queued', 'processing'].includes(statusKey)) {
return undefined
}
const timer = window.setTimeout(() => {
router.reload({ only: ['job', 'flash'], preserveScroll: true })
}, 8000)
return () => window.clearTimeout(timer)
}, [statusKey])
const canCompare = Boolean(job.source_url && job.output_url && job.status === 'completed')
return (
{job.scale}x
{job.mode}
{job.engine}
Enhance job #{job.id}
{statusCopy}
Back to jobs
New enhance
{job.download_url ?
Download enhanced : null}
{job.can_retry ?
router.post(job.retry_url, {}, { preserveScroll: true })} className="inline-flex items-center gap-2 rounded-full border border-amber-300/20 bg-amber-400/12 px-5 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-amber-50 transition hover:bg-amber-400/20">Retry : null}
{job.can_delete ?
{
if (!window.confirm('Delete this enhance job and its generated files?')) return
router.delete(job.delete_url)
}} className="inline-flex items-center gap-2 rounded-full border border-rose-300/20 bg-rose-400/12 px-5 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-rose-100 transition hover:bg-rose-400/20">Delete : null}
{flash.success ? {flash.success}
: null}
{flash.error ? {flash.error}
: null}
{errors.job ? {errors.job}
: null}
{job.error_message ? {job.error_message}
: null}
{canCompare ?
: null}
Original source
{job.source_url ?
:
}
Enhanced result
{job.output_url ?
:
}
Metadata
{JSON.stringify(job.metadata || {}, null, 2)}
Job details
{job.artwork.title} : 'Standalone upload'} />
)
}