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

Add missing loaders to the server page

This commit is contained in:
Aurora Lahtela 2022-09-03 19:39:39 +03:00
parent 38ee84af67
commit f3e4fa4e21
13 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,8 @@ import {CardLoader} from "../../navigation/Loader";
const GeolocationsCard = ({data}) => {
const {t} = useTranslation();
if (!data) return <CardLoader/>
if (!data?.geolocations_enabled) {
return (
<div className="alert alert-warning mb-0" id="geolocation-warning">
@ -19,8 +21,6 @@ const GeolocationsCard = ({data}) => {
)
}
if (!data) return <CardLoader/>
return (
<Card>
<Card.Header>

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

@ -4,11 +4,12 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
import {faCrosshairs} from "@fortawesome/free-solid-svg-icons";
import KillsTable from "../../table/KillsTable";
import React from "react";
import {CardLoader} from "../../navigation/Loader";
const PvpKillsTableCard = ({player_kills}) => {
const {t} = useTranslation();
if (!player_kills) return <></>;
if (!player_kills) return <CardLoader/>;
return (
<Card>

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

@ -4,11 +4,12 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
import {faClock} from "@fortawesome/free-regular-svg-icons";
import WorldPie from "../../graphs/WorldPie";
import React from "react";
import {CardLoader} from "../../navigation/Loader";
const WorldPieCard = ({worldSeries, gmSeries}) => {
const {t} = useTranslation();
if (!worldSeries || !gmSeries) return <></>
if (!worldSeries || !gmSeries) return <CardLoader/>;
return (
<Card>

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

@ -7,10 +7,11 @@ import SmallTrend from "../../../trend/SmallTrend";
import {faCalendar, faCalendarPlus} from "@fortawesome/free-regular-svg-icons";
import ComparingLabel from "../../../trend/ComparingLabel";
import End from "../../../layout/End";
import {CardLoader} from "../../../navigation/Loader";
const OnlineActivityInsightsCard = ({data}) => {
const {t} = useTranslation();
if (!data) return <></>
if (!data) return <CardLoader/>;
return (
<InsightsFor30DaysCard>

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

@ -3,10 +3,11 @@ import InsightsFor30DaysCard from "../../common/InsightsFor30DaysCard";
import {useTranslation} from "react-i18next";
import Datapoint from "../../../Datapoint";
import {faDragon, faMap, faTachometerAlt, faUsers} from "@fortawesome/free-solid-svg-icons";
import {CardLoader} from "../../../navigation/Loader";
const PerformanceInsightsCard = ({data}) => {
const {t} = useTranslation();
if (!data) return <></>
if (!data) return <CardLoader/>;
return (
<InsightsFor30DaysCard>

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

@ -3,11 +3,12 @@ import InsightsFor30DaysCard from "../../common/InsightsFor30DaysCard";
import Datapoint from "../../../Datapoint";
import {useTranslation} from "react-i18next";
import {faKhanda} from "@fortawesome/free-solid-svg-icons";
import {CardLoader} from "../../../navigation/Loader";
const PvpPveInsightsCard = ({data}) => {
const {t} = useTranslation();
if (!data) return <></>
if (!data) return <CardLoader/>;
return (
<InsightsFor30DaysCard>

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

@ -4,10 +4,11 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
import {faBookOpen} from "@fortawesome/free-solid-svg-icons";
import React from "react";
import OnlineActivityAsNumbersTable from "../../../table/OnlineActivityAsNumbersTable";
import {CardLoader} from "../../../navigation/Loader";
const OnlineActivityAsNumbersCard = ({data}) => {
const {t} = useTranslation();
if (!data) return <></>
if (!data) return <CardLoader/>;
return (
<Card>

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

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

3
Plan/react/dashboard/src/components/cards/server/values/ServerAsNumbersCard.js
View File

@ -13,11 +13,12 @@ import {
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 <></>;
if (!data) return <CardLoader/>;
return (
<Card>

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

@ -23,7 +23,7 @@ const Divider = ({showMargin}) => (
<hr className={"sidebar-divider" + (showMargin ? '' : " my-0")}/>
)
const InnerItem = ({href, icon, name, nameShort}) => {
const InnerItem = ({href, icon, name, nameShort, color}) => {
if (!href) {
return (<hr className={"nav-servers dropdown-divider mx-3 my-2"}/>)
}
@ -31,7 +31,8 @@ const InnerItem = ({href, icon, name, nameShort}) => {
if (href.startsWith('/')) {
return (
<a href={href} className="collapse-item nav-button">
<Fa icon={icon}/> <span>{nameShort ? nameShort : name}</span>
<Fa icon={icon} className={color ? "col-" + color : undefined}/>
<span>{nameShort ? nameShort : name}</span>
</a>
)
}
@ -39,11 +40,11 @@ const InnerItem = ({href, icon, name, nameShort}) => {
return <NavLink to={href} className={({isActive}) => {
return isActive ? "collapse-item nav-button active" : "collapse-item nav-button"
}}>
<Fa icon={icon}/> <span>{nameShort ? nameShort : name}</span>
<Fa icon={icon} className={color ? "col-" + color : undefined}/> <span>{nameShort ? nameShort : name}</span>
</NavLink>
}
const Item = ({href, icon, name, nameShort, inner}) => {
const Item = ({href, icon, name, nameShort, color, inner}) => {
const {setCurrentTab} = useNavigation();
const {pathname} = useLocation();
const {t} = useTranslation();
@ -53,14 +54,15 @@ const Item = ({href, icon, name, nameShort, inner}) => {
}, [pathname, href, setCurrentTab, name])
if (inner) {
return (<InnerItem href={href} icon={icon} name={t(name)} nameShort={t(nameShort)}/>)
return (<InnerItem href={href} icon={icon} name={t(name)} nameShort={t(nameShort)} color={color}/>)
}
if (href.startsWith('/')) {
return (
<li className={"nav-item nav-button"}>
<a href={baseAddress + href} className="nav-link">
<Fa icon={icon}/> <span>{t(nameShort ? nameShort : name)}</span>
<Fa icon={icon} className={color ? "col-" + color : undefined}/>
<span>{t(nameShort ? nameShort : name)}</span>
</a>
</li>
)
@ -71,7 +73,7 @@ const Item = ({href, icon, name, nameShort, inner}) => {
<NavLink to={href} className={({isActive}) => {
return isActive ? "nav-link active" : "nav-link"
}}>
<Fa icon={icon}/> <span>{t(name)}</span>
<Fa icon={icon} className={color ? "col-" + color : undefined}/> <span>{t(name)}</span>
</NavLink>
</li>
);
@ -155,7 +157,8 @@ const SidebarCollapse = ({item, open, setOpen}) => {
aria-expanded={open}
data-bs-toggle="collapse"
>
<Fa icon={item.icon}/> <span>{t(item.name)}</span>
<Fa icon={item.icon} className={item?.color ? "col-" + item?.color : undefined}/>
<span>{t(item.name)}</span>
</button>
<Collapse in={open}>
<div id={item.name + "-collapse"}>
@ -168,6 +171,7 @@ const SidebarCollapse = ({item, open, setOpen}) => {
icon={content.icon}
name={content.name}
nameShort={content.nameShort}
color={content.color}
/>)}
</div>
</div>
@ -190,6 +194,7 @@ const renderItem = (item, i, openCollapse, setOpenCollapse, t) => {
href={item.href}
icon={item.icon}
name={item.name}
color={item.color}
nameShort={item.nameShort}
/>
}

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

@ -6,10 +6,11 @@ import ComparisonTable from "./ComparisonTable";
import SmallTrend from "../trend/SmallTrend";
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
import {faCalendarCheck, faClock, faEye} from "@fortawesome/free-regular-svg-icons";
import {CardLoader} from "../navigation/Loader";
const OnlineActivityAsNumbersTable = ({data}) => {
const {t} = useTranslation();
if (!data) return <></>;
if (!data) return <CardLoader/>;
return (
<ComparisonTable

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

@ -14,10 +14,11 @@ import {TableRow} from "./TableRow";
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
import {faEye} from "@fortawesome/free-regular-svg-icons";
import AsNumbersTable from "./AsNumbersTable";
import {CardLoader} from "../navigation/Loader";
const PerformanceAsNumbersTable = ({data}) => {
const {t} = useTranslation();
if (!data) return <></>;
if (!data) return <CardLoader/>;
return (
<AsNumbersTable

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

@ -12,11 +12,12 @@ import OnlineActivityCard from "../../components/cards/server/graphs/OnlineActiv
import ServerAsNumbersCard from "../../components/cards/server/values/ServerAsNumbersCard";
import ServerWeekComparisonCard from "../../components/cards/server/tables/ServerWeekComparisonCard";
import LoadIn from "../../components/animation/LoadIn";
import {CardLoader} from "../../components/navigation/Loader";
const Last7DaysCard = ({data}) => {
const {t} = useTranslation();
if (!data) return <></>;
if (!data) return <CardLoader/>;
return (
<Card>