refactor Rankings tables
This commit is contained in:
parent
f3677db4f9
commit
3afd3eeaae
|
@ -1,43 +0,0 @@
|
|||
/*
|
||||
* Rankings Tabs
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
const DailyRankings = () => {
|
||||
const totalDailyRanking = useSelector(
|
||||
(state) => state.ranks.totalDailyRanking,
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ overflowY: 'auto', display: 'inline-block' }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>user</th>
|
||||
<th>Pixels</th>
|
||||
<th># Total</th>
|
||||
<th>Total Pixels</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
totalDailyRanking.map((rank) => (
|
||||
<tr>
|
||||
<td>{rank.dailyRanking}</td>
|
||||
<td>{rank.name}</td>
|
||||
<td>{rank.dailyTotalPixels}</td>
|
||||
<td>{rank.ranking}</td>
|
||||
<td>{rank.totalPixels}</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(DailyRankings);
|
|
@ -36,10 +36,9 @@ function Modtools() {
|
|||
<span
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
className="modallink"
|
||||
style={(selectedPart === part) ? {
|
||||
fontWeight: 'bold',
|
||||
} : undefined}
|
||||
className={
|
||||
(selectedPart === part) ? 'modallink selected' : 'modallink'
|
||||
}
|
||||
onClick={() => selectPart(part)}
|
||||
>{part}</span>
|
||||
{(ind !== parts.length - 1)
|
||||
|
|
|
@ -5,14 +5,18 @@
|
|||
/* eslint-disable max-len */
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { t } from 'ttag';
|
||||
|
||||
import TotalRankings from './TotalRankings';
|
||||
import DailyRankings from './DailyRankings';
|
||||
|
||||
|
||||
const Rankings = () => {
|
||||
const [orderDaily, setOrderDaily] = useState(false);
|
||||
const totalRanking = useSelector(
|
||||
(state) => state.ranks.totalRanking,
|
||||
);
|
||||
const totalDailyRanking = useSelector(
|
||||
(state) => state.ranks.totalDailyRanking,
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
@ -21,20 +25,62 @@ const Rankings = () => {
|
|||
role="button"
|
||||
tabIndex={-1}
|
||||
className={
|
||||
(!orderDaily) ? 'modallinkselected' : 'modallink'
|
||||
(!orderDaily) ? 'modallink selected' : 'modallink'
|
||||
}
|
||||
onClick={() => setOrderDaily(false)}
|
||||
>{t`Total`}</span> |
|
||||
>{t`Total`}</span>
|
||||
<span className="hdivider" />
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
className={
|
||||
(orderDaily) ? 'modallinkselected' : 'modallink'
|
||||
(orderDaily) ? 'modallink selected' : 'modallink'
|
||||
}
|
||||
onClick={() => setOrderDaily(true)}
|
||||
>{t`Daily`}</span>
|
||||
</div>
|
||||
{(orderDaily) ? <DailyRankings /> : <TotalRankings />}
|
||||
<table style={{ display: 'inline' }}>
|
||||
<thead>
|
||||
{(orderDaily) ? (
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>user</th>
|
||||
<th>Pixels</th>
|
||||
<th># Total</th>
|
||||
<th>Total Pixels</th>
|
||||
</tr>
|
||||
) : (
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>user</th>
|
||||
<th>Pixels</th>
|
||||
<th># Today</th>
|
||||
<th>Pixels Today</th>
|
||||
</tr>
|
||||
)}
|
||||
</thead>
|
||||
<tbody>
|
||||
{(orderDaily)
|
||||
? totalDailyRanking.map((rank) => (
|
||||
<tr key={rank.name}>
|
||||
<td>{rank.dailyRanking}</td>
|
||||
<td>{rank.name}</td>
|
||||
<td>{rank.dailyTotalPixels}</td>
|
||||
<td>{rank.ranking}</td>
|
||||
<td>{rank.totalPixels}</td>
|
||||
</tr>
|
||||
))
|
||||
: totalRanking.map((rank) => (
|
||||
<tr key={rank.name}>
|
||||
<td>{rank.ranking}</td>
|
||||
<td>{rank.name}</td>
|
||||
<td>{rank.totalPixels}</td>
|
||||
<td>{rank.dailyRanking}</td>
|
||||
<td>{rank.dailyTotalPixels}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<p className="modaltext">
|
||||
{t`Ranking updates every 5 min. Daily rankings get reset at midnight UTC.`}
|
||||
</p>
|
||||
|
|
|
@ -1,41 +0,0 @@
|
|||
/*
|
||||
* Rankings Tabs
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
const TotalRankings = () => {
|
||||
const totalRanking = useSelector((state) => state.ranks.totalRanking);
|
||||
|
||||
return (
|
||||
<div style={{ overflowY: 'auto', display: 'inline-block' }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>user</th>
|
||||
<th>Pixels</th>
|
||||
<th># Today</th>
|
||||
<th>Pixels Today</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
totalRanking.map((rank) => (
|
||||
<tr>
|
||||
<td>{rank.ranking}</td>
|
||||
<td>{rank.name}</td>
|
||||
<td>{rank.totalPixels}</td>
|
||||
<td>{rank.dailyRanking}</td>
|
||||
<td>{rank.dailyTotalPixels}</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(TotalRankings);
|
|
@ -416,7 +416,7 @@ export class ChatProvider {
|
|||
}
|
||||
|
||||
const country = user.regUser.flag || 'xx';
|
||||
let displayCountry = countr;
|
||||
let displayCountry = country;
|
||||
if (name.endsWith('berg') || name.endsWith('stein')) {
|
||||
displayCountry = 'il';
|
||||
} else if (user.userlvl !== 0) {
|
||||
|
|
|
@ -117,6 +117,10 @@ a:hover {
|
|||
color: #226baa;
|
||||
}
|
||||
|
||||
.modallink.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.inarea {
|
||||
border-style: solid;
|
||||
border-color: #d5d5d5;
|
||||
|
|
Loading…
Reference in New Issue
Block a user