149 lines
4.3 KiB
JavaScript
149 lines
4.3 KiB
JavaScript
import subDays from 'date-fns/subDays';
|
|
import getTranslations from '../i18n/showHistoryPopup';
|
|
import showPopup from '../utils/showPopup';
|
|
import {
|
|
generatePaginationItems,
|
|
getContainerStyles,
|
|
} from '../utils/pagination';
|
|
import { formatDate } from '../utils/date';
|
|
import * as twutils from '../utils/tribalwars';
|
|
|
|
const PAGINATION_CONTAINER_ID = 'historyPagination';
|
|
const translations = getTranslations();
|
|
|
|
const addMathSymbol = v => {
|
|
return v > 0 ? '+' + v : v;
|
|
};
|
|
|
|
export default (
|
|
e,
|
|
history,
|
|
daily,
|
|
{ currentPage = 1, limit = 0, onPageChange = () => {}, tribe = false } = {}
|
|
) => {
|
|
const paginationItems = generatePaginationItems({
|
|
total: history.total,
|
|
limit,
|
|
currentPage,
|
|
});
|
|
const html = `
|
|
<div style="${getContainerStyles()}" id="${PAGINATION_CONTAINER_ID}">
|
|
${paginationItems.join('')}
|
|
</div>
|
|
<table class="vis" style="border-collapse: separate; border-spacing: 2px; width: 100%;">
|
|
<tbody>
|
|
<tr>
|
|
<th>
|
|
${translations.date}
|
|
</th>
|
|
${tribe ? '' : `<th>${translations.tribe}</th>`}
|
|
<th>
|
|
${translations.points}
|
|
</th>
|
|
<th>
|
|
${translations.villages}
|
|
</th>
|
|
${tribe ? `<th>${translations.members}</th>` : ''}
|
|
<th>
|
|
${translations.od}
|
|
</th>
|
|
<th>
|
|
${translations.oda}
|
|
</th>
|
|
<th>
|
|
${translations.odd}
|
|
</th>
|
|
${tribe ? '' : `<th>${translations.ods}</th>`}
|
|
</tr>
|
|
${history.items
|
|
.map(history => {
|
|
const subtracted =
|
|
subDays(new Date(history.createDate), 1)
|
|
.toISOString()
|
|
.split('.')[0] + 'Z';
|
|
const stats = daily.items.find(stats => {
|
|
return stats.createDate === subtracted;
|
|
});
|
|
|
|
let rowHTML =
|
|
'<tr>' +
|
|
`<td>${formatDate(history.createDate, {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
})}</td>`;
|
|
if (!tribe && history.tribe) {
|
|
rowHTML += `<td><a href="${twutils.buildTribeURL(
|
|
history.tribe.id
|
|
)}">${history.tribe.tag}</a></td>`;
|
|
} else if (!tribe) {
|
|
rowHTML += '<td>-</td>';
|
|
}
|
|
rowHTML +=
|
|
`
|
|
<td title="${stats ? addMathSymbol(stats.points) : ''}">
|
|
${history.points.toLocaleString()} (<strong>${
|
|
history.rank
|
|
}</strong>)
|
|
</td>
|
|
<td title="${stats ? addMathSymbol(stats.villages) : ''}">
|
|
${history.totalVillages.toLocaleString()}
|
|
</td>
|
|
${
|
|
!tribe
|
|
? ''
|
|
: `
|
|
<td title="${stats ? addMathSymbol(stats.members) : ''}">
|
|
${history.totalMembers}
|
|
</td>
|
|
`
|
|
}
|
|
<td title="${stats ? addMathSymbol(stats.scoreTotal) : ''}">
|
|
${history.scoreTotal.toLocaleString()} (<strong>${
|
|
history.rankTotal
|
|
}</strong>)
|
|
</td>
|
|
<td title="${stats ? addMathSymbol(stats.scoreAtt) : ''}">
|
|
${history.scoreAtt.toLocaleString()} (<strong>${
|
|
history.rankAtt
|
|
}</strong>)
|
|
</td>
|
|
<td title="${stats ? addMathSymbol(stats.scoreDef) : ''}">
|
|
${history.scoreDef.toLocaleString()} (<strong>${
|
|
history.rankDef
|
|
}</strong>)
|
|
</td>
|
|
${
|
|
tribe
|
|
? ''
|
|
: `
|
|
<td title="${stats ? addMathSymbol(stats.scoreSup) : ''}">
|
|
${history.scoreSup.toLocaleString()} (<strong>${
|
|
history.rankSup
|
|
}</strong>)
|
|
</td>
|
|
`
|
|
}
|
|
` + '</tr>';
|
|
|
|
return rowHTML;
|
|
})
|
|
.join('')}
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
|
|
showPopup({
|
|
e,
|
|
title: translations.title,
|
|
id: 'history',
|
|
html,
|
|
});
|
|
|
|
document
|
|
.querySelectorAll('#' + PAGINATION_CONTAINER_ID + ' a')
|
|
.forEach(el => {
|
|
el.addEventListener('click', onPageChange);
|
|
});
|
|
};
|