function ImageGalleryDashboard({ images, onDelete }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 justify-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, images.map((image)=>/*#__PURE__*/ React.createElement("div", { key: image.id, className: "p-4 border rounded shadow-md w-[300px]", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.file_data, alt: `Image ${image.file_name}`, className: "w-full h-auto", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: image.file_data, download: image.file_name, className: "text-blue-500 underline font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, "ダウンロード"), /*#__PURE__*/ React.createElement("button", { className: "text-red-500 font-roboto", onClick: ()=>onDelete(image.id), __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, "削除"))))); } function ImageGalleryDashboardStory() { const [images, setImages] = React.useState([]); React.useEffect(()=>{ fetch('/api/db/images_db', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `images`', values: [] }) }).then((response)=>response.json()).then((data)=>{ setImages(data); }); }, []); const handleDelete = (id)=>{ fetch('/api/db/images_db', { method: 'POST', body: JSON.stringify({ query: 'DELETE FROM `images` WHERE `id` = ?', values: [ id ] }) }).then(()=>{ setImages((prevImages)=>prevImages.filter((image)=>image.id !== id)); }); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageGalleryDashboard, { images: images, onDelete: handleDelete, __source: { fileName: "", lineNumber: 59, columnNumber: 10 }, __self: this })); } function ImageUploadComponent({ selectedFiles, onSelectFile, onUpload }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, selectedFiles.map((file, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", className: "block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", onChange: (e)=>onSelectFile(e, index), name: `upload_${index}`, __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: onUpload, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "アップロード"))); } function ImageUploadComponentStory() { const [selectedFiles, setSelectedFiles] = React.useState([ null ]); const [uploadComplete, setUploadComplete] = React.useState(false); const handleSelectFile = (event, index)=>{ const files = [ ...selectedFiles ]; files[index] = event.target.files[0]; files.push(null); setSelectedFiles(files); }; const handleUpload = async ()=>{ const filesToUpload = selectedFiles.filter((file)=>file !== null); for (const file of filesToUpload){ await new Promise((resolve)=>{ const reader = new FileReader(); reader.onload = async (e)=>{ const fileData = e.target.result; await fetch('/api/db/images_db', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `images` (file_name, file_data) VALUES (?, ?)", values: [ file.name, fileData ] }) }); resolve(); }; reader.readAsDataURL(file); }); } setUploadComplete(true); setSelectedFiles([ null ]); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageUploadComponent, { selectedFiles: selectedFiles, onSelectFile: handleSelectFile, onUpload: handleUpload, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }), uploadComplete && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-green-500 font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 26 }, __self: this }, "アップロード完了")); } function StorageCapacityDashboard({ usedStorage, availableStorage }) { const totalStorage = usedStorage + availableStorage; const usedPercentage = usedStorage / totalStorage * 100; const availablePercentage = availableStorage / totalStorage * 100; return /*#__PURE__*/ React.createElement("div", { className: "p-4 ml-4", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: measureStorage, className: "bg-blue-500 text-white font-sans py-2 px-4 rounded mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "容量測定ボタン"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-sans text-lg text-[#121212]", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "利用中のストレージ容量"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[20px] bg-gray-300 rounded mr-4", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-blue-500 rounded", style: { width: `${usedPercentage}%` }, __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-sans text-[#121212]", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, usedStorage.toFixed(2), " MB"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-sans text-lg text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "利用可能なストレージ容量"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[20px] bg-gray-300 rounded mr-4", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-green-500 rounded", style: { width: `${availablePercentage}%` }, __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-sans text-[#121212]", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, availableStorage.toFixed(2), " MB")))); } function measureStorage() { fetch('/api/db/images_db', { method: 'POST', body: JSON.stringify({ query: 'SELECT SUM(LENGTH(`file_data`)) as total_size FROM `images`', values: [] }) }).then((response)=>response.json()).then((data)=>{ const totalSize = data[0].total_size / (1024 * 1024); // Convert to MB setUsedStorage(totalSize); setAvailableStorage(5000 - totalSize); // Assume total storage as 5000MB }); } function StorageCapacityDashboardStory() { const [usedStorage, setUsedStorage1] = React.useState(0); const [availableStorage, setAvailableStorage1] = React.useState(5000); // Assume total storage as 5000MB return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StorageCapacityDashboard, { usedStorage: usedStorage, availableStorage: availableStorage, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedFiles, setSelectedFiles] = React.useState([ null ]); const [uploadComplete, setUploadComplete] = React.useState(false); const [images, setImages] = React.useState([]); const [usedStorage, setUsedStorage] = React.useState(0); const [availableStorage, setAvailableStorage] = React.useState(5000); React.useEffect(()=>{ fetch('/api/db/images_db', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `images`', values: [] }) }).then((response)=>response.json()).then((data)=>{ setImages(data); }); }, []); const handleSelectFile = (event, index)=>{ const files = [ ...selectedFiles ]; files[index] = event.target.files[0]; files.push(null); setSelectedFiles(files); }; const handleUpload = async ()=>{ const filesToUpload = selectedFiles.filter((file)=>file !== null); for (const file of filesToUpload){ await new Promise((resolve)=>{ const reader = new FileReader(); reader.onload = async (e)=>{ const fileData = e.target.result; await fetch('/api/db/images_db', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `images` (file_name, file_data) VALUES (?, ?)", values: [ file.name, fileData ] }) }); resolve(); }; reader.readAsDataURL(file); }); } setUploadComplete(true); setSelectedFiles([ null ]); }; const handleDelete = (id)=>{ fetch('/api/db/images_db', { method: 'POST', body: JSON.stringify({ query: 'DELETE FROM `images` WHERE `id` = ?', values: [ id ] }) }).then(()=>{ setImages((prevImages)=>prevImages.filter((image)=>image.id !== id)); }); }; const measureStorage = ()=>{ fetch('/api/db/images_db', { method: 'POST', body: JSON.stringify({ query: 'SELECT SUM(LENGTH(`file_data`)) as total_size FROM `images`', values: [] }) }).then((response)=>response.json()).then((data)=>{ const totalSize = data[0].total_size / (1024 * 1024); setUsedStorage(totalSize); setAvailableStorage(5000 - totalSize); }); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, "クラウドストレージサイト"), /*#__PURE__*/ React.createElement("div", { className: "pb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ImageUploadComponent, { selectedFiles: selectedFiles, onSelectFile: handleSelectFile, onUpload: handleUpload, __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }), uploadComplete && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-green-500 font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 28 }, __self: this }, "アップロード完了")), /*#__PURE__*/ React.createElement("div", { className: "pb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ImageGalleryDashboard, { images: images, onDelete: handleDelete, __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "pb-4", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(StorageCapacityDashboard, { usedStorage: usedStorage, availableStorage: availableStorage, __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }))); }