114 lines
3.0 KiB
TypeScript
114 lines
3.0 KiB
TypeScript
import { ListResult } from '../lib/client';
|
|
|
|
const translations: Record<string, Record<string, string>> = {
|
|
pl_PL: {
|
|
Loading: 'Wczytywanie',
|
|
'Previous page': 'Poprzednia strona',
|
|
'Next page': 'Następna strona',
|
|
},
|
|
};
|
|
|
|
const t = (s: string) => {
|
|
return translations[window.game_data.locale]?.[s] ?? s;
|
|
};
|
|
|
|
export type DialogTableColumn<T> = {
|
|
header: string;
|
|
accessor: (row: T) => string;
|
|
};
|
|
|
|
export class DialogTable<T> {
|
|
constructor(
|
|
private readonly id: string,
|
|
private readonly columns: DialogTableColumn<T>[],
|
|
private readonly limit: number,
|
|
private readonly loadData: (
|
|
page: number,
|
|
limit: number
|
|
) => Promise<ListResult<T>>
|
|
) {}
|
|
|
|
public async render() {
|
|
await this.renderPage(1);
|
|
}
|
|
|
|
private async renderPage(page: number) {
|
|
window.Dialog.show(`${this.id}_loading`, `<p>${t('Loading')}...</p>`);
|
|
|
|
const { data, total } = await this.loadData(page, this.limit);
|
|
|
|
const maxPage = Math.ceil(total / this.limit);
|
|
const pageOpts = [];
|
|
for (let i = 1; i <= (page > maxPage ? page : maxPage); i++) {
|
|
pageOpts.push(
|
|
`<option${
|
|
i === page ? ' disabled selected' : ''
|
|
} value="${i}">${i}</option>`
|
|
);
|
|
}
|
|
|
|
const prevPageId = `${this.id}_page_prev`;
|
|
const selectId = `${this.id}_page_select`;
|
|
const nextPageId = `${this.id}_page_next`;
|
|
|
|
window.Dialog.show(
|
|
this.id,
|
|
`
|
|
<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 10px">
|
|
<button title="${t(
|
|
'Previous page'
|
|
)}" style="margin-right: 5px" class="btn" id="${prevPageId}"${
|
|
page <= 1 ? ' disabled' : ''
|
|
}><</button>
|
|
<select style="margin-right: 5px" id="${selectId}">
|
|
${pageOpts.join('')}
|
|
</select>
|
|
<button title="${t('Next page')}" class="btn" id="${nextPageId}"${
|
|
page >= maxPage ? ' disabled' : ''
|
|
}>></button>
|
|
</div>
|
|
<table class="vis">
|
|
<tbody>
|
|
<tr>
|
|
${this.columns.map((col) => `<th>${col.header}</th>`).join('')}
|
|
</tr>
|
|
${data
|
|
.map(
|
|
(r) => `
|
|
<tr>
|
|
${this.columns
|
|
.map((col) => `<td>${col.accessor(r)}</td>`)
|
|
.join('')}
|
|
</tr>
|
|
`
|
|
)
|
|
.join('')}
|
|
</tbody>
|
|
</table>
|
|
`
|
|
);
|
|
|
|
document
|
|
.querySelector('#' + prevPageId)
|
|
?.addEventListener('click', (e: Event) => {
|
|
this.renderPage(page - 1);
|
|
});
|
|
|
|
document
|
|
.querySelector('#' + selectId)
|
|
?.addEventListener('change', (e: Event) => {
|
|
if (!(e.currentTarget instanceof HTMLSelectElement)) {
|
|
return;
|
|
}
|
|
|
|
this.renderPage(parseInt(e.currentTarget.value));
|
|
});
|
|
|
|
document
|
|
.querySelector('#' + nextPageId)
|
|
?.addEventListener('click', (e: Event) => {
|
|
this.renderPage(page + 1);
|
|
});
|
|
}
|
|
}
|