simrail/simrail.pro
3
1
Fork 2
Code Issues 3 Pull Requests Actions Packages Projects Releases 33 Wiki Activity

Merge pull request 'feat(): Add veritication mark' (#50) from v3 into preview

Browse Source 
Reviewed-on: simrail/simrail.alekswilc.dev#50
Reviewed-by: Aleksander Wilczyński <aleks@alekswilc.dev>
This commit is contained in:
Aleksander Wilczyński 2024-11-09 19:58:36 +01:00
commit 20c29173f5
Signed by: gitea
GPG Key ID: CECFC30736A3D1C8
45 changed files with 1258 additions and 1072 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/backend/src/http/routes/log.ts
View File

@ -4,6 +4,7 @@ import { MBlacklist } from "../../mongo/blacklist.js";
import { ErrorResponseBuilder, SuccessResponseBuilder } from "../responseBuilder.js"; import { ErrorResponseBuilder, SuccessResponseBuilder } from "../responseBuilder.js";
import { removeProperties } from "../../util/functions.js"; import { removeProperties } from "../../util/functions.js";
import { ILog, MLog } from "../../mongo/logs.js"; import { ILog, MLog } from "../../mongo/logs.js";
import { MProfile } from "../../mongo/profile.js";
export class LogRoute export class LogRoute
@ -24,6 +25,7 @@ export class LogRoute
} }
const log = await MLog.findOne({ id }) || await MTrainLog.findOne({ id }); const log = await MLog.findOne({ id }) || await MTrainLog.findOne({ id });
if (!log) if (!log)
{ {
res.status(404).json(new ErrorResponseBuilder() res.status(404).json(new ErrorResponseBuilder()
@ -31,8 +33,13 @@ export class LogRoute
.setData("Invalid Id parameter").toJSON()); .setData("Invalid Id parameter").toJSON());
return; return;
} }
const profile = await MProfile.findOne({ steam: log.userSteamId });
res.status(200).json(new SuccessResponseBuilder().setCode(200).setData(removeProperties<Omit<(ILog | ITrainLog), "_id" | "__v">>(log.toJSON(), [ "_id", "__v" ])));
res.status(200).json(new SuccessResponseBuilder().setCode(200).setData({
verified: profile?.verified,
...removeProperties<Omit<(ILog | ITrainLog), "_id" | "__v">>(log.toJSON(), [ "_id", "__v" ])
}));
}); });
return app; return app;

15
packages/backend/src/http/routes/profile.ts
View File

@ -4,6 +4,7 @@ import { MProfile } from "../../mongo/profile.js";
import { MBlacklist } from "../../mongo/blacklist.js"; import { MBlacklist } from "../../mongo/blacklist.js";
import { SteamUtil } from "../../util/SteamUtil.js"; import { SteamUtil } from "../../util/SteamUtil.js";
import { ErrorResponseBuilder, SuccessResponseBuilder } from "../responseBuilder.js"; import { ErrorResponseBuilder, SuccessResponseBuilder } from "../responseBuilder.js";
import { removeProperties } from "../../util/functions.js";
export class ProfilesRoute export class ProfilesRoute
{ {
@ -11,7 +12,6 @@ export class ProfilesRoute
{ {
const app = Router(); const app = Router();
app.get("/:id", async (req, res) => app.get("/:id", async (req, res) =>
{ {
if (!req.params.id) if (!req.params.id)
@ -19,13 +19,15 @@ export class ProfilesRoute
res.redirect("/"); res.redirect("/");
return; return;
} }
const player = await MProfile.findOne({ steam: req.params.id }); const player = await MProfile.findOne({ steam: req.params.id });
if (!player) if (!player)
{ {
res.status(404).json(new ErrorResponseBuilder() res.status(404).json(new ErrorResponseBuilder()
.setCode(404).setData("Profile not found! (propably private)")); .setCode(404).setData("Profile not found! (probably private)"));
return; return;
} }
const blacklist = await MBlacklist.findOne({ steam: req.params.id! }); const blacklist = await MBlacklist.findOne({ steam: req.params.id! });
if (blacklist && blacklist.status) if (blacklist && blacklist.status)
{ {
@ -33,23 +35,18 @@ export class ProfilesRoute
.setCode(403).setData("Profile blacklisted!")); .setCode(403).setData("Profile blacklisted!"));
return; return;
} }
const steam = await SteamUtil.getPlayer(player?.steam!); const steam = await SteamUtil.getPlayer(player?.steam!);
const steamStats = await SteamUtil.getPlayerStats(player?.steam!); const steamStats = await SteamUtil.getPlayerStats(player?.steam!);
res.json( res.json(
new SuccessResponseBuilder() new SuccessResponseBuilder()
.setCode(200) .setCode(200)
.setData({ .setData({
player, steam, steamStats, player: removeProperties(player, ['_id', '__v']), steam, steamStats,
}) })
.toJSON(), .toJSON(),
); );
res.render("profiles/index.ejs", {
player, steam, steamStats: steamStats,
msToTime,
});
}); });
return app; return app;

12
packages/backend/src/http/routes/stations.ts
View File

@ -8,6 +8,7 @@ import { SteamUtil } from "../../util/SteamUtil.js";
import { GitUtil } from "../../util/git.js"; import { GitUtil } from "../../util/git.js";
import { removeProperties } from "../../util/functions.js"; import { removeProperties } from "../../util/functions.js";
import { SuccessResponseBuilder } from "../responseBuilder.js"; import { SuccessResponseBuilder } from "../responseBuilder.js";
import { MProfile } from "../../mongo/profile.js";
const generateSearch = (regex: RegExp) => [ const generateSearch = (regex: RegExp) => [
{ {
@ -36,7 +37,7 @@ export class StationsRoute
app.get("/", async (req, res) => app.get("/", async (req, res) =>
{ {
const s = req.query.q?.toString().split(",").map(x => new RegExp(x, "i")); const s = req.query.q?.toString().split(",").map(x => new RegExp(x, "i"));
const profiles = await MProfile.find({ verified: true });
const filter: PipelineStage[] = []; const filter: PipelineStage[] = [];
@ -48,13 +49,20 @@ export class StationsRoute
}, },
}); });
const records = await MLog.aggregate(filter) const records = await MLog.aggregate(filter)
.sort({ leftDate: -1 }) .sort({ leftDate: -1 })
.limit(30); .limit(30);
res.json( res.json(
new SuccessResponseBuilder<{ records: Omit<ILog, "_id" | "__v">[] }>() new SuccessResponseBuilder<{ records: Omit<ILog, "_id" | "__v">[] }>()
.setCode(200) .setCode(200)
.setData({ records: records.map(x => removeProperties<Omit<ILog, "_id" | "__v">>(x, [ "_id", "__v" ])) }) .setData({ records: records.map(x => {
return {
...removeProperties<Omit<ILog, "_id" | "__v">>(x, [ "_id", "__v" ]),
verified: profiles.find(xx => xx.steam === x.userSteamId)
}
}) })
.toJSON(), .toJSON(),
); );
}); });

12
packages/backend/src/http/routes/trains.ts
View File

@ -8,6 +8,7 @@ import { SteamUtil } from "../../util/SteamUtil.js";
import { GitUtil } from "../../util/git.js"; import { GitUtil } from "../../util/git.js";
import { SuccessResponseBuilder } from "../responseBuilder.js"; import { SuccessResponseBuilder } from "../responseBuilder.js";
import { removeProperties } from "../../util/functions.js"; import { removeProperties } from "../../util/functions.js";
import { MProfile } from "../../mongo/profile.js";
const generateSearch = (regex: RegExp) => [ const generateSearch = (regex: RegExp) => [
{ {
@ -33,6 +34,7 @@ export class TrainsRoute
app.get("/", async (req, res) => app.get("/", async (req, res) =>
{ {
const s = req.query.q?.toString().split(",").map(x => new RegExp(x, "i")); const s = req.query.q?.toString().split(",").map(x => new RegExp(x, "i"));
const profiles = await MProfile.find({ verified: true });
const filter: PipelineStage[] = []; const filter: PipelineStage[] = [];
@ -53,7 +55,15 @@ export class TrainsRoute
res.json( res.json(
new SuccessResponseBuilder<{ records: Omit<ITrainLog, "_id" | "__v">[] }>() new SuccessResponseBuilder<{ records: Omit<ITrainLog, "_id" | "__v">[] }>()
.setCode(200) .setCode(200)
.setData({ records: records.map(x => removeProperties<Omit<ITrainLog, "_id" | "__v">>(x, [ "_id", "__v" ])) }) .setData({
records: records.map(x =>
{
return {
...removeProperties<Omit<ITrainLog, "_id" | "__v">>(x, [ "_id", "__v" ]),
verified: profiles.find(xx => xx.steam === x.userSteamId)
};
}),
})
.toJSON(), .toJSON(),
); );
}); });

6
packages/backend/src/mongo/profile.ts
View File

@ -45,6 +45,11 @@ export const raw_schema = {
required: false, required: false,
default: 0, default: 0,
}, },
verified: {
type: Boolean,
required: true,
default: false
}
}; };
const schema = new Schema<IProfile>(raw_schema); const schema = new Schema<IProfile>(raw_schema);
@ -76,4 +81,5 @@ export interface IProfile
trainPoints: number; trainPoints: number;
steamName: string; steamName: string;
trainDistance: number; trainDistance: number;
verified: boolean;
} }

97
packages/frontend/src/App.tsx
View File

