forked from rajun/ar-test
336 lines
14 KiB
TypeScript
336 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import QRCode from 'qrcode';
|
|
import { pb } from '~/lib/pocketbase';
|
|
import { ImageOff, Upload, Link, X } from 'lucide-react';
|
|
|
|
type InputMode = 'url' | 'file';
|
|
|
|
export default function Dashboard() {
|
|
const [name, setName] = useState('');
|
|
|
|
// GLB
|
|
const [glbMode, setGlbMode] = useState<InputMode>('file');
|
|
const [glbUrl, setGlbUrl] = useState('');
|
|
const [glbFile, setGlbFile] = useState<File | null>(null);
|
|
const glbInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// USDZ
|
|
const [usdzMode, setUsdzMode] = useState<InputMode>('file');
|
|
const [usdzUrl, setUsdzUrl] = useState('');
|
|
const [usdzFile, setUsdzFile] = useState<File | null>(null);
|
|
const usdzInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const [assets, setAssets] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const fetchAssets = async () => {
|
|
try {
|
|
const records = await pb.collection('ar_assets').getFullList({
|
|
sort: '-created',
|
|
});
|
|
setAssets(records);
|
|
} catch (err) {
|
|
console.error('Failed to fetch assets:', err);
|
|
setAssets([]);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchAssets();
|
|
}, []);
|
|
|
|
const createAsset = async () => {
|
|
const hasGlb = glbMode === 'file' ? !!glbFile : !!glbUrl.trim();
|
|
if (!name.trim() || !hasGlb) {
|
|
alert('Please provide a name and a GLB file or URL');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
|
|
try {
|
|
// Build FormData so we can send files + fields in one request
|
|
const formData = new FormData();
|
|
formData.append('name', name.trim());
|
|
|
|
if (glbMode === 'file' && glbFile) {
|
|
formData.append('glb_file', glbFile);
|
|
} else {
|
|
formData.append('glb_url', glbUrl.trim());
|
|
}
|
|
|
|
if (usdzMode === 'file' && usdzFile) {
|
|
formData.append('usdz_file', usdzFile);
|
|
} else if (usdzMode === 'url' && usdzUrl.trim()) {
|
|
formData.append('usdz_url', usdzUrl.trim());
|
|
}
|
|
|
|
const record = await pb.collection('ar_assets').create(formData);
|
|
|
|
const qrUrl = `${import.meta.env.VITE_FRONTEND_URL}/ar/${record.id}`;
|
|
|
|
const qrImage = await QRCode.toDataURL(qrUrl, {
|
|
width: 512,
|
|
margin: 2,
|
|
});
|
|
|
|
const qrBlob = await (await fetch(qrImage)).blob();
|
|
|
|
const qrFormData = new FormData();
|
|
qrFormData.append('qr_url', qrUrl);
|
|
qrFormData.append('qr_image', new File([qrBlob], `${record.id}.png`, { type: 'image/png' }));
|
|
|
|
await pb.collection('ar_assets').update(record.id, qrFormData);
|
|
|
|
// Reset all fields
|
|
setName('');
|
|
setGlbUrl('');
|
|
setGlbFile(null);
|
|
setUsdzUrl('');
|
|
setUsdzFile(null);
|
|
if (glbInputRef.current) glbInputRef.current.value = '';
|
|
if (usdzInputRef.current) usdzInputRef.current.value = '';
|
|
|
|
fetchAssets();
|
|
} catch (err: any) {
|
|
alert(err?.message || 'Failed to create asset');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className='min-h-screen bg-gray-50 px-6 py-10'>
|
|
<div className='mx-auto max-w-5xl space-y-10'>
|
|
<div>
|
|
<h1 className='text-3xl font-bold text-gray-900'>
|
|
AR Asset Dashboard
|
|
</h1>
|
|
<p className='mt-1 text-gray-500'>
|
|
Manage 3D assets and generate AR QR codes
|
|
</p>
|
|
</div>
|
|
|
|
<div className='rounded-2xl bg-white p-6 shadow-sm'>
|
|
<h2 className='mb-5 text-lg font-semibold text-gray-800'>
|
|
Create New Asset
|
|
</h2>
|
|
|
|
<div className='space-y-5 text-black'>
|
|
{/* Asset Name */}
|
|
<div className='space-y-1'>
|
|
<label className='text-xs font-semibold text-gray-600 ml-1'>Asset Name</label>
|
|
<input
|
|
className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
|
|
placeholder='Asset name'
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* GLB — Android / Web */}
|
|
<FileOrUrlField
|
|
label='GLB File (Android / Web)'
|
|
required
|
|
mode={glbMode}
|
|
onModeChange={setGlbMode}
|
|
accept='.glb'
|
|
file={glbFile}
|
|
onFileChange={setGlbFile}
|
|
inputRef={glbInputRef}
|
|
url={glbUrl}
|
|
onUrlChange={setGlbUrl}
|
|
urlPlaceholder='https://example.com/model.glb'
|
|
/>
|
|
|
|
{/* USDZ — iOS */}
|
|
<FileOrUrlField
|
|
label='USDZ File (iOS) — Optional'
|
|
mode={usdzMode}
|
|
onModeChange={setUsdzMode}
|
|
accept='.usdz,.reality'
|
|
file={usdzFile}
|
|
onFileChange={setUsdzFile}
|
|
inputRef={usdzInputRef}
|
|
url={usdzUrl}
|
|
onUrlChange={setUsdzUrl}
|
|
urlPlaceholder='https://example.com/model.usdz'
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
onClick={createAsset}
|
|
disabled={loading}
|
|
className='mt-6 inline-flex items-center justify-center gap-2 rounded-xl bg-black px-6 py-2.5 text-sm font-medium text-white transition hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60'
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<div className='w-3.5 h-3.5 rounded-full border-2 border-white/30 border-t-white animate-spin' />
|
|
Creating…
|
|
</>
|
|
) : 'Create Asset'}
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className='mb-4 text-lg font-semibold text-gray-800'>
|
|
Generated Assets
|
|
</h2>
|
|
|
|
{assets.length === 0 ? (
|
|
<p className='text-sm text-gray-500'>
|
|
No assets created yet.
|
|
</p>
|
|
) : (
|
|
<div className='grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3'>
|
|
{assets.map((asset) => (
|
|
<div
|
|
key={asset.id}
|
|
className='rounded-2xl bg-white p-5 shadow-sm transition hover:shadow-md bg-radial-[at_0%_0%] to-70% from-black/20 to-transparent '
|
|
>
|
|
<h3 className='mb-3 text-base font-semibold text-gray-900'>
|
|
{asset?.name}
|
|
</h3>
|
|
|
|
{asset?.qr_image ? (
|
|
<img
|
|
src={pb.files.getURL(asset, asset.qr_image)}
|
|
alt={asset?.name}
|
|
className='mx-auto w-40 rounded-lg'
|
|
/>
|
|
) : (
|
|
asset?.qr_file ? (
|
|
<img
|
|
src={pb.files.getURL(asset, asset.qr_file)}
|
|
alt={asset?.name}
|
|
className='mx-auto w-40 rounded-lg'
|
|
/>
|
|
) : <div className='mx-auto flex h-40 w-40 flex-col items-center justify-center space-y-2 rounded-lg bg-gray-50 text-gray-400'>
|
|
<ImageOff size={32} strokeWidth={1.5} />
|
|
<span className='text-xs font-medium'>No QR Image</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Reusable File-or-URL field ───────────────────────────────────────────────
|
|
interface FileOrUrlFieldProps {
|
|
label: string;
|
|
required?: boolean;
|
|
mode: InputMode;
|
|
onModeChange: (m: InputMode) => void;
|
|
accept: string;
|
|
file: File | null;
|
|
onFileChange: (f: File | null) => void;
|
|
inputRef: React.RefObject<HTMLInputElement | null>;
|
|
url: string;
|
|
onUrlChange: (u: string) => void;
|
|
urlPlaceholder: string;
|
|
}
|
|
|
|
function FileOrUrlField({
|
|
label, required, mode, onModeChange,
|
|
accept, file, onFileChange, inputRef,
|
|
url, onUrlChange, urlPlaceholder,
|
|
}: FileOrUrlFieldProps) {
|
|
return (
|
|
<div className='space-y-1.5'>
|
|
{/* Label + toggle */}
|
|
<div className='flex items-center justify-between ml-1'>
|
|
<label className='text-xs font-semibold text-gray-600'>
|
|
{label}{required && <span className='text-red-500 ml-0.5'>*</span>}
|
|
</label>
|
|
<div className='flex items-center gap-1 rounded-lg border border-gray-200 p-0.5 text-xs'>
|
|
<button
|
|
type='button'
|
|
onClick={() => onModeChange('file')}
|
|
className={`flex items-center gap-1 rounded-md px-2.5 py-1 transition-all font-medium ${
|
|
mode === 'file'
|
|
? 'bg-black text-white'
|
|
: 'text-gray-500 hover:text-gray-800'
|
|
}`}
|
|
>
|
|
<Upload size={11} />
|
|
Upload
|
|
</button>
|
|
<button
|
|
type='button'
|
|
onClick={() => onModeChange('url')}
|
|
className={`flex items-center gap-1 rounded-md px-2.5 py-1 transition-all font-medium ${
|
|
mode === 'url'
|
|
? 'bg-black text-white'
|
|
: 'text-gray-500 hover:text-gray-800'
|
|
}`}
|
|
>
|
|
<Link size={11} />
|
|
URL
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{mode === 'file' ? (
|
|
<div
|
|
onClick={() => inputRef.current?.click()}
|
|
className={`flex cursor-pointer items-center gap-3 rounded-lg border-2 border-dashed px-4 py-3 transition-colors ${
|
|
file ? 'border-black bg-gray-50' : 'border-gray-200 hover:border-gray-400'
|
|
}`}
|
|
>
|
|
<input
|
|
ref={inputRef}
|
|
type='file'
|
|
accept={accept}
|
|
className='hidden'
|
|
onChange={(e) => onFileChange(e.target.files?.[0] ?? null)}
|
|
/>
|
|
{file ? (
|
|
<>
|
|
<div className='flex flex-1 items-center gap-2 min-w-0'>
|
|
<div className='w-7 h-7 rounded bg-black flex items-center justify-center shrink-0'>
|
|
<Upload size={13} className='text-white' />
|
|
</div>
|
|
<span className='text-sm text-gray-800 font-medium truncate'>{file.name}</span>
|
|
<span className='text-xs text-gray-400 shrink-0'>
|
|
{(file.size / 1024 / 1024).toFixed(1)} MB
|
|
</span>
|
|
</div>
|
|
<button
|
|
type='button'
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onFileChange(null);
|
|
if (inputRef.current) inputRef.current.value = '';
|
|
}}
|
|
className='shrink-0 text-gray-400 hover:text-gray-700'
|
|
>
|
|
<X size={15} />
|
|
</button>
|
|
</>
|
|
) : (
|
|
<div className='flex flex-1 items-center gap-3 text-gray-400'>
|
|
<Upload size={16} />
|
|
<span className='text-sm'>Click to choose a file <span className='text-gray-300'>({accept})</span></span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<input
|
|
type='url'
|
|
className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
|
|
placeholder={urlPlaceholder}
|
|
value={url}
|
|
onChange={(e) => onUrlChange(e.target.value)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|