Them trang Admin sinh JSON va chong Cache
This commit is contained in:
phuongtc
194
src/Admin.tsx
Normal file
194
src/Admin.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
interface VideoEntry {
|
||||
uid: number; // ID nội bộ để quản lý danh sách
|
||||
link: string;
|
||||
id: string; // YouTube ID sau khi tách
|
||||
title: string;
|
||||
category: string;
|
||||
customCategory: string;
|
||||
level: string;
|
||||
}
|
||||
|
||||
const CATEGORIES = ["Cardio", "Cơ Bụng", "Yoga", "HIIT", "Ngực", "Chân", "Toàn thân", "Khác"];
|
||||
const LEVELS = ["Dễ", "Vừa", "Khó"];
|
||||
|
||||
export default function Admin() {
|
||||
const [entries, setEntries] = useState<VideoEntry[]>([
|
||||
{ uid: Date.now(), link: '', id: '', title: '', category: 'Cardio', customCategory: '', level: 'Vừa' }
|
||||
]);
|
||||
const [jsonOutput, setJsonOutput] = useState<string>('');
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
// Hàm tự động tách ID Youtube từ Link
|
||||
const extractYouTubeID = (url: string) => {
|
||||
const regExp = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i;
|
||||
const match = url.match(regExp);
|
||||
return match ? match[1] : '';
|
||||
};
|
||||
|
||||
const handleUpdate = (index: number, field: keyof VideoEntry, value: string) => {
|
||||
const newEntries = [...entries];
|
||||
newEntries[index][field] = value as never;
|
||||
|
||||
// Nếu đang dán link, tự động tách ID luôn
|
||||
if (field === 'link') {
|
||||
newEntries[index].id = extractYouTubeID(value);
|
||||
}
|
||||
setEntries(newEntries);
|
||||
};
|
||||
|
||||
const handleAddRow = () => {
|
||||
setEntries([
|
||||
...entries,
|
||||
{ uid: Date.now(), link: '', id: '', title: '', category: 'Cardio', customCategory: '', level: 'Vừa' }
|
||||
]);
|
||||
};
|
||||
|
||||
const handleRemoveRow = (index: number) => {
|
||||
if (entries.length === 1) return; // Giữ lại ít nhất 1 dòng
|
||||
const newEntries = [...entries];
|
||||
newEntries.splice(index, 1);
|
||||
setEntries(newEntries);
|
||||
};
|
||||
|
||||
const handleGenerate = () => {
|
||||
// Lọc bỏ những dòng chưa có ID
|
||||
const validEntries = entries.filter(e => e.id.trim() !== '');
|
||||
|
||||
const finalData = validEntries.map((e, index) => ({
|
||||
id: `vid_${Date.now()}_${index}`, // Sinh ra ID ngẫu nhiên cho video
|
||||
youtube_id: e.id, // Gán mã Youtube ID vào đúng trường youtube_id
|
||||
title: e.title.trim() || "Chưa có tiêu đề",
|
||||
category: e.category === 'Khác' ? e.customCategory.trim() : e.category,
|
||||
level: e.level
|
||||
}));
|
||||
|
||||
setJsonOutput(JSON.stringify(finalData, null, 2));
|
||||
setCopied(false);
|
||||
};
|
||||
|
||||
const handleCopy = () => {
|
||||
if (!jsonOutput) return;
|
||||
navigator.clipboard.writeText(jsonOutput);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-4 md:p-8 bg-gray-50 min-h-screen">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-800">🛠️ Trạm Tạo Dữ Liệu</h1>
|
||||
<button
|
||||
onClick={() => window.location.href = '/'}
|
||||
className="text-sm text-blue-600 hover:underline"
|
||||
>
|
||||
← Về App
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
{entries.map((entry, index) => (
|
||||
<div key={entry.uid} className="bg-white p-4 rounded-xl shadow-sm border border-gray-200 relative">
|
||||
<button
|
||||
onClick={() => handleRemoveRow(index)}
|
||||
className="absolute top-2 right-2 text-red-500 hover:bg-red-50 p-1 rounded-md"
|
||||
title="Xóa dòng này"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
</button>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-4">
|
||||
{/* Cột Link */}
|
||||
<div className="md:col-span-5">
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1">Link YouTube</label>
|
||||
<input
|
||||
type="text"
|
||||
value={entry.link}
|
||||
onChange={(e) => handleUpdate(index, 'link', e.target.value)}
|
||||
placeholder="https://youtu.be/..."
|
||||
className="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
{entry.id && <p className="text-xs text-green-600 mt-1">ID: {entry.id}</p>}
|
||||
</div>
|
||||
|
||||
{/* Cột Tiêu đề */}
|
||||
<div className="md:col-span-3">
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1">Tiêu đề</label>
|
||||
<input
|
||||
type="text"
|
||||
value={entry.title}
|
||||
onChange={(e) => handleUpdate(index, 'title', e.target.value)}
|
||||
placeholder="Vd: 10 Phút Đốt Mỡ"
|
||||
className="w-full border border-gray-300 rounded-md p-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Cột Phân loại */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1">Danh mục</label>
|
||||
<select
|
||||
value={entry.category}
|
||||
onChange={(e) => handleUpdate(index, 'category', e.target.value)}
|
||||
className="w-full border border-gray-300 rounded-md p-2 text-sm bg-white"
|
||||
>
|
||||
{CATEGORIES.map(cat => <option key={cat} value={cat}>{cat}</option>)}
|
||||
</select>
|
||||
{entry.category === 'Khác' && (
|
||||
<input
|
||||
type="text"
|
||||
value={entry.customCategory}
|
||||
onChange={(e) => handleUpdate(index, 'customCategory', e.target.value)}
|
||||
placeholder="Nhập tag..."
|
||||
className="w-full border border-gray-300 rounded-md p-1 mt-2 text-sm"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Cột Mức độ */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1">Mức độ</label>
|
||||
<select
|
||||
value={entry.level}
|
||||
onChange={(e) => handleUpdate(index, 'level', e.target.value)}
|
||||
className="w-full border border-gray-300 rounded-md p-2 text-sm bg-white"
|
||||
>
|
||||
{LEVELS.map(lvl => <option key={lvl} value={lvl}>{lvl}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 mb-8">
|
||||
<button
|
||||
onClick={handleAddRow}
|
||||
className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg text-sm font-medium hover:bg-gray-300 transition"
|
||||
>
|
||||
+ Thêm Video
|
||||
</button>
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
className="px-6 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition"
|
||||
>
|
||||
Sinh mã JSON
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{jsonOutput && (
|
||||
<div className="bg-gray-800 rounded-xl p-4 relative">
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className={`absolute top-4 right-4 px-3 py-1 rounded text-xs font-medium transition ${copied ? 'bg-green-500 text-white' : 'bg-gray-600 text-gray-200 hover:bg-gray-500'}`}
|
||||
>
|
||||
{copied ? 'Đã Copy!' : 'Copy JSON'}
|
||||
</button>
|
||||
<pre className="text-green-400 text-sm overflow-x-auto pt-8">
|
||||
<code>{jsonOutput}</code>
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user