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
|
<span
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
className="modallink"
|
className={
|
||||||
style={(selectedPart === part) ? {
|
(selectedPart === part) ? 'modallink selected' : 'modallink'
|
||||||
fontWeight: 'bold',
|
}
|
||||||
} : undefined}
|
|
||||||
onClick={() => selectPart(part)}
|
onClick={() => selectPart(part)}
|
||||||
>{part}</span>
|
>{part}</span>
|
||||||
{(ind !== parts.length - 1)
|
{(ind !== parts.length - 1)
|
||||||
|
|
|
@ -5,14 +5,18 @@
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import { useSelector } from 'react-redux';
|
||||||
import { t } from 'ttag';
|
import { t } from 'ttag';
|
||||||
|
|
||||||
import TotalRankings from './TotalRankings';
|
|
||||||
import DailyRankings from './DailyRankings';
|
|
||||||
|
|
||||||
|
|
||||||
const Rankings = () => {
|
const Rankings = () => {
|
||||||
const [orderDaily, setOrderDaily] = useState(false);
|
const [orderDaily, setOrderDaily] = useState(false);
|
||||||
|
const totalRanking = useSelector(
|
||||||
|
(state) => state.ranks.totalRanking,
|
||||||
|
);
|
||||||
|
const totalDailyRanking = useSelector(
|
||||||
|
(state) => state.ranks.totalDailyRanking,
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -21,20 +25,62 @@ const Rankings = () => {
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
className={
|
className={
|
||||||
(!orderDaily) ? 'modallinkselected' : 'modallink'
|
(!orderDaily) ? 'modallink selected' : 'modallink'
|
||||||
}
|
}
|
||||||
onClick={() => setOrderDaily(false)}
|
onClick={() => setOrderDaily(false)}
|
||||||
>{t`Total`}</span> |
|
>{t`Total`}</span>
|
||||||
|
<span className="hdivider" />
|
||||||
<span
|
<span
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
className={
|
className={
|
||||||
(orderDaily) ? 'modallinkselected' : 'modallink'
|
(orderDaily) ? 'modallink selected' : 'modallink'
|
||||||
}
|
}
|
||||||
onClick={() => setOrderDaily(true)}
|
onClick={() => setOrderDaily(true)}
|
||||||
>{t`Daily`}</span>
|
>{t`Daily`}</span>
|
||||||
</div>
|
</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">
|
<p className="modaltext">
|
||||||
{t`Ranking updates every 5 min. Daily rankings get reset at midnight UTC.`}
|
{t`Ranking updates every 5 min. Daily rankings get reset at midnight UTC.`}
|
||||||
</p>
|
</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';
|
const country = user.regUser.flag || 'xx';
|
||||||
let displayCountry = countr;
|
let displayCountry = country;
|
||||||
if (name.endsWith('berg') || name.endsWith('stein')) {
|
if (name.endsWith('berg') || name.endsWith('stein')) {
|
||||||
displayCountry = 'il';
|
displayCountry = 'il';
|
||||||
} else if (user.userlvl !== 0) {
|
} else if (user.userlvl !== 0) {
|
||||||
|
|
|
@ -117,6 +117,10 @@ a:hover {
|
||||||
color: #226baa;
|
color: #226baa;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modallink.selected {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.inarea {
|
.inarea {
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: #d5d5d5;
|
border-color: #d5d5d5;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user