diff --git a/src/common/DialogTable.ts b/src/common/DialogTable.ts index 9d79527..acc069b 100644 --- a/src/common/DialogTable.ts +++ b/src/common/DialogTable.ts @@ -5,6 +5,8 @@ const translations: Record> = { Loading: 'Wczytywanie', 'Previous page': 'Poprzednia strona', 'Next page': 'Następna strona', + 'Something went wrong while loading the data': + 'Coś poszło nie tak podczas wczytywania danych', }, }; @@ -18,6 +20,9 @@ export type DialogTableColumn = { }; export class DialogTable { + prevPageId: string; + selectId: string; + nextPageId: string; constructor( private readonly id: string, private readonly columns: DialogTableColumn[], @@ -26,7 +31,11 @@ export class DialogTable { page: number, limit: number ) => Promise> - ) {} + ) { + this.prevPageId = `${this.id}_page_prev`; + this.selectId = `${this.id}_page_select`; + this.nextPageId = `${this.id}_page_next`; + } public async render() { await this.renderPage(1); @@ -35,9 +44,28 @@ export class DialogTable { private async renderPage(page: number) { window.Dialog.show(`${this.id}_loading`, `

${t('Loading')}...

`); - const { data, total } = await this.loadData(page, this.limit); + try { + const { data, total } = await this.loadData(page, this.limit); + window.Dialog.show( + this.id, + ` + ${this.buildPagination(page, total)} + ${this.buildTable(data)} + ` + ); + + this.addEventListeners(page); + } catch (err) { + console.error(err); + window.Dialog.close(); + window.UI.ErrorMessage(t('Something went wrong while loading the data')); + } + } + + private buildPagination(page: number, total: number): string { const maxPage = Math.ceil(total / this.limit); + const pageOpts = []; for (let i = 1; i <= (page > maxPage ? page : maxPage); i++) { pageOpts.push( @@ -47,26 +75,25 @@ export class DialogTable { ); } - const prevPageId = `${this.id}_page_prev`; - const selectId = `${this.id}_page_select`; - const nextPageId = `${this.id}_page_next`; - - window.Dialog.show( - this.id, - ` + return `
- ${pageOpts.join('')} - -
+ + + `; + } + + private buildTable(data: T[]) { + return ` @@ -84,18 +111,19 @@ export class DialogTable { ) .join('')} -
- ` - ); + + `; + } + private addEventListeners(page: number) { document - .querySelector('#' + prevPageId) - ?.addEventListener('click', (e: Event) => { + .querySelector('#' + this.prevPageId) + ?.addEventListener('click', () => { this.renderPage(page - 1); }); document - .querySelector('#' + selectId) + .querySelector('#' + this.selectId) ?.addEventListener('change', (e: Event) => { if (!(e.currentTarget instanceof HTMLSelectElement)) { return; @@ -105,8 +133,8 @@ export class DialogTable { }); document - .querySelector('#' + nextPageId) - ?.addEventListener('click', (e: Event) => { + .querySelector('#' + this.nextPageId) + ?.addEventListener('click', () => { this.renderPage(page + 1); }); } diff --git a/src/extendedPlayerProfile.ts b/src/extendedPlayerProfile.ts index 7b4f29a..31af4be 100644 --- a/src/extendedPlayerProfile.ts +++ b/src/extendedPlayerProfile.ts @@ -2,7 +2,6 @@ import { Player, TWHelpClient } from './lib/twhelp'; import { DialogTable } from './common/DialogTable'; -import { buildURL } from './lib/twstats'; const SCREEN = 'info_player'; const MODE = null; @@ -14,7 +13,6 @@ const translations: Record> = { 'Best rank': 'Najlepszy ranking', 'Most points': 'Najwięcej punktów', 'Most villages': 'Najwięcej wiosek', - 'Show other servers': 'Pokaż inne światy', 'Show tribe changes': 'Pokaż zmiany plemion', 'Show history': 'Pokaż historię', 'Show ennoblements': 'Pokaż przejęcia', @@ -83,7 +81,6 @@ class TWHelpConnector { } enum DialogId { - OTHER_SERVERS = 'kichiyaki_other_servers', TRIBE_CHANGES = 'kichiyaki_tribe_changes', ENNOBLEMENTS = 'kichiyaki_ennoblements', HISTORY = 'kichiyaki_history', @@ -148,10 +145,6 @@ class UI { } [ - { - name: t('Show other servers'), - handler: this.showOtherServers.bind(this), - }, { name: t('Show tribe changes'), handler: this.showTribeChanges.bind(this), @@ -176,39 +169,6 @@ class UI { }); } - private async showOtherServers(e: Event) { - e.preventDefault(); - - await new DialogTable( - DialogId.OTHER_SERVERS, - [ - { - header: t('Server'), - accessor: (s) => - `${s.key}`, - }, - { - header: t('Deleted'), - accessor: (s) => - s.deletedAt - ? `${t('Yes')} (${new Date(s.deletedAt).toLocaleString()})` - : t('No'), - }, - ], - this.player.otherServers.length, - () => { - return Promise.resolve({ - data: this.player.otherServers, - total: this.player.otherServers.length, - }); - } - ).render(); - } - private async showTribeChanges(e: Event) { e.preventDefault(); @@ -314,25 +274,29 @@ class UI { }, { header: t('Old owner'), - accessor: (e) => - e.oldOwner - ? `${e.oldOwner.name}${ - e.oldOwner.tribe - ? ` (${e.oldOwner.tribe.tag})` - : '' - }` - : t('Barbarian'), + accessor: ({ village: { player } }) => { + if (!player) { + return t('Barbarian'); + } + return `${player.name}${ + player.tribe + ? ` (${player.tribe.tag})` + : '' + }`; + }, }, { header: t('New owner'), - accessor: (e) => - e.newOwner - ? `${e.newOwner.name}${ - e.newOwner.tribe - ? ` (${e.newOwner.tribe.tag})` - : '' - }` - : t('Unknown'), + accessor: ({ newOwner }) => { + if (!newOwner) { + return t('Unknown'); + } + return `${newOwner.name}${ + newOwner.tribe + ? ` (${newOwner.tribe.tag})` + : '' + }`; + }, }, { header: t('Date/time'), @@ -379,5 +343,9 @@ class ExtendedPlayerProfile { await new ExtendedPlayerProfile( new TWHelpClient(process.env.TWHELP_API_BASE_URL ?? '') - ).render(); + ) + .render() + .catch((err) => { + console.log(err); + }); })(); diff --git a/src/global.d.ts b/src/global.d.ts index 071b6f0..bb37dbf 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -30,6 +30,7 @@ declare global { }; Dialog: { show: (id: string, html: string) => void; + close: () => void; }; } } diff --git a/src/lib/twhelp.ts b/src/lib/twhelp.ts index 3cad5b7..43fe05e 100644 --- a/src/lib/twhelp.ts +++ b/src/lib/twhelp.ts @@ -10,11 +10,6 @@ export type Version = { timezone: string; }; -export type PlayerServer = { - key: string; - deletedAt: string | null; -}; - export type Player = { id: number; bestRank: number; @@ -25,7 +20,6 @@ export type Player = { mostVillagesAt: string; lastActivityAt: string; createdAt: string; - otherServers: PlayerServer[]; }; export type TribeMeta = { @@ -49,6 +43,7 @@ export type VillageMeta = { x: number; y: number; continent: string; + player: PlayerMeta | null; }; export type TribeChange = { @@ -62,7 +57,6 @@ export type Ennoblement = { id: number; points: number; newOwner: PlayerMeta | null; - oldOwner: PlayerMeta | null; village: VillageMeta; createdAt: string; };