118 lines
4.5 KiB
JavaScript
118 lines
4.5 KiB
JavaScript
import React from "react";
|
|
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
|
import {faCrosshairs, faServer, faSignal, faSkull, faUser} from "@fortawesome/free-solid-svg-icons";
|
|
import {faCalendarPlus, faClock, faMap} from "@fortawesome/free-regular-svg-icons";
|
|
import Datapoint from "../Datapoint";
|
|
import {Col, Row} from "react-bootstrap";
|
|
import WorldPie from "../graphs/WorldPie";
|
|
import KillsTable from "../table/KillsTable";
|
|
import Accordion from "./Accordion";
|
|
import {useTranslation} from "react-i18next";
|
|
import {baseAddress} from "../../service/backendConfiguration";
|
|
import {ChartLoader} from "../navigation/Loader";
|
|
|
|
const SessionHeader = ({session}) => {
|
|
return (
|
|
<>
|
|
<td>{session.name}{session.first_session ?
|
|
<Fa icon={faCalendarPlus} title="Registered (First session)"/> : ''}</td>
|
|
<td>{session.start}</td>
|
|
<td>{session.length}</td>
|
|
<td>{session.network_server ? session.network_server : session.most_used_world}</td>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const SessionBody = ({i, session}) => {
|
|
const {t} = useTranslation();
|
|
return (
|
|
<Row>
|
|
<Col lg={6}>
|
|
<Datapoint
|
|
icon={faClock} color={"teal"}
|
|
name={t('html.label.sessionEnded')} value={session.end} bold
|
|
/>
|
|
<Datapoint
|
|
icon={faClock} color={"teal"}
|
|
name={t('html.label.length')} value={session.length} bold
|
|
/>
|
|
<Datapoint
|
|
icon={faClock} color={"grey"}
|
|
name={t('html.label.afkTime')} value={session.afk_time} bold
|
|
/>
|
|
<Datapoint
|
|
icon={faServer} color={"green"}
|
|
name={t('html.label.server')} value={session.server_name} bold
|
|
/>
|
|
{session.avg_ping ? <Datapoint
|
|
icon={faSignal} color={"amber"}
|
|
name={t('html.label.averagePing')} value={session.avg_ping} bold
|
|
/> : ''}
|
|
<br/>
|
|
<Datapoint
|
|
icon={faCrosshairs} color="red"
|
|
name={t('html.label.playerKills')} value={session.player_kills.length} bold
|
|
/>
|
|
<Datapoint
|
|
icon={faCrosshairs} color="green"
|
|
name={t('html.label.mobKills')} value={session.mob_kills} bold
|
|
/>
|
|
<Datapoint
|
|
icon={faSkull} color="black"
|
|
name={t('html.label.deaths')} value={session.deaths} bold
|
|
/>
|
|
<hr/>
|
|
<KillsTable kills={session.player_kills}/>
|
|
</Col>
|
|
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-6">
|
|
<WorldPie id={"worldpie_" + i}
|
|
worldSeries={session.world_series}
|
|
gmSeries={session.gm_series}/>
|
|
<a href={`${baseAddress}/player/${session.player_uuid}`}
|
|
className="float-end btn bg-blue">
|
|
<Fa icon={faUser}/> {t('html.label.playerPage')}
|
|
</a>
|
|
{session.network_server ? <a href={`${baseAddress}/server/${session.server_uuid}`}
|
|
className="float-end btn bg-light-green me-2">
|
|
<Fa icon={faServer}/> {t('html.label.serverPage')}
|
|
</a> : ''}
|
|
</div>
|
|
</Row>
|
|
)
|
|
}
|
|
|
|
const SessionAccordion = (
|
|
{
|
|
sessions,
|
|
isPlayer,
|
|
isNetwork
|
|
}
|
|
) => {
|
|
const {t} = useTranslation();
|
|
|
|
if (!sessions) return <ChartLoader/>
|
|
|
|
const firstColumn = isPlayer ? (<><Fa icon={faUser}/> {t('html.label.player')}</>)
|
|
: (<><Fa icon={faServer}/> {t('html.label.server')}</>)
|
|
|
|
return (
|
|
<Accordion headers={[
|
|
firstColumn,
|
|
<><Fa icon={faClock}/> {t('html.label.sessionStart')}</>,
|
|
<><Fa icon={faClock}/> {t('html.label.length')}</>,
|
|
<>
|
|
{!isNetwork && <><Fa icon={faMap}/> {t('html.label.mostPlayedWorld')}</>}
|
|
{isNetwork && <><Fa icon={faServer}/> {t('html.label.server')}</>}
|
|
</>
|
|
]} slices={sessions.map(session => {
|
|
return {
|
|
body: <SessionBody session={session}/>,
|
|
header: <SessionHeader session={session}/>,
|
|
color: 'teal',
|
|
outline: !session.start.includes("Online")
|
|
}
|
|
})}/>
|
|
)
|
|
}
|
|
|
|
export default SessionAccordion |