function MainComponent() { const [rows, setRows] = React.useState(3); const [columns, setColumns] = React.useState('1,2,1'); const [rowMargin, setRowMargin] = React.useState(4); const [columnMargin, setColumnMargin] = React.useState(4); const [seatWidth, setSeatWidth] = React.useState(48); const [seatHeight, setSeatHeight] = React.useState(48); const [layout, setLayout] = React.useState({ rows: 3, columns: [ 1, 2, 1 ], rowMargin: 4, columnMargin: 4, seatWidth: 48, seatHeight: 48 }); const [lateList, setLateList] = React.useState([]); const [absentList, setAbsentList] = React.useState([]); const presets = [ { name: '標準教室', layout: { rows: 5, columns: [ 1, 2, 2, 2, 1 ], rowMargin: 4, columnMargin: 4, seatWidth: 48, seatHeight: 48 } }, { name: 'ラボスタイル', layout: { rows: 3, columns: [ 3, 3, 3 ], rowMargin: 8, columnMargin: 8, seatWidth: 60, seatHeight: 60 } }, { name: 'セミナー形式', layout: { rows: 4, columns: [ 4, 4, 4, 4 ], rowMargin: 6, columnMargin: 2, seatWidth: 40, seatHeight: 40 } } ]; React.useEffect(()=>{ const columnsArray = columns.split(',').map(Number).filter((n)=>!isNaN(n) && n > 0); setLayout({ rows, columns: columnsArray, rowMargin, columnMargin, seatWidth, seatHeight }); }, [ rows, columns, rowMargin, columnMargin, seatWidth, seatHeight ]); const handleExport = ()=>{ const data = { layout, lateList, absentList }; const blob = new Blob([ JSON.stringify(data, null, 2) ], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'classroom_layout.json'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; const handleImport = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e)=>{ const importedData = JSON.parse(e.target.result); setLayout(importedData.layout); setLateList(importedData.lateList); setAbsentList(importedData.absentList); }; reader.readAsText(file); } }; const handlePresetSelect = (index)=>{ setLayout(presets[parseInt(index)].layout); }; const handleSeatClick = (seatNumber, type)=>{ const listSetter = type === 'late' ? setLateList : setAbsentList; const otherListSetter = type === 'late' ? setAbsentList : setLateList; listSetter((prevList)=>{ const existingIndex = prevList.findIndex((item)=>item.seatNumber === seatNumber); if (existingIndex !== -1) { return prevList.filter((_, index)=>index !== existingIndex); } else { otherListSetter((prevList)=>prevList.filter((item)=>item.seatNumber !== seatNumber)); return [ ...prevList, { id: Date.now(), seatNumber, timestamp: new Date(), memo: '' } ]; } }); }; const handleRemove = (id, type)=>{ const listSetter = type === 'late' ? setLateList : setAbsentList; listSetter((prevList)=>prevList.filter((item)=>item.id !== id)); }; const handleMemoChange = (id, newMemo, type)=>{ const listSetter = type === 'late' ? setLateList : setAbsentList; listSetter((prevList)=>prevList.map((item)=>item.id === id ? { ...item, memo: newMemo } : item)); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 space-y-8", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, "教室座席表ジェネレーター"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "rows", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "行数:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "rows", name: "rows", value: rows, onChange: (e)=>setRows(Math.max(1, parseInt(e.target.value) || 1)), className: "w-full border border-gray-300 p-2 rounded", min: "1", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "columns", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "列の構成 (カンマ区切り):"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "columns", name: "columns", value: columns, onChange: (e)=>setColumns(e.target.value), className: "w-full border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "rowMargin", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "行間マージン (px):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "rowMargin", name: "rowMargin", value: rowMargin, onChange: (e)=>setRowMargin(Math.max(0, parseInt(e.target.value) || 0)), className: "w-full border border-gray-300 p-2 rounded", min: "0", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "columnMargin", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "列間マージン (px):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "columnMargin", name: "columnMargin", value: columnMargin, onChange: (e)=>setColumnMargin(Math.max(0, parseInt(e.target.value) || 0)), className: "w-full border border-gray-300 p-2 rounded", min: "0", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "seatWidth", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, "座席の幅 (px):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "seatWidth", name: "seatWidth", value: seatWidth, onChange: (e)=>setSeatWidth(Math.max(20, parseInt(e.target.value) || 20)), className: "w-full border border-gray-300 p-2 rounded", min: "20", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "seatHeight", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, "座席の高さ (px):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "seatHeight", name: "seatHeight", value: seatHeight, onChange: (e)=>setSeatHeight(Math.max(20, parseInt(e.target.value) || 20)), className: "w-full border border-gray-300 p-2 rounded", min: "20", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 155, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleExport, className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, "エクスポート"), /*#__PURE__*/ React.createElement("label", { className: "cursor-pointer bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, "インポート", /*#__PURE__*/ React.createElement("input", { type: "file", onChange: handleImport, className: "hidden", name: "importFile", accept: ".json", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { onChange: (e)=>handlePresetSelect(e.target.value), className: "bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded w-full text-left", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, "プリセットを選択"), presets.map((preset, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: index, __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, preset.name)))))), /*#__PURE__*/ React.createElement("div", { className: "grid", style: { gap: `${layout.rowMargin}px` }, __source: { fileName: "", lineNumber: 174, columnNumber: 7 }, __self: this }, Array.from({ length: layout.rows }).map((_, rowIndex)=>/*#__PURE__*/ React.createElement("div", { key: rowIndex, className: "flex justify-center", style: { gap: `${layout.columnMargin}px` }, __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, layout.columns.map((blockSize, blockIndex)=>/*#__PURE__*/ React.createElement("div", { key: blockIndex, className: "flex", style: { gap: blockSize > 1 ? '0px' : `${layout.columnMargin}px` }, __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, Array.from({ length: blockSize }).map((_, deskIndex)=>{ const seatNumber = rowIndex * layout.columns.reduce((a, b)=>a + b, 0) + layout.columns.slice(0, blockIndex).reduce((a, b)=>a + b, 0) + deskIndex + 1; return /*#__PURE__*/ React.createElement("div", { key: deskIndex, className: "bg-white flex items-center justify-center border border-black cursor-pointer", style: { width: `${layout.seatWidth}px`, height: `${layout.seatHeight}px` }, onClick: ()=>handleSeatClick(seatNumber, 'late'), onDoubleClick: (e)=>{ e.preventDefault(); handleSeatClick(seatNumber, 'absent'); }, __source: { fileName: "", lineNumber: 184, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-black", __source: { fileName: "", lineNumber: 194, columnNumber: 23 }, __self: this }, seatNumber)); })))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 203, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border rounded p-4", __source: { fileName: "", lineNumber: 204, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, "遅刻者リスト"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 206, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 207, columnNumber: 13 }, __self: this }, lateList.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.id, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 209, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 210, columnNumber: 19 }, __self: this }, "座席 ", item.seatNumber, " - ", new Date(item.timestamp).toLocaleTimeString()), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "メモ", value: item.memo, onChange: (e)=>handleMemoChange(item.id, e.target.value, 'late'), className: "flex-grow border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 211, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRemove(item.id, 'late'), className: "text-red-500", __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this }, "削除")))))), /*#__PURE__*/ React.createElement("div", { className: "border rounded p-4 mt-4", __source: { fileName: "", lineNumber: 224, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 225, columnNumber: 11 }, __self: this }, "欠席者リスト"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 226, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, absentList.map((item)=>/*#__PURE__*/ React.createElement("li", { key: item.id, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 230, columnNumber: 19 }, __self: this }, "座席 ", item.seatNumber, " - ", new Date(item.timestamp).toLocaleTimeString()), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "メモ", value: item.memo, onChange: (e)=>handleMemoChange(item.id, e.target.value, 'absent'), className: "flex-grow border border-gray-300 p-2 rounded", __source: { fileName: "", lineNumber: 231, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRemove(item.id, 'absent'), className: "text-red-500", __source: { fileName: "", lineNumber: 238, columnNumber: 19 }, __self: this }, "削除")))))))); }