79 lines
3.6 KiB
JavaScript
79 lines
3.6 KiB
JavaScript
import {useTranslation} from "react-i18next";
|
|
import {Card} from "react-bootstrap";
|
|
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
|
import {
|
|
faBookOpen,
|
|
faChartLine,
|
|
faCrosshairs,
|
|
faPowerOff,
|
|
faSkull,
|
|
faUser,
|
|
faUsers
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import Datapoint from "../../../Datapoint";
|
|
import {faCalendarCheck, faClock} from "@fortawesome/free-regular-svg-icons";
|
|
import React from "react";
|
|
import {CardLoader} from "../../../navigation/Loader";
|
|
|
|
const ServerAsNumbersCard = ({data}) => {
|
|
const {t} = useTranslation();
|
|
|
|
if (!data) return <CardLoader/>;
|
|
|
|
return (
|
|
<Card>
|
|
<Card.Header>
|
|
<h6 className="col-black">
|
|
<Fa icon={faBookOpen}/> {data.player_kills ? t('html.label.serverAsNumberse') : t('html.label.networkAsNumbers')}
|
|
</h6>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<Datapoint name={t('html.label.currentUptime')}
|
|
color={'light-green'} icon={faPowerOff}
|
|
value={data.current_uptime}/>
|
|
<hr/>
|
|
<Datapoint name={t('html.label.totalPlayers')}
|
|
color={'black'} icon={faUsers}
|
|
value={data.total_players} bold/>
|
|
<Datapoint name={t('html.label.regularPlayers')}
|
|
color={'lime'} icon={faUsers}
|
|
value={data.regular_players} bold/>
|
|
<Datapoint name={t('html.label.playersOnline')}
|
|
color={'blue'} icon={faUser}
|
|
value={data.online_players} bold/>
|
|
<hr/>
|
|
<Datapoint name={t('html.label.lastPeak') + ' (' + data.last_peak_date + ')'}
|
|
color={'blue'} icon={faChartLine}
|
|
value={data.last_peak_players} valueLabel={t('html.unit.players')} bold/>
|
|
<Datapoint name={t('html.label.bestPeak') + ' (' + data.best_peak_date + ')'}
|
|
color={'light-green'} icon={faChartLine}
|
|
value={data.best_peak_players} valueLabel={t('html.unit.players')} bold/>
|
|
<hr/>
|
|
<Datapoint name={t('html.label.totalPlaytime')}
|
|
color={'green'} icon={faClock}
|
|
value={data.playtime}/>
|
|
<Datapoint name={t('html.label.averagePlaytime') + ' ' + t('html.label.perPlayer')}
|
|
color={'green'} icon={faClock}
|
|
value={data.player_playtime}/>
|
|
<Datapoint name={t('html.label.averageSessionLength')}
|
|
color={'teal'} icon={faClock}
|
|
value={data.session_length_avg}/>
|
|
<Datapoint name={t('html.label.sessions')}
|
|
color={'teal'} icon={faCalendarCheck}
|
|
value={data.sessions} bold/>
|
|
{data.player_kills && <hr/>}
|
|
<Datapoint name={t('html.label.playerKills')}
|
|
color={'red'} icon={faCrosshairs}
|
|
value={data.player_kills} bold/>
|
|
<Datapoint name={t('html.label.mobKills')}
|
|
color={'green'} icon={faCrosshairs}
|
|
value={data.mob_kills} bold/>
|
|
<Datapoint name={t('html.label.deaths')}
|
|
color={'black'} icon={faSkull}
|
|
value={data.deaths} bold/>
|
|
</Card.Body>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default ServerAsNumbersCard; |