@ -1,51 +1,54 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { Route, Routes, useLocation } from 'react-router-dom'; import { Route, Routes, useLocation } from "react-router-dom";
import { Loader } from './components/mini/loaders/PageLoader.tsx'; import { Loader } from "./components/mini/loaders/PageLoader.tsx";
import { Home } from './pages/Home'; import { Home } from "./pages/Home";
import DefaultLayout from './layout/DefaultLayout'; import DefaultLayout from "./layout/DefaultLayout";
import './i18n'; import "./i18n";
import { TrainLeaderboard } from './pages/leaderboard/TrainLeaderboard.tsx'; import { TrainLeaderboard } from "./pages/leaderboard/TrainLeaderboard.tsx";
import { StationLeaderboard } from './pages/leaderboard/StationsLeaderboard.tsx'; import { StationLeaderboard } from "./pages/leaderboard/StationsLeaderboard.tsx";
import { TrainLogs } from './pages/logs/TrainLogs.tsx'; import { TrainLogs } from "./pages/logs/TrainLogs.tsx";
import { StationLogs } from './pages/logs/StationLogs.tsx'; import { StationLogs } from "./pages/logs/StationLogs.tsx";
import { Profile } from './pages/profile/Profile.tsx'; import { Profile } from "./pages/profile/Profile.tsx";
import { Log } from './pages/log/Log.tsx'; import { Log } from "./pages/log/Log.tsx";
import 'react-toastify/dist/ReactToastify.css'; import "react-toastify/dist/ReactToastify.css";
import { ToastContainer } from 'react-toastify'; import { ToastContainer } from "react-toastify";
import useColorMode from './hooks/useColorMode.tsx'; import useColorMode from "./hooks/useColorMode.tsx";
import { HelmetProvider } from 'react-helmet-async'; import { HelmetProvider } from "react-helmet-async";
import { PageMeta } from './components/mini/util/PageMeta.tsx'; import { PageMeta } from "./components/mini/util/PageMeta.tsx";
function App() { function App()
const [loading, setLoading] = useState<boolean>(true); {
const [ loading, setLoading ] = useState<boolean>(true);
const { pathname } = useLocation(); const { pathname } = useLocation();
const [theme] = useColorMode(); const [ theme ] = useColorMode();
useEffect(() => { useEffect(() =>
{
window.scrollTo(0, 0); window.scrollTo(0, 0);
}, [pathname]); }, [ pathname ]);
useEffect(() => { useEffect(() =>
{
setTimeout(() => setLoading(false), 400); setTimeout(() => setLoading(false), 400);
}, []); }, []);
return <HelmetProvider> return <HelmetProvider>
{loading ? ( { loading ? (
<Loader /> <Loader/>
) : ( ) : (
<> <>
<ToastContainer <ToastContainer
position="bottom-right" position="bottom-right"
autoClose={1500} autoClose={ 1500 }
hideProgressBar={false} hideProgressBar={ false }
newestOnTop={false} newestOnTop={ false }
closeOnClick closeOnClick
rtl={false} rtl={ false }
pauseOnHover pauseOnHover
theme={theme as 'light' | 'dark'} theme={ theme as "light" | "dark" }
/> />
<DefaultLayout> <DefaultLayout>
<Routes> <Routes>
@ -54,8 +57,8 @@ function App() {
element={ element={
<> <>
<PageMeta title="simrail.alekswilc.dev | Home" <PageMeta title="simrail.alekswilc.dev | Home"
description="Simrail Stats - The best SimRail logs and statistics site!" /> description="Simrail Stats - The best SimRail logs and statistics site!"/>
<Home /> <Home/>
</> </>
} }
/> />
@ -64,8 +67,8 @@ function App() {
element={ element={
<> <>
<PageMeta title="simrail.alekswilc.dev | Train Leaderboard" <PageMeta title="simrail.alekswilc.dev | Train Leaderboard"
description="Simrail Stats - The best SimRail logs and statistics site!" /> description="Simrail Stats - The best SimRail logs and statistics site!"/>
<TrainLeaderboard /> <TrainLeaderboard/>
</> </>
} }
/> />
@ -75,8 +78,8 @@ function App() {
element={ element={
<> <>
<PageMeta title="simrail.alekswilc.dev | Trains Logs" <PageMeta title="simrail.alekswilc.dev | Trains Logs"
description="Simrail Stats - The best SimRail logs and statistics site!" /> description="Simrail Stats - The best SimRail logs and statistics site!"/>
<TrainLogs /> <TrainLogs/>
</> </>
} }
/> />
@ -86,8 +89,8 @@ function App() {
element={ element={
<> <>
<PageMeta title="simrail.alekswilc.dev | Stations Logs" <PageMeta title="simrail.alekswilc.dev | Stations Logs"
description="Simrail Stats - The best SimRail logs and statistics site!" /> description="Simrail Stats - The best SimRail logs and statistics site!"/>
<StationLogs /> <StationLogs/>
</> </>
} }
/> />
@ -97,8 +100,8 @@ function App() {
element={ element={
<> <>
<PageMeta title="simrail.alekswilc.dev | Station Leaderboard" <PageMeta title="simrail.alekswilc.dev | Station Leaderboard"
description="Simrail Stats - The best SimRail logs and statistics site!" /> description="Simrail Stats - The best SimRail logs and statistics site!"/>
<StationLeaderboard /> <StationLeaderboard/>
</> </>
} }
/> />
@ -108,9 +111,9 @@ function App() {
element={ element={
<> <>
<PageMeta title="simrail.alekswilc.dev | Profile" <PageMeta title="simrail.alekswilc.dev | Profile"
description="Simrail Stats - The best SimRail logs and statistics site!" /> description="Simrail Stats - The best SimRail logs and statistics site!"/>
{/* page meta is modified in component! */} {/* page meta is modified in component! */ }
<Profile /> <Profile/>
</> </>
} }
/> />
@ -120,16 +123,16 @@ function App() {
element={ element={
<> <>
<PageMeta title="simrail.alekswilc.dev | Log" <PageMeta title="simrail.alekswilc.dev | Log"
description="Simrail Stats - The best SimRail logs and statistics site!" /> description="Simrail Stats - The best SimRail logs and statistics site!"/>
{/* page title is modified after API response */} {/* page title is modified after API response */ }
<Log /> <Log/>
</> </>
} }
/> />
</Routes> </Routes>
</DefaultLayout> </DefaultLayout>
</> </>
)} ) }
</HelmetProvider>; </HelmetProvider>;
} }

8
packages/frontend/src/components/mini/alerts/Error.tsx
View File

@ -1,17 +1,17 @@
import { ErrorAlertIcon } from '../icons/AlertIcons.tsx'; import { ErrorAlertIcon } from "../icons/AlertIcons.tsx";
export const ErrorAlert = ({ title, description }: { title: string, description: string }) => <div export const ErrorAlert = ({ title, description }: { title: string, description: string }) => <div
className="flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9"> className="flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9">
<div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]"> <div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]">
<ErrorAlertIcon /> <ErrorAlertIcon/>
</div> </div>
<div className="w-full"> <div className="w-full">
<h5 className="mb-3 font-semibold text-[#B45454]"> <h5 className="mb-3 font-semibold text-[#B45454]">
{title} { title }
</h5> </h5>
<ul> <ul>
<li className="leading-relaxed text-[#CD5D5D]"> <li className="leading-relaxed text-[#CD5D5D]">
{description} { description }
</li> </li>
</ul> </ul>
</div> </div>

8
packages/frontend/src/components/mini/alerts/Success.tsx
View File

@ -1,17 +1,17 @@
import { SuccessAlertIcon } from '../icons/AlertIcons.tsx'; import { SuccessAlertIcon } from "../icons/AlertIcons.tsx";
export const SuccessAlert = ({ title, description }: { title: string, description: string }) => export const SuccessAlert = ({ title, description }: { title: string, description: string }) =>
<div <div
className="flex w-full border-l-6 border-[#34D399] bg-[#34D399] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9"> className="flex w-full border-l-6 border-[#34D399] bg-[#34D399] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9">
<div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]"> <div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]">
<SuccessAlertIcon /> <SuccessAlertIcon/>
</div> </div>
<div className="w-full"> <div className="w-full">
<h5 className="mb-3 text-lg font-semibold text-black dark:text-[#34D399] "> <h5 className="mb-3 text-lg font-semibold text-black dark:text-[#34D399] ">
{title} { title }
</h5> </h5>
<p className="text-base leading-relaxed text-body"> <p className="text-base leading-relaxed text-body">
{description} { description }
</p> </p>
</div> </div>
</div>; </div>;

8
packages/frontend/src/components/mini/alerts/Warning.tsx
View File

@ -1,17 +1,17 @@
import { WarningAlertIcon } from '../icons/AlertIcons.tsx'; import { WarningAlertIcon } from "../icons/AlertIcons.tsx";
export const WarningAlert = ({ title, description }: { title: string, description: string }) => export const WarningAlert = ({ title, description }: { title: string, description: string }) =>
<div <div
className="flex w-full border-l-6 border-warning bg-warning bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9"> className="flex w-full border-l-6 border-warning bg-warning bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9">
<div className="mr-5 flex h-9 w-9 items-center justify-center rounded-lg bg-warning bg-opacity-30"> <div className="mr-5 flex h-9 w-9 items-center justify-center rounded-lg bg-warning bg-opacity-30">
<WarningAlertIcon /> <WarningAlertIcon/>
</div> </div>
<div className="w-full"> <div className="w-full">
<h5 className="mb-3 text-lg font-semibold text-[#9D5425]"> <h5 className="mb-3 text-lg font-semibold text-[#9D5425]">
{title} { title }
</h5> </h5>
<p className="leading-relaxed text-[#D0915C]"> <p className="leading-relaxed text-[#D0915C]">
{description} { description }
</p> </p>
</div> </div>
</div>; </div>;

35
packages/frontend/src/components/mini/header/DarkModeSwitcher.tsx
View File

@ -1,35 +1,38 @@
import useColorMode from '../../../hooks/useColorMode'; import useColorMode from "../../../hooks/useColorMode";
import { DarkIcon, LightIcon } from '../icons/DarkModeSwitchIcons.tsx'; import { DarkIcon, LightIcon } from "../icons/DarkModeSwitchIcons.tsx";
const DarkModeSwitcher = () => { const DarkModeSwitcher = () =>
const [colorMode, setColorMode] = useColorMode(); {
const [ colorMode, setColorMode ] = useColorMode();
return ( return (
<li> <li>
<label <label
className={`relative m-0 block h-7.5 w-14 rounded-full ${ className={ `relative m-0 block h-7.5 w-14 rounded-full ${
colorMode === 'dark' ? 'bg-primary' : 'bg-stroke' colorMode === "dark" ? "bg-primary" : "bg-stroke"
}`} }` }
> >
<input <input
type="checkbox" type="checkbox"
onChange={() => { onChange={ () =>
if (typeof setColorMode === 'function') { {
setColorMode(colorMode === 'light' ? 'dark' : 'light'); if (typeof setColorMode === "function")
{
setColorMode(colorMode === "light" ? "dark" : "light");
} }
}} } }
className="dur absolute top-0 z-50 m-0 h-full w-full cursor-pointer opacity-0" className="dur absolute top-0 z-50 m-0 h-full w-full cursor-pointer opacity-0"
/> />
<span <span
className={`absolute top-1/2 left-[3px] flex h-6 w-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear ${ className={ `absolute top-1/2 left-[3px] flex h-6 w-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear ${
colorMode === 'dark' && '!right-[3px] !translate-x-full' colorMode === "dark" && "!right-[3px] !translate-x-full"
}`} }` }
> >
<span className="dark:hidden"> <span className="dark:hidden">
<LightIcon /> <LightIcon/>
</span> </span>
<span className="hidden dark:inline-block"> <span className="hidden dark:inline-block">
<DarkIcon /> <DarkIcon/>
</span> </span>
</span> </span>
</label> </label>

54
packages/frontend/src/components/mini/header/Header.tsx
View File

@ -1,51 +1,53 @@
import DarkModeSwitcher from './DarkModeSwitcher.tsx'; import DarkModeSwitcher from "./DarkModeSwitcher.tsx";
import ReactCountryFlag from 'react-country-flag'; import ReactCountryFlag from "react-country-flag";
import i18n from 'i18next'; import i18n from "i18next";
export const Header = (props: { export const Header = (props: {
sidebarOpen: string | boolean | undefined; sidebarOpen: string | boolean | undefined;
setSidebarOpen: (arg0: boolean) => void; setSidebarOpen: (arg0: boolean) => void;
}) => { }) =>
{
return ( return (
<header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none"> <header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
<div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11"> <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
<div className="flex items-center gap-2 sm:gap-4 lg:hidden"> <div className="flex items-center gap-2 sm:gap-4 lg:hidden">
<button <button
aria-controls="sidebar" aria-controls="sidebar"
onClick={(e) => { onClick={ (e) =>
{
e.stopPropagation(); e.stopPropagation();
props.setSidebarOpen(!props.sidebarOpen); props.setSidebarOpen(!props.sidebarOpen);
}} } }
className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden" className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
> >
<span className="relative block h-5.5 w-5.5 cursor-pointer"> <span className="relative block h-5.5 w-5.5 cursor-pointer">
<span className="du-block absolute right-0 h-full w-full"> <span className="du-block absolute right-0 h-full w-full">
<span <span
className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${ className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!w-full delay-300' !props.sidebarOpen && "!w-full delay-300"
}`} }` }
></span> ></span>
<span <span
className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white ${ className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && 'delay-400 !w-full' !props.sidebarOpen && "delay-400 !w-full"
}`} }` }
></span> ></span>
<span <span
className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white ${ className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!w-full delay-500' !props.sidebarOpen && "!w-full delay-500"
}`} }` }
></span> ></span>
</span> </span>
<span className="absolute right-0 h-full w-full rotate-45"> <span className="absolute right-0 h-full w-full rotate-45">
<span <span
className={`absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${ className={ `absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!h-0 !delay-[0]' !props.sidebarOpen && "!h-0 !delay-[0]"
}`} }` }
></span> ></span>
<span <span
className={`delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white ${ className={ `delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!h-0 !delay-200' !props.sidebarOpen && "!h-0 !delay-200"
}`} }` }
></span> ></span>
</span> </span>
</span> </span>
@ -57,15 +59,15 @@ export const Header = (props: {
<div className="flex items-center gap-3 2xsm:gap-7"> <div className="flex items-center gap-3 2xsm:gap-7">
<ul className="flex items-center gap-2 2xsm:gap-4"> <ul className="flex items-center gap-2 2xsm:gap-4">
<a className="cursor-pointer" onClick={() => i18n.changeLanguage('pl')}> <a className="cursor-pointer" onClick={ () => i18n.changeLanguage("pl") }>
<ReactCountryFlag countryCode={'PL'} svg /> <ReactCountryFlag countryCode={ "PL" } svg/>
</a> </a>
<a className="cursor-pointer" onClick={() => i18n.changeLanguage('en')}> <a className="cursor-pointer" onClick={ () => i18n.changeLanguage("en") }>
<ReactCountryFlag countryCode={'US'} svg /> <ReactCountryFlag countryCode={ "US" } svg/>
</a> </a>
</ul> </ul>
<ul className="flex items-center gap-2 2xsm:gap-4"> <ul className="flex items-center gap-2 2xsm:gap-4">
<DarkModeSwitcher /> <DarkModeSwitcher/>
</ul> </ul>
</div> </div>
</div> </div>

6
packages/frontend/src/components/mini/icons/ArrowIcon.tsx
View File

@ -1,8 +1,8 @@
export const ArrowIcon = ({ rotated }: { rotated?: boolean }) => export const ArrowIcon = ({ rotated }: { rotated?: boolean }) =>
<svg <svg
className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${ className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
rotated && 'rotate-180' rotated && "rotate-180"
}`} }` }
width="20" width="20"
height="20" height="20"
viewBox="0 0 20 20" viewBox="0 0 20 20"

40
packages/frontend/src/components/mini/loaders/ContentLoader.tsx
View File

@ -1,37 +1,38 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { ErrorAlertIcon } from '../icons/AlertIcons.tsx'; import { ErrorAlertIcon } from "../icons/AlertIcons.tsx";
export const LoadError = () => { export const LoadError = () =>
{
const { t } = useTranslation(); const { t } = useTranslation();
return <div return <div
className="flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9"> className="flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9">
<div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]"> <div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]">
<ErrorAlertIcon /> <ErrorAlertIcon/>
</div> </div>
<div className="w-full"> <div className="w-full">
<h5 className="mb-3 font-semibold text-[#B45454]"> <h5 className="mb-3 font-semibold text-[#B45454]">
{t('content_loader.error.header')} { t("content_loader.error.header") }
</h5> </h5>
<ul> <ul>
<li className="leading-relaxed text-[#CD5D5D]"> <li className="leading-relaxed text-[#CD5D5D]">
{t('content_loader.error.description')} { t("content_loader.error.description") }
</li> </li>
<li className="leading-relaxed text-[#CD5D5D]"> <li className="leading-relaxed text-[#CD5D5D]">
<div className="pt-4"> <div className="pt-4">
{/* TODO: add git issue params */} {/* TODO: add git issue params */ }
<div className="mb-7.5 flex flex-wrap gap-4"> <div className="mb-7.5 flex flex-wrap gap-4">
<Link <Link
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-70 lg:px-6 xl:px-8" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-70 lg:px-6 xl:px-8"
to="https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/issues/new">{t('content_loader.error.report')}</Link> to="https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/issues/new">{ t("content_loader.error.report") }</Link>
<Link <Link
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-70 lg:px-6 xl:px-8" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-70 lg:px-6 xl:px-8"
to="#" to="#"
onClick={() => window.location.reload()}>{t('content_loader.error.refresh')}</Link> onClick={ () => window.location.reload() }>{ t("content_loader.error.refresh") }</Link>
</div> </div>
</div> </div>
@ -42,20 +43,23 @@ export const LoadError = () => {
</div>; </div>;
}; };
export const ContentLoader = () => { export const ContentLoader = () =>
const [error, setError] = useState(false); {
useEffect(() => { const [ error, setError ] = useState(false);
new Promise(res => setTimeout(res, 5000)).then(() => { useEffect(() =>
{
new Promise(res => setTimeout(res, 5000)).then(() =>
{
setError(true); setError(true);
}); });
}, []); }, []);
return ( return (
<> <>
{error ? <LoadError /> : <div { error ? <LoadError/> : <div
className="flex h-screen items-center justify-center shadow-default bg-white dark:border-strokedark dark:bg-boxdark"> className="flex h-screen items-center justify-center shadow-default bg-white dark:border-strokedark dark:bg-boxdark">
<div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent" /> <div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"/>
</div>} </div> }
</> </>
); );
}; };

5
packages/frontend/src/components/mini/loaders/PageLoader.tsx
View File

@ -1,7 +1,8 @@
export const Loader = () => { export const Loader = () =>
{
return ( return (
<div className="flex h-screen items-center justify-center bg-black"> <div className="flex h-screen items-center justify-center bg-black">
<div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent" /> <div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"/>
</div> </div>
); );
}; };

749
packages/frontend/src/components/mini/sidebar/Sidebar.tsx
View File

@ -1,91 +1,104 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from "react";
import { NavLink, useLocation } from 'react-router-dom'; import { NavLink, useLocation } from "react-router-dom";
import SidebarLinkGroup from './SidebarLinkGroup.tsx'; import SidebarLinkGroup from "./SidebarLinkGroup.tsx";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { HamburgerGoBackIcon } from '../icons/SidebarIcons.tsx'; import { HamburgerGoBackIcon } from "../icons/SidebarIcons.tsx";
import { ArrowIcon } from '../icons/ArrowIcon.tsx'; import { ArrowIcon } from "../icons/ArrowIcon.tsx";
import { FaHome, FaClipboardList } from 'react-icons/fa'; import { FaHome, FaClipboardList } from "react-icons/fa";
import { FaChartSimple, FaTrain, FaBuildingFlag } from 'react-icons/fa6'; import { FaChartSimple, FaTrain, FaBuildingFlag } from "react-icons/fa6";
interface SidebarProps { interface SidebarProps
{
sidebarOpen: boolean; sidebarOpen: boolean;
setSidebarOpen: (arg: boolean) => void; setSidebarOpen: (arg: boolean) => void;
} }
export const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => { export const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) =>
{
const location = useLocation(); const location = useLocation();
const { pathname } = location; const { pathname } = location;
const trigger = useRef<any>(null); const trigger = useRef<any>(null);
const sidebar = useRef<any>(null); const sidebar = useRef<any>(null);
const storedSidebarExpanded = localStorage.getItem('sidebar-expanded'); const storedSidebarExpanded = localStorage.getItem("sidebar-expanded");
const [sidebarExpanded, setSidebarExpanded] = useState( const [ sidebarExpanded, setSidebarExpanded ] = useState(
storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true' storedSidebarExpanded === null ? false : storedSidebarExpanded === "true",
); );
const { t } = useTranslation(); const { t } = useTranslation();
// close on click outside // close on click outside
useEffect(() => { useEffect(() =>
const clickHandler = ({ target }: MouseEvent) => { {
if (!sidebar.current || !trigger.current) { const clickHandler = ({ target }: MouseEvent) =>
{
if (!sidebar.current || !trigger.current)
{
return; return;
} }
if ( if (
!sidebarOpen || !sidebarOpen ||
sidebar.current.contains(target) || sidebar.current.contains(target) ||
trigger.current.contains(target) trigger.current.contains(target)
) { )
{
return; return;
} }
setSidebarOpen(false); setSidebarOpen(false);
}; };
document.addEventListener('click', clickHandler); document.addEventListener("click", clickHandler);
return () => document.removeEventListener('click', clickHandler); return () => document.removeEventListener("click", clickHandler);
}); });
// close if the esc key is pressed // close if the esc key is pressed
useEffect(() => { useEffect(() =>
const keyHandler = ({ keyCode }: KeyboardEvent) => { {
if (!sidebarOpen || keyCode !== 27) { const keyHandler = ({ keyCode }: KeyboardEvent) =>
{
if (!sidebarOpen || keyCode !== 27)
{
return; return;
} }
setSidebarOpen(false); setSidebarOpen(false);
}; };
document.addEventListener('keydown', keyHandler); document.addEventListener("keydown", keyHandler);
return () => document.removeEventListener('keydown', keyHandler); return () => document.removeEventListener("keydown", keyHandler);
}); });
useEffect(() => { useEffect(() =>
localStorage.setItem('sidebar-expanded', sidebarExpanded.toString()); {
if (sidebarExpanded) { localStorage.setItem("sidebar-expanded", sidebarExpanded.toString());
document.querySelector('body')?.classList.add('sidebar-expanded'); if (sidebarExpanded)
} else { {
document.querySelector('body')?.classList.remove('sidebar-expanded'); document.querySelector("body")?.classList.add("sidebar-expanded");
} }
}, [sidebarExpanded]); else
{
document.querySelector("body")?.classList.remove("sidebar-expanded");
}
}, [ sidebarExpanded ]);
return ( return (
<aside <aside
ref={sidebar} ref={ sidebar }
className={`absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0 ${ className={ `absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0 ${
sidebarOpen ? 'translate-x-0' : '-translate-x-full' sidebarOpen ? "translate-x-0" : "-translate-x-full"
}`} }` }
> >
{/* <!-- SIDEBAR HEADER --> */} {/* <!-- SIDEBAR HEADER --> */ }
<div className="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5"> <div className="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
<button <button
ref={trigger} ref={ trigger }
onClick={() => setSidebarOpen(!sidebarOpen)} onClick={ () => setSidebarOpen(!sidebarOpen) }
aria-controls="sidebar" aria-controls="sidebar"
aria-expanded={sidebarOpen} aria-expanded={ sidebarOpen }
className="block lg:hidden" className="block lg:hidden"
> >
<HamburgerGoBackIcon /> <HamburgerGoBackIcon/>
</button> </button>
</div> </div>
{/* <!-- SIDEBAR HEADER --> */} {/* <!-- SIDEBAR HEADER --> */ }
<div className="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear"> <div className="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
<nav className="mt-5 py-4 px-4 lg:mt-9 lg:px-6"> <nav className="mt-5 py-4 px-4 lg:mt-9 lg:px-6">
@ -94,13 +107,13 @@ export const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<li> <li>
<NavLink <NavLink
to="/" to="/"
className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${ className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
pathname === '/' && pathname === "/" &&
'bg-graydark dark:bg-meta-4' "bg-graydark dark:bg-meta-4"
}`} }` }
> >
<FaHome /> <FaHome/>
{t('sidebar.home')} { t("sidebar.home") }
</NavLink> </NavLink>
</li> </li>
@ -108,409 +121,413 @@ export const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
</ul> </ul>
<ul className="mb-6 flex flex-col gap-1.5"> <ul className="mb-6 flex flex-col gap-1.5">
<h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2"> <h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2">
{t('sidebar.info')} { t("sidebar.info") }
</h3> </h3>
<SidebarLinkGroup <SidebarLinkGroup
activeCondition={ activeCondition={
pathname === '/logs' || pathname.includes('logs') pathname === "/logs" || pathname.includes("logs")
} }
> >
{(handleClick, open) => { { (handleClick, open) =>
{
return ( return (
<React.Fragment> <React.Fragment>
<NavLink <NavLink
to="#" to="#"
className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${ className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
(pathname === '/logs' || (pathname === "/logs" ||
pathname.includes('logs')) && pathname.includes("logs")) &&
'bg-graydark dark:bg-meta-4' "bg-graydark dark:bg-meta-4"
}`} }` }
onClick={(e) => { onClick={ (e) =>
{
e.preventDefault(); e.preventDefault();
sidebarExpanded sidebarExpanded
? handleClick() ? handleClick()
: setSidebarExpanded(true); : setSidebarExpanded(true);
}} } }
> >
<FaClipboardList /> <FaClipboardList/>
{t('sidebar.logs')} { t("sidebar.logs") }
<ArrowIcon rotated={open} /> <ArrowIcon rotated={ open }/>
</NavLink> </NavLink>
<div <div
className={`translate transform overflow-hidden ${ className={ `translate transform overflow-hidden ${
!open && 'hidden' !open && "hidden"
}`} }` }
> >
<ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6"> <ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
<li> <li>
<NavLink <NavLink
to="/logs/stations" to="/logs/stations"
className={({ isActive }) => className={ ({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
(isActive && '!text-white') (isActive && "!text-white")
} }
> >
<FaBuildingFlag /> <FaBuildingFlag/>
{t('sidebar.stations')} { t("sidebar.stations") }
</NavLink> </NavLink>
</li> </li>
<li> <li>
<NavLink <NavLink
to="/logs/trains" to="/logs/trains"
className={({ isActive }) => className={ ({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
(isActive && '!text-white') (isActive && "!text-white")
} }
> >
<FaTrain /> <FaTrain/>
{t('sidebar.trains')} { t("sidebar.trains") }
</NavLink> </NavLink>
</li> </li>
</ul> </ul>
</div> </div>
</React.Fragment> </React.Fragment>
); );
}} } }
</SidebarLinkGroup> </SidebarLinkGroup>
<SidebarLinkGroup <SidebarLinkGroup
activeCondition={ activeCondition={
pathname === '/leaderboard' || pathname.includes('leaderboard') pathname === "/leaderboard" || pathname.includes("leaderboard")
} }
> >
{(handleClick, open) => { { (handleClick, open) =>
{
return ( return (
<React.Fragment> <React.Fragment>
<NavLink <NavLink
to="#" to="#"
className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${ className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
(pathname === '/leaderboard' || (pathname === "/leaderboard" ||
pathname.includes('leaderboard')) && pathname.includes("leaderboard")) &&
'bg-graydark dark:bg-meta-4' "bg-graydark dark:bg-meta-4"
}`} }` }
onClick={(e) => { onClick={ (e) =>
{
e.preventDefault(); e.preventDefault();
sidebarExpanded sidebarExpanded
? handleClick() ? handleClick()
: setSidebarExpanded(true); : setSidebarExpanded(true);
}} } }
> >
<FaChartSimple /> <FaChartSimple/>
{t('sidebar.leaderboard')} { t("sidebar.leaderboard") }
<ArrowIcon rotated={open} /> <ArrowIcon rotated={ open }/>
</NavLink> </NavLink>
<div <div
className={`translate transform overflow-hidden ${ className={ `translate transform overflow-hidden ${
!open && 'hidden' !open && "hidden"
}`} }` }
> >
<ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6"> <ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
<li> <li>
<NavLink <NavLink
to="/leaderboard/stations" to="/leaderboard/stations"
className={({ isActive }) => className={ ({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
(isActive && '!text-white') (isActive && "!text-white")
} }
> >
<FaBuildingFlag /> <FaBuildingFlag/>
{t('sidebar.stations')} { t("sidebar.stations") }
</NavLink> </NavLink>
</li> </li>
<li> <li>
<NavLink <NavLink
to="/leaderboard/trains" to="/leaderboard/trains"
className={({ isActive }) => className={ ({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
(isActive && '!text-white') (isActive && "!text-white")
} }
> >
<FaTrain /> <FaTrain/>
{t('sidebar.trains')} { t("sidebar.trains") }
</NavLink> </NavLink>
</li> </li>
</ul> </ul>
</div> </div>
</React.Fragment> </React.Fragment>
); );
}} } }
</SidebarLinkGroup> </SidebarLinkGroup>
</ul> </ul>
</div> </div>
{/* TODO: add admin panel with simple auth */} {/* TODO: add admin panel with simple auth */ }
{/*{false && <div>*/} {/*{false && <div>*/ }
{/* <h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2">*/} {/* <h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2">*/ }
{/* {t('sidebar.admin')}*/} {/* {t('sidebar.admin')}*/ }
{/* </h3>*/} {/* </h3>*/ }
{/* <ul className="mb-6 flex flex-col gap-1.5">*/} {/* <ul className="mb-6 flex flex-col gap-1.5">*/ }
{/* */}{/*{/* <!-- Menu Item Chart --> */} {/* */ }{/*{/* <!-- Menu Item Chart --> */ }
{/* <li>*/} {/* <li>*/ }
{/* <NavLink*/} {/* <NavLink*/ }
{/* to="/chart"*/} {/* to="/chart"*/ }
{/* className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${*/} {/* className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${*/ }
{/* pathname.includes('chart') && 'bg-graydark dark:bg-meta-4'*/} {/* pathname.includes('chart') && 'bg-graydark dark:bg-meta-4'*/ }
{/* }`}*/} {/* }`}*/ }
{/* >*/} {/* >*/ }
{/* <svg*/} {/* <svg*/ }
{/* className="fill-current"*/} {/* className="fill-current"*/ }
{/* width="18"*/} {/* width="18"*/ }
{/* height="19"*/} {/* height="19"*/ }
{/* viewBox="0 0 18 19"*/} {/* viewBox="0 0 18 19"*/ }
{/* fill="none"*/} {/* fill="none"*/ }
{/* xmlns="http://www.w3.org/2000/svg"*/} {/* xmlns="http://www.w3.org/2000/svg"*/ }
{/* >*/} {/* >*/ }
{/* <g clipPath="url(#clip0_130_9801)">*/} {/* <g clipPath="url(#clip0_130_9801)">*/ }
{/* <path*/} {/* <path*/ }
{/* d="M10.8563 0.55835C10.5188 0.55835 10.2095 0.8396 10.2095 1.20522V6.83022C10.2095 7.16773 10.4907 7.4771 10.8563 7.4771H16.8751C17.0438 7.4771 17.2126 7.39272 17.3251 7.28022C17.4376 7.1396 17.4938 6.97085 17.4938 6.8021C17.2688 3.28647 14.3438 0.55835 10.8563 0.55835ZM11.4751 6.15522V1.8521C13.8095 2.13335 15.6938 3.8771 16.1438 6.18335H11.4751V6.15522Z"*/} {/* d="M10.8563 0.55835C10.5188 0.55835 10.2095 0.8396 10.2095 1.20522V6.83022C10.2095 7.16773 10.4907 7.4771 10.8563 7.4771H16.8751C17.0438 7.4771 17.2126 7.39272 17.3251 7.28022C17.4376 7.1396 17.4938 6.97085 17.4938 6.8021C17.2688 3.28647 14.3438 0.55835 10.8563 0.55835ZM11.4751 6.15522V1.8521C13.8095 2.13335 15.6938 3.8771 16.1438 6.18335H11.4751V6.15522Z"*/ }
{/* fill=""*/} {/* fill=""*/ }
{/* />*/} {/* />*/ }
{/* <path*/} {/* <path*/ }
{/* d="M15.3845 8.7427H9.1126V2.69582C9.1126 2.35832 8.83135 2.07707 8.49385 2.07707C8.40947 2.07707 8.3251 2.07707 8.24072 2.07707C3.96572 2.04895 0.506348 5.53645 0.506348 9.81145C0.506348 14.0864 3.99385 17.5739 8.26885 17.5739C12.5438 17.5739 16.0313 14.0864 16.0313 9.81145C16.0313 9.6427 16.0313 9.47395 16.0032 9.33332C16.0032 8.99582 15.722 8.7427 15.3845 8.7427ZM8.26885 16.3083C4.66885 16.3083 1.77197 13.4114 1.77197 9.81145C1.77197 6.3802 4.47197 3.53957 7.8751 3.3427V9.36145C7.8751 9.69895 8.15635 10.0083 8.52197 10.0083H14.7938C14.6813 13.4958 11.7845 16.3083 8.26885 16.3083Z"*/} {/* d="M15.3845 8.7427H9.1126V2.69582C9.1126 2.35832 8.83135 2.07707 8.49385 2.07707C8.40947 2.07707 8.3251 2.07707 8.24072 2.07707C3.96572 2.04895 0.506348 5.53645 0.506348 9.81145C0.506348 14.0864 3.99385 17.5739 8.26885 17.5739C12.5438 17.5739 16.0313 14.0864 16.0313 9.81145C16.0313 9.6427 16.0313 9.47395 16.0032 9.33332C16.0032 8.99582 15.722 8.7427 15.3845 8.7427ZM8.26885 16.3083C4.66885 16.3083 1.77197 13.4114 1.77197 9.81145C1.77197 6.3802 4.47197 3.53957 7.8751 3.3427V9.36145C7.8751 9.69895 8.15635 10.0083 8.52197 10.0083H14.7938C14.6813 13.4958 11.7845 16.3083 8.26885 16.3083Z"*/ }
{/* fill=""*/} {/* fill=""*/ }
{/* />*/} {/* />*/ }
{/* </g>*/} {/* </g>*/ }
{/* <defs>*/} {/* <defs>*/ }
{/* <clipPath id="clip0_130_9801">*/} {/* <clipPath id="clip0_130_9801">*/ }
{/* <rect*/} {/* <rect*/ }
{/* width="18"*/} {/* width="18"*/ }
{/* height="18"*/} {/* height="18"*/ }
{/* fill="white"*/} {/* fill="white"*/ }
{/* transform="translate(0 0.052124)"*/} {/* transform="translate(0 0.052124)"*/ }
{/* />*/} {/* />*/ }
{/* </clipPath>*/} {/* </clipPath>*/ }
{/* </defs>*/} {/* </defs>*/ }
{/* </svg>*/} {/* </svg>*/ }
{/* Chart*/} {/* Chart*/ }
{/* </NavLink>*/} {/* </NavLink>*/ }
{/* </li>*/} {/* </li>*/ }
{/* */}{/*{/* <!-- Menu Item Chart --> */} {/* */ }{/*{/* <!-- Menu Item Chart --> */ }
{/* */}{/*{/* <!-- Menu Item Ui Elements --> */} {/* */ }{/*{/* <!-- Menu Item Ui Elements --> */ }
{/* <SidebarLinkGroup*/} {/* <SidebarLinkGroup*/ }
{/* activeCondition={pathname === '/ui' || pathname.includes('ui')}*/} {/* activeCondition={pathname === '/ui' || pathname.includes('ui')}*/ }
{/* >*/} {/* >*/ }
{/* {(handleClick, open) => {*/} {/* {(handleClick, open) => {*/ }
{/* return (*/} {/* return (*/ }
{/* <React.Fragment>*/} {/* <React.Fragment>*/ }
{/* <NavLink*/} {/* <NavLink*/ }
{/* to="#"*/} {/* to="#"*/ }
{/* className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${*/} {/* className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${*/ }
{/* (pathname === '/ui' || pathname.includes('ui')) &&*/} {/* (pathname === '/ui' || pathname.includes('ui')) &&*/ }
{/* 'bg-graydark dark:bg-meta-4'*/} {/* 'bg-graydark dark:bg-meta-4'*/ }
{/* }`}*/} {/* }`}*/ }
{/* onClick={(e) => {*/} {/* onClick={(e) => {*/ }
{/* e.preventDefault();*/} {/* e.preventDefault();*/ }
{/* sidebarExpanded*/} {/* sidebarExpanded*/ }
{/* ? handleClick()*/} {/* ? handleClick()*/ }
{/* : setSidebarExpanded(true);*/} {/* : setSidebarExpanded(true);*/ }
{/* }}*/} {/* }}*/ }
{/* >*/} {/* >*/ }
{/* <svg*/} {/* <svg*/ }
{/* className="fill-current"*/} {/* className="fill-current"*/ }
{/* width="18"*/} {/* width="18"*/ }
{/* height="19"*/} {/* height="19"*/ }
{/* viewBox="0 0 18 19"*/} {/* viewBox="0 0 18 19"*/ }
{/* fill="none"*/} {/* fill="none"*/ }
{/* xmlns="http://www.w3.org/2000/svg"*/} {/* xmlns="http://www.w3.org/2000/svg"*/ }
{/* >*/} {/* >*/ }
{/* <g clipPath="url(#clip0_130_9807)">*/} {/* <g clipPath="url(#clip0_130_9807)">*/ }
{/* <path*/} {/* <path*/ }
{/* d="M15.7501 0.55835H2.2501C1.29385 0.55835 0.506348 1.34585 0.506348 2.3021V7.53335C0.506348 8.4896 1.29385 9.2771 2.2501 9.2771H15.7501C16.7063 9.2771 17.4938 8.4896 17.4938 7.53335V2.3021C17.4938 1.34585 16.7063 0.55835 15.7501 0.55835ZM16.2563 7.53335C16.2563 7.8146 16.0313 8.0396 15.7501 8.0396H2.2501C1.96885 8.0396 1.74385 7.8146 1.74385 7.53335V2.3021C1.74385 2.02085 1.96885 1.79585 2.2501 1.79585H15.7501C16.0313 1.79585 16.2563 2.02085 16.2563 2.3021V7.53335Z"*/} {/* d="M15.7501 0.55835H2.2501C1.29385 0.55835 0.506348 1.34585 0.506348 2.3021V7.53335C0.506348 8.4896 1.29385 9.2771 2.2501 9.2771H15.7501C16.7063 9.2771 17.4938 8.4896 17.4938 7.53335V2.3021C17.4938 1.34585 16.7063 0.55835 15.7501 0.55835ZM16.2563 7.53335C16.2563 7.8146 16.0313 8.0396 15.7501 8.0396H2.2501C1.96885 8.0396 1.74385 7.8146 1.74385 7.53335V2.3021C1.74385 2.02085 1.96885 1.79585 2.2501 1.79585H15.7501C16.0313 1.79585 16.2563 2.02085 16.2563 2.3021V7.53335Z"*/ }
{/* fill=""*/} {/* fill=""*/ }
{/* />*/} {/* />*/ }
{/* <path*/} {/* <path*/ }
{/* d="M6.13135 10.9646H2.2501C1.29385 10.9646 0.506348 11.7521 0.506348 12.7083V15.8021C0.506348 16.7583 1.29385 17.5458 2.2501 17.5458H6.13135C7.0876 17.5458 7.8751 16.7583 7.8751 15.8021V12.7083C7.90322 11.7521 7.11572 10.9646 6.13135 10.9646ZM6.6376 15.8021C6.6376 16.0833 6.4126 16.3083 6.13135 16.3083H2.2501C1.96885 16.3083 1.74385 16.0833 1.74385 15.8021V12.7083C1.74385 12.4271 1.96885 12.2021 2.2501 12.2021H6.13135C6.4126 12.2021 6.6376 12.4271 6.6376 12.7083V15.8021Z"*/} {/* d="M6.13135 10.9646H2.2501C1.29385 10.9646 0.506348 11.7521 0.506348 12.7083V15.8021C0.506348 16.7583 1.29385 17.5458 2.2501 17.5458H6.13135C7.0876 17.5458 7.8751 16.7583 7.8751 15.8021V12.7083C7.90322 11.7521 7.11572 10.9646 6.13135 10.9646ZM6.6376 15.8021C6.6376 16.0833 6.4126 16.3083 6.13135 16.3083H2.2501C1.96885 16.3083 1.74385 16.0833 1.74385 15.8021V12.7083C1.74385 12.4271 1.96885 12.2021 2.2501 12.2021H6.13135C6.4126 12.2021 6.6376 12.4271 6.6376 12.7083V15.8021Z"*/ }
{/* fill=""*/} {/* fill=""*/ }
{/* />*/} {/* />*/ }
{/* <path*/} {/* <path*/ }
{/* d="M15.75 10.9646H11.8688C10.9125 10.9646 10.125 11.7521 10.125 12.7083V15.8021C10.125 16.7583 10.9125 17.5458 11.8688 17.5458H15.75C16.7063 17.5458 17.4938 16.7583 17.4938 15.8021V12.7083C17.4938 11.7521 16.7063 10.9646 15.75 10.9646ZM16.2562 15.8021C16.2562 16.0833 16.0312 16.3083 15.75 16.3083H11.8688C11.5875 16.3083 11.3625 16.0833 11.3625 15.8021V12.7083C11.3625 12.4271 11.5875 12.2021 11.8688 12.2021H15.75C16.0312 12.2021 16.2562 12.4271 16.2562 12.7083V15.8021Z"*/} {/* d="M15.75 10.9646H11.8688C10.9125 10.9646 10.125 11.7521 10.125 12.7083V15.8021C10.125 16.7583 10.9125 17.5458 11.8688 17.5458H15.75C16.7063 17.5458 17.4938 16.7583 17.4938 15.8021V12.7083C17.4938 11.7521 16.7063 10.9646 15.75 10.9646ZM16.2562 15.8021C16.2562 16.0833 16.0312 16.3083 15.75 16.3083H11.8688C11.5875 16.3083 11.3625 16.0833 11.3625 15.8021V12.7083C11.3625 12.4271 11.5875 12.2021 11.8688 12.2021H15.75C16.0312 12.2021 16.2562 12.4271 16.2562 12.7083V15.8021Z"*/ }
{/* fill=""*/} {/* fill=""*/ }
{/* />*/} {/* />*/ }
{/* </g>*/} {/* </g>*/ }
{/* <defs>*/} {/* <defs>*/ }
{/* <clipPath id="clip0_130_9807">*/} {/* <clipPath id="clip0_130_9807">*/ }
{/* <rect*/} {/* <rect*/ }
{/* width="18"*/} {/* width="18"*/ }
{/* height="18"*/} {/* height="18"*/ }
{/* fill="white"*/} {/* fill="white"*/ }
{/* transform="translate(0 0.052124)"*/} {/* transform="translate(0 0.052124)"*/ }
{/* />*/} {/* />*/ }
{/* </clipPath>*/} {/* </clipPath>*/ }
{/* </defs>*/} {/* </defs>*/ }
{/* </svg>*/} {/* </svg>*/ }
{/* UI Elements*/} {/* UI Elements*/ }
{/* <svg*/} {/* <svg*/ }
{/* className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${*/} {/* className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${*/ }
{/* open && 'rotate-180'*/} {/* open && 'rotate-180'*/ }
{/* }`}*/} {/* }`}*/ }
{/* width="20"*/} {/* width="20"*/ }
{/* height="20"*/} {/* height="20"*/ }
{/* viewBox="0 0 20 20"*/} {/* viewBox="0 0 20 20"*/ }
{/* fill="none"*/} {/* fill="none"*/ }
{/* xmlns="http://www.w3.org/2000/svg"*/} {/* xmlns="http://www.w3.org/2000/svg"*/ }
{/* >*/} {/* >*/ }
{/* <path*/} {/* <path*/ }
{/* fillRule="evenodd"*/} {/* fillRule="evenodd"*/ }
{/* clipRule="evenodd"*/} {/* clipRule="evenodd"*/ }
{/* d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"*/} {/* d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"*/ }
{/* fill=""*/} {/* fill=""*/ }
{/* />*/} {/* />*/ }
{/* </svg>*/} {/* </svg>*/ }
{/* </NavLink>*/} {/* </NavLink>*/ }
{/* */}{/*{/* <!-- Dropdown Menu Start --> */} {/* */ }{/*{/* <!-- Dropdown Menu Start --> */ }
{/* <div*/} {/* <div*/ }
{/* className={`translate transform overflow-hidden ${*/} {/* className={`translate transform overflow-hidden ${*/ }
{/* !open && 'hidden'*/} {/* !open && 'hidden'*/ }
{/* }`}*/} {/* }`}*/ }
{/* >*/} {/* >*/ }
{/* <ul className="mb-5.5 mt-4 flex flex-col gap-2.5 pl-6">*/} {/* <ul className="mb-5.5 mt-4 flex flex-col gap-2.5 pl-6">*/ }
{/* <li>*/} {/* <li>*/ }
{/* <NavLink*/} {/* <NavLink*/ }
{/* to="/ui/alerts"*/} {/* to="/ui/alerts"*/ }
{/* className={({ isActive }) =>*/} {/* className={({ isActive }) =>*/ }
{/* 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +*/} {/* 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +*/ }
{/* (isActive && '!text-white')*/} {/* (isActive && '!text-white')*/ }
{/* }*/} {/* }*/ }
{/* >*/} {/* >*/ }
{/* Alerts*/} {/* Alerts*/ }
{/* </NavLink>*/} {/* </NavLink>*/ }
{/* </li>*/} {/* </li>*/ }
{/* <li>*/} {/* <li>*/ }
{/* <NavLink*/} {/* <NavLink*/ }
{/* to="/ui/buttons"*/} {/* to="/ui/buttons"*/ }
{/* className={({ isActive }) =>*/} {/* className={({ isActive }) =>*/ }
{/* 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +*/} {/* 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +*/ }
{/* (isActive && '!text-white')*/} {/* (isActive && '!text-white')*/ }
{/* }*/} {/* }*/ }
{/* >*/} {/* >*/ }
{/* Buttons*/} {/* Buttons*/ }
{/* </NavLink>*/} {/* </NavLink>*/ }
{/* </li>*/} {/* </li>*/ }
{/* </ul>*/} {/* </ul>*/ }
{/* </div>*/} {/* </div>*/ }
{/* */}{/*{/* <!-- Dropdown Menu End --> */} {/* */ }{/*{/* <!-- Dropdown Menu End --> */ }
{/* </React.Fragment>*/} {/* </React.Fragment>*/ }
{/* );*/} {/* );*/ }
{/* }}*/} {/* }}*/ }
{/* </SidebarLinkGroup>*/} {/* </SidebarLinkGroup>*/ }
{/* */}{/*{/* <!-- Menu Item Ui Elements --> */} {/* */ }{/*{/* <!-- Menu Item Ui Elements --> */ }
{/* */}{/*{/* <!-- Menu Item Auth Pages --> */} {/* */ }{/*{/* <!-- Menu Item Auth Pages --> */ }
{/* <SidebarLinkGroup*/} {/* <SidebarLinkGroup*/ }
{/* activeCondition={*/} {/* activeCondition={*/ }
{/* pathname === '/auth' || pathname.includes('auth')*/} {/* pathname === '/auth' || pathname.includes('auth')*/ }
{/* }*/} {/* }*/ }
{/* >*/} {/* >*/ }
{/* {(handleClick, open) => {*/} {/* {(handleClick, open) => {*/ }
{/* return (*/} {/* return (*/ }
{/* <React.Fragment>*/} {/* <React.Fragment>*/ }
{/* <NavLink*/} {/* <NavLink*/ }
{/* to="#"*/} {/* to="#"*/ }
{/* className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${*/} {/* className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${*/ }
{/* (pathname === '/auth' || pathname.includes('auth')) &&*/} {/* (pathname === '/auth' || pathname.includes('auth')) &&*/ }
{/* 'bg-graydark dark:bg-meta-4'*/} {/* 'bg-graydark dark:bg-meta-4'*/ }
{/* }`}*/} {/* }`}*/ }
{/* onClick={(e) => {*/} {/* onClick={(e) => {*/ }
{/* e.preventDefault();*/} {/* e.preventDefault();*/ }
{/* sidebarExpanded*/} {/* sidebarExpanded*/ }
{/* ? handleClick()*/} {/* ? handleClick()*/ }
{/* : setSidebarExpanded(true);*/} {/* : setSidebarExpanded(true);*/ }
{/* }}*/} {/* }}*/ }
{/* >*/} {/* >*/ }
{/* <svg*/} {/* <svg*/ }
{/* className="fill-current"*/} {/* className="fill-current"*/ }
{/* width="18"*/} {/* width="18"*/ }
{/* height="19"*/} {/* height="19"*/ }
{/* viewBox="0 0 18 19"*/} {/* viewBox="0 0 18 19"*/ }
{/* fill="none"*/} {/* fill="none"*/ }
{/* xmlns="http://www.w3.org/2000/svg"*/} {/* xmlns="http://www.w3.org/2000/svg"*/ }
{/* >*/} {/* >*/ }
{/* <g clipPath="url(#clip0_130_9814)">*/} {/* <g clipPath="url(#clip0_130_9814)">*/ }
{/* <path*/} {/* <path*/ }
{/* d="M12.7127 0.55835H9.53457C8.80332 0.55835 8.18457 1.1771 8.18457 1.90835V3.84897C8.18457 4.18647 8.46582 4.46772 8.80332 4.46772C9.14082 4.46772 9.45019 4.18647 9.45019 3.84897V1.88022C9.45019 1.82397 9.47832 1.79585 9.53457 1.79585H12.7127C13.3877 1.79585 13.9221 2.33022 13.9221 3.00522V15.0709C13.9221 15.7459 13.3877 16.2802 12.7127 16.2802H9.53457C9.47832 16.2802 9.45019 16.2521 9.45019 16.1959V14.2552C9.45019 13.9177 9.16894 13.6365 8.80332 13.6365C8.43769 13.6365 8.18457 13.9177 8.18457 14.2552V16.1959C8.18457 16.9271 8.80332 17.5459 9.53457 17.5459H12.7127C14.0908 17.5459 15.1877 16.4209 15.1877 15.0709V3.03335C15.1877 1.65522 14.0627 0.55835 12.7127 0.55835Z"*/} {/* d="M12.7127 0.55835H9.53457C8.80332 0.55835 8.18457 1.1771 8.18457 1.90835V3.84897C8.18457 4.18647 8.46582 4.46772 8.80332 4.46772C9.14082 4.46772 9.45019 4.18647 9.45019 3.84897V1.88022C9.45019 1.82397 9.47832 1.79585 9.53457 1.79585H12.7127C13.3877 1.79585 13.9221 2.33022 13.9221 3.00522V15.0709C13.9221 15.7459 13.3877 16.2802 12.7127 16.2802H9.53457C9.47832 16.2802 9.45019 16.2521 9.45019 16.1959V14.2552C9.45019 13.9177 9.16894 13.6365 8.80332 13.6365C8.43769 13.6365 8.18457 13.9177 8.18457 14.2552V16.1959C8.18457 16.9271 8.80332 17.5459 9.53457 17.5459H12.7127C14.0908 17.5459 15.1877 16.4209 15.1877 15.0709V3.03335C15.1877 1.65522 14.0627 0.55835 12.7127 0.55835Z"*/ }
{/* fill=""*/} {/* fill=""*/ }
{/* />*/} {/* />*/ }
{/* <path*/} {/* <path*/ }
{/* d="M10.4346 8.60205L7.62207 5.7333C7.36895 5.48018 6.97519 5.48018 6.72207 5.7333C6.46895 5.98643 6.46895 6.38018 6.72207 6.6333L8.46582 8.40518H3.45957C3.12207 8.40518 2.84082 8.68643 2.84082 9.02393C2.84082 9.36143 3.12207 9.64268 3.45957 9.64268H8.49395L6.72207 11.4427C6.46895 11.6958 6.46895 12.0896 6.72207 12.3427C6.83457 12.4552 7.00332 12.5114 7.17207 12.5114C7.34082 12.5114 7.50957 12.4552 7.62207 12.3145L10.4346 9.4458C10.6877 9.24893 10.6877 8.85518 10.4346 8.60205Z"*/} {/* d="M10.4346 8.60205L7.62207 5.7333C7.36895 5.48018 6.97519 5.48018 6.72207 5.7333C6.46895 5.98643 6.46895 6.38018 6.72207 6.6333L8.46582 8.40518H3.45957C3.12207 8.40518 2.84082 8.68643 2.84082 9.02393C2.84082 9.36143 3.12207 9.64268 3.45957 9.64268H8.49395L6.72207 11.4427C6.46895 11.6958 6.46895 12.0896 6.72207 12.3427C6.83457 12.4552 7.00332 12.5114 7.17207 12.5114C7.34082 12.5114 7.50957 12.4552 7.62207 12.3145L10.4346 9.4458C10.6877 9.24893 10.6877 8.85518 10.4346 8.60205Z"*/ }
{/* fill=""*/} {/* fill=""*/ }
{/* />*/} {/* />*/ }
{/* </g>*/} {/* </g>*/ }
{/* <defs>*/} {/* <defs>*/ }
{/* <clipPath id="clip0_130_9814">*/} {/* <clipPath id="clip0_130_9814">*/ }
{/* <rect*/} {/* <rect*/ }
{/* width="18"*/} {/* width="18"*/ }
{/* height="18"*/} {/* height="18"*/ }
{/* fill="white"*/} {/* fill="white"*/ }
{/* transform="translate(0 0.052124)"*/} {/* transform="translate(0 0.052124)"*/ }
{/* />*/} {/* />*/ }
{/* </clipPath>*/} {/* </clipPath>*/ }
{/* </defs>*/} {/* </defs>*/ }
{/* </svg>*/} {/* </svg>*/ }
{/* Authentication*/} {/* Authentication*/ }
{/* <svg*/} {/* <svg*/ }
{/* className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${*/} {/* className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${*/ }
{/* open && 'rotate-180'*/} {/* open && 'rotate-180'*/ }
{/* }`}*/} {/* }`}*/ }
{/* width="20"*/} {/* width="20"*/ }
{/* height="20"*/} {/* height="20"*/ }
{/* viewBox="0 0 20 20"*/} {/* viewBox="0 0 20 20"*/ }
{/* fill="none"*/} {/* fill="none"*/ }
{/* xmlns="http://www.w3.org/2000/svg"*/} {/* xmlns="http://www.w3.org/2000/svg"*/ }
{/* >*/} {/* >*/ }
{/* <path*/} {/* <path*/ }
{/* fillRule="evenodd"*/} {/* fillRule="evenodd"*/ }
{/* clipRule="evenodd"*/} {/* clipRule="evenodd"*/ }
{/* d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"*/} {/* d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"*/ }
{/* fill=""*/} {/* fill=""*/ }
{/* />*/} {/* />*/ }
{/* </svg>*/} {/* </svg>*/ }
{/* </NavLink>*/} {/* </NavLink>*/ }
{/* */}{/*{/* <!-- Dropdown Menu Start --> */} {/* */ }{/*{/* <!-- Dropdown Menu Start --> */ }
{/* <div*/} {/* <div*/ }
{/* className={`translate transform overflow-hidden ${*/} {/* className={`translate transform overflow-hidden ${*/ }
{/* !open && 'hidden'*/} {/* !open && 'hidden'*/ }
{/* }`}*/} {/* }`}*/ }
{/* >*/} {/* >*/ }
{/* <ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">*/} {/* <ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">*/ }
{/* <li>*/} {/* <li>*/ }
{/* <NavLink*/} {/* <NavLink*/ }
{/* to="/auth/signin"*/} {/* to="/auth/signin"*/ }
{/* className={({ isActive }) =>*/} {/* className={({ isActive }) =>*/ }
{/* 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +*/} {/* 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +*/ }
{/* (isActive && '!text-white')*/} {/* (isActive && '!text-white')*/ }
{/* }*/} {/* }*/ }
{/* >*/} {/* >*/ }
{/* Sign In*/} {/* Sign In*/ }
{/* </NavLink>*/} {/* </NavLink>*/ }
{/* </li>*/} {/* </li>*/ }
{/* <li>*/} {/* <li>*/ }
{/* <NavLink*/} {/* <NavLink*/ }
{/* to="/auth/signup"*/} {/* to="/auth/signup"*/ }
{/* className={({ isActive }) =>*/} {/* className={({ isActive }) =>*/ }
{/* 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +*/} {/* 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +*/ }
{/* (isActive && '!text-white')*/} {/* (isActive && '!text-white')*/ }
{/* }*/} {/* }*/ }
{/* >*/} {/* >*/ }
{/* Sign Up*/} {/* Sign Up*/ }
{/* </NavLink>*/} {/* </NavLink>*/ }
{/* </li>*/} {/* </li>*/ }
{/* </ul>*/} {/* </ul>*/ }
{/* </div>*/} {/* </div>*/ }
{/* */}{/*{/* <!-- Dropdown Menu End --> */} {/* */ }{/*{/* <!-- Dropdown Menu End --> */ }
{/* </React.Fragment>*/} {/* </React.Fragment>*/ }
{/* );*/} {/* );*/ }
{/* }}*/} {/* }}*/ }
{/* </SidebarLinkGroup>*/} {/* </SidebarLinkGroup>*/ }
{/* */}{/*{/* <!-- Menu Item Auth Pages --> */} {/* */ }{/*{/* <!-- Menu Item Auth Pages --> */ }
{/* </ul>*/} {/* </ul>*/ }
{/*</div>}*/} {/*</div>}*/ }
</nav> </nav>
{/* <!-- Sidebar Menu --> */} {/* <!-- Sidebar Menu --> */ }
</div> </div>
</aside> </aside>
); );

15
packages/frontend/src/components/mini/sidebar/SidebarLinkGroup.tsx
View File

@ -1,18 +1,21 @@
import { ReactNode, useState } from 'react'; import { ReactNode, useState } from "react";
interface SidebarLinkGroupProps { interface SidebarLinkGroupProps
{
children: (handleClick: () => void, open: boolean) => ReactNode; children: (handleClick: () => void, open: boolean) => ReactNode;
activeCondition: boolean; activeCondition: boolean;
} }
const SidebarLinkGroup = ({ children, activeCondition }: SidebarLinkGroupProps) => { const SidebarLinkGroup = ({ children, activeCondition }: SidebarLinkGroupProps) =>
const [open, setOpen] = useState<boolean>(activeCondition); {
const [ open, setOpen ] = useState<boolean>(activeCondition);
const handleClick = () => { const handleClick = () =>
{
setOpen(!open); setOpen(!open);
}; };
return <li>{children(handleClick, open)}</li>; return <li>{ children(handleClick, open) }</li>;
}; };
export default SidebarLinkGroup; export default SidebarLinkGroup;

34
packages/frontend/src/components/mini/util/CardDataStats.tsx
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from "react";
interface CardDataStatsProps { interface CardDataStatsProps
{
title: string; title: string;
total: string; total: string;
rate?: string; rate?: string;
@ -13,27 +14,28 @@ export const CardDataStats: React.FC<CardDataStatsProps> = ({
total, total,
rate, rate,
levelUp, levelUp,
levelDown levelDown,
}) => { }) =>
{
return ( return (
<div className="rounded-sm border border-stroke bg-white py-6 px-7.5 shadow-default dark:border-strokedark dark:bg-boxdark"> <div className="rounded-sm border border-stroke bg-white py-6 px-7.5 shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="mt-4 flex items-end justify-between"> <div className="mt-4 flex items-end justify-between">
<div> <div>
<h4 className="text-title-md font-bold text-black dark:text-white"> <h4 className="text-title-md font-bold text-black dark:text-white">
{total} { total }
</h4> </h4>
<span className="text-sm font-medium">{title}</span> <span className="text-sm font-medium">{ title }</span>
</div> </div>
{rate && <span { rate && <span
className={`flex items-center gap-1 text-sm font-medium ${ className={ `flex items-center gap-1 text-sm font-medium ${
levelUp && 'text-meta-3' levelUp && "text-meta-3"
} ${levelDown && 'text-meta-5'} `} } ${ levelDown && "text-meta-5" } ` }
> >
{rate} { rate }
{levelUp && ( { levelUp && (
<svg <svg
className="fill-meta-3" className="fill-meta-3"
width="10" width="10"
@ -47,8 +49,8 @@ export const CardDataStats: React.FC<CardDataStatsProps> = ({
fill="" fill=""
/> />
</svg> </svg>
)} ) }
{levelDown && ( { levelDown && (
<svg <svg
className="fill-meta-5" className="fill-meta-5"
width="10" width="10"
@ -62,8 +64,8 @@ export const CardDataStats: React.FC<CardDataStatsProps> = ({
fill="" fill=""
/> />
</svg> </svg>
)} ) }
</span>} </span> }
</div> </div>
</div> </div>
); );

45
packages/frontend/src/components/mini/util/PageMeta.tsx
View File

@ -1,29 +1,30 @@
import { Helmet } from 'react-helmet-async'; import { Helmet } from "react-helmet-async";
// https://dev.to/facubotta/meta-data-in-react-1p93 // https://dev.to/facubotta/meta-data-in-react-1p93
export const PageMeta = ({ title = '', description = '', image = '', name = '' }) => { export const PageMeta = ({ title = "", description = "", image = "", name = "" }) =>
{
return ( return (
<Helmet> <Helmet>
{ /* Standard metadata tags */} { /* Standard metadata tags */ }
<title>{title}</title> <title>{ title }</title>
<link rel="canonical" href={window.location.href} /> <link rel="canonical" href={ window.location.href }/>
<meta name="description" content={description} /> <meta name="description" content={ description }/>
{ /* Open Graph tags (OG) */} { /* Open Graph tags (OG) */ }
<meta property="og:url" content={window.location.href} /> <meta property="og:url" content={ window.location.href }/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website"/>
<meta property="og:title" content={title} /> <meta property="og:title" content={ title }/>
<meta property="og:description" content={description} /> <meta property="og:description" content={ description }/>
{/* OG image tags */} {/* OG image tags */ }
<meta property="og:image" content={image} /> <meta property="og:image" content={ image }/>
<meta property="og:image:secure_url" content={image} /> <meta property="og:image:secure_url" content={ image }/>
<meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:type" content="image/jpeg"/>
<meta property="og:image:width" content="200" /> <meta property="og:image:width" content="200"/>
<meta property="og:image:alt" content={`Image of ${title} site`} /> <meta property="og:image:alt" content={ `Image of ${ title } site` }/>
{ /* Twitter tags */} { /* Twitter tags */ }
{name && <meta name="twitter:creator" content={name} />} { name && <meta name="twitter:creator" content={ name }/> }
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content={title} /> <meta name="twitter:title" content={ title }/>
<meta name="twitter:description" content={description} /> <meta name="twitter:description" content={ description }/>
</Helmet> </Helmet>
); );
}; };

13
packages/frontend/src/components/mini/util/Search.tsx
View File

@ -1,10 +1,11 @@
import { ChangeEventHandler } from 'react'; import { ChangeEventHandler } from "react";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
export const Search = ({ searchItem, handleInputChange }: { export const Search = ({ searchItem, handleInputChange }: {
searchItem: string; searchItem: string;
handleInputChange: ChangeEventHandler handleInputChange: ChangeEventHandler
}) => { }) =>
{
const { t } = useTranslation(); const { t } = useTranslation();
return <div return <div
className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8"> className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8">
@ -12,9 +13,9 @@ export const Search = ({ searchItem, handleInputChange }: {
<input <input
className="w-full rounded border border-stroke bg-gray py-3 pl-5 pr-5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary" className="w-full rounded border border-stroke bg-gray py-3 pl-5 pr-5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
type="text" type="text"
onChange={handleInputChange} onChange={ handleInputChange }
value={searchItem} value={ searchItem }
placeholder={t('logs.search')} placeholder={ t("logs.search") }
/> />
</div> </div>
</div>; </div>;

55
packages/frontend/src/components/pages/leaderboard/StationTable.tsx
View File

@ -1,70 +1,73 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { TLeaderboardRecord } from '../../../types/leaderboard.ts'; import { TLeaderboardRecord } from "../../../types/leaderboard.ts";
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx'; import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { WarningAlert } from '../../mini/alerts/Warning.tsx'; import { WarningAlert } from "../../mini/alerts/Warning.tsx";
import { formatTime } from "../../../util/time.ts";
import { FaCheck } from 'react-icons/fa6';
export const StationTable = ({ stations, error }: { stations: TLeaderboardRecord[], error: number }) => { export const StationTable = ({ stations, error }: { stations: TLeaderboardRecord[], error: number }) =>
{
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<> <>
{error === 2 && <WarningAlert title={t('content_loader.notfound.header')} { error === 2 && <WarningAlert title={ t("content_loader.notfound.header") }
description={t('content_loader.notfound.description')} />} description={ t("content_loader.notfound.description") }/> }
{error === 0 && <ContentLoader />} { error === 0 && <ContentLoader/> }
{error === 1 && <div { error === 1 && <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"> className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="grid grid-cols-2 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-3"> <div className="grid grid-cols-2 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-3">
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('leaderboard.user')} { t("leaderboard.user") }
</h5> </h5>
</div> </div>
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('leaderboard.time')} { t("leaderboard.time") }
</h5> </h5>
</div> </div>
<div className="hidden p-2.5 text-center sm:block xl:p-5"> <div className="hidden p-2.5 text-center sm:block xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('leaderboard.actions')} { t("leaderboard.actions") }
</h5> </h5>
</div> </div>
</div> </div>
{stations.map((station, key) => ( { stations.map((station, key) => (
<div <div
className={`grid grid-cols-2 sm:grid-cols-3 ${stations.length === (key + 1) // todo: ... className={ `grid grid-cols-2 sm:grid-cols-3 ${ stations.length === (key + 1) // todo: ...
? '' ? ""
: 'border-b border-stroke dark:border-strokedark' : "border-b border-stroke dark:border-strokedark"
}`} }` }
key={station.id} key={ station.id }
> >
<div className="flex justify-center items-center gap-3 p-5 lg:p-5"> <div className="flex justify-center items-center gap-3 p-5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all"> <p className="text-black dark:text-white sm:block break-all">
<Link to={'/profile/' + station.steam} <Link to={ "/profile/" + station.steam }
className="color-orchid">{station.steamName}</Link> className="color-orchid">{ station.steamName }</Link> { station.verified && <FaCheck className={ "inline text-meta-3 ml-1" }/> }
</p> </p>
</div> </div>
<div className="flex items-center justify-center p-2.5 lg:p-5"> <div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{Math.floor(station.dispatcherTime / 3600000)}h</p> <p className="text-meta-3">{ formatTime(station.dispatcherTime) }</p>
</div> </div>
<div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5"> <div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5">
<Link <Link
to={'/profile/' + station.steam} to={ "/profile/" + station.steam }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
> >
{t('leaderboard.profile')} { t("leaderboard.profile") }
</Link> </Link>
</div> </div>
</div> </div>
))} )) }
</div> </div>
</div>} </div> }
</> </>
); );

63
packages/frontend/src/components/pages/leaderboard/TrainTable.tsx
View File

@ -1,88 +1,91 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { TLeaderboardRecord } from '../../../types/leaderboard.ts'; import { TLeaderboardRecord } from "../../../types/leaderboard.ts";
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx'; import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { WarningAlert } from '../../mini/alerts/Warning.tsx'; import { WarningAlert } from "../../mini/alerts/Warning.tsx";
import { formatTime } from "../../../util/time.ts";
import { FaCheck } from 'react-icons/fa6';
export const TrainTable = ({ trains, error }: { trains: TLeaderboardRecord[], error: number }) => { export const TrainTable = ({ trains, error }: { trains: TLeaderboardRecord[], error: number }) =>
{
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<> <>
{error === 2 && <WarningAlert title={t('content_loader.notfound.header')} { error === 2 && <WarningAlert title={ t("content_loader.notfound.header") }
description={t('content_loader.notfound.description')} />} description={ t("content_loader.notfound.description") }/> }
{error === 0 && <ContentLoader />} { error === 0 && <ContentLoader/> }
{error === 1 && <div { error === 1 && <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"> className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="grid grid-cols-4 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-5"> <div className="grid grid-cols-4 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-5">
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('leaderboard.user')} { t("leaderboard.user") }
</h5> </h5>
</div> </div>
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('leaderboard.points')} { t("leaderboard.points") }
</h5> </h5>
</div> </div>
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('leaderboard.distance')} { t("leaderboard.distance") }
</h5> </h5>
</div> </div>
<div className="p-2.5 text-center sm:block xl:p-5"> <div className="p-2.5 text-center sm:block xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('leaderboard.time')} { t("leaderboard.time") }
</h5> </h5>
</div> </div>
<div className="hidden p-2.5 text-center sm:block xl:p-5"> <div className="hidden p-2.5 text-center sm:block xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('leaderboard.actions')} { t("leaderboard.actions") }
</h5> </h5>
</div> </div>
</div> </div>
{trains.map((train, key) => ( { trains.map((train, key) => (
<div <div
className={`grid grid-cols-4 sm:grid-cols-5 ${trains.length === (key + 1) className={ `grid grid-cols-4 sm:grid-cols-5 ${ trains.length === (key + 1)
? '' ? ""
: 'border-b border-stroke dark:border-strokedark' : "border-b border-stroke dark:border-strokedark"
}`} }` }
key={train.id} key={ train.id }
> >
<div className="flex items-center justify-center gap-3 p-5 lg:p-5"> <div className="flex items-center justify-center gap-3 p-5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all"> <p className="text-black dark:text-white sm:block break-all">
<Link to={'/profile/' + train.steam} <Link to={ "/profile/" + train.steam }
className="color-orchid">{train.steamName}</Link> className="color-orchid">{ train.steamName }</Link> { train.verified && <FaCheck className={ "inline text-meta-3 ml-1" }/> }
</p> </p>
</div> </div>
<div className="flex items-center justify-center p-2.5 lg:p-5"> <div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6">{train.trainPoints}</p> <p className="text-meta-6">{ train.trainPoints }</p>
</div> </div>
<div className="flex items-center justify-center p-2.5 lg:p-5"> <div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-5">{(train.trainDistance / 1000).toFixed(2)}km</p> <p className="text-meta-5">{ (train.trainDistance / 1000).toFixed(2) }km</p>
</div> </div>
<div className="flex items-center justify-center p-2.5 lg:p-5"> <div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{Math.floor(train.trainTime / 3600000)}h</p> <p className="text-meta-3">{ formatTime(train.trainTime) }</p>
</div> </div>
<div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5"> <div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5">
<Link <Link
to={'/profile/' + train.steam} to={ "/profile/" + train.steam }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
> >
{t('leaderboard.profile')} { t("leaderboard.profile") }
</Link> </Link>
</div> </div>
</div> </div>
))} )) }
</div> </div>
</div>} </div> }
</> </>
); );

62
packages/frontend/src/components/pages/log/StationLog.tsx
View File

@ -1,21 +1,26 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { TLogStationData } from '../../../types/log.ts'; import { TLogStationData } from "../../../types/log.ts";
import dayjs from 'dayjs'; import dayjs from "dayjs";
import { toast } from 'react-toastify'; import { toast } from "react-toastify";
import { Link } from "react-router-dom";
import { FaCheck } from 'react-icons/fa6';
export const StationLog = ({ data }: { data: TLogStationData }) => { export const StationLog = ({ data }: { data: TLogStationData }) =>
{
const { t } = useTranslation(); const { t } = useTranslation();
const copyLink = () => { const copyLink = () =>
{
void navigator.clipboard.writeText(location.href); void navigator.clipboard.writeText(location.href);
toast.success(t('log.toasts.copied')); toast.success(t("log.toasts.copied"));
}; };
const report = () => { const report = () =>
toast.info(t('log.toasts.report'), { {
autoClose: 5000 toast.info(t("log.toasts.report"), {
autoClose: 5000,
}); });
void navigator.clipboard.writeText(`;user: \`${data.userUsername}\`\n;steam: \`${data.userSteamId}\`\n;left: <t:${data.leftDate}>${data.joinedDate ? `\n;joined: <t:${data.joinedDate}>` : ''}\n;station: \`${data.stationName}\`\n;link: ${location.href}\n\n`); void navigator.clipboard.writeText(`;user: \`${ data.userUsername }\`\n;steam: \`${ data.userSteamId }\`\n;left: <t:${ Math.floor(data.leftDate / 1000) }>${ data.joinedDate ? `\n;joined: <t:${ Math.floor(data.joinedDate / 1000) }>` : "" }\n;station: \`${ data.stationName }\`\n;link: ${ location.href }\n\n`);
}; };
return <div return <div
@ -24,12 +29,12 @@ export const StationLog = ({ data }: { data: TLogStationData }) => {
<div <div
className="mx-auto w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3"> className="mx-auto w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3">
<div className="relative drop-shadow-2"> <div className="relative drop-shadow-2">
<img className="rounded-full" src={data.userAvatar} alt="profile" /> <img className="rounded-full" src={ data.userAvatar } alt="profile"/>
</div> </div>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white"> <h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
{data.userUsername} { data.userUsername }{ data.verified && <FaCheck className={ "inline text-meta-3 ml-1" }/> }
</h3> </h3>
</div> </div>
</div> </div>
@ -37,31 +42,38 @@ export const StationLog = ({ data }: { data: TLogStationData }) => {
<div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5"> <div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5">
<div className="flex flex-col sm:flex-row sm:flex-wrap sm:justify-end"> <div className="flex flex-col sm:flex-row sm:flex-wrap sm:justify-end">
<div className="flex flex-col"> <div className="flex flex-col">
<h1 className="text-xl text-black dark:text-white pb-5">{t('log.station.header')}</h1> <h1 className="text-xl text-black dark:text-white pb-5">{ t("log.station.header") }</h1>
<p>{t('log.station.server', { server: data.server.toUpperCase() })}</p> <p>{ t("log.station.server", { server: data.server.toUpperCase() }) }</p>
<p>{t('log.station.station', { name: data.stationName, short: data.stationShort })}</p> <p>{ t("log.station.station", { name: data.stationName, short: data.stationShort }) }</p>
{data.joinedDate && { data.joinedDate &&
<p>{t('log.station.joined', { date: dayjs(data.joinedDate).format('DD/MM/YYYY HH:mm') })}</p>} <p>{ t("log.station.joined", { date: dayjs(data.joinedDate).format("DD/MM/YYYY HH:mm") }) }</p> }
<p>{t('log.station.left', { date: dayjs(data.leftDate).format('DD/MM/YYYY HH:mm') })}</p> <p>{ t("log.station.left", { date: dayjs(data.leftDate).format("DD/MM/YYYY HH:mm") }) }</p>
{data.joinedDate && { data.joinedDate &&
<p>{t('log.station.spent', { date: dayjs.duration(data.leftDate - data.joinedDate).format('H[h] m[m]') })}</p>} <p>{ t("log.station.spent", { date: dayjs.duration(data.leftDate - data.joinedDate).format("H[h] m[m]") }) }</p> }
</div> </div>
<div className="flex flex-col gap-5 mt-5 sm:mt-0 sm:ml-auto"> <div className="flex flex-col gap-5 mt-5 sm:mt-0 sm:ml-auto">
<a <a
onClick={report} onClick={ report }
className="cursor-pointer inline-flex items-center justify-center rounded-md bg-meta-7 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10" className="cursor-pointer inline-flex items-center justify-center rounded-md bg-meta-7 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
> >
{t('log.buttons.report')} { t("log.buttons.report") }
</a> </a>
<a <a
onClick={copyLink} onClick={ copyLink }
className="cursor-pointer inline-flex items-center justify-center rounded-md bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10" className="cursor-pointer inline-flex items-center justify-center rounded-md bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
> >
{t('log.buttons.copy')} { t("log.buttons.copy") }
</a> </a>
<Link
to={"/profile/" + data.userSteamId}
className="inline-flex items-center justify-center rounded-md bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
{ t("log.buttons.profile") }
</Link>
</div> </div>
</div> </div>
</div> </div>

69
packages/frontend/src/components/pages/log/TrainLog.tsx
View File

@ -1,21 +1,27 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { TLogTrainData } from '../../../types/log.ts'; import { TLogTrainData } from "../../../types/log.ts";
import dayjs from 'dayjs'; import dayjs from "dayjs";
import { toast } from 'react-toastify'; import { toast } from "react-toastify";
import { Link } from "react-router-dom";
import { FaCheck } from 'react-icons/fa6';
export const TrainLog = ({ data }: { data: TLogTrainData }) => {
export const TrainLog = ({ data }: { data: TLogTrainData }) =>
{
const { t } = useTranslation(); const { t } = useTranslation();
const copyLink = () => { const copyLink = () =>
{
void navigator.clipboard.writeText(location.href); void navigator.clipboard.writeText(location.href);
toast.success(t('log.toasts.copied')); toast.success(t("log.toasts.copied"));
}; };
const report = () => { const report = () =>
toast.info(t('log.toasts.report'), { {
autoClose: 5000 toast.info(t("log.toasts.report"), {
autoClose: 5000,
}); });
void navigator.clipboard.writeText(`;user: \`${data.userUsername}\`\n;steam: \`${data.userSteamId}\`\n;left: <t:${data.leftDate}>${data.joinedDate ? `\n;joined: <t:${data.joinedDate}>` : ''}\n;train: \`${data.trainNumber}\`\n;link: ${location.href}\n\n`); void navigator.clipboard.writeText(`;user: \`${ data.userUsername }\`\n;steam: \`${ data.userSteamId }\`\n;left: <t:${ Math.floor(data.leftDate / 1000) }>${ data.joinedDate ? `\n;joined: <t:${ Math.floor(data.joinedDate / 1000) }>` : "" }\n;train: \`${ data.trainNumber }\`\n;link: ${ location.href }\n\n`);
}; };
return <div return <div
@ -24,12 +30,12 @@ export const TrainLog = ({ data }: { data: TLogTrainData }) => {
<div <div
className="mx-auto w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3"> className="mx-auto w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3">
<div className="relative drop-shadow-2"> <div className="relative drop-shadow-2">
<img className="rounded-full" src={data.userAvatar} alt="profile" /> <img className="rounded-full" src={ data.userAvatar } alt="profile"/>
</div> </div>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white"> <h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
{data.userUsername} { data.userUsername } { data.verified && <FaCheck className={ "inline text-meta-3 ml-1" }/> }
</h3> </h3>
</div> </div>
</div> </div>
@ -37,35 +43,42 @@ export const TrainLog = ({ data }: { data: TLogTrainData }) => {
<div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5"> <div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5">
<div className="flex flex-col sm:flex-row sm:flex-wrap sm:justify-end"> <div className="flex flex-col sm:flex-row sm:flex-wrap sm:justify-end">
<div className="flex flex-col"> <div className="flex flex-col">
<h1 className="text-xl text-black dark:text-white pb-5">{t('log.train.header')}</h1> <h1 className="text-xl text-black dark:text-white pb-5">{ t("log.train.header") }</h1>
<p>{t('log.train.server', { server: data.server.toUpperCase() })}</p> <p>{ t("log.train.server", { server: data.server.toUpperCase() }) }</p>
<p>{t('log.train.train', { name: data.trainName, number: data.trainNumber })}</p> <p>{ t("log.train.train", { name: data.trainName, number: data.trainNumber }) }</p>
{(data.distance || data.distance === 0) && { (data.distance || data.distance === 0) &&
<p>{t('log.train.distance', { distance: (data.distance / 1000).toFixed(2) })}</p>} <p>{ t("log.train.distance", { distance: (data.distance / 1000).toFixed(2) }) }</p> }
{(data.points || data.points === 0) && <p>{t('log.train.points', { points: data.points })}</p>} { (data.points || data.points === 0) && <p>{ t("log.train.points", { points: data.points }) }</p> }
{data.joinedDate && { data.joinedDate &&
<p>{t('log.train.joined', { date: dayjs(data.joinedDate).format('DD/MM/YYYY HH:mm') })}</p>} <p>{ t("log.train.joined", { date: dayjs(data.joinedDate).format("DD/MM/YYYY HH:mm") }) }</p> }
<p>{t('log.train.left', { date: dayjs(data.leftDate).format('DD/MM/YYYY HH:mm') })}</p> <p>{ t("log.train.left", { date: dayjs(data.leftDate).format("DD/MM/YYYY HH:mm") }) }</p>
{data.joinedDate && { data.joinedDate &&
<p>{t('log.train.spent', { date: dayjs.duration(data.leftDate - data.joinedDate).format('H[h] m[m]') })}</p>} <p>{ t("log.train.spent", { date: dayjs.duration(data.leftDate - data.joinedDate).format("H[h] m[m]") }) }</p> }
</div> </div>
<div className="flex flex-col gap-5 mt-5 sm:mt-0 sm:ml-auto"> <div className="flex flex-col gap-5 mt-5 sm:mt-0 sm:ml-auto">
<a <a
onClick={report} onClick={ report }
className="cursor-pointer inline-flex items-center justify-center rounded-md bg-meta-7 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10" className="cursor-pointer inline-flex items-center justify-center rounded-md bg-meta-7 py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
> >
{t('log.buttons.report')} { t("log.buttons.report") }
</a> </a>
<a <a
onClick={copyLink} onClick={ copyLink }
className="cursor-pointer inline-flex items-center justify-center rounded-md bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10" className="cursor-pointer inline-flex items-center justify-center rounded-md bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
> >
{t('log.buttons.copy')} { t("log.buttons.copy") }
</a> </a>
<Link
to={ "/profile/" + data.userSteamId }
className="inline-flex items-center justify-center rounded-md bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
>
{ t("log.buttons.profile") }
</Link>
</div> </div>
</div> </div>
</div> </div>

64
packages/frontend/src/components/pages/logs/StationTable.tsx
View File

@ -1,91 +1,93 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import dayjs from 'dayjs'; import dayjs from "dayjs";
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx'; import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { TStationRecord } from '../../../types/station.ts'; import { TStationRecord } from "../../../types/station.ts";
import { WarningAlert } from '../../mini/alerts/Warning.tsx'; import { WarningAlert } from "../../mini/alerts/Warning.tsx";
import { FaCheck } from 'react-icons/fa6';
// setSearchItem: Dispatch<SetStateAction<string>> // setSearchItem: Dispatch<SetStateAction<string>>
export const StationTable = ({ stations, error }: { export const StationTable = ({ stations, error }: {
stations: TStationRecord[], error: number stations: TStationRecord[], error: number
}) => { }) =>
{
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<> <>
{error === 2 && <WarningAlert title={t('content_loader.notfound.header')} { error === 2 && <WarningAlert title={ t("content_loader.notfound.header") }
description={t('content_loader.notfound.description')} />} description={ t("content_loader.notfound.description") }/> }
{error === 0 && <ContentLoader />} { error === 0 && <ContentLoader/> }
{error === 1 && <div { error === 1 && <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"> className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-4"> <div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-4">
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('logs.user')} { t("logs.user") }
</h5> </h5>
</div> </div>
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('logs.station')} { t("logs.station") }
</h5> </h5>
</div> </div>
<div className="hidden sm:block p-2.5 text-center xl:p-5"> <div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('logs.time')} { t("logs.time") }
</h5> </h5>
</div> </div>
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('logs.actions')} { t("logs.actions") }
</h5> </h5>
</div> </div>
</div> </div>
{stations.map((station, key) => ( { stations.map((station, key) => (
<div <div
className={`grid grid-cols-3 sm:grid-cols-4 ${stations.length === (key + 1) className={ `grid grid-cols-3 sm:grid-cols-4 ${ stations.length === (key + 1)
? '' ? ""
: 'border-b border-stroke dark:border-strokedark' : "border-b border-stroke dark:border-strokedark"
}`} }` }
key={station.id} key={ station.id }
> >
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5"> <div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all"> <p className="text-black dark:text-white sm:block break-all">
<Link to={'/profile/' + station.userSteamId} <Link to={ "/profile/" + station.userSteamId }
className="color-orchid">{station.userUsername}</Link> className="color-orchid">{ station.userUsername }</Link> { station.verified && <FaCheck className={ "inline text-meta-3 ml-1" }/> }
</p> </p>
</div> </div>
<div className="flex items-center justify-center p-2.5 lg:p-5"> <div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6 sm:block break-all">{station.server.toUpperCase()} - {station.stationName ?? '--'}</p> <p className="text-meta-6 sm:block break-all">{ station.server.toUpperCase() } - { station.stationName ?? "--" }</p>
</div> </div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5"> <div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{dayjs(station.leftDate).format('HH:mm DD/MM/YYYY')}</p> <p className="text-meta-3">{ dayjs(station.leftDate).format("HH:mm DD/MM/YYYY") }</p>
</div> </div>
<div <div
className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap "> className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap ">
<Link <Link
to={'/profile/' + station.userSteamId} to={ "/profile/" + station.userSteamId }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
> >
{t('logs.profile')} { t("logs.profile") }
</Link> </Link>
<Link <Link
to={'/log/' + station.id} to={ "/log/" + station.id }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
> >
{t('logs.record')} { t("logs.record") }
</Link> </Link>
</div> </div>
</div> </div>
))} )) }
</div> </div>
</div>} </div> }
</> </>
); );
}; };

73
packages/frontend/src/components/pages/logs/TrainTable.tsx
View File

@ -1,108 +1,109 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { TTrainRecord } from '../../../types/train.ts'; import { TTrainRecord } from "../../../types/train.ts";
import dayjs from 'dayjs'; import dayjs from "dayjs";
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx'; import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { WarningAlert } from '../../mini/alerts/Warning.tsx'; import { WarningAlert } from "../../mini/alerts/Warning.tsx";
import { FaCheck } from 'react-icons/fa6';
// setSearchItem: Dispatch<SetStateAction<string>> // setSearchItem: Dispatch<SetStateAction<string>>
export const TrainTable = ({ trains, error }: { export const TrainTable = ({ trains, error }: {
trains: TTrainRecord[], error: number trains: TTrainRecord[], error: number
}) => { }) =>
{
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<> <>
{error === 2 && <WarningAlert title={t('content_loader.notfound.header')} { error === 2 && <WarningAlert title={ t("content_loader.notfound.header") }
description={t('content_loader.notfound.description')} />} description={ t("content_loader.notfound.description") }/> }
{error === 0 && <ContentLoader />} { error === 0 && <ContentLoader/> }
{error === 1 && <div { error === 1 && <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"> className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-6"> <div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-6">
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('logs.user')} { t("logs.user") }
</h5> </h5>
</div> </div>
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('logs.train')} { t("logs.train") }
</h5> </h5>
</div> </div>
<div className="hidden sm:block p-2.5 text-center xl:p-5"> <div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('logs.points')} { t("logs.points") }
</h5> </h5>
</div> </div>
<div className="hidden sm:block p-2.5 text-center xl:p-5"> <div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('logs.distance')} { t("logs.distance") }
</h5> </h5>
</div> </div>
<div className="hidden sm:block p-2.5 text-center xl:p-5"> <div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('logs.time')} { t("logs.time") }
</h5> </h5>
</div> </div>
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('logs.actions')} { t("logs.actions") }
</h5> </h5>
</div> </div>
</div> </div>
{trains.map((train, key) => ( { trains.map((train, key) => (
<div <div
className={`grid grid-cols-3 sm:grid-cols-6 ${trains.length === (key + 1) className={ `grid grid-cols-3 sm:grid-cols-6 ${ trains.length === (key + 1)
? '' ? ""
: 'border-b border-stroke dark:border-strokedark' : "border-b border-stroke dark:border-strokedark"
}`} }` }
key={train.id} key={ train.id }
> >
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5"> <div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all"> <p className="text-black dark:text-white sm:block break-all">
<Link to={'/profile/' + train.userSteamId} <Link to={ "/profile/" + train.userSteamId }
className="color-orchid">{train.userUsername}</Link> className="color-orchid">{ train.userUsername }</Link> { train.verified && <FaCheck className={ "inline text-meta-3 ml-1" }/> }
</p> </p>
</div> </div>
<div className="flex items-center justify-center p-2.5 lg:p-5"> <div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6 sm:block break-all">{train.server.toUpperCase()} - {train.trainNumber ?? '--'}</p> <p className="text-meta-6 sm:block break-all">{ train.server.toUpperCase() } - { train.trainNumber ?? "--" }</p>
</div> </div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5"> <div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6">{train.distance ? train.points : '--'}</p> <p className="text-meta-6">{ train.distance ? train.points : "--" }</p>
</div> </div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5"> <div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-5">{train.distance ? `${(train.distance / 1000).toFixed(2)}km` : '--'}</p> <p className="text-meta-5">{ train.distance ? `${ (train.distance / 1000).toFixed(2) }km` : "--" }</p>
</div> </div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5"> <div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{dayjs(train.leftDate).format('HH:mm DD/MM/YYYY')}</p> <p className="text-meta-3">{ dayjs(train.leftDate).format("HH:mm DD/MM/YYYY") }</p>
</div> </div>
<div <div
className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap "> className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap ">
<Link <Link
to={'/profile/' + train.userSteamId} to={ "/profile/" + train.userSteamId }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
> >
{t('logs.profile')} { t("logs.profile") }
</Link> </Link>
<Link <Link
to={'/log/' + train.id} to={ "/log/" + train.id }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
> >
{t('logs.record')} { t("logs.record") }
</Link> </Link>
</div> </div>
</div> </div>
))} )) }
</div> </div>
</div>} </div> }
</> </>
); );
}; };

103
packages/frontend/src/components/pages/profile/Profile.tsx
View File

@ -1,12 +1,15 @@
import { useState } from 'react'; import { useState } from "react";
import { TProfileData } from '../../../types/profile.ts'; import { TProfileData } from "../../../types/profile.ts";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { ArrowIcon } from '../../mini/icons/ArrowIcon.tsx'; import { ArrowIcon } from "../../mini/icons/ArrowIcon.tsx";
import { formatTime } from "../../../util/time.ts";
import { FaCheck } from 'react-icons/fa6';
export const ProfileCard = ({ data }: { data: TProfileData }) => { export const ProfileCard = ({ data }: { data: TProfileData }) =>
{
const [showTrains, setShowTrains] = useState(false); const [ showTrains, setShowTrains ] = useState(false);
const [showStations, setShowStations] = useState(false); const [ showStations, setShowStations ] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
return <div return <div
@ -15,12 +18,12 @@ export const ProfileCard = ({ data }: { data: TProfileData }) => {
<div <div
className="mx-auto w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3"> className="mx-auto w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3">
<div className="relative drop-shadow-2"> <div className="relative drop-shadow-2">
<img className="rounded-full" src={data.steam.avatarfull} alt="profile" /> <img className="rounded-full" src={ data.steam.avatarfull } alt="profile"/>
</div> </div>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white"> <h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
{data.steam.personname} { data.steam.personname } { data.player.verified && <FaCheck className={ "inline text-meta-3 ml-1" }/> }
</h3> </h3>
<div <div
@ -28,124 +31,126 @@ export const ProfileCard = ({ data }: { data: TProfileData }) => {
<div <div
className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row"> className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<span className="font-semibold text-black dark:text-white"> <span className="font-semibold text-black dark:text-white">
{Math.floor(data.player.trainDistance / 1000)}km { Math.floor(data.player.trainDistance / 1000) }km
</span> </span>
<span className="text-sm text-wrap">{t('profile.stats.distance')}</span> <span className="text-sm text-wrap">{ t("profile.stats.distance") }</span>
</div> </div>
<div <div
className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row"> className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<span className="font-semibold text-black dark:text-white"> <span className="font-semibold text-black dark:text-white">
{Math.floor(data.player.dispatcherTime / 3600000)}h { formatTime(data.player.dispatcherTime) }
</span> </span>
<span className="text-sm text-wrap">{t('profile.stats.time')}</span> <span className="text-sm text-wrap">{ t("profile.stats.time") }</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{Object.keys(data.player.trainStats || {}).length > 0 && { Object.keys(data.player.trainStats || {}).length > 0 &&
<div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5"> <div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5">
<div className="group relative cursor-pointer" onClick={() => setShowTrains(val => !val)}> <div className="group relative cursor-pointer" onClick={ () => setShowTrains(val => !val) }>
<h1 className="text-xl text-black dark:text-white pb-5">{t('profile.trains.header')}</h1> <h1 className="text-xl text-black dark:text-white pb-5">{ t("profile.trains.header") }</h1>
<ArrowIcon rotated={showTrains} /> <ArrowIcon rotated={ showTrains }/>
</div> </div>
{showTrains && { showTrains &&
<div className="flex flex-col rounded-sm border border-stroke dark:border-strokedark"> <div className="flex flex-col rounded-sm border border-stroke dark:border-strokedark">
<div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-4"> <div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-4">
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('profile.trains.train')} { t("profile.trains.train") }
</h5> </h5>
</div> </div>
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('profile.trains.distance')} { t("profile.trains.distance") }
</h5> </h5>
</div> </div>
<div className="hidden sm:block p-2.5 text-center xl:p-5"> <div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('profile.trains.points')} { t("profile.trains.points") }
</h5> </h5>
</div> </div>
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('profile.trains.time')} { t("profile.trains.time") }
</h5> </h5>
</div> </div>
</div> </div>
{Object.keys(data.player.trainStats).map(trainName => { { Object.keys(data.player.trainStats).map(trainName =>
const train = data.player.trainStats[trainName]; {
const train = data.player.trainStats[ trainName ];
return <div return <div
className={`grid grid-cols-3 sm:grid-cols-4 border-t border-t-stroke dark:border-t-strokedark`} className={ `grid grid-cols-3 sm:grid-cols-4 border-t border-t-stroke dark:border-t-strokedark` }
key={1} key={ 1 }
> >
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5"> <div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all"> <p className="text-black dark:text-white sm:block break-all">
{trainName} { trainName }
</p> </p>
</div> </div>
<div className="flex items-center justify-center p-2.5 lg:p-5"> <div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6 sm:block break-all">{Math.floor(train.distance / 1000)}km</p> <p className="text-meta-6 sm:block break-all">{ Math.floor(train.distance / 1000) }km</p>
</div> </div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5"> <div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{train.score}</p> <p className="text-meta-3">{ train.score }</p>
</div> </div>
<div className="flex items-center justify-center p-2.5 lg:p-5"> <div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{Math.floor(train.time / 3600000)}h</p> <p className="text-meta-3">{ formatTime(train.time) }</p>
</div> </div>
</div>; </div>;
})} }) }
</div>} </div> }
</div>} </div> }
{Object.keys(data.player.dispatcherStats || {}).length > 0 && { Object.keys(data.player.dispatcherStats || {}).length > 0 &&
<div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5"> <div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5">
<div className="group relative cursor-pointer" onClick={() => setShowStations(val => !val)}> <div className="group relative cursor-pointer" onClick={ () => setShowStations(val => !val) }>
<h1 className="text-xl text-black dark:text-white pb-5">{t('profile.stations.header')}</h1> <h1 className="text-xl text-black dark:text-white pb-5">{ t("profile.stations.header") }</h1>
<ArrowIcon rotated={showTrains} /> <ArrowIcon rotated={ showTrains }/>
</div> </div>
{showStations && { showStations &&
<div className="flex flex-col rounded-sm border border-stroke dark:border-strokedark"> <div className="flex flex-col rounded-sm border border-stroke dark:border-strokedark">
<div className="grid grid-cols-2 rounded-sm bg-gray-2 dark:bg-meta-4"> <div className="grid grid-cols-2 rounded-sm bg-gray-2 dark:bg-meta-4">
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('profile.stations.station')} { t("profile.stations.station") }
</h5> </h5>
</div> </div>
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
{t('profile.stations.time')} { t("profile.stations.time") }
</h5> </h5>
</div> </div>
</div> </div>
{Object.keys(data.player.dispatcherStats).map(stationName => { { Object.keys(data.player.dispatcherStats).map(stationName =>
const station = data.player.dispatcherStats[stationName]; {
const station = data.player.dispatcherStats[ stationName ];
return <div return <div
className={`grid grid-cols-2 border-t border-t-stroke dark:border-t-strokedark`} className={ `grid grid-cols-2 border-t border-t-stroke dark:border-t-strokedark` }
key={1} key={ 1 }
> >
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5"> <div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all"> <p className="text-black dark:text-white sm:block break-all">
{stationName} { stationName }
</p> </p>
</div> </div>
<div className="flex items-center justify-center p-2.5 lg:p-5"> <div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{Math.floor(station.time / 3600000)}h</p> <p className="text-meta-3">{formatTime(station.time) }</p>
</div> </div>
</div>; </div>;
})} }) }
</div>} </div> }
</div>} </div> }
</div>; </div>;
}; };

4
packages/frontend/src/hooks/useColorMode.tsx
View File

@ -11,8 +11,8 @@ const useColorMode = () =>
const bodyClass = window.document.body.classList; const bodyClass = window.document.body.classList;
colorMode === "dark" colorMode === "dark"
? bodyClass.add(className) ? bodyClass.add(className)
: bodyClass.remove(className); : bodyClass.remove(className);
}, [ colorMode ]); }, [ colorMode ]);
return [ colorMode, setColorMode ]; return [ colorMode, setColorMode ];

10
packages/frontend/src/hooks/useLocalStorage.tsx
View File

@ -3,8 +3,8 @@ import { useEffect, useState } from "react";
type SetValue<T> = T | ((val: T) => T); type SetValue<T> = T | ((val: T) => T);
function useLocalStorage<T>( function useLocalStorage<T>(
key: string, key: string,
initialValue: T, initialValue: T,
): [ T, (value: SetValue<T>) => void ] ): [ T, (value: SetValue<T>) => void ]
{ {
const [ storedValue, setStoredValue ] = useState(() => const [ storedValue, setStoredValue ] = useState(() =>
@ -25,9 +25,9 @@ function useLocalStorage<T>(
try try
{ {
const valueToStore = const valueToStore =
typeof storedValue === "function" typeof storedValue === "function"
? storedValue(storedValue) ? storedValue(storedValue)
: storedValue; : storedValue;
window.localStorage.setItem(key, JSON.stringify(valueToStore)); window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) } catch (error)
{ {

249
packages/frontend/src/i18n/languages/en.json
View File

@ -1,134 +1,137 @@
{ {
"_": { "_": {
"title": "Simrail Stats" "title": "Simrail Stats"
},
"preview": {
"title": "Preview version!",
"description": "The site is in version V3-PREVIEW, may contain errors. I will be grateful for reporting all errors on the project page (git.alekswilc.dev) or in a private message on discord - alekswilc. Stay tuned!"
},
"home": {
"stats": {
"trains": "Trains",
"dispatchers": "Dispatchers",
"profiles": "Profiles"
}, },
"preview": { "title": "Simrail Stats",
"title": "Preview version!", "description": "Simrail Stats - The best SimRail logs and statistics site!",
"description": "The site is in version V3-PREVIEW, may contain errors. I will be grateful for reporting all errors on the project page (git.alekswilc.dev) or in a private message on discord - alekswilc. Stay tuned!" "buttons": {
"project": "Project page",
"forum": "Forum Page"
}, },
"home": { "footer": {
"stats": { "license": "License:",
"trains": "Trains", "powered": "Based on:",
"dispatchers": "Dispatchers", "thanks": "Special thanks to <bahu>BAHU.PRO hosting</bahu>, <simrailelite>Simrail ELITE discord</simrailelite>, Simrail community and my girlfriend",
"profiles": "Profiles" "author": "Created by <anchor>{{author}}</anchor> with ❤️ for the Simrail community"
}, }
"title": "Simrail Stats", },
"description": "Simrail Stats - The best SimRail logs and statistics site!", "leaderboard": {
"buttons": { "user": "Player",
"project": "Project page", "time": "Time",
"forum": "Forum Page" "distance": "Distance",
}, "points": "Points",
"footer": { "profile": "Profile",
"license": "License:", "actions": "Actions"
"powered": "Based on:", },
"thanks": "Special thanks to <bahu>BAHU.PRO hosting</bahu>, <simrailelite>Simrail ELITE discord</simrailelite>, Simrail community and my girlfriend", "logs": {
"author": "Created by <anchor>{{author}}</anchor> with ❤️ for the Simrail community" "user": "Player",
} "time": "Time",
"distance": "Distance",
"points": "Points",
"profile": "Profile",
"record": "Record",
"train": "Train",
"actions": "Actions",
"search": "Type to search",
"station": "Station"
},
"content_loader": {
"error": {
"header": "Page loading error",
"description": "Check your internet connection and refresh the page",
"report": "Report a bug",
"refresh": "Refresh"
}, },
"leaderboard": { "notfound": {
"user": "Player", "header": "No data found",
"time": "Time", "description": "Your search returned no results."
"distance": "Distance", }
"points": "Points", },
"profile": "Profile", "profile": {
"actions": "Actions" "stats": {
"distance": "Driver experience",
"time": "Dispatcher experience"
}, },
"logs": { "trains": {
"user": "Player", "header": "Train Statistics",
"time": "Time", "train": "Train",
"distance": "Distance", "distance": "Distance",
"points": "Points", "points": "Points",
"profile": "Profile", "time": "Time"
"record": "Record",
"train": "Train",
"actions": "Actions",
"search": "Type to search",
"station": "Station"
}, },
"content_loader": { "stations": {
"error": { "header": "Station Statistics",
"header": "Page loading error", "station": "Station",
"description": "Check your internet connection and refresh the page", "time": "Time"
"report": "Report a bug",
"refresh": "Refresh"
},
"notfound": {
"header": "No data found",
"description": "Your search returned no results."
}
}, },
"profile": { "errors": {
"stats": { "notfound": {
"distance": "Kilometers traveled", "title": "Profile not found",
"time": "Dispatcher hours" "description": "Player's profile could not be found or the player has a private Steam profile."
}, },
"trains": { "blacklist": {
"header": "Train Statistics", "title": "Unable to display profile",
"train": "Train", "description": "This player's profile has been blocked."
"distance": "Distance", }
"points": "Points", }
"time": "Time" },
}, "log": {
"stations": { "errors": {
"header": "Station Statistics", "notfound": {
"station": "Station", "title": "Record not found",
"time": "Time" "description": "This record could not be found."
}, },
"errors": { "blacklist": {
"notfound": { "title": "The record cannot be displayed",
"title": "Profile not found", "description": "The record has been blocked."
"description": "Player's profile could not be found or the player has a private Steam profile." }
},
"blacklist": {
"title": "Unable to display profile",
"description": "This player's profile has been blocked."
}
}
}, },
"log": { "station": {
"errors": { "header": "Leaving the station",
"title": "Record not found", "server": "Server: {{server}}",
"description": "This record could not be found." "station": "Station: {{name}} - {{short}}",
}, "joined": "Date of entry: {{date}}",
"blacklist": { "left": "Date of exit: {{date}}",
"title": "The record cannot be displayed", "spent": "Time spent: {{date}}"
"description": "The record has been blocked."
},
"station": {
"header": "Leaving the station",
"server": "Server: {{server}}",
"station": "Station: {{name}} - {{short}}",
"joined": "Date of entry: {{date}}",
"left": "Date of exit: {{date}}",
"spent": "Time spent: {{date}}"
},
"train": {
"header": "Leaving the train",
"server": "Server: {{server}}",
"train": "Train: {{name}} {{number}}",
"joined": "Date of entry: {{date}}",
"left": "Date of exit: {{date}}",
"spent": "Time spent: {{date}}",
"distance": "Distance: {{distance}}km",
"points": "Points: {{points}}"
},
"toasts": {
"copied": "Link copied to clipboard!",
"report": "The outpost exit data has been copied to your clipboard, you can use it to submit to the #multiplayer-help-requests channel on the official simrail Discord server. Don't forget to add a reason for the report!"
},
"buttons": {
"report": "Report",
"copy": "Copy link"
}
}, },
"sidebar": { "train": {
"home": "Home page", "header": "Leaving the train",
"logs": "Logs", "server": "Server: {{server}}",
"stations": "Stations", "train": "Train: {{name}} {{number}}",
"trains": "Trains", "joined": "Date of entry: {{date}}",
"leaderboard": "Leaderboard", "left": "Date of exit: {{date}}",
"info": "INFO", "spent": "Time spent: {{date}}",
"admin": "ADMIN" "distance": "Distance: {{distance}}km",
"points": "Points: {{points}}"
}, },
"admin": {} "toasts": {
"copied": "Link copied to clipboard!",
"report": "The outpost exit data has been copied to your clipboard, you can use it to submit to the #multiplayer-help-requests channel on the official simrail Discord server. Don't forget to add a reason for the report!"
},
"buttons": {
"report": "Report",
"copy": "Copy link",
"profile": "Profile"
}
},
"sidebar": {
"home": "Home page",
"logs": "Logs",
"stations": "Stations",
"trains": "Trains",
"leaderboard": "Leaderboard",
"info": "INFO",
"admin": "ADMIN"
},
"admin": {}
} }

21
packages/frontend/src/i18n/languages/pl.json
View File

@ -59,8 +59,8 @@
}, },
"profile": { "profile": {
"stats": { "stats": {
"distance": "Przejechanych kilometrów", "distance": "Staż maszynisty",
"time": "Godzin dyżurów" "time": "Staż dyżurnego ruchu"
}, },
"trains": { "trains": {
"header": "Statystyki pociągów", "header": "Statystyki pociągów",
@ -87,12 +87,14 @@
}, },
"log": { "log": {
"errors": { "errors": {
"title": "Nie znaleziono rekordu", "notfound": {
"description": "Ten rekord nie został znaleziony." "title": "Nie znaleziono rekordu",
}, "description": "Ten rekord nie został znaleziony."
"blacklist": { },
"title": "Nie można wyświetlić rekordu", "blacklist": {
"description": "Rekord został zablokowany." "title": "Nie można wyświetlić rekordu",
"description": "Rekord został zablokowany."
}
}, },
"station": { "station": {
"header": "Wyjście z posterunku", "header": "Wyjście z posterunku",
@ -118,7 +120,8 @@
}, },
"buttons": { "buttons": {
"report": "Zgłoś", "report": "Zgłoś",
"copy": "Kopiuj link" "copy": "Kopiuj link",
"profile": "Profil"
} }
}, },
"sidebar": { "sidebar": {

17
packages/frontend/src/layout/DefaultLayout.tsx
View File

@ -1,19 +1,20 @@
import React, { useState, ReactNode } from 'react'; import React, { useState, ReactNode } from "react";
import { Header } from '../components/mini/header/Header'; import { Header } from "../components/mini/header/Header";
import { Sidebar } from '../components/mini/sidebar/Sidebar'; import { Sidebar } from "../components/mini/sidebar/Sidebar";
export const DefaultLayout: React.FC<{ children: ReactNode }> = ({ children }) => { export const DefaultLayout: React.FC<{ children: ReactNode }> = ({ children }) =>
const [sidebarOpen, setSidebarOpen] = useState(false); {
const [ sidebarOpen, setSidebarOpen ] = useState(false);
return ( return (
<div className="dark:bg-boxdark-2 dark:text-bodydark"> <div className="dark:bg-boxdark-2 dark:text-bodydark">
<div className="flex h-screen overflow-hidden"> <div className="flex h-screen overflow-hidden">
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} /> <Sidebar sidebarOpen={ sidebarOpen } setSidebarOpen={ setSidebarOpen }/>
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden"> <div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} /> <Header sidebarOpen={ sidebarOpen } setSidebarOpen={ setSidebarOpen }/>
<main> <main>
<div className="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10"> <div className="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
{children} { children }
</div> </div>
</main> </main>
</div> </div>

10
packages/frontend/src/main.tsx
View File

@ -16,9 +16,9 @@ dayjs.extend(relativeTime);
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode> <React.StrictMode>
<Router> <Router>
<App/> <App/>
</Router> </Router>
</React.StrictMode>, </React.StrictMode>,
); );

82
packages/frontend/src/pages/Home.tsx
View File

@ -1,21 +1,24 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from "react";
import { useTranslation, Trans } from 'react-i18next'; import { useTranslation, Trans } from "react-i18next";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { TStatsResponse } from '../types/stats.ts'; import { TStatsResponse } from "../types/stats.ts";
import { WarningAlert } from '../components/mini/alerts/Warning.tsx'; import { WarningAlert } from "../components/mini/alerts/Warning.tsx";
import { CardDataStats } from '../components/mini/util/CardDataStats.tsx'; import { CardDataStats } from "../components/mini/util/CardDataStats.tsx";
export const Home: React.FC = () => { export const Home: React.FC = () =>
{
const { t } = useTranslation(); const { t } = useTranslation();
const [commit, setCommit] = useState(''); const [ commit, setCommit ] = useState("");
const [version, setVersion] = useState(''); const [ version, setVersion ] = useState("");
const [trains, setTrains] = useState(0); const [ trains, setTrains ] = useState(0);
const [dispatchers, setDispatchers] = useState(0); const [ dispatchers, setDispatchers ] = useState(0);
const [profiles, setProfiles] = useState(0); const [ profiles, setProfiles ] = useState(0);
useEffect(() => { useEffect(() =>
fetch(`${import.meta.env.VITE_API_URL}/stats/`).then(x => x.json()).then((data: TStatsResponse) => { {
fetch(`${ import.meta.env.VITE_API_URL }/stats/`).then(x => x.json()).then((data: TStatsResponse) =>
{
data.data.git.commit && setCommit(data.data.git.commit); data.data.git.commit && setCommit(data.data.git.commit);
data.data.git.version && setVersion(data.data.git.version); data.data.git.version && setVersion(data.data.git.version);
@ -29,14 +32,14 @@ export const Home: React.FC = () => {
return ( return (
<> <>
<div className="flex pb-5"> <div className="flex pb-5">
<WarningAlert description={t('preview.description')} title={t('preview.title')} /> <WarningAlert description={ t("preview.description") } title={ t("preview.title") }/>
</div> </div>
<div className="flex flex-col gap-10"> <div className="flex flex-col gap-10">
<div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6 xl:grid-cols-3 2xl:gap-7.5"> <div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6 xl:grid-cols-3 2xl:gap-7.5">
<CardDataStats title={t('home.stats.trains')} total={trains.toString()} /> <CardDataStats title={ t("home.stats.trains") } total={ trains.toString() }/>
<CardDataStats title={t('home.stats.dispatchers')} total={dispatchers.toString()} /> <CardDataStats title={ t("home.stats.dispatchers") } total={ dispatchers.toString() }/>
<CardDataStats title={t('home.stats.profiles')} total={profiles.toString()} /> <CardDataStats title={ t("home.stats.profiles") } total={ profiles.toString() }/>
</div> </div>
@ -45,22 +48,22 @@ export const Home: React.FC = () => {
<div className="px-4 pb-6 text-center"> <div className="px-4 pb-6 text-center">
<div className="mt-4"> <div className="mt-4">
<h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white"> <h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
{t('home.title')} { t("home.title") }
</h3> </h3>
<p className="font-medium">{t('home.description')}</p> <p className="font-medium">{ t("home.description") }</p>
<div className="p-4 md:p-6 xl:p-9 flex gap-2 justify-center"> <div className="p-4 md:p-6 xl:p-9 flex gap-2 justify-center">
<Link <Link
to="https://git.alekswilc.dev/simrail/simrail.alekswilc.dev" to="https://git.alekswilc.dev/simrail/simrail.alekswilc.dev"
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
> >
{t('home.buttons.project')} { t("home.buttons.project") }
</Link> </Link>
<Link <Link
to="https://forum.simrail.eu/topic/9142-logowanie-wyj%C5%9B%C4%87-z-posterunk%C3%B3w/" to="https://forum.simrail.eu/topic/9142-logowanie-wyj%C5%9B%C4%87-z-posterunk%C3%B3w/"
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
> >
{t('home.buttons.forum')} { t("home.buttons.forum") }
</Link> </Link>
</div> </div>
</div> </div>
@ -73,30 +76,31 @@ export const Home: React.FC = () => {
<div className="mt-6.5"> <div className="mt-6.5">
<p><Trans <p><Trans
i18nKey={t('home.footer.author')} i18nKey={ t("home.footer.author") }
values={{ author: 'alekswilc' }} values={ { author: "alekswilc" } }
components={{ components={ {
anchor: <Link className="color-orchid" to={'https://www.alekswilc.dev'} /> anchor: <Link className="color-orchid" to={ "https://www.alekswilc.dev" }/>,
}} } }
/></p> /></p>
<p><Trans <p><Trans
i18nKey={t('home.footer.thanks')} i18nKey={ t("home.footer.thanks") }
components={{ components={ {
bahu: <Link className="color-orchid" to={'https://bahu.pro/'} />, bahu: <Link className="color-orchid" to={ "https://bahu.pro/" }/>,
simrailelite: <Link className="color-orchid" simrailelite: <Link className="color-orchid"
to={'https://discord.gg/yDhy3pDrVr'} /> to={ "https://discord.gg/yDhy3pDrVr" }/>,
}} } }
/></p> /></p>
<p>{t('home.footer.license')} <Link className="color-orchid" <p>{ t("home.footer.license") } <Link className="color-orchid"
to={'https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/src/branch/main/LICENSE'}>GNU to={ "https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/src/branch/main/LICENSE" }>GNU
AGPL V3</Link></p> AGPL V3</Link></p>
<p>{t('home.footer.powered')} <Link className="color-orchid" <p>{ t("home.footer.powered") } <Link className="color-orchid"
to={'https://tailadmin.com/'}>TailAdmin</Link></p> to={ "https://tailadmin.com/" }>TailAdmin</Link>
</p>
<p>{version && <Link className="color-orchid" <p>{ version && <Link className="color-orchid"
to={`https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/releases/tag/${version}`}>{version}</Link>}{version && commit && ' | '}{commit && to={ `https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/releases/tag/${ version }` }>{ version }</Link> }{ version && commit && " | " }{ commit &&
<Link className="color-orchid" <Link className="color-orchid"
to={`https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/commit/${commit}`}>{commit}</Link>}</p> to={ `https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/commit/${ commit }` }>{ commit }</Link> }</p>
</div> </div>

25
packages/frontend/src/pages/leaderboard/StationsLeaderboard.tsx
View File

@ -3,24 +3,30 @@ import { ChangeEvent, useEffect, useState } from "react";
import { StationTable } from "../../components/pages/leaderboard/StationTable.tsx"; import { StationTable } from "../../components/pages/leaderboard/StationTable.tsx";
import { useDebounce } from "use-debounce"; import { useDebounce } from "use-debounce";
import { Search } from "../../components/mini/util/Search.tsx"; import { Search } from "../../components/mini/util/Search.tsx";
import { useSearchParams } from "react-router-dom";
export const StationLeaderboard = () => export const StationLeaderboard = () =>
{ {
const [ data, setData ] = useState<TLeaderboardRecord[]>([]); const [ data, setData ] = useState<TLeaderboardRecord[]>([]);
const [ searchParams, setSearchParams ] = useSearchParams();
const [ searchItem, setSearchItem ] = useState(searchParams.get("q") ?? "");
useEffect(() => useEffect(() =>
{ {
fetch(`${ import.meta.env.VITE_API_URL }leaderboard/station/`).then(x => x.json()).then(x => fetch(`${ import.meta.env.VITE_API_URL }leaderboard/station/`).then(x => x.json()).then(x =>
{ {
setData(x.data.records); setData(x.data.records);
}); });
}, []); }, []);
const [ searchItem, setSearchItem ] = useState("");
const [ searchValue ] = useDebounce(searchItem, 500); const [ searchValue ] = useDebounce(searchItem, 500);
const [ error, setError ] = useState<0 | 1 | 2>(0); const [ error, setError ] = useState<0 | 1 | 2>(0);
useEffect(() => useEffect(() =>
{ {
searchValue === "" ? searchParams.delete("q") : searchParams.set("q", searchValue);
setSearchParams(searchParams);
setData([]); setData([]);
setError(0); setError(0);
fetch(`${ import.meta.env.VITE_API_URL }/leaderboard/station/?q=${ searchValue }`).then(x => x.json()).then(x => fetch(`${ import.meta.env.VITE_API_URL }/leaderboard/station/?q=${ searchValue }`).then(x => x.json()).then(x =>
@ -30,17 +36,22 @@ export const StationLeaderboard = () =>
}); });
}, [ searchValue ]); }, [ searchValue ]);
useEffect(() =>
{
setSearchItem(searchParams.get("q") ?? "");
}, [ searchParams ]);
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
{ {
setSearchItem(e.target.value); setSearchItem(e.target.value);
}; };
return ( return (
<> <>
<div className="flex flex-col gap-10"> <div className="flex flex-col gap-10">
<Search handleInputChange={ handleInputChange } searchItem={ searchItem }/> <Search handleInputChange={ handleInputChange } searchItem={ searchItem }/>
<StationTable stations={ data } error={ error }/> <StationTable stations={ data } error={ error }/>
</div> </div>
</> </>
); );
}; };

25
packages/frontend/src/pages/leaderboard/TrainLeaderboard.tsx
View File

@ -3,10 +3,14 @@ import { ChangeEvent, useEffect, useState } from "react";
import { TrainTable } from "../../components/pages/leaderboard/TrainTable.tsx"; import { TrainTable } from "../../components/pages/leaderboard/TrainTable.tsx";
import { useDebounce } from "use-debounce"; import { useDebounce } from "use-debounce";
import { Search } from "../../components/mini/util/Search.tsx"; import { Search } from "../../components/mini/util/Search.tsx";
import { useSearchParams } from "react-router-dom";
export const TrainLeaderboard = () => export const TrainLeaderboard = () =>
{ {
const [ data, setData ] = useState<TLeaderboardRecord[]>([]); const [ data, setData ] = useState<TLeaderboardRecord[]>([]);
const [ searchParams, setSearchParams ] = useSearchParams();
const [ searchItem, setSearchItem ] = useState(searchParams.get("q") ?? "");
useEffect(() => useEffect(() =>
{ {
fetch(`${ import.meta.env.VITE_API_URL }/leaderboard/train/`).then(x => x.json()).then(x => fetch(`${ import.meta.env.VITE_API_URL }/leaderboard/train/`).then(x => x.json()).then(x =>
@ -15,12 +19,14 @@ export const TrainLeaderboard = () =>
}); });
}, []); }, []);
const [ searchItem, setSearchItem ] = useState("");
const [ searchValue ] = useDebounce(searchItem, 500); const [ searchValue ] = useDebounce(searchItem, 500);
const [ error, setError ] = useState<0 | 1 | 2>(0); const [ error, setError ] = useState<0 | 1 | 2>(0);
useEffect(() => useEffect(() =>
{ {
searchValue === "" ? searchParams.delete("q") : searchParams.set("q", searchValue);
setSearchParams(searchParams);
setData([]); setData([]);
setError(0); setError(0);
fetch(`${ import.meta.env.VITE_API_URL }/leaderboard/train/?q=${ searchValue }`).then(x => x.json()).then(x => fetch(`${ import.meta.env.VITE_API_URL }/leaderboard/train/?q=${ searchValue }`).then(x => x.json()).then(x =>
@ -30,18 +36,23 @@ export const TrainLeaderboard = () =>
}); });
}, [ searchValue ]); }, [ searchValue ]);
useEffect(() =>
{
setSearchItem(searchParams.get("q") ?? "");
}, [ searchParams ]);
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
{ {
setSearchItem(e.target.value); setSearchItem(e.target.value);
}; };
return ( return (
<> <>
<div className="flex flex-col gap-10"> <div className="flex flex-col gap-10">
<Search handleInputChange={ handleInputChange } searchItem={ searchItem }/> <Search handleInputChange={ handleInputChange } searchItem={ searchItem }/>
<TrainTable trains={ data } error={ error }/> <TrainTable trains={ data } error={ error }/>
</div> </div>
</> </>
); );
}; };

84
packages/frontend/src/pages/log/Log.tsx
View File

@ -1,23 +1,27 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { useParams } from 'react-router-dom'; import { useParams } from "react-router-dom";
import { ContentLoader } from '../../components/mini/loaders/ContentLoader.tsx'; import { ContentLoader } from "../../components/mini/loaders/ContentLoader.tsx";
import { WarningAlert } from '../../components/mini/alerts/Warning.tsx'; import { WarningAlert } from "../../components/mini/alerts/Warning.tsx";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { TLogResponse, TLogStationData, TLogTrainData } from '../../types/log.ts'; import { TLogResponse, TLogStationData, TLogTrainData } from "../../types/log.ts";
import { StationLog } from '../../components/pages/log/StationLog.tsx'; import { StationLog } from "../../components/pages/log/StationLog.tsx";
import { TrainLog } from '../../components/pages/log/TrainLog.tsx'; import { TrainLog } from "../../components/pages/log/TrainLog.tsx";
import { PageMeta } from '../../components/mini/util/PageMeta.tsx'; import { PageMeta } from "../../components/mini/util/PageMeta.tsx";
export const Log = () => { export const Log = () =>
{
const { id } = useParams(); const { id } = useParams();
const [error, setError] = useState<0 | 1 | 2 | 3>(0); const [ error, setError ] = useState<0 | 1 | 2 | 3>(0);
const [trainData, setTrainData] = useState<TLogTrainData>(undefined!); const [ trainData, setTrainData ] = useState<TLogTrainData>(undefined!);
const [stationData, setStationData] = useState<TLogStationData>(undefined!); const [ stationData, setStationData ] = useState<TLogStationData>(undefined!);
useEffect(() => { useEffect(() =>
fetch(`${import.meta.env.VITE_API_URL}/log/${id}`).then(x => x.json()).then((data: TLogResponse) => { {
switch (data.code) { fetch(`${ import.meta.env.VITE_API_URL }/log/${ id }`).then(x => x.json()).then((data: TLogResponse) =>
{
switch (data.code)
{
case 404: case 404:
setError(2); setError(2);
break; break;
@ -28,7 +32,7 @@ export const Log = () => {
case 200: case 200:
setError(1); setError(1);
'trainNumber' in data.data ? setTrainData(data.data) : setStationData(data.data); "trainNumber" in data.data ? setTrainData(data.data) : setStationData(data.data);
break; break;
} }
}); });
@ -38,30 +42,30 @@ export const Log = () => {
return ( return (
<> <>
{/* LOADING */} {/* LOADING */ }
{error === 0 && <ContentLoader />} { error === 0 && <ContentLoader/> }
{/* NOT FOUND */} {/* NOT FOUND */ }
{error === 2 && <PageMeta title="simrail.alekswilc.dev | Record not found" { error === 2 && <PageMeta title="simrail.alekswilc.dev | Record not found"
description="This record could not be found." />} description="This record could not be found."/> }
{error === 2 && <WarningAlert title={t('log.errors.notfound.title')} { error === 2 && <WarningAlert title={ t("log.errors.notfound.title") }
description={t('log.errors.notfound.description')} />} description={ t("log.errors.notfound.description") }/> }
{/* BLACKLISTED LOG */} {/* BLACKLISTED LOG */ }
{error === 3 && <PageMeta title="simrail.alekswilc.dev | Blacklisted record" { error === 3 && <PageMeta title="simrail.alekswilc.dev | Blacklisted record"
description="The record has been blocked." />} description="The record has been blocked."/> }
{error === 3 && <WarningAlert title={t('log.errors.blacklist.title')} { error === 3 && <WarningAlert title={ t("log.errors.blacklist.title") }
description={t('log.errors.blacklist.description')} />} description={ t("log.errors.blacklist.description") }/> }
{/* SUCCESS */} {/* SUCCESS */ }
{error === 1 && stationData && <PageMeta { error === 1 && stationData && <PageMeta
title={`simrail.alekswilc.dev | ${stationData.userUsername}`} title={ `simrail.alekswilc.dev | ${ stationData.userUsername }` }
image={stationData.userAvatar} image={ stationData.userAvatar }
description={`${stationData.stationName} - ${stationData.stationShort}`} />} description={ `${ stationData.stationName } - ${ stationData.stationShort }` }/> }
{error === 1 && stationData && < StationLog data={stationData} />} { error === 1 && stationData && < StationLog data={ stationData }/> }
{error === 1 && trainData && <PageMeta { error === 1 && trainData && <PageMeta
title={`simrail.alekswilc.dev | ${trainData.userUsername}`} title={ `simrail.alekswilc.dev | ${ trainData.userUsername }` }
image={trainData.userAvatar} image={ trainData.userAvatar }
description={`${trainData.trainName} - ${trainData.trainNumber}`} />} description={ `${ trainData.trainName } - ${ trainData.trainNumber }` }/> }
{error === 1 && trainData && < TrainLog data={trainData} />} { error === 1 && trainData && < TrainLog data={ trainData }/> }
</> </>
); );
}; };

24
packages/frontend/src/pages/logs/StationLogs.tsx
View File

@ -3,10 +3,13 @@ import { StationTable } from "../../components/pages/logs/StationTable.tsx";
import { useDebounce } from "use-debounce"; import { useDebounce } from "use-debounce";
import { TStationRecord } from "../../types/station.ts"; import { TStationRecord } from "../../types/station.ts";
import { Search } from "../../components/mini/util/Search.tsx"; import { Search } from "../../components/mini/util/Search.tsx";
import { useSearchParams } from "react-router-dom";
export const StationLogs = () => export const StationLogs = () =>
{ {
const [ data, setData ] = useState<TStationRecord[]>([]); const [ data, setData ] = useState<TStationRecord[]>([]);
const [ searchParams, setSearchParams ] = useSearchParams();
const [ searchItem, setSearchItem ] = useState(searchParams.get("q") ?? "");
useEffect(() => useEffect(() =>
{ {
fetch(`${ import.meta.env.VITE_API_URL }/stations/`).then(x => x.json()).then(x => fetch(`${ import.meta.env.VITE_API_URL }/stations/`).then(x => x.json()).then(x =>
@ -15,11 +18,13 @@ export const StationLogs = () =>
}); });
}, []); }, []);
const [ error, setError ] = useState<0 | 1 | 2>(0); const [ error, setError ] = useState<0 | 1 | 2>(0);
const [ searchItem, setSearchItem ] = useState("");
const [ searchValue ] = useDebounce(searchItem, 500); const [ searchValue ] = useDebounce(searchItem, 500);
useEffect(() => useEffect(() =>
{ {
searchValue === "" ? searchParams.delete("q") : searchParams.set("q", searchValue);
setSearchParams(searchParams);
setData([]); setData([]);
setError(0); setError(0);
fetch(`${ import.meta.env.VITE_API_URL }/stations/?q=${ searchValue }`).then(x => x.json()).then(x => fetch(`${ import.meta.env.VITE_API_URL }/stations/?q=${ searchValue }`).then(x => x.json()).then(x =>
@ -29,17 +34,22 @@ export const StationLogs = () =>
}); });
}, [ searchValue ]); }, [ searchValue ]);
useEffect(() =>
{
setSearchItem(searchParams.get("q") ?? "");
}, [ searchParams ]);
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
{ {
setSearchItem(e.target.value); setSearchItem(e.target.value);
}; };
return ( return (
<> <>
<div className="flex flex-col gap-10"> <div className="flex flex-col gap-10">
<Search handleInputChange={ handleInputChange } searchItem={ searchItem }/> <Search handleInputChange={ handleInputChange } searchItem={ searchItem }/>
<StationTable stations={ data } error={ error }/> <StationTable stations={ data } error={ error }/>
</div> </div>
</> </>
); );
}; };

26
packages/frontend/src/pages/logs/TrainLogs.tsx
View File

@ -3,10 +3,14 @@ import { TTrainRecord } from "../../types/train.ts";
import { TrainTable } from "../../components/pages/logs/TrainTable.tsx"; import { TrainTable } from "../../components/pages/logs/TrainTable.tsx";
import { useDebounce } from "use-debounce"; import { useDebounce } from "use-debounce";
import { Search } from "../../components/mini/util/Search.tsx"; import { Search } from "../../components/mini/util/Search.tsx";
import { useSearchParams } from "react-router-dom";
export const TrainLogs = () => export const TrainLogs = () =>
{ {
const [ data, setData ] = useState<TTrainRecord[]>([]); const [ data, setData ] = useState<TTrainRecord[]>([]);
const [ searchParams, setSearchParams ] = useSearchParams();
const [ searchItem, setSearchItem ] = useState(searchParams.get("q") ?? "");
useEffect(() => useEffect(() =>
{ {
fetch(`${ import.meta.env.VITE_API_URL }/trains/`).then(x => x.json()).then(x => fetch(`${ import.meta.env.VITE_API_URL }/trains/`).then(x => x.json()).then(x =>
@ -14,12 +18,15 @@ export const TrainLogs = () =>
setData(x.data.records); setData(x.data.records);
}); });
}, []); }, []);
const [ error, setError ] = useState<0 | 1 | 2>(0); const [ error, setError ] = useState<0 | 1 | 2>(0);
const [ searchItem, setSearchItem ] = useState("");
const [ searchValue ] = useDebounce(searchItem, 500); const [ searchValue ] = useDebounce(searchItem, 500);
useEffect(() => useEffect(() =>
{ {
searchValue === "" ? searchParams.delete("q") : searchParams.set("q", searchValue);
setSearchParams(searchParams);
setData([]); setData([]);
setError(0); setError(0);
fetch(`${ import.meta.env.VITE_API_URL }/trains/?q=${ searchValue }`).then(x => x.json()).then(x => fetch(`${ import.meta.env.VITE_API_URL }/trains/?q=${ searchValue }`).then(x => x.json()).then(x =>
@ -29,17 +36,22 @@ export const TrainLogs = () =>
}); });
}, [ searchValue ]); }, [ searchValue ]);
useEffect(() =>
{
setSearchItem(searchParams.get("q") ?? "");
}, [ searchParams ]);
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
{ {
setSearchItem(e.target.value); setSearchItem(e.target.value);
}; };
return ( return (
<> <>
<div className="flex flex-col gap-10"> <div className="flex flex-col gap-10">
<Search handleInputChange={ handleInputChange } searchItem={ searchItem }/> <Search handleInputChange={ handleInputChange } searchItem={ searchItem }/>
<TrainTable trains={ data } error={ error }/> <TrainTable trains={ data } error={ error }/>
</div> </div>
</> </>
); );
}; };

71
packages/frontend/src/pages/profile/Profile.tsx
View File

@ -1,22 +1,25 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { useParams } from 'react-router-dom'; import { useParams } from "react-router-dom";
import { TProfileData, TProfileResponse } from '../../types/profile.ts'; import { TProfileData, TProfileResponse } from "../../types/profile.ts";
import { ContentLoader } from '../../components/mini/loaders/ContentLoader.tsx'; import { ContentLoader } from "../../components/mini/loaders/ContentLoader.tsx";
import { WarningAlert } from '../../components/mini/alerts/Warning.tsx'; import { WarningAlert } from "../../components/mini/alerts/Warning.tsx";
import { ProfileCard } from '../../components/pages/profile/Profile.tsx'; import { ProfileCard } from "../../components/pages/profile/Profile.tsx";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { PageMeta } from '../../components/mini/util/PageMeta.tsx'; import { PageMeta } from "../../components/mini/util/PageMeta.tsx";
import { formatTime } from "../../util/time.ts";
export const Profile = () => { export const Profile = () =>
{
const { id } = useParams(); const { id } = useParams();
const [ error, setError ] = useState<0 | 1 | 2 | 3>(0);
const [ data, setData ] = useState<TProfileData>(undefined!);
useEffect(() =>
const [error, setError] = useState<0 | 1 | 2 | 3>(0); {
const [data, setData] = useState<TProfileData>(undefined!); fetch(`${ import.meta.env.VITE_API_URL }/profiles/${ id }`).then(x => x.json()).then((data: TProfileResponse) =>
{
useEffect(() => { switch (data.code)
fetch(`${import.meta.env.VITE_API_URL}/profiles/${id}`).then(x => x.json()).then((data: TProfileResponse) => { {
switch (data.code) {
case 404: case 404:
setError(2); setError(2);
break; break;
@ -35,24 +38,24 @@ export const Profile = () => {
return ( return (
<> <>
{/* LOADING */} {/* LOADING */ }
{error === 0 && <ContentLoader />} { error === 0 && <ContentLoader/> }
{/* NOT FOUND */} {/* NOT FOUND */ }
{error === 2 && <PageMeta title="simrail.alekswilc.dev | Profile not found" { error === 2 && <PageMeta title="simrail.alekswilc.dev | Profile not found"
description="Player's profile could not be found or the player has a private Steam profile." />} description="Player's profile could not be found or the player has a private Steam profile."/> }
{error === 2 && <WarningAlert title={t('profile.errors.notfound.title')} { error === 2 && <WarningAlert title={ t("profile.errors.notfound.title") }
description={t('profile.errors.notfound.description')} />} description={ t("profile.errors.notfound.description") }/> }
{/* BLACKLISTED PROFILE */} {/* BLACKLISTED PROFILE */ }
{error === 3 && <PageMeta title="simrail.alekswilc.dev | Blacklisted profile" { error === 3 && <PageMeta title="simrail.alekswilc.dev | Blacklisted profile"
description="This player's profile has been blocked." />} description="This player's profile has been blocked."/> }
{error === 3 && <WarningAlert title={t('profile.errors.blacklist.title')} { error === 3 && <WarningAlert title={ t("profile.errors.blacklist.title") }
description={t('profile.errors.blacklist.description')} />} description={ t("profile.errors.blacklist.description") }/> }
{/* SUCCESS */} {/* SUCCESS */ }
{error === 1 && <PageMeta image={data.steam.avatarfull} { error === 1 && <PageMeta image={ data.steam.avatarfull }
title={`simrail.alekswilc.dev | ${data.steam.personname}'s profile`} title={ `simrail.alekswilc.dev | ${ data.steam.personname }'s profile` }
description={`${data.player.trainDistance ? 0 : ((data.player.trainDistance / 1000).toFixed(2))} kilometers travelled | description={ `${ data.player.trainDistance ? 0 : ((data.player.trainDistance / 1000).toFixed(2)) } driving experience |
${data.player.dispatcherTime ? 0 : Math.floor(data.player.dispatcherTime / 3600000)}h dispatchers hours`} />} ${ data.player.dispatcherTime ? 0 : formatTime(data.player.dispatcherTime) } dispatcher experience` }/> }
{error === 1 && <ProfileCard data={data} />} { error === 1 && <ProfileCard data={ data }/> }
</> </>
); );
}; };

1
packages/frontend/src/types/leaderboard.ts
View File

@ -21,6 +21,7 @@ export interface TLeaderboardRecord
dispatcherTime: number; dispatcherTime: number;
dispatcherStats?: { [ key: string ]: TLeaderboardDispatcherStat }; dispatcherStats?: { [ key: string ]: TLeaderboardDispatcherStat };
trainStats?: { [ key: string ]: TLeaderboardTrainStat }; trainStats?: { [ key: string ]: TLeaderboardTrainStat };
verified: boolean;
} }
export interface TLeaderboardDispatcherStat export interface TLeaderboardDispatcherStat

4
packages/frontend/src/types/log.ts
View File

@ -18,7 +18,7 @@ export interface TLogTrainData
server: string; server: string;
trainName: string; trainName: string;
joinedDate?: number; joinedDate?: number;
verified: boolean;
} }
export interface TLogStationData export interface TLogStationData
@ -32,4 +32,6 @@ export interface TLogStationData
stationShort: string; stationShort: string;
server: string; server: string;
joinedDate?: number; joinedDate?: number;
verified: boolean;
} }

1
packages/frontend/src/types/profile.ts
View File

@ -32,6 +32,7 @@ export interface TProfilePlayer
trainStats: Record<string, TProfileTrainStatsRecord>; trainStats: Record<string, TProfileTrainStatsRecord>;
trainDistance: number; trainDistance: number;
trainPoints: number; trainPoints: number;
verified: boolean;
} }
export interface TProfileDispatcherStatsRecord export interface TProfileDispatcherStatsRecord

1
packages/frontend/src/types/station.ts
View File

@ -21,4 +21,5 @@ export interface TStationRecord
stationShort: string; stationShort: string;
server: string; server: string;
joinedDate?: number; joinedDate?: number;
verified: boolean;
} }

1
packages/frontend/src/types/train.ts
View File

@ -23,5 +23,6 @@ export interface TTrainRecord
points: number; points: number;
server: string; server: string;
trainName: string; trainName: string;
verified: boolean;
} }

14
packages/frontend/src/util/time.ts Normal file
View File

@ -0,0 +1,14 @@
export const formatTime = (time: number) =>
{
if (Math.floor(time / 3600000) > 0)
{
return `${ Math.floor(time / 3600000) }h`;
}
if (Math.floor(time / 60000) > 0)
{
return `${ Math.floor(time / 60000) }m`
}
return '0h';
}