Merge pull request 'v3.1.1' (#81) from v3.0.1 into main

Reviewed-on: simrail/simrail.pro#81
Reviewed-by: Aleksander Wilczyński <aleks@alekswilc.dev>

packages/backend/src/http/routes/activePlayer.ts

@@ -40,6 +40,16 @@ interface ActiveStation
     steam: string;
 }
 
+const sortFunction = (a: ActiveStation | ActiveTrain, b: ActiveStation | ActiveTrain) => {
+    if (a.server.includes('pl') && !b.server.includes('pl'))
+        return -1;
+
+    if (!a.server.includes('pl') && b.server.includes('pl'))
+        return 1;
+
+    return 0;
+};
+
 export class ActivePlayersRoute
 {
     static load()
@@ -74,7 +84,8 @@ export class ActivePlayersRoute
                 a = a.filter(d => s.filter(c => c.test(d.server) || c.test(d.username) || c.test(d.steam) || c.test(d.steam) || c.test(d.trainName) || c.test(d.trainNumber)).length === s.length);
             }
 
-            a = arrayGroupBy(a, d => d.server);
+            a = arrayGroupBy(a, d => d.server)
+                .sort(sortFunction);
 
             res.json(
                 new SuccessResponseBuilder()
@@ -95,6 +106,7 @@ export class ActivePlayersRoute
             {
                 for (const d of client.stations[ server ].filter(d => d.DispatchedBy.length && d.DispatchedBy[ 0 ]?.SteamId))
                 {
+                    // todo: optimize
                     const p = await PlayerUtil.getPlayer(d.DispatchedBy[ 0 ].SteamId!);
                     p && a.push({
                         server: server,
@@ -114,7 +126,9 @@ export class ActivePlayersRoute
             }
 
 
-            a = arrayGroupBy(a, d => d.server);
+
+            a = arrayGroupBy(a, d => d.server)
+                .sort(sortFunction);
 
             res.json(
                 new SuccessResponseBuilder()

packages/backend/src/http/routes/profile.ts

@@ -30,6 +30,19 @@ const generateSearch = (regex: RegExp) => [
     },
 ];
 
+type ActiveTrain = {
+    type: "train"
+    trainNumber: string
+    trainName: string
+    server: string
+}
+
+type ActiveStation = {
+    type: "station",
+    stationName: string
+    stationShort: string
+    server: string
+}
 
 export class ProfilesRoute
 {
@@ -67,11 +80,44 @@ export class ProfilesRoute
                 return;
             }
 
+            let active: ActiveStation | ActiveTrain = undefined!;
+
+            for (const x of Object.keys(client.trains))
+            {
+                const data = client.trains[ x ].find(x => x.TrainData.ControlledBySteamID === player.id);
+                if (data)
+                {
+                    active = {
+                        type: "train",
+                        trainNumber: data.TrainNoLocal,
+                        trainName: data.TrainName,
+                        server: x,
+                    };
+                }
+            }
+
+            for (const x of Object.keys(client.stations))
+            {
+                const data = client.stations[ x ].find(x => x.DispatchedBy[ 0 ]?.SteamId === player.id);
+                if (data)
+                {
+                    active = {
+                        type: "station",
+                        stationName: data.Name,
+                        stationShort: data.Prefix,
+                        server: x,
+                    };
+                }
+            }
+
+
             res.json(
                 new SuccessResponseBuilder()
                     .setCode(200)
                     .setData({
                         player,
+                        active,
+
                     })
                     .toJSON(),
             );

packages/frontend/src/components/pages/leaderboard/LeaderboardTrainTable.tsx

@@ -17,7 +17,7 @@
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { TLeaderboardRecord } from "../../../types/leaderboard.ts";
-import { formatTime } from "../../../util/time.ts";
+// import { formatTime } from "../../../util/time.ts";
 import { Dispatch, SetStateAction } from "react";
 import { FlexArrowIcon } from "../../mini/icons/ArrowIcon.tsx";
 import { UserIcons } from "../../mini/icons/UserIcons.tsx";
@@ -34,7 +34,7 @@ export const LeaderboardTrainTable = ({ trains, setSortBy, sortBy }: {
             <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">
                 <div className="flex flex-col">
-                    <div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-5">
+                    <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">
                             <h5 className="text-sm font-medium uppercase xsm:text-base">
                                 { t("leaderboard.user") }
@@ -54,13 +54,13 @@ export const LeaderboardTrainTable = ({ trains, setSortBy, sortBy }: {
                             </h5>
                             <FlexArrowIcon rotated={ sortBy === "points" }/>
                         </div>
-                        <div className="hidden sm:flex flex-row align-center justify-center gap-2 p-2.5 text-center xl:p-5">
+                        {/*<div className="hidden sm:flex flex-row align-center justify-center gap-2 p-2.5 text-center xl:p-5">*/}
-                            <h5 className="cursor-pointer  text-sm font-medium uppercase xsm:text-base"
+                        {/*    <h5 className="cursor-pointer  text-sm font-medium uppercase xsm:text-base"*/}
-                                onClick={ () => setSortBy("time") }>
+                        {/*        onClick={ () => setSortBy("time") }>*/}
-                                { t("leaderboard.time") }
+                        {/*        { t("leaderboard.time") }*/}
-                            </h5>
+                        {/*    </h5>*/}
-                            <FlexArrowIcon rotated={ sortBy === "time" }/>
+                        {/*    <FlexArrowIcon rotated={ sortBy === "time" }/>*/}
-                        </div>
+                        {/*</div>*/}
                         <div className="hidden p-2.5 text-center sm:block xl:p-5">
                             <h5 className="text-sm font-medium uppercase xsm:text-base">
                                 { t("leaderboard.actions") }
@@ -70,7 +70,7 @@ export const LeaderboardTrainTable = ({ trains, setSortBy, sortBy }: {
 
                     { trains.map((train, key) => (
                             <div
-                                    className={ `grid grid-cols-3 sm:grid-cols-5 ${ trains.length === (key + 1)
+                                    className={ `grid grid-cols-3 sm:grid-cols-4 ${ trains.length === (key + 1)
                                             ? ""
                                             : "border-b border-stroke dark:border-strokedark"
                                     }` }
@@ -92,9 +92,9 @@ export const LeaderboardTrainTable = ({ trains, setSortBy, sortBy }: {
                                     <p className="text-meta-5">{ train.trainPoints }</p>
                                 </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">{ formatTime(train.trainTime) }</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">
                                     <Link

packages/frontend/src/components/pages/log/StationLog.tsx

@@ -37,7 +37,7 @@ export const StationLog = ({ data }: { data: TLogStationData }) =>
         toast.info(t("log.toasts.report"), {
             autoClose: 5000,
         });
-        void navigator.clipboard.writeText(`;user: \`${ data.player.username }\`\n;steam: \`${ data.player.avatar }\`\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`);
+        void navigator.clipboard.writeText(`;user: \`${ data.player.username }\`\n;steam: \`https://steamcommunity.com/profiles/${ data.player.id }\`\n;server: \`${ data.server.toUpperCase() }\`\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

packages/frontend/src/components/pages/log/TrainLog.tsx

@@ -37,7 +37,7 @@ export const TrainLog = ({ data }: { data: TLogTrainData }) =>
         toast.info(t("log.toasts.report"), {
             autoClose: 5000,
         });
-        void navigator.clipboard.writeText(`;user: \`${ data.player.username }\`\n;steam: \`${ data.player.id }\`\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`);
+        void navigator.clipboard.writeText(`;user: \`${ data.player.username }\`\n;steam: \`https://steamcommunity.com/profiles/${ data.player.id }\`\n;server: \`${ data.server.toUpperCase() }\`\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

packages/frontend/src/components/pages/profile/Profile.tsx

@@ -1,255 +0,0 @@
-/*
- * Copyright (C) 2024 Aleksander <alekswilc> Wilczyński (aleks@alekswilc.dev)
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published
- * by the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * See LICENSE for more.
- */
-
-import { useState } from "react";
-import { TProfileData } from "../../../types/profile.ts";
-import { useTranslation } from "react-i18next";
-import { ArrowIcon, FlexArrowIcon } from "../../mini/icons/ArrowIcon.tsx";
-import { formatTime } from "../../../util/time.ts";
-import { useAuth } from "../../../hooks/useAuth.tsx";
-import { ConfirmModal } from "../../mini/modal/ConfirmModal.tsx";
-import { post } from "../../../util/fetcher.ts";
-import { toast } from "react-toastify";
-import dayjs from "dayjs";
-import { UserIcons } from "../../mini/util/UserIcons.tsx";
-
-export const ProfileCard = ({ data }: { data: TProfileData }) =>
-{
-
-    const [ showTrains, setShowTrains ] = useState(false);
-    const [ showStations, setShowStations ] = useState(false);
-    const [ sortTrainsBy, setSortTrainsBy ] = useState<"time" | "score" | "distance">("distance");
-    const [ hideLeaderboardStatsModal, setHideLeaderboardStatsModal ] = useState(false);
-    const [ hideProfileModal, setHideProfileModal ] = useState(false);
-
-    const { isAdmin, token } = useAuth();
-
-    const adminToggleHideLeaderboardPlayerProfile = () =>
-    {
-        post(`/admin/profile/${ data.player.id }/${ data.player.flags.includes("leaderboard_hidden") ? "showLeaderboard" : "hideLeaderboard" }`, {}, { "X-Auth-Token": token })
-                .then((response) =>
-                {
-                    if (response.code === 200)
-                    {
-                        toast.success(t("admin.hideLeaderboard.alert"));
-                    }
-                });
-    };
-
-    const adminHidePlayerProfile = () =>
-    {
-        post(`/admin/profile/${ data.player.id }/hide`, {}, { "X-Auth-Token": token })
-                .then((response) =>
-                {
-                    if (response.code === 200)
-                    {
-                        toast.success(t("admin.hide.alert"));
-                    }
-                });
-    };
-
-
-    const { t } = useTranslation();
-    return <>
-        <ConfirmModal showModal={ hideLeaderboardStatsModal } setShowModal={ setHideLeaderboardStatsModal }
-                      onConfirm={ adminToggleHideLeaderboardPlayerProfile }
-                      title={ t("admin.hideLeaderboard.modal.title") }
-                      description={ t("admin.hideLeaderboard.modal.description") }/>
-        <ConfirmModal showModal={ hideProfileModal } setShowModal={ setHideProfileModal }
-                      onConfirm={ adminHidePlayerProfile } title={ t("admin.hide.modal.title") }
-                      description={ t("admin.hide.modal.description") }/>
-        <div
-                className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
-            <div className="px-4 pt-6 text-center lg:pb-8 xl:pb-11.5">
-                <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">
-                    <div className="relative drop-shadow-2">
-                        <img className="rounded-full" src={ data.player.avatar } alt="profile"/>
-                    </div>
-                </div>
-                <div className="mt-4">
-                    <h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
-                        { data.player.username } <UserIcons flags={ data.player.flags }/>
-                    </h3>
-
-                    <div
-                            className="mx-auto mt-4.5 mb-5.5 grid max-w-94 grid-cols-2 rounded-md border border-stroke py-2.5 shadow-1 dark:border-strokedark dark:bg-[#37404F]">
-                        <div
-                                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">
-                                { Math.floor(data.player.trainDistance / 1000) }km
-                            </span>
-                            <span className="text-sm text-wrap">{ t("profile.stats.distance") }</span>
-                        </div>
-                        <div
-                                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">
-                                { formatTime(data.player.dispatcherTime) }
-                            </span>
-                            <span className="text-sm text-wrap">{ t("profile.stats.time") }</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            { 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="group relative cursor-pointer" onClick={ () => setShowTrains(val => !val) }>
-                            <h1 className="text-xl text-black dark:text-white pb-5">{ t("profile.trains.header") }</h1>
-                            <ArrowIcon rotated={ showTrains }/>
-                        </div>
-
-                        { showTrains &&
-                                <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="p-2.5 text-center xl:p-5">
-                                            <h5 className="text-sm font-medium uppercase xsm:text-base">
-                                                { t("profile.trains.train") }
-                                            </h5>
-                                        </div>
-                                        <div className="flex flex-row align-center justify-center gap-2  p-2.5 text-center xl:p-5 cursor-pointer"
-                                             onClick={ () => setSortTrainsBy("distance") }>
-                                            <h5 className="text-sm font-medium uppercase xsm:text-base">
-                                                { t("profile.trains.distance") }
-                                            </h5>
-                                            <FlexArrowIcon rotated={ sortTrainsBy === "distance" || !sortTrainsBy }/>
-                                        </div>
-                                        <div className="flex flex-row align-center justify-center gap-2 p-2.5 text-center xl:p-5 cursor-pointer"
-                                             onClick={ () => setSortTrainsBy("score") }>
-                                            <h5 className="text-sm font-medium uppercase xsm:text-base">
-                                                { t("profile.trains.points") }
-                                            </h5>
-                                            <FlexArrowIcon rotated={ sortTrainsBy === "score" }/>
-                                        </div>
-                                        <div className="hidden sm:flex flex-row align-center justify-center gap-2 p-2.5 text-center xl:p-5 cursor-pointer"
-                                             onClick={ () => setSortTrainsBy("time") }>
-                                            <h5 className="text-sm font-medium uppercase xsm:text-base">
-                                                { t("profile.trains.time") }
-                                            </h5>
-                                            <FlexArrowIcon rotated={ sortTrainsBy === "time" }/>
-                                        </div>
-                                    </div>
-
-                                    { Object.keys(data.player.trainStats).sort((a, b) => data.player.trainStats[ b ][ sortTrainsBy ] - data.player.trainStats[ a ][ sortTrainsBy ]).map(trainName =>
-                                    {
-                                        const train = data.player.trainStats[ trainName ];
-
-                                        return <div
-                                                className={ `grid grid-cols-3 sm:grid-cols-4 border-t border-t-stroke dark:border-t-strokedark` }
-                                                key={ trainName }
-                                        >
-                                            <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">
-                                                    { trainName }
-                                                </p>
-                                            </div>
-
-                                            <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>
-                                            </div>
-
-                                            <div className="flex items-center justify-center p-2.5 lg:p-5">
-                                                <p className="text-meta-3">{ train.score }</p>
-                                            </div>
-
-                                            <div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
-                                                <p className="text-meta-3">{ formatTime(train.time) }</p>
-                                            </div>
-                                        </div>;
-                                    }) }
-
-
-                                </div> }
-
-                    </div> }
-            { 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="group relative cursor-pointer" onClick={ () => setShowStations(val => !val) }>
-                            <h1 className="text-xl text-black dark:text-white pb-5">{ t("profile.stations.header") }</h1>
-                            <ArrowIcon rotated={ showStations }/>
-                        </div>
-                        { showStations &&
-                                <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="p-2.5 text-center xl:p-5">
-                                            <h5 className="text-sm font-medium uppercase xsm:text-base">
-                                                { t("profile.stations.station") }
-                                            </h5>
-                                        </div>
-
-                                        <div className="p-2.5 text-center xl:p-5">
-                                            <h5 className="text-sm font-medium uppercase xsm:text-base">
-                                                { t("profile.stations.time") }
-                                            </h5>
-                                        </div>
-                                    </div>
-                                    { Object.keys(data.player.dispatcherStats).sort((a, b) => data.player.dispatcherStats[ b ].time - data.player.dispatcherStats[ a ].time).map(stationName =>
-                                    {
-                                        const station = data.player.dispatcherStats[ stationName ];
-                                        return <div
-                                                className={ `grid grid-cols-2 border-t border-t-stroke dark:border-t-strokedark` }
-                                                key={ stationName }
-                                        >
-                                            <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">
-                                                    { stationName }
-                                                </p>
-                                            </div>
-
-                                            <div className="flex items-center justify-center p-2.5 lg:p-5">
-                                                <p className="text-meta-3">{ formatTime(station.time) }</p>
-                                            </div>
-                                        </div>;
-                                    }) }
-
-                                </div> }
-
-                    </div> }
-
-
-            { isAdmin && <>
-                <div className="shadow-default dark:bg-boxdark items-center justify-center p-2.5 flex flex-col xl:p-5 gap-2">
-                    <h1 className="text-xl text-black dark:text-white">{ t("admin.header") }</h1>
-
-                    <div className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap">
-
-                        { data.player.flags.includes("leaderboard_hidden") ?
-                                <button className={ "inline-flex items-center justify-center rounded-md py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5 bg-success" }
-                                        onClick={ () => adminToggleHideLeaderboardPlayerProfile() }>
-                                    { t("admin.hideLeaderboard.button2") }
-                                </button> :
-                                <button className={ "inline-flex items-center justify-center rounded-md py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5 bg-danger" }
-                                        onClick={ () => setHideLeaderboardStatsModal(true) }>
-                                    { t("admin.hideLeaderboard.button") }
-                                </button> }
-
-                        <button className="inline-flex items-center justify-center rounded-md bg-danger py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
-                                onClick={ () => setHideProfileModal(true) }>
-                            { t("admin.hide.button") }
-                        </button>
-                    </div>
-                </div>
-            </> }
-
-            <div className="shadow-default dark:bg-boxdark items-center justify-center p-2.5 flex flex-col xl:p-5 gap-2">
-                <h1 className="text-sm text-black dark:text-white">
-                    { t("profile.info", { date: dayjs(data.player.createdAt).format("DD/MM/YYYY") }) }
-                </h1>
-            </div>
-
-        </div>
-    </>;
-};

packages/frontend/src/components/pages/profiles/Profile.tsx

@@ -75,13 +75,15 @@ export const ProfileCard = ({ data }: { data: TProfileData }) =>
                 className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
             <div className="px-4 pt-6 text-center lg:pb-8 xl:pb-11.5">
                 <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 p-1 sm:h-44 sm:max-w-44">
-                    <div className="relative drop-shadow-2">
+                    <div className="relative rounded-full">
                         <img className="rounded-full" src={ data.player.avatar } alt="profile"/>
+                        { data.active &&
+                                <span className="absolute w-full rounded-full border-white bg-[#219653] dark:border-black max-w-5.5 right-0 top-0 h-5.5 border-[3px]"></span> }
                     </div>
                 </div>
                 <div className="mt-4">
-                    <h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
+                    <h3 className="text-2xl font-semibold text-black dark:text-white">
                         { data.player.username } <UserIcons flags={ data.player.flags }/>
                     </h3>
 
@@ -103,8 +105,19 @@ export const ProfileCard = ({ data }: { data: TProfileData }) =>
                         </div>
                     </div>
                 </div>
+
+                { data.active && data.active.type === "train" &&
+                        <div className="mx-auto text-center">
+                            <h4 className="font-semibold text-black dark:text-white">{ t("profile.active.train", { train: `${ data.active.trainName } - ${ data.active.trainNumber }`, server: data.active.server.toUpperCase() }) }</h4>
+                        </div> }
+
+                { data.active && data.active.type === "station" &&
+                        <div className="mx-auto text-center">
+                            <h4 className="font-semibold text-black dark:text-white">{ t("profile.active.station", { station: `${ data.active.stationName } - ${ data.active.stationShort }`, server: data.active.server.toUpperCase() }) }</h4>
+                        </div> }
             </div>
 
+
             { 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="group relative cursor-pointer" onClick={ () => setShowTrains(val => !val) }>
@@ -114,7 +127,7 @@ export const ProfileCard = ({ data }: { data: TProfileData }) =>
 
                         { showTrains &&
                                 <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-3">
                                         <div className="p-2.5 text-center xl:p-5">
                                             <h5 className="text-sm font-medium uppercase xsm:text-base">
                                                 { t("profile.trains.train") }
@@ -134,13 +147,13 @@ export const ProfileCard = ({ data }: { data: TProfileData }) =>
                                             </h5>
                                             <FlexArrowIcon rotated={ sortTrainsBy === "score" }/>
                                         </div>
-                                        <div className="hidden sm:flex flex-row align-center justify-center gap-2 p-2.5 text-center xl:p-5 cursor-pointer"
+                                        {/*<div className="hidden sm:flex flex-row align-center justify-center gap-2 p-2.5 text-center xl:p-5 cursor-pointer"*/ }
-                                             onClick={ () => setSortTrainsBy("time") }>
+                                        {/*     onClick={ () => setSortTrainsBy("time") }>*/ }
-                                            <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>*/ }
-                                            <FlexArrowIcon rotated={ sortTrainsBy === "time" }/>
+                                        {/*    <FlexArrowIcon rotated={ sortTrainsBy === "time" }/>*/ }
-                                        </div>
+                                        {/*</div>*/ }
                                     </div>
 
                                     { Object.keys(data.player.trainStats).sort((a, b) => data.player.trainStats[ b ][ sortTrainsBy ] - data.player.trainStats[ a ][ sortTrainsBy ]).map(trainName =>
@@ -148,7 +161,7 @@ export const ProfileCard = ({ data }: { data: TProfileData }) =>
                                         const train = data.player.trainStats[ trainName ];
 
                                         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-3 border-t border-t-stroke dark:border-t-strokedark` }
                                                 key={ trainName }
                                         >
                                             <div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
@@ -165,9 +178,9 @@ export const ProfileCard = ({ data }: { data: TProfileData }) =>
                                                 <p className="text-meta-3">{ train.score }</p>
                                             </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">{ formatTime(train.time) }</p>
+                                            {/*    <p className="text-meta-3">{ formatTime(train.time) }</p>*/ }
-                                            </div>
+                                            {/*</div>*/ }
                                         </div>;
                                     }) }
 

packages/frontend/src/i18n/languages/en.json

@@ -108,7 +108,11 @@
         "description": "The player's profile could not be displayed due to active moderator actions."
       }
     },
-    "info": "Note: This user's statistics are collected since {{date}}."
+    "info": "Note: This user's statistics are collected since {{date}}.",
+    "active": {
+      "train": "Drives the train {{train}}, on the server {{server}}",
+      "station": "Active on station {{station}}, on server {{server}}"
+    }
   },
   "log": {
     "errors": {

packages/frontend/src/i18n/languages/pl.json

@@ -108,7 +108,11 @@
         "description": "Profil gracza nie mógł zostać wyświetlony ze względu na aktywne działania moderatora."
       }
     },
-    "info": "Uwaga: Statystyki tego użytkownika gromadzone są od {{date}} r."
+    "info": "Uwaga: Statystyki tego użytkownika gromadzone są od {{date}} r.",
+    "active": {
+      "train": "Prowadzi pociąg {{train}}, na serwerze {{server}}",
+      "station": "Aktywny na stacji {{station}}, na serwerze {{server}}"
+    }
   },
   "log": {
     "errors": {

packages/frontend/src/pages/profile/Profile.tsx

@@ -1,63 +0,0 @@
-/*
- * Copyright (C) 2024 Aleksander <alekswilc> Wilczyński (aleks@alekswilc.dev)
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published
- * by the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * See LICENSE for more.
- */
-
-
-import { useParams } from "react-router-dom";
-
-import { ContentLoader, LoadError } from "../../components/mini/loaders/ContentLoader.tsx";
-import { WarningAlert } from "../../components/mini/alerts/Warning.tsx";
-import { ProfileCard } from "../../components/pages/profile/Profile.tsx";
-import { useTranslation } from "react-i18next";
-import { PageMeta } from "../../components/mini/util/PageMeta.tsx";
-import { formatTime } from "../../util/time.ts";
-import useSWR from "swr";
-import { get } from "../../util/fetcher.ts";
-
-
-export const Profile = () =>
-{
-    const { id } = useParams();
-    const { data, error, isLoading } = useSWR(`/profiles/${ id }`, get, { refreshInterval: 10_000, errorRetryCount: 5 });
-
-    const { t } = useTranslation();
-
-    return (
-            <>
-                {/* LOADING */ }
-                { isLoading && <ContentLoader/> }
-                {/* ERROR */ }
-                { error && <LoadError/> }
-                {/* BLACKLISTED */ }
-                { data && data.code === 403 && <PageMeta title="simrail.pro | Profile hidden"
-                                                         description="The player's profile could not be displayed due to active moderator actions."/> }
-                { data && data.code === 403 && <WarningAlert title={ t("profile.errors.blacklist.title") }
-                                                             description={ t("profile.errors.blacklist.description") }/> }
-                {/* NOT FOUND */ }
-                { data && data.code === 404 && <PageMeta title="simrail.pro | Profile not found"
-                                                         description="Player's profile could not be found or the player has a private Steam profile."/> }
-                { data && data.code === 404 && <WarningAlert title={ t("profile.errors.notfound.title") }
-                                                             description={ t("profile.errors.notfound.description") }/> }
-
-                {/* SUCCESS */ }
-                { data && data.code === 200 && <PageMeta image={ data.data.player.username }
-                                                         title={ `simrail.pro | ${ data.data.player.username }'s profile` }
-                                                         description={ `${ data.data.player.trainDistance ? 0 : ((data.data.player.trainDistance / 1000).toFixed(2)) } driving experience |
-${ data.data.player.dispatcherTime ? 0 : formatTime(data.data.player.dispatcherTime) } dispatcher experience` }/> }
-                { data && data.code === 200 && <ProfileCard data={ data.data }/> }
-            </>
-    );
-};
-

packages/frontend/src/types/profile.ts

@@ -33,6 +33,7 @@ export interface TProfileSuccessResponse
 export interface TProfileData
 {
     player: TProfilePlayer;
+    active: ActiveTrain | ActiveStation | undefined
 }
 
 export interface TProfilePlayer
@@ -60,3 +61,17 @@ export interface TProfilePlayer
         time: number;
     }>
 }
+
+export type ActiveTrain = {
+    type: "train"
+    trainNumber: string
+    trainName: string
+    server: string
+}
+
+export type ActiveStation = {
+    type: "station",
+    stationName: string
+    stationShort: string
+    server: string
+}