-
-
+
+
+
+
+ isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+ Propriétés
+
+
+ isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+ Console
+
+
+ isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+ Historique
+
+
+ isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+ Joueurs
+
+
+ isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+ Mondes
+
+
+ isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+ Sauvegardes
+
+
+ isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>
+ 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.} />
+ } />
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
);
};
@@ -162,4 +108,5 @@ ServerDetails.propTypes = {
}),
]),
};
+
export default ServerDetails;
diff --git a/src/pages/ServerDetails/ServerDetails.module.scss b/src/pages/ServerDetails/ServerDetails.module.scss
index 782bf06..e2ab77d 100644
--- a/src/pages/ServerDetails/ServerDetails.module.scss
+++ b/src/pages/ServerDetails/ServerDetails.module.scss
@@ -1,133 +1,114 @@
+.container {
+ display: flex;
+ min-height: calc(100vh - var(--navbar-height));
+}
+
+.sidebar {
+ width: 20rem;
+ background-color: #100D25;
+ padding: 2rem 1rem;
+ padding-left: 0rem;
+ box-sizing: border-box;
+ position: fixed;
+ height: calc(100vh - var(--navbar-height));
+ top: var(--navbar-height);
+ color: white;
+}
+
+.menuItem {
+ display: flex;
+ align-items: center;
+ padding: 0.7rem 1rem ;
+ margin: .5rem 0rem;
+ padding-right: 0rem;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: #D1D5DB;
+ text-decoration: none;
+ width: 100%;
+ &.active {
+ background-color: #1D1836;
+ color: white;
+ }
+}
+
+.menuItem:hover {
+ color: white;
+}
+
+
+.user {
+ margin-bottom: 2rem;
+}
+
+.user p {
+ font-size: 1.25rem;
+ font-weight: bold;
+}
+
+.user small {
+ font-size: 0.875rem;
+ color: #9CA3AF;
+}
+
+.menu {
+ display: flex;
+ flex-direction: column;
+}
+
+
+.menuItem:hover {
+ color: white;
+}
+
+.menuItem svg {
+ margin-right: 1rem;
+ 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 {
- padding-top: var(--navbar-height);
+ margin-top: var(--navbar-height);
+ flex: 1;
+ margin-left: 20rem;
+ padding-top: 1rem;
background-color: var(--main-bg-color);
display: flex;
flex-direction: column;
align-items: center;
color: var(--text-color);
- width: 100%;
- box-sizing: border-box;
-}
-
-.details {
- margin-top: 5rem;
- padding: 3rem;
- padding-top: 0;
- background-color: var(--card-bg-color);
- width: 100%;
- max-width: 60rem;
- border-radius: 1.5rem;
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
+ overflow-y: auto;
}
-.formGroup {
- margin-bottom: 2.5rem;
+
+.navbar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: var(--navbar-height);
+ background-color: var(--navbar-bg-color);
+ z-index: 1000;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.userinfo {
display: flex;
+ align-items: start;
+ justify-content: center;
flex-direction: column;
-}
-
-.formGroup label {
- font-weight: 600;
- margin-bottom: 1rem;
- font-size: 1.4rem;
- color: var(--label-color);
-}
-
-.formGroup input,
-.formGroup select {
- width: 100%;
- padding: 1.2rem;
- height: auto;
- background-color: var(--input-bg-color);
- border: 1px solid var(--input-border-color);
- border-radius: 0.75rem;
- color: var(--text-color);
- font-size: 1.2rem;
- line-height: 1.5rem;
- box-sizing: border-box;
- transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.formGroup input:focus,
-.formGroup select:focus {
- border-color: var(--focus-border-color);
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- outline: none;
-}
-
-/* Chrome- styles */
-@supports (-webkit-appearance: none) {
- .formGroup select {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background-image: url('data:image/svg+xml;utf8,
');
- background-repeat: no-repeat;
- background-position: right 1.2rem center;
- background-size: 1rem;
- padding-right: 3rem;
- }
-}
-
-.saveButton,
-.quitButton {
- padding: 1.2rem 2.5rem;
- color: var(--button-text-color);
- border: none;
- border-radius: 0.75rem;
- cursor: pointer;
- transition: background-color 0.3s ease, transform 0.3s ease;
- font-size: 1.2rem;
- margin-top: 1rem;
-}
-
-.saveButton {
- background-color: #05a771;
-}
-
-.saveButton:hover {
- background-color: #05a77183;
-}
-
-.quitButton {
- background-color: gray;
margin-left: 1rem;
-}
-
-
-.error {
- color: var(--error-color);
- font-size: 1.2rem;
-}
-
-.details h1 {
- font-size: 2.5rem;
- margin-bottom: 3rem;
- color: var(--header-color);
-}
-
-@media (max-width: 768px) {
- .details {
- width: 90%;
- padding: 2rem;
- }
-
- .formGroup input,
- .formGroup select {
- height: auto;
- font-size: 1.1rem;
- padding: 1rem;
- }
-
- .saveButton,
- .quitButton {
- padding: 1rem 2rem;
- font-size: 1.1rem;
- }
-
- .details h1 {
- font-size: 2rem;
- margin-bottom: 2rem;
- }
-}
+}
\ No newline at end of file
diff --git a/src/pages/ServerProperties/ServerProperties.jsx b/src/pages/ServerProperties/ServerProperties.jsx
new file mode 100644
index 0000000..674360e
--- /dev/null
+++ b/src/pages/ServerProperties/ServerProperties.jsx
@@ -0,0 +1,156 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import styles from './ServerProperties.module.scss';
+import serviiApi from "../../service/api.tsx";
+import Loading from '../Loading/loading';
+import PropTypes from "prop-types";
+
+const ServerProprieties = ({ user }) => {
+ const { serverName } = useParams();
+ const navigate = useNavigate();
+ const [server, setServer] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const fetchServer = async () => {
+ try {
+ const ApiResponse = await serviiApi.fetchServers();
+ const data = ApiResponse.message;
+ const foundServer = data.find(server => server.name === serverName);
+
+ if (foundServer) {
+ setServer(foundServer);
+ } else {
+ setError('Server not found');
+ }
+ } catch (error) {
+ console.error('Error fetching server:', error);
+ setError('Error fetching server');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchServer();
+ }, [serverName]);
+
+ const validateInput = (input) => {
+ return input.replace(/[^a-zA-Z]/g, '');
+ };
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ const validatedValue = name === 'motd' ? validateInput(value) : value;
+ setServer({ ...server, [name]: validatedValue });
+ };
+
+ const handleSave = async () => {
+ try {
+ const props = [
+ ['max-players', server.maxPlayers.toString()],
+ ['motd', server.motd],
+ ['difficulty', server.difficulty],
+ ['enable-command-block', server.enableCommandBlock.toString()],
+ ['gamemode', server.gamemode.toString()],
+ ['hardcore', server.hardcore.toString()],
+ ['online-mode', server.onlineMode.toString()],
+ ['pvp', server.pvp.toString()]
+ ];
+
+ await serviiApi.updateProperties(server.name, props);
+ } catch (error) {
+ console.error('Error updating server:', error);
+ alert('Error updating server');
+ }
+ };
+
+ if (loading) {
+ return
;
+ }
+
+ if (error) {
+ return (
+
+
+
{error}
+
+
+
+ );
+ }
+
+ return (
+
+
+
Propriétés du serveur {server.name}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+ServerProprieties.propTypes = {
+ user: PropTypes.oneOfType([
+ PropTypes.shape({
+ uid: PropTypes.string.isRequired,
+ displayName: PropTypes.string,
+ email: PropTypes.string,
+ }),
+ ]),
+};
+
+export default ServerProprieties;
diff --git a/src/pages/ServerProperties/ServerProperties.module.scss b/src/pages/ServerProperties/ServerProperties.module.scss
new file mode 100644
index 0000000..ccf14c8
--- /dev/null
+++ b/src/pages/ServerProperties/ServerProperties.module.scss
@@ -0,0 +1,133 @@
+.serverDetailsContainer {
+ padding-top: var(--navbar-height);
+ background-color: var(--main-bg-color);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: var(--text-color);
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .details {
+ padding: 3rem;
+ padding-top: 0;
+ background-color: var(--card-bg-color);
+ width: 100%;
+ max-width: 60rem;
+ border-radius: 1.5rem;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+ box-sizing: border-box;
+ }
+
+ .formGroup {
+ margin-bottom: 2.5rem;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .formGroup label {
+ font-weight: 600;
+ margin-bottom: 1rem;
+ font-size: 1.4rem;
+ color: var(--label-color);
+ }
+
+ .formGroup input,
+ .formGroup select {
+ width: 100%;
+ padding: 1.2rem;
+ height: auto;
+ background-color: var(--input-bg-color);
+ border: 1px solid var(--input-border-color);
+ border-radius: 0.75rem;
+ color: var(--text-color);
+ font-size: 1.2rem;
+ line-height: 1.5rem;
+ box-sizing: border-box;
+ transition: border-color 0.3s ease, box-shadow 0.3s ease;
+ }
+
+ .formGroup input:focus,
+ .formGroup select:focus {
+ border-color: var(--focus-border-color);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ outline: none;
+ }
+
+ /* Chrome- styles */
+ @supports (-webkit-appearance: none) {
+ .formGroup select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-image: url('data:image/svg+xml;utf8,
');
+ background-repeat: no-repeat;
+ background-position: right 1.2rem center;
+ background-size: 1rem;
+ padding-right: 3rem;
+ }
+ }
+
+ .saveButton,
+ .quitButton {
+ padding: 1.2rem 2.5rem;
+ color: var(--button-text-color);
+ border: none;
+ border-radius: 0.75rem;
+ cursor: pointer;
+ transition: background-color 0.3s ease, transform 0.3s ease;
+ font-size: 1.2rem;
+ margin-top: 1rem;
+ }
+
+ .saveButton {
+ background-color: #05a771;
+ }
+
+ .saveButton:hover {
+ background-color: #05a77183;
+ }
+
+ .quitButton {
+ background-color: gray;
+ margin-left: 1rem;
+ }
+
+
+ .error {
+ color: var(--error-color);
+ font-size: 1.2rem;
+ }
+
+ .details h1 {
+ font-size: 2.5rem;
+ margin-bottom: 3rem;
+ color: var(--header-color);
+ }
+
+ @media (max-width: 768px) {
+ .details {
+ width: 90%;
+ padding: 2rem;
+ }
+
+ .formGroup input,
+ .formGroup select {
+ height: auto;
+ font-size: 1.1rem;
+ padding: 1rem;
+ }
+
+ .saveButton,
+ .quitButton {
+ padding: 1rem 2rem;
+ font-size: 1.1rem;
+ }
+
+ .details h1 {
+ font-size: 2rem;
+ margin-bottom: 2rem;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/service/api.tsx b/src/service/api.tsx
index 1c21977..056d8e5 100644
--- a/src/service/api.tsx
+++ b/src/service/api.tsx
@@ -47,8 +47,15 @@ enum serviiRequest {
serverStop = 'ServerStop',
updateProperty = 'UpdateProperties',
command = 'Command',
+ fetchLogs = 'FetchLogs',
}
+
+const nonToastableCalls: string[] = [
+ serviiRequest.fetchServers,
+ serviiRequest.fetchLogs,
+ ];
+
class serviiApi {
constructor() {}
@@ -65,33 +72,35 @@ class serviiApi {
if (json.message === undefined) {
if (!(endpoint === serviiRequest.fetchServers)) {
- return { return_code: status, message: "Couldn't find an available API, we're sorry for the inconvenience." };
+ return { return_code: status, message: "Couldn't find an available API" };
}
return { return_code: status, message: json };
}
- let toastType: 'success' | 'error' | 'info';
- let toastColor: string;
+ if (!nonToastableCalls.includes(endpoint)) {
- if (status >= 200 && status < 300) {
- toastType = 'success';
- } else if (status >= 400 && status < 600) {
- toastType = 'error';
- } else {
- toastType = 'info';
- }
+ let toastType: 'success' | 'error' | 'info';
- toast[toastType](json.message, {
- position: "top-right",
- autoClose: 3500,
- hideProgressBar: false,
- closeOnClick: true,
- pauseOnHover: true,
- draggable: true,
- progress: undefined,
- theme: "light",
- transition: Bounce,
- });
+ if (status >= 200 && status < 300) {
+ toastType = 'success';
+ } else if (status >= 400 && status < 600) {
+ toastType = 'error';
+ } else {
+ toastType = 'info';
+ }
+
+ toast[toastType](json.message, {
+ position: "top-right",
+ autoClose: 3500,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ theme: "light",
+ transition: Bounce,
+ });
+ }
return { return_code: status, message: json.message };
}
@@ -114,6 +123,11 @@ class serviiApi {
return this.call(serviiRequest.fetchServers, payload);
}
+ public static async fetchLogs(name: string): Promise
{
+ const payload: ServerRequest = { token: this.token(), name: name };
+ return this.call(serviiRequest.fetchLogs, payload);
+ }
+
public static async accountCreate(): Promise {
const payload: BaseRequest = { token: this.token() };
return this.call(serviiRequest.accountCreate, payload);
@@ -150,7 +164,7 @@ class serviiApi {
name: name,
props: props,
};
- return this.call(serviiRequest.updateProperty, payload); // Correct usage here
+ return this.call(serviiRequest.updateProperty, payload);
}
public static async command(command: string, name: string): Promise {