Upstream
/
Plan
mirror of https://github.com/plan-player-analytics/Plan.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added fadein animations to all existing views

This commit is contained in:
Aurora Lahtela 2022-08-19 19:03:02 +03:00
parent d0fd604e3a
commit f185870125
30 changed files with 372 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Plan/react/dashboard/src/components/accordion/SessionAccordion.js
View File

@ -88,6 +88,8 @@ const SessionAccordion = (
) => {
const {t} = useTranslation();
if (!sessions) return <></>
const firstColumn = isPlayer ? (<><Fa icon={faUser}/> {t('html.label.player')}</>)
: (<><Fa icon={faServer}/> {t('html.label.server')}</>)

74
Plan/react/dashboard/src/components/animation/LoadIn.js Normal file
View File

@ -0,0 +1,74 @@
import React, {useEffect, useState} from 'react';
import {Transition} from 'react-transition-group';
const reduceAnimations = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true;
const defaultDuration = 250;
const LoadIn = ({children, duration}) => {
if (!duration) duration = defaultDuration;
const defaultStyle = reduceAnimations ? {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0
} : {
transition: `opacity ${duration}ms ease-in-out, transform ${duration}ms ease-in-out`,
opacity: 0,
transform: "scale(0.99)"
}
const transitionStyles = reduceAnimations ? {
entering: {
opacity: 1,
},
entered: {
opacity: 1,
},
exited: {
opacity: 0,
},
exiting: {
opacity: 0,
}
} : {
entering: {
opacity: 1,
transform: "scale(1)"
},
entered: {
opacity: 1,
transform: "scale(1)"
},
exiting: {
opacity: 0,
transform: "scale(0.99)"
},
exited: {
opacity: 0,
transform: "scale(0.99)"
},
};
const [visible, setVisible] = useState(false);
useEffect(() => {
setTimeout(() => setVisible(true), 0);
return () => {
setVisible(false);
}
}, [setVisible])
return (
<Transition in={visible} timeout={duration}>
{state => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
{children}
</div>
)}
</Transition>
);
}
export default LoadIn

3
Plan/react/dashboard/src/components/cards/common/GeolocationsCard.js
View File

@ -5,6 +5,7 @@ import React from "react";
import {faExclamationTriangle, faGlobe} from "@fortawesome/free-solid-svg-icons";
import GeolocationBarGraph from "../../graphs/GeolocationBarGraph";
import GeolocationWorldMap from "../../graphs/GeolocationWorldMap";
import {CardLoader} from "../../navigation/Loader";
const GeolocationsCard = ({data}) => {
const {t} = useTranslation();
@ -18,6 +19,8 @@ const GeolocationsCard = ({data}) => {
)
}
if (!data) return <CardLoader/>
return (
<Card>
<Card.Header>

1
Plan/react/dashboard/src/components/cards/common/PlayerListCard.js
View File

@ -11,6 +11,7 @@ const PlayerListCard = ({data}) => {
const [options, setOptions] = useState(undefined);
useEffect(() => {
if (!data) return;
for (const row of data.data) {
row.name = row.name.replace('../player/', '../../player/');
}

3
Plan/react/dashboard/src/components/cards/common/WorldPieCard.js
View File

@ -7,6 +7,9 @@ import React from "react";
const WorldPieCard = ({worldSeries, gmSeries}) => {
const {t} = useTranslation();
if (!worldSeries || !gmSeries) return <></>
return (
<Card>
<Card.Header>

7
Plan/react/dashboard/src/components/cards/server/graphs/CurrentPlayerbaseCard.js
View File

@ -2,12 +2,13 @@ import React from "react";
import {useParams} from "react-router-dom";
import {useDataRequest} from "../../../../hooks/dataFetchHook";
import {fetchPlayerbaseDevelopmentGraph} from "../../../../service/serverService";
import {ErrorViewBody} from "../../../../views/ErrorView";
import {ErrorViewCard} from "../../../../views/ErrorView";
import {useTranslation} from "react-i18next";
import {Card} from "react-bootstrap-v5";
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
import {faUsers} from "@fortawesome/free-solid-svg-icons";
import PlayerbasePie from "../../../graphs/PlayerbasePie";
import {CardLoader} from "../../../navigation/Loader";
const CurrentPlayerbaseCard = () => {
const {t} = useTranslation();
@ -15,8 +16,8 @@ const CurrentPlayerbaseCard = () => {
const {data, loadingError} = useDataRequest(fetchPlayerbaseDevelopmentGraph, [identifier]);
if (loadingError) return <ErrorViewBody error={loadingError}/>
if (!data) return <></>;
if (loadingError) return <ErrorViewCard error={loadingError}/>
if (!data) return <CardLoader/>;
return (
<Card>

3
Plan/react/dashboard/src/components/cards/server/graphs/PlayerbaseDevelopmentCard.js
View File

@ -8,6 +8,7 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
import {faChartLine} from "@fortawesome/free-solid-svg-icons";
import React from "react";
import PlayerbaseGraph from "../../../graphs/PlayerbaseGraph";
import {CardLoader} from "../../../navigation/Loader";
const PlayerbaseDevelopmentCard = () => {
const {t} = useTranslation();
@ -17,8 +18,8 @@ const PlayerbaseDevelopmentCard = () => {
fetchPlayerbaseDevelopmentGraph,
[identifier])
if (!data) return <></>;
if (loadingError) return <ErrorViewCard error={loadingError}/>
if (!data) return <CardLoader/>;
return (
<Card>

10
Plan/react/dashboard/src/components/cards/server/graphs/ServerWorldPieCard.js
View File

@ -3,21 +3,19 @@ import WorldPieCard from "../../common/WorldPieCard";
import {useParams} from "react-router-dom";
import {useDataRequest} from "../../../../hooks/dataFetchHook";
import {fetchWorldPie} from "../../../../service/serverService";
import {ErrorViewBody} from "../../../../views/ErrorView";
import {CardLoader} from "../../../navigation/Loader";
import {ErrorViewCard} from "../../../../views/ErrorView";
const ServerWorldPieCard = () => {
const {identifier} = useParams();
const {data, loadingError} = useDataRequest(fetchWorldPie, [identifier]);
if (loadingError) return <ErrorViewBody error={loadingError}/>
if (!data) return <CardLoader/>;
if (loadingError) return <ErrorViewCard error={loadingError}/>
return (
<WorldPieCard
worldSeries={data.world_series}
gmSeries={data.gm_series}
worldSeries={data?.world_series}
gmSeries={data?.gm_series}
/>
)
}

3
Plan/react/dashboard/src/components/cards/server/insights/PlayerbaseInsightsCard.js
View File

@ -7,6 +7,7 @@ import {faLongArrowAltRight, faUser} from "@fortawesome/free-solid-svg-icons";
import SmallTrend from "../../../trend/SmallTrend";
import End from "../../../layout/End";
import ComparingLabel from "../../../trend/ComparingLabel";
import {CardLoader} from "../../../navigation/Loader";
const TwoPlayerChange = ({colorBefore, labelBefore, colorAfter, labelAfter}) => {
return (
@ -20,7 +21,7 @@ const TwoPlayerChange = ({colorBefore, labelBefore, colorAfter, labelAfter}) =>
const PlayerbaseInsightsCard = ({data}) => {
const {t} = useTranslation();
if (!data) return <></>;
if (!data) return <CardLoader/>;
return (
<InsightsFor30DaysCard>
<Datapoint name={<TwoPlayerChange colorBefore={'light-green'}

2
Plan/react/dashboard/src/components/cards/server/insights/PvpPveInsightsCard.js
View File

@ -7,6 +7,8 @@ import {faKhanda} from "@fortawesome/free-solid-svg-icons";
const PvpPveInsightsCard = ({data}) => {
const {t} = useTranslation();
if (!data) return <></>
return (
<InsightsFor30DaysCard>
<Datapoint name={t('html.label.deadliestWeapon')} icon={faKhanda} color="amber"

14
Plan/react/dashboard/src/components/cards/server/insights/SessionInsightsCard.js
View File

@ -3,7 +3,7 @@ import InsightsFor30DaysCard from "../../common/InsightsFor30DaysCard";
import {useParams} from "react-router-dom";
import {useDataRequest} from "../../../../hooks/dataFetchHook";
import {fetchSessionOverview} from "../../../../service/serverService";
import ErrorView from "../../../../views/ErrorView";
import {ErrorViewCard} from "../../../../views/ErrorView";
import Datapoint from "../../../Datapoint";
import {useTranslation} from "react-i18next";
import {faGamepad, faUsers} from "@fortawesome/free-solid-svg-icons";
@ -15,22 +15,22 @@ const SessionInsightsCard = () => {
const {data, loadingError} = useDataRequest(fetchSessionOverview, [identifier]);
if (!data) return <></>;
if (loadingError) return <ErrorView error={loadingError}/>
if (loadingError) return <ErrorViewCard error={loadingError}/>
return (
<InsightsFor30DaysCard>
<Datapoint name={t('html.label.mostActiveGamemode')} icon={faGamepad} color="teal" bold
value={data.insights.most_active_gamemode} valueLabel={data.insights.most_active_gamemode_perc}
value={data?.insights.most_active_gamemode}
valueLabel={data?.insights.most_active_gamemode_perc}
/>
<Datapoint name={t('html.label.serverOccupied')} icon={faUsers} color="teal"
value={'~' + data.insights.server_occupied} valueLabel={data.insights.server_occupied_perc}
value={'~' + data?.insights.server_occupied} valueLabel={data?.insights.server_occupied_perc}
/>
<Datapoint name={t('html.label.playtime')} icon={faClock} color="green"
value={data.insights.total_playtime}
value={data?.insights.total_playtime}
/>
<Datapoint name={t('html.label.afkTime')} icon={faClock} color="grey"
value={data.insights.afk_time} valueLabel={data.insights.afk_time_perc}
value={data?.insights.afk_time} valueLabel={data?.insights.afk_time_perc}
/>
</InsightsFor30DaysCard>
)

3
Plan/react/dashboard/src/components/cards/server/tables/PlayerbaseTrendsCard.js
View File

@ -7,10 +7,11 @@ import BigTrend from "../../../trend/BigTrend";
import React from "react";
import {faClock} from "@fortawesome/free-regular-svg-icons";
import {TableRow} from "../../../table/TableRow";
import {CardLoader} from "../../../navigation/Loader";
const PlayerbaseTrendsCard = ({data}) => {
const {t} = useTranslation();
if (!data) return <></>;
if (!data) return <CardLoader/>;
return (
<Card>
<Card.Header>

7
Plan/react/dashboard/src/components/cards/server/tables/ServerRecentSessionsCard.js
View File

@ -2,7 +2,7 @@ import React from "react";
import {useParams} from "react-router-dom";
import {useDataRequest} from "../../../../hooks/dataFetchHook";
import {fetchSessions} from "../../../../service/serverService";
import {ErrorViewBody} from "../../../../views/ErrorView";
import {ErrorViewCard} from "../../../../views/ErrorView";
import RecentSessionsCard from "../../common/RecentSessionsCard";
const ServerRecentSessionsCard = () => {
@ -11,11 +11,10 @@ const ServerRecentSessionsCard = () => {
const {data, loadingError} = useDataRequest(fetchSessions, [identifier])
if (loadingError) return <ErrorViewBody error={loadingError}/>
if (!data) return <></>;
if (loadingError) return <ErrorViewCard error={loadingError}/>
return (
<RecentSessionsCard sessions={data.sessions} isPlayer={true}/>
<RecentSessionsCard sessions={data?.sessions} isPlayer={true}/>
)
}

22
Plan/react/dashboard/src/components/navigation/Sidebar.js
View File

@ -222,17 +222,17 @@ const Sidebar = ({items, showBackButton}) => {
return (
<>
{sidebarExpanded &&
<ul className={"navbar-nav sidebar sidebar-dark accordion bg-" + color} id="accordionSidebar">
<Logo/>
<Divider/>
{showBackButton && <>
<Item active={false} href="/" icon={faArrowLeft} name={t('html.label.toMainPage')}/>
<Divider showMargin={!items[0].contents && items[0].href === undefined}/>
</>}
{items.map((item, i) => renderItem(item, i, openCollapse, toggleCollapse, t))}
<Divider/>
<FooterButtons/>
</ul>}
<ul className={"navbar-nav sidebar sidebar-dark accordion bg-" + color} id="accordionSidebar">
<Logo/>
<Divider/>
{showBackButton && <>
<Item active={false} href="/" icon={faArrowLeft} name={t('html.label.toMainPage')}/>
<Divider showMargin={!items[0].contents && items[0].href === undefined}/>
</>}
{items.map((item, i) => renderItem(item, i, openCollapse, toggleCollapse, t))}
<Divider/>
<FooterButtons/>
</ul>}
</>
)
}

3
Plan/react/dashboard/src/components/table/ServerPvpPveAsNumbersTable.js
View File

@ -6,6 +6,9 @@ import {TableRow} from "./TableRow";
const ServerPvpPveAsNumbersTable = ({killData}) => {
const {t} = useTranslation();
if (!killData) return <></>
return (
<AsNumbersTable
headers={[t('html.label.allTime'), t('html.label.last30days'), t('html.label.last7days')]}

35
Plan/react/dashboard/src/views/ErrorView.js
View File

@ -2,6 +2,7 @@ import {Card, Col, Row} from "react-bootstrap-v5";
import React from "react";
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
import {faBug} from "@fortawesome/free-solid-svg-icons";
import LoadIn from "../components/animation/LoadIn";
export const ErrorViewText = ({error}) => {
return (
@ -24,26 +25,30 @@ export const ErrorViewBody = ({error}) => {
export const ErrorViewCard = ({error}) => {
return (
<Card>
<Card.Header>
<h6 className="col-black">
<Fa icon={error.icon ? error.icon : faBug}/> Error information
</h6>
</Card.Header>
<ErrorViewBody error={error}/>
</Card>
<LoadIn>
<Card>
<Card.Header>
<h6 className="col-black">
<Fa icon={error.icon ? error.icon : faBug}/> Error information
</h6>
</Card.Header>
<ErrorViewBody error={error}/>
</Card>
</LoadIn>
)
}
const ErrorView = ({error}) => {
return (
<section className="error_view">
<Row>
<Col lg={12}>
<ErrorViewCard error={error}/>
</Col>
</Row>
</section>
<LoadIn>
<section className="error_view">
<Row>
<Col lg={12}>
<ErrorViewCard error={error}/>
</Col>
</Row>
</section>
</LoadIn>
)
}

10
Plan/react/dashboard/src/views/layout/ServerPage.js
View File

@ -12,8 +12,7 @@ import {
faInfoCircle,
faSearch,
faUserGroup,
faUsers,
faUsersViewfinder
faUsers
} from "@fortawesome/free-solid-svg-icons";
import {useAuth} from "../../hooks/authenticationHook";
import {NightModeCss} from "../../hooks/themeHook";
@ -23,6 +22,7 @@ import ColorSelectorModal from "../../components/modal/ColorSelectorModal";
import {useMetadata} from "../../hooks/metadataHook";
import {faCalendarCheck} from "@fortawesome/free-regular-svg-icons";
import ErrorPage from "./ErrorPage";
import {SwitchTransition} from "react-transition-group";
const ServerPage = () => {
const {t, i18n} = useTranslation();
@ -62,7 +62,7 @@ const ServerPage = () => {
icon: faChartLine,
href: "playerbase"
},
{name: 'html.label.playerRetention', icon: faUsersViewfinder, href: "retention"},
// {name: 'html.label.playerRetention', icon: faUsersViewfinder, href: "retention"},
{name: 'html.label.playerList', icon: faUserGroup, href: "players"},
{name: 'html.label.geolocations', icon: faGlobe, href: "geolocations"},
]
@ -96,7 +96,9 @@ const ServerPage = () => {
<Header page={displayedServerName} tab={currentTab}/>
<div id="content" style={{display: 'flex'}}>
<main className="container-fluid mt-4">
<Outlet context={{}}/>
<SwitchTransition>
<Outlet context={{}}/>
</SwitchTransition>
</main>
<aside>
<ColorSelectorModal/>

29
Plan/react/dashboard/src/views/player/PlayerOverview.js
View File

@ -28,6 +28,7 @@ import {useMetadata} from "../../hooks/metadataHook";
import {useTranslation} from "react-i18next";
import NicknamesCard from "../../components/cards/player/NicknamesCard";
import {TableRow} from "../../components/table/TableRow";
import LoadIn from "../../components/animation/LoadIn";
const PlayerOverviewCard = ({player}) => {
const {t} = useTranslation();
@ -220,19 +221,21 @@ const PlayerOverview = () => {
const {player} = usePlayer();
return (
<section className="player_overview">
<Row>
<Col lg={6}>
<PlayerOverviewCard player={player}/>
<NicknamesCard player={player}/>
<ConnectionsCard player={player}/>
</Col>
<Col lg={6}>
<PunchCardCard player={player}/>
<OnlineActivityCard player={player}/>
</Col>
</Row>
</section>
<LoadIn>
<section className="player_overview">
<Row>
<Col lg={6}>
<PlayerOverviewCard player={player}/>
<NicknamesCard player={player}/>
<ConnectionsCard player={player}/>
</Col>
<Col lg={6}>
<PunchCardCard player={player}/>
<OnlineActivityCard player={player}/>
</Col>
</Row>
</section>
</LoadIn>
)
}

47
Plan/react/dashboard/src/views/player/PlayerPluginData.js
View File

@ -4,6 +4,7 @@ import {Card, Row} from "react-bootstrap-v5";
import {useParams} from "react-router-dom";
import Masonry from "masonry-layout";
import {usePlayer} from "../layout/PlayerPage";
import LoadIn from "../../components/animation/LoadIn";
const PlayerPluginData = () => {
const {player} = usePlayer();
@ -23,29 +24,35 @@ const PlayerPluginData = () => {
}, [])
if (!extensions) {
return <section className="player_plugin_data">
<Row style={{overflowY: 'hidden'}}>
<Card>
<Card.Body>
<p>No Extension data for {serverName}</p>
</Card.Body>
</Card>
</Row>
</section>
return (
<LoadIn>
<section className="player_plugin_data">
<Row style={{overflowY: 'hidden'}}>
<Card>
<Card.Body>
<p>No Extension data for {serverName}</p>
</Card.Body>
</Card>
</Row>
</section>
</LoadIn>
)
}
return (
<section className="player_plugin_data">
<Row id="extension-masonry-row"
data-masonry='{"percentPosition": true, "itemSelector": ".extension-wrapper"}'
style={{overflowY: 'hidden'}}>
{extensions.extensionData.map((extension, i) =>
<ExtensionCardWrapper key={'ext-' + i} extension={extension}>
<ExtensionCard extension={extension}/>
</ExtensionCardWrapper>
)}
</Row>
</section>
<LoadIn>
<section className="player_plugin_data">
<Row id="extension-masonry-row"
data-masonry='{"percentPosition": true, "itemSelector": ".extension-wrapper"}'
style={{overflowY: 'hidden'}}>
{extensions.extensionData.map((extension, i) =>
<ExtensionCardWrapper key={'ext-' + i} extension={extension}>
<ExtensionCard extension={extension}/>
</ExtensionCardWrapper>
)}
</Row>
</section>
</LoadIn>
)
}

39
Plan/react/dashboard/src/views/player/PlayerPvpPve.js
View File

@ -9,6 +9,7 @@ import {usePlayer} from "../layout/PlayerPage";
import {useTranslation} from "react-i18next";
import PvpPveAsNumbersCard from "../../components/cards/player/PvpPveAsNumbersCard";
import PvpKillsTableCard from "../../components/cards/common/PvpKillsTableCard";
import LoadIn from "../../components/animation/LoadIn";
const InsightsCard = ({player}) => {
const {t} = useTranslation();
@ -48,24 +49,26 @@ const PvpDeathsTableCard = ({player}) => {
const PlayerPvpPve = () => {
const {player} = usePlayer();
return (
<section className="player_pvp_pve">
<Row>
<Col lg={8}>
<PvpPveAsNumbersCard player={player}/>
</Col>
<Col lg={4}>
<InsightsCard player={player}/>
</Col>
</Row>
<Row>
<Col lg={6}>
<PvpKillsTableCard player_kills={player.player_kills}/>
</Col>
<Col lg={6}>
<PvpDeathsTableCard player={player}/>
</Col>
</Row>
</section>
<LoadIn>
<section className="player_pvp_pve">
<Row>
<Col lg={8}>
<PvpPveAsNumbersCard player={player}/>
</Col>
<Col lg={4}>
<InsightsCard player={player}/>
</Col>
</Row>
<Row>
<Col lg={6}>
<PvpKillsTableCard player_kills={player.player_kills}/>
</Col>
<Col lg={6}>
<PvpDeathsTableCard player={player}/>
</Col>
</Row>
</section>
</LoadIn>
)
}

33
Plan/react/dashboard/src/views/player/PlayerServers.js
View File

@ -9,6 +9,7 @@ import ServerAccordion from "../../components/accordion/ServerAccordion";
import {usePlayer} from "../layout/PlayerPage";
import {useTranslation} from "react-i18next";
import PingGraph from "../../components/graphs/PingGraph";
import LoadIn from "../../components/animation/LoadIn";
const PingGraphCard = ({player}) => {
const {t} = useTranslation();
@ -68,21 +69,23 @@ const ServerPieCard = ({player}) => {
const PlayerServers = () => {
const {player} = usePlayer();
return (
<section className="player_sessions">
<Row>
<Col lg={12}>
<PingGraphCard player={player}/>
</Col>
</Row>
<Row>
<Col lg={8}>
<ServersCard player={player}/>
</Col>
<Col lg={4}>
<ServerPieCard player={player}/>
</Col>
</Row>
</section>
<LoadIn>
<section className="player_sessions">
<Row>
<Col lg={12}>
<PingGraphCard player={player}/>
</Col>
</Row>
<Row>
<Col lg={8}>
<ServersCard player={player}/>
</Col>
<Col lg={4}>
<ServerPieCard player={player}/>
</Col>
</Row>
</section>
</LoadIn>
)
}

25
Plan/react/dashboard/src/views/player/PlayerSessions.js
View File

@ -7,6 +7,7 @@ import {usePlayer} from "../layout/PlayerPage";
import {useTranslation} from "react-i18next";
import PlayerWorldPieCard from "../../components/cards/player/PlayerWorldPieCard";
import PlayerRecentSessionsCard from "../../components/cards/player/PlayerRecentSessionsCard";
import LoadIn from "../../components/animation/LoadIn";
const SessionCalendarCard = ({player}) => {
const {t} = useTranslation();
@ -25,17 +26,19 @@ const SessionCalendarCard = ({player}) => {
const PlayerSessions = () => {
const {player} = usePlayer();
return (
<section className="player_sessions">
<Row>
<Col lg={8}>
<SessionCalendarCard player={player}/>
<PlayerRecentSessionsCard player={player}/>
</Col>
<Col lg={4}>
<PlayerWorldPieCard player={player}/>
</Col>
</Row>
</section>
<LoadIn>
<section className="player_sessions">
<Row>
<Col lg={8}>
<SessionCalendarCard player={player}/>
<PlayerRecentSessionsCard player={player}/>
</Col>
<Col lg={4}>
<PlayerWorldPieCard player={player}/>
</Col>
</Row>
</section>
</LoadIn>
)
}

15
Plan/react/dashboard/src/views/players/AllPlayers.js
View File

@ -4,19 +4,22 @@ import {fetchPlayers} from "../../service/serverService";
import ErrorView from "../ErrorView";
import {Col, Row} from "react-bootstrap-v5";
import PlayerListCard from "../../components/cards/common/PlayerListCard";
import LoadIn from "../../components/animation/LoadIn";
import {CardLoader} from "../../components/navigation/Loader";
const AllPlayers = () => {
const {data, loadingError} = useDataRequest(fetchPlayers, [null]);
if (!data) return <></>;
if (loadingError) return <ErrorView error={loadingError}/>
return (
<Row>
<Col md={12}>
<PlayerListCard data={data}/>
</Col>
</Row>
<LoadIn>
<Row>
<Col md={12}>
{data ? <PlayerListCard data={data}/> : <CardLoader/>}
</Col>
</Row>
</LoadIn>
)
};

38
Plan/react/dashboard/src/views/server/OnlineActivity.js
View File

@ -5,33 +5,35 @@ import OnlineActivityAsNumbersCard from "../../components/cards/server/tables/On
import {useParams} from "react-router-dom";
import {useDataRequest} from "../../hooks/dataFetchHook";
import {fetchOnlineActivityOverview} from "../../service/serverService";
import {ErrorViewBody} from "../ErrorView";
import ErrorView from "../ErrorView";
import OnlineActivityInsightsCard from "../../components/cards/server/insights/OnlineActivityInsightsCard";
import LoadIn from "../../components/animation/LoadIn";
const OnlineActivity = () => {
const {identifier} = useParams();
const {data, loadingError} = useDataRequest(fetchOnlineActivityOverview, [identifier])
if (loadingError) return <ErrorViewBody error={loadingError}/>
if (!data) return <></>;
if (loadingError) return <ErrorView error={loadingError}/>
return (
<section className="server_online_activity_overview">
<Row>
<Col lg={12}>
<OnlineActivityGraphsCard/>
</Col>
</Row>
<Row>
<Col lg={8}>
<OnlineActivityAsNumbersCard data={data?.numbers}/>
</Col>
<Col lg={4}>
<OnlineActivityInsightsCard data={data?.insights}/>
</Col>
</Row>
</section>
<LoadIn>
<section className="server_online_activity_overview">
<Row>
<Col lg={12}>
<OnlineActivityGraphsCard/>
</Col>
</Row>
<Row>
<Col lg={8}>
<OnlineActivityAsNumbersCard data={data?.numbers}/>
</Col>
<Col lg={4}>
<OnlineActivityInsightsCard data={data?.insights}/>
</Col>
</Row>
</section>
</LoadIn>
)
}

48
Plan/react/dashboard/src/views/server/PlayerbaseOverview.js
View File

@ -5,38 +5,40 @@ import CurrentPlayerbaseCard from "../../components/cards/server/graphs/CurrentP
import {useParams} from "react-router-dom";
import {useDataRequest} from "../../hooks/dataFetchHook";
import {fetchPlayerbaseOverview} from "../../service/serverService";
import ErrorView from "../ErrorView";
import {ErrorViewCard} from "../ErrorView";
import PlayerbaseTrendsCard from "../../components/cards/server/tables/PlayerbaseTrendsCard";
import PlayerbaseInsightsCard from "../../components/cards/server/insights/PlayerbaseInsightsCard";
import LoadIn from "../../components/animation/LoadIn";
const PlayerbaseOverview = () => {
const {identifier} = useParams();
const {data, loadingError} = useDataRequest(fetchPlayerbaseOverview, [identifier]);
if (!data) return <></>;
if (loadingError) return <ErrorView error={loadingError}/>
return (
<section className="server_playerbase">
<Row>
<Col lg={8}>
<PlayerbaseDevelopmentCard/>
</Col>
<Col lg={4}>
<CurrentPlayerbaseCard/>
</Col>
</Row>
<Row>
<Col lg={8}>
<PlayerbaseTrendsCard data={data?.trends}/>
</Col>
<Col lg={4}>
<PlayerbaseInsightsCard data={data?.insights}/>
</Col>
</Row>
</section>
<LoadIn>
<section className="server_playerbase">
<Row>
<Col lg={8}>
<PlayerbaseDevelopmentCard/>
</Col>
<Col lg={4}>
<CurrentPlayerbaseCard/>
</Col>
</Row>
<Row>
{loadingError && <ErrorViewCard error={loadingError}/>}
{!loadingError && <>
<Col lg={8}>
<PlayerbaseTrendsCard data={data?.trends}/>
</Col>
<Col lg={4}>
<PlayerbaseInsightsCard data={data?.insights}/>
</Col>
</>}
</Row>
</section>
</LoadIn>
)
}

16
Plan/react/dashboard/src/views/server/ServerGeolocations.js
View File

@ -5,21 +5,25 @@ import {fetchGeolocations} from "../../service/serverService";
import {Col, Row} from "react-bootstrap-v5";
import ErrorView from "../ErrorView";
import GeolocationsCard from "../../components/cards/common/GeolocationsCard";
import LoadIn from "../../components/animation/LoadIn";
const ServerGeolocations = () => {
const {identifier} = useParams();
const {data, loadingError} = useDataRequest(fetchGeolocations, [identifier]);
if (!data) return <></>;
if (loadingError) return <ErrorView error={loadingError}/>
return (
<Row>
<Col md={12}>
<GeolocationsCard data={data}/>
</Col>
</Row>
<LoadIn>
<section className="server_geolocations">
<Row>
<Col md={12}>
<GeolocationsCard data={data}/>
</Col>
</Row>
</section>
</LoadIn>
)
};

39
Plan/react/dashboard/src/views/server/ServerOverview.js
View File

@ -11,6 +11,7 @@ import {useDataRequest} from "../../hooks/dataFetchHook";
import OnlineActivityCard from "../../components/cards/server/graphs/OnlineActivityCard";
import ServerAsNumbersCard from "../../components/cards/server/values/ServerAsNumbersCard";
import ServerWeekComparisonCard from "../../components/cards/server/tables/ServerWeekComparisonCard";
import LoadIn from "../../components/animation/LoadIn";
const Last7DaysCard = ({data}) => {
const {t} = useTranslation();
@ -65,24 +66,26 @@ const ServerOverview = () => {
}
return (
<section className="server_overview">
<Row>
<Col lg={9}>
<OnlineActivityCard/>
</Col>
<Col lg={3}>
<Last7DaysCard data={data?.last_7_days}/>
</Col>
</Row>
<Row>
<Col lg={4}>
<ServerAsNumbersCard data={data?.numbers}/>
</Col>
<Col lg={8}>
<ServerWeekComparisonCard data={data?.weeks}/>
</Col>
</Row>
</section>
<LoadIn>
<section className="server_overview">
<Row>
<Col lg={9}>
<OnlineActivityCard/>
</Col>
<Col lg={3}>
<Last7DaysCard data={data?.last_7_days}/>
</Col>
</Row>
<Row>
<Col lg={4}>
<ServerAsNumbersCard data={data?.numbers}/>
</Col>
<Col lg={8}>
<ServerWeekComparisonCard data={data?.weeks}/>
</Col>
</Row>
</section>
</LoadIn>
)
}

16
Plan/react/dashboard/src/views/server/ServerPlayers.js
View File

@ -5,21 +5,25 @@ import {fetchPlayers} from "../../service/serverService";
import ErrorView from "../ErrorView";
import {Col, Row} from "react-bootstrap-v5";
import PlayerListCard from "../../components/cards/common/PlayerListCard";
import LoadIn from "../../components/animation/LoadIn";
const ServerPlayers = () => {
const {identifier} = useParams();
const {data, loadingError} = useDataRequest(fetchPlayers, [identifier]);
if (!data) return <></>;
if (loadingError) return <ErrorView error={loadingError}/>
return (
<Row>
<Col md={12}>
<PlayerListCard data={data}/>
</Col>
</Row>
<LoadIn>
<section className="server_players">
<Row>
<Col md={12}>
<PlayerListCard data={data}/>
</Col>
</Row>
</section>
</LoadIn>
)
};

35
Plan/react/dashboard/src/views/server/ServerPvpPve.js
View File

@ -7,6 +7,7 @@ import {useParams} from "react-router-dom";
import {useDataRequest} from "../../hooks/dataFetchHook";
import {fetchKills, fetchPvpPve} from "../../service/serverService";
import ErrorView from "../ErrorView";
import LoadIn from "../../components/animation/LoadIn";
const ServerPvpPve = () => {
const {identifier} = useParams();
@ -14,27 +15,27 @@ const ServerPvpPve = () => {
const {data, loadingError} = useDataRequest(fetchPvpPve, [identifier]);
const {data: killsData, loadingError: killsLoadingError} = useDataRequest(fetchKills, [identifier]);
if (!data || !killsData) return <></>;
if (loadingError) return <ErrorView error={loadingError}/>
if (killsLoadingError) return <ErrorView error={killsLoadingError}/>
return (
<section className="server_pvp_pve">
<Row>
<Col lg={8}>
<PvpPveAsNumbersCard kill_data={data?.numbers}/>
</Col>
<Col lg={4}>
<PvpPveInsightsCard data={data?.insights}/>
</Col>
</Row>
<Row>
<Col lg={8}>
<PvpKillsTableCard player_kills={killsData?.player_kills}/>
</Col>
</Row>
</section>
<LoadIn show={data && killsData}>
<section className="server_pvp_pve">
<Row>
<Col lg={8}>
<PvpPveAsNumbersCard kill_data={data?.numbers}/>
</Col>
<Col lg={4}>
<PvpPveInsightsCard data={data?.insights}/>
</Col>
</Row>
<Row>
<Col lg={8}>
<PvpKillsTableCard player_kills={killsData?.player_kills}/>
</Col>
</Row>
</section>
</LoadIn>
)
}

25
Plan/react/dashboard/src/views/server/ServerSessions.js
View File

@ -3,20 +3,23 @@ import React from "react";
import ServerWorldPieCard from "../../components/cards/server/graphs/ServerWorldPieCard";
import ServerRecentSessionsCard from "../../components/cards/server/tables/ServerRecentSessionsCard";
import SessionInsightsCard from "../../components/cards/server/insights/SessionInsightsCard";
import LoadIn from "../../components/animation/LoadIn";
const ServerSessions = () => {
return (
<section className="server_sessions">
<Row>
<Col lg={8}>
<ServerRecentSessionsCard/>
</Col>
<Col lg={4}>
<ServerWorldPieCard/>
<SessionInsightsCard/>
</Col>
</Row>
</section>
<LoadIn>
<section className="server_sessions">
<Row>
<Col lg={8}>
<ServerRecentSessionsCard/>
</Col>
<Col lg={4}>
<ServerWorldPieCard/>
<SessionInsightsCard/>
</Col>
</Row>
</section>
</LoadIn>
)
}