function DeleteButtonFeature({ onDeleteClick }) { return /*#__PURE__*/ React.createElement("button", { className: "border border-[#1976d2] bg-[#1976d2] text-white rounded px-6 py-2 font-roboto", onClick: onDeleteClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "削除"); } function DeleteButtonFeatureStory() { const handleDeletePallet = ()=>{ console.log("Delete previous load data"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DeleteButtonFeature, { onDeleteClick: handleDeletePallet, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [qrCodeData, setQrCodeData] = React.useState(''); const [palletNo, setPalletNo] = React.useState(''); const [history, setHistory] = React.useState([]); const handleScan = ()=>{ const timestamp = new Date().toISOString(); const dataEntry = { qrCodeData, palletNo, timestamp }; setHistory([ ...history, dataEntry ]); setQrCodeData(''); alert('QRコードが読み取られました。'); }; const handlePalletNoChange = (event)=>{ setPalletNo(event.target.value); }; const handleDeletePallet = ()=>{ setPalletNo(''); }; const downloadData = ()=>{ const jsonData = JSON.stringify(history); const blob = new Blob([ jsonData ], { type: 'application/json' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `QRList_${new Date().toISOString()}.json`; link.click(); }; const handleNext = ()=>{ handleScan(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f4f4f4] font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-4 bg-[#1976d2] text-white", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-xl", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "QRList")), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4 w-full justify-around px-10", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "palletNo", placeholder: "パレットNO", className: "border border-gray-300 rounded px-4 py-2 w-1/4", value: palletNo, onChange: handlePalletNoChange, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "qrCodeData", placeholder: "QRコードデータ", className: "border border-gray-300 rounded px-4 py-2 w-3/4", value: qrCodeData, onChange: (e)=>setQrCodeData(e.target.value), onBlur: handleScan, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-10 p-4 w-full max-w-4xl border rounded bg-white", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-3", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Data History"), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto max-h-[300px]", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, history.map((entry, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "text-gray-700", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, `品番: ${entry.qrCodeData}, パレットNO: ${entry.palletNo}, タイムスタンプ: ${entry.timestamp}`)))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full flex justify-around", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "border border-[#1976d2] bg-[#1976d2] text-white rounded px-6 py-2", onClick: handleNext, __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "次へ"), /*#__PURE__*/ React.createElement(DeleteButtonFeature, { onDeleteClick: handleDeletePallet, __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "border border-[#4caf50] bg-[#4caf50] text-white rounded px-6 py-2", onClick: downloadData, __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "完了"))); }