function MainComponent() { const [selectedDb, setSelectedDb] = React.useState(null); const [selectedTable, setSelectedTable] = React.useState(null); const [dbData, setDbData] = React.useState(null); const [dbTextData, setDbTextData] = React.useState(null); const [dbStructure, setDbStructure] = React.useState(null); const [status, setStatus] = React.useState(''); const [tables, setTables] = React.useState([]); const handleDbSelect = async (event)=>{ const dbName = event.target.value; setSelectedDb(dbName); setSelectedTable(null); setDbData(null); setDbTextData(null); setDbStructure(null); if (dbName) { try { const response = await fetch(`/api/db/${dbName}`, { method: 'POST', body: JSON.stringify({ query: 'SHOW TABLES' }) }); const data = await response.json(); const tableNames = data.map((row)=>Object.values(row)[0]); setTables(tableNames); setStatus(`${dbName}のテーブル一覧を取得しました`); } catch (error) { console.error('Error fetching table names:', error); setStatus(`${dbName}のテーブル一覧の取得に失敗しました`); } } else { setTables([]); } }; const handleTableSelect = (event)=>{ setSelectedTable(event.target.value); }; const fetchDbData = async ()=>{ if (selectedDb && selectedTable) { try { const response = await fetch(`/api/db/${selectedDb}`, { method: 'POST', body: JSON.stringify({ query: `SELECT * FROM \`${selectedTable}\`` }) }); const data = await response.json(); setDbData(data); setStatus(`${selectedTable}のデータを表示しました`); } catch (error) { console.error('Error fetching DB data:', error); setStatus(`${selectedTable}のデータの取得に失敗しました`); } } }; const fetchDbTextData = async ()=>{ if (selectedDb && selectedTable) { try { const response = await fetch(`/api/db/${selectedDb}`, { method: 'POST', body: JSON.stringify({ query: `SELECT * FROM \`${selectedTable}\`` }) }); const data = await response.json(); setDbTextData(JSON.stringify(data, null, 2)); setStatus(`${selectedTable}のテキストデータを表示しました`); } catch (error) { console.error('Error fetching DB text data:', error); setStatus(`${selectedTable}のテキストデータの取得に失敗しました`); } } }; const fetchDbStructure = async ()=>{ if (selectedDb && selectedTable) { try { const response = await fetch(`/api/db/${selectedDb}`, { method: 'POST', body: JSON.stringify({ query: `SHOW CREATE TABLE \`${selectedTable}\`` }) }); const data = await response.json(); const createTableStatement = data[0]['Create Table']; setDbStructure(createTableStatement); setStatus(`${selectedTable}のテーブル定義を表示しました`); } catch (error) { console.error('Error fetching DB structure:', error); setStatus(`${selectedTable}のテーブル定義の取得に失敗しました`); } } }; const copyDataToClipboard = ()=>{ if (dbData) { navigator.clipboard.writeText(JSON.stringify(dbData, null, 2)); setStatus('データをクリップボードにコピーしました'); } }; const copyTextToClipboard = ()=>{ if (dbTextData) { navigator.clipboard.writeText(dbTextData); setStatus('テキストをクリップボードにコピーしました'); } }; const copyStructureToClipboard = ()=>{ if (dbStructure) { navigator.clipboard.writeText(dbStructure); setStatus('テーブル定義をクリップボードにコピーしました'); } }; const clearData = ()=>{ setDbData(null); setStatus('データを消去しました'); }; const clearTextData = ()=>{ setDbTextData(null); setStatus('テキストデータを消去しました'); }; const clearStructure = ()=>{ setDbStructure(null); setStatus('テーブル定義を消去しました'); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-noto-sans p-1", __source: { fileName: "", lineNumber: 138, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-bold text-left", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, "DB Browser"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-right text-xs", __source: { fileName: "", lineNumber: 141, columnNumber: 9 }, __self: this }, status)), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex space-x-2", __source: { fileName: "", lineNumber: 144, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "dbList", value: selectedDb || '', onChange: handleDbSelect, className: "border p-1 rounded text-xs w-1/2", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }, "-- DB選択 --"), /*#__PURE__*/ React.createElement("option", { value: "incidents", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, "incidents"), /*#__PURE__*/ React.createElement("option", { value: "speech", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, "speech"), /*#__PURE__*/ React.createElement("option", { value: "websites", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, "websites"), /*#__PURE__*/ React.createElement("option", { value: "webpage", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, "webpage"), /*#__PURE__*/ React.createElement("option", { value: "websearchdb", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, "websearchdb")), selectedDb && /*#__PURE__*/ React.createElement("select", { name: "tableList", value: selectedTable || '', onChange: handleTableSelect, className: "border p-1 rounded text-xs w-1/2", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, "-- テーブル選択 --"), tables.map((table)=>/*#__PURE__*/ React.createElement("option", { key: table, value: table, __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }, table)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 border rounded p-2 bg-white", __source: { fileName: "", lineNumber: 175, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1 mb-1", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: fetchDbData, className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 rounded text-xs w-auto px-2", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, "DATA表示"), /*#__PURE__*/ React.createElement("button", { onClick: copyDataToClipboard, className: "bg-gray-200 text-gray-500 font-bold py-1 rounded text-xs w-auto px-2", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, "複写"), /*#__PURE__*/ React.createElement("button", { onClick: clearData, className: "bg-gray-200 text-gray-500 font-bold py-1 rounded text-xs w-auto px-2", __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, "消去")), dbData && /*#__PURE__*/ React.createElement("div", { className: "overflow-auto text-xs", __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "table-auto border-collapse border border-gray-400 w-full", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 200, columnNumber: 17 }, __self: this }, Object.keys(dbData[0]).map((key)=>/*#__PURE__*/ React.createElement("th", { key: key, className: "border border-gray-400 px-1 py-0.5 bg-gray-100 font-bold text-xs", __source: { fileName: "", lineNumber: 202, columnNumber: 21 }, __self: this }, key)))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 208, columnNumber: 15 }, __self: this }, dbData.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: index % 2 === 0 ? 'bg-gray-50' : '', __source: { fileName: "", lineNumber: 210, columnNumber: 19 }, __self: this }, Object.values(row).map((value, index)=>/*#__PURE__*/ React.createElement("td", { key: index, className: "border border-gray-400 px-1 py-0.5 text-xs", __source: { fileName: "", lineNumber: 212, columnNumber: 23 }, __self: this }, value)))))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 border rounded p-2 bg-white", __source: { fileName: "", lineNumber: 224, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1 mb-1", __source: { fileName: "", lineNumber: 225, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: fetchDbTextData, className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 rounded text-xs w-auto px-2", __source: { fileName: "", lineNumber: 226, columnNumber: 11 }, __self: this }, "TEXT表示"), /*#__PURE__*/ React.createElement("button", { onClick: copyTextToClipboard, className: "bg-gray-200 text-gray-500 font-bold py-1 rounded text-xs w-auto px-2", __source: { fileName: "", lineNumber: 232, columnNumber: 11 }, __self: this }, "複写"), /*#__PURE__*/ React.createElement("button", { onClick: clearTextData, className: "bg-gray-200 text-gray-500 font-bold py-1 rounded text-xs w-auto px-2", __source: { fileName: "", lineNumber: 238, columnNumber: 11 }, __self: this }, "消去")), dbTextData && /*#__PURE__*/ React.createElement("pre", { className: "bg-white p-1 overflow-auto rounded shadow text-xs", __source: { fileName: "", lineNumber: 246, columnNumber: 11 }, __self: this }, dbTextData)), /*#__PURE__*/ React.createElement("div", { className: "mb-4 border rounded p-2 bg-white", __source: { fileName: "", lineNumber: 250, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1 mb-1", __source: { fileName: "", lineNumber: 251, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: fetchDbStructure, className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 rounded text-xs w-auto px-2", __source: { fileName: "", lineNumber: 252, columnNumber: 11 }, __self: this }, "定義表示"), /*#__PURE__*/ React.createElement("button", { onClick: copyStructureToClipboard, className: "bg-gray-200 text-gray-500 font-bold py-1 rounded text-xs w-auto px-2", __source: { fileName: "", lineNumber: 258, columnNumber: 11 }, __self: this }, "複写"), /*#__PURE__*/ React.createElement("button", { onClick: clearStructure, className: "bg-gray-200 text-gray-500 font-bold py-1 rounded text-xs w-auto px-2", __source: { fileName: "", lineNumber: 264, columnNumber: 11 }, __self: this }, "消去")), dbStructure && /*#__PURE__*/ React.createElement("pre", { className: "bg-white p-1 overflow-auto rounded shadow text-xs", __source: { fileName: "", lineNumber: 272, columnNumber: 11 }, __self: this }, dbStructure))); }