From f2fa0a45a9ced6b0f6d128c34e6fa2e9ce790dc4 Mon Sep 17 00:00:00 2001 From: AntoninoP Date: Thu, 22 Aug 2024 11:09:19 +0200 Subject: [PATCH] + ServerHistory v1 and sidebar status bug fixed --- src/pages/ServerConsole/ServerConsole.jsx | 10 +- src/pages/ServerDetails/ServerDetails.jsx | 36 ++++---- .../ServerDetails/ServerDetails.module.scss | 18 +--- src/pages/ServerHistory/ServerHistory.jsx | 91 +++++++++++++++++++ .../ServerHistory/ServerHistory.module.scss | 8 ++ src/service/api.tsx | 8 ++ 6 files changed, 135 insertions(+), 36 deletions(-) create mode 100644 src/pages/ServerHistory/ServerHistory.jsx create mode 100644 src/pages/ServerHistory/ServerHistory.module.scss diff --git a/src/pages/ServerConsole/ServerConsole.jsx b/src/pages/ServerConsole/ServerConsole.jsx index abc89e3..f16e496 100644 --- a/src/pages/ServerConsole/ServerConsole.jsx +++ b/src/pages/ServerConsole/ServerConsole.jsx @@ -6,7 +6,7 @@ import serviiApi from "../../service/api.tsx"; import Loading from '../Loading/loading.jsx'; import PropTypes from "prop-types"; -const ServerConsole = ({ user }) => { +const ServerConsole = () => { const navigate = useNavigate(); const { serverName } = useParams(); const [loading, setLoading] = useState(false); @@ -24,23 +24,23 @@ const ServerConsole = ({ user }) => { const fetchServerLogs = async () => { setError(null); - + setLoading(true); try { const response = await serviiApi.fetchLogs(serverName); if (response.return_code === 200) { let logString = response.message; logString = logString.slice(1, -1); logString = logString.replace(/\\n/g, '\n'); - logString = logString.replace(/\\\"/g, '"'); + logString = logString.replace(/\\"/g, '"'); logString = logString.replace(/, ?/g, ''); logString = logString.replace(/"{2,}/g, ''); logString = logString.replace(/'{2,}/g, ''); logString = logString.trim(); setLogs(logString); + setLoading(false); } } catch (err) { setError(`Erreur: ${err.message}`); - } finally { } }; @@ -57,7 +57,7 @@ const ServerConsole = ({ user }) => { return; } try { - const response = await serviiApi.command(message, serverName); + await serviiApi.command(message, serverName); setMessage(''); fetchServerLogs(); } catch (err) { diff --git a/src/pages/ServerDetails/ServerDetails.jsx b/src/pages/ServerDetails/ServerDetails.jsx index 033a4d5..f037f79 100644 --- a/src/pages/ServerDetails/ServerDetails.jsx +++ b/src/pages/ServerDetails/ServerDetails.jsx @@ -1,8 +1,9 @@ -import { useParams, useNavigate, Route, Routes, Link } from 'react-router-dom'; +import { useParams, Route, Routes } from 'react-router-dom'; +import { useState, useEffect } from 'react'; import Navbar from '../../components/navbar/Navbar'; import ServerProperties from '../ServerProperties/ServerProperties'; import ServerConsole from '../ServerConsole/ServerConsole'; -// import ServerHistory from '../ServerHistory/ServerHistory'; +import ServerHistory from '../ServerHistory/ServerHistory'; // import ServerPlayers from '../ServerPlayers/ServerPlayers'; // import ServerWorlds from '../ServerWorlds/ServerWorlds'; // import ServerBackups from '../ServerBackups/ServerBackups'; @@ -14,29 +15,31 @@ import NotFoundPage from '../NotFoundPage/NotFoundPage'; import { NavLink } from 'react-router-dom'; import { useLocation } from 'react-router-dom'; - const ServerDetails = ({ user }) => { const { serverName } = useParams(); - const navigate = useNavigate(); const location = useLocation(); - const status = location.state?.status; - - const handleQuit = () => { - navigate('/dashboard'); - }; + const initialStatus = location.state?.status || false; + const [status, setStatus] = useState(initialStatus); + useEffect(() => { + if (location.state?.status !== undefined) { + setStatus(location.state.status); + } + }, [location]); + return ( <>
-
-
-

{user.displayName}

-
-
+ + Retour aux serveurs + + isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}> @@ -80,14 +83,13 @@ const ServerDetails = ({ user }) => { Accès
-
} /> } /> - Cette fonctionnalité sera prochainement disponible.} /> - Cette fonctionnalité sera prochainement disponible.} /> + } /> + Cette fonctionnalité sera prochainement disponible.} /> Cette fonctionnalité sera prochainement disponible.} /> Cette fonctionnalité sera prochainement disponible.} /> Cette fonctionnalité sera prochainement disponible.} /> diff --git a/src/pages/ServerDetails/ServerDetails.module.scss b/src/pages/ServerDetails/ServerDetails.module.scss index e2ab77d..f721492 100644 --- a/src/pages/ServerDetails/ServerDetails.module.scss +++ b/src/pages/ServerDetails/ServerDetails.module.scss @@ -6,8 +6,8 @@ .sidebar { width: 20rem; background-color: #100D25; - padding: 2rem 1rem; padding-left: 0rem; + padding-right: 1rem; box-sizing: border-box; position: fixed; height: calc(100vh - var(--navbar-height)); @@ -19,7 +19,7 @@ display: flex; align-items: center; padding: 0.7rem 1rem ; - margin: .5rem 0rem; + margin: .8rem 0rem; padding-right: 0rem; font-size: 1.5rem; cursor: pointer; @@ -54,6 +54,8 @@ .menu { display: flex; flex-direction: column; + justify-content: space-around; + margin-top: 2.5rem; } @@ -66,18 +68,6 @@ font-size: 1.25rem; } -.BackButton { - margin-top: 1rem; - padding: 0.70rem 1.5rem; - background-color: #1D1836; - border: none; - color: white; - cursor: pointer; - width: 20rem; - text-align: center; - font-size: 1.25rem; - -} .serverDetailsContainer { margin-top: var(--navbar-height); diff --git a/src/pages/ServerHistory/ServerHistory.jsx b/src/pages/ServerHistory/ServerHistory.jsx new file mode 100644 index 0000000..ed8d237 --- /dev/null +++ b/src/pages/ServerHistory/ServerHistory.jsx @@ -0,0 +1,91 @@ +import { useEffect, useState, useRef } from 'react'; +import { useParams, useNavigate, useLocation } from 'react-router-dom'; +import styles from './ServerHistory.module.scss'; +import serviiApi from "../../service/api.tsx"; +import Loading from '../Loading/loading.jsx'; +import PropTypes from "prop-types"; + +const ServerHistory = ({ user }) => { + const navigate = useNavigate(); + const { serverName } = useParams(); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + const [history, setHistory] = useState(''); + const location = useLocation(); + const status = location.state?.status; + + const historyEndRef = useRef(null); + + const scrollToBottom = () => { + historyEndRef.current?.scrollIntoView({ behavior: "smooth" }); + }; + + const fetchServerHistory = async () => { + setError(null); + setLoading(true); + + try { + const response = await serviiApi.fetchHistory(serverName); + if (response.return_code === 200) { + let historyString = response.message; + historyString = historyString.slice(1, -1); + historyString = historyString.replace(/\\n/g, '\n'); + historyString = historyString.replace(/\\\"/g, '"'); + historyString = historyString.replace(/, ?/g, ''); + historyString = historyString.replace(/"{2,}/g, ''); + historyString = historyString.replace(/'{2,}/g, ''); + historyString = historyString.trim(); + setHistory(historyString); + } + } catch (err) { + setError(`Erreur: ${err.message}`); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchServerHistory(); + }, [serverName]); + + useEffect(() => { + scrollToBottom(); + }, [history]); + + if (loading) { + return ; + } + + if (error) { + return ( +
+
+

{error}

+ +
+
+ ); + } + + return ( +
+
+
+ 
+                {history}
+
+
+
+
+ ); +}; + +ServerHistory.propTypes = { + user: PropTypes.oneOfType([ + PropTypes.shape({ + uid: PropTypes.string.isRequired, + }), + ]), +}; + +export default ServerHistory; diff --git a/src/pages/ServerHistory/ServerHistory.module.scss b/src/pages/ServerHistory/ServerHistory.module.scss new file mode 100644 index 0000000..dab028b --- /dev/null +++ b/src/pages/ServerHistory/ServerHistory.module.scss @@ -0,0 +1,8 @@ +.container{ + margin-top: var(--navbar-height); +} + +.extraMargin{ + margin-bottom: 5rem; + color:red; +} \ No newline at end of file diff --git a/src/service/api.tsx b/src/service/api.tsx index 056d8e5..08be7e8 100644 --- a/src/service/api.tsx +++ b/src/service/api.tsx @@ -48,12 +48,15 @@ enum serviiRequest { updateProperty = 'UpdateProperties', command = 'Command', fetchLogs = 'FetchLogs', + fetchHistory = 'FetchHistory', + } const nonToastableCalls: string[] = [ serviiRequest.fetchServers, serviiRequest.fetchLogs, + serviiRequest.fetchHistory, ]; class serviiApi { @@ -128,6 +131,11 @@ class serviiApi { return this.call(serviiRequest.fetchLogs, payload); } + public static async fetchHistory(name: string): Promise { + const payload: ServerRequest = { token: this.token(), name: name }; + return this.call(serviiRequest.fetchHistory, payload); + } + public static async accountCreate(): Promise { const payload: BaseRequest = { token: this.token() }; return this.call(serviiRequest.accountCreate, payload);