55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
/* Copyright (C) 2024 Manuel Bustillo*/
|
|
|
|
'use client'
|
|
|
|
import React, { useState } from "react"
|
|
import { TableArrangement } from '@/app/lib/definitions';
|
|
import { classNames } from "../components/button";
|
|
import TableOfContents from "../components/table-of-contents";
|
|
|
|
export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
|
|
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
|
|
|
|
function loadArrangements() {
|
|
fetch("/api/tables_arrangements")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setArrangements(data.map((record: any) => {
|
|
return ({
|
|
id: record.id,
|
|
name: record.name,
|
|
discomfort: record.discomfort
|
|
});
|
|
}));
|
|
}, (error) => {
|
|
return [];
|
|
});
|
|
}
|
|
|
|
function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
|
|
onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
|
|
}
|
|
|
|
arrangements.length === 0 && loadArrangements();
|
|
|
|
return(
|
|
<TableOfContents
|
|
headers={['Name', 'Discomfort', 'Actions']}
|
|
caption='Simulations'
|
|
elements={arrangements}
|
|
rowRender={(arrangement) => (
|
|
<tr key={arrangement.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
|
|
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
|
{arrangement.name}
|
|
</th>
|
|
<td className="px-6 py-4">
|
|
{arrangement.discomfort}
|
|
</td>
|
|
<td>
|
|
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
/>
|
|
);
|
|
} |