charleslemaux/servii-frontend
1
0
Fork 0
mirror of https://github.com/hubHarmony/servii-frontend.git synced 2024-11-18 05:40:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ajout no server et facto

Browse Source
This commit is contained in:
AntoninoP 2024-07-02 13:54:59 +02:00
parent d3fc09370a
commit 708284d071
6 changed files with 239 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -5,10 +5,16 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <title>Vite + React</title>
<!-- charger les polices -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<!-- Cloudflare Web Analytics -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "d4d9229f2a274196abc7fa7fc90428f4"}'></script>
<!-- End Cloudflare Web Analytics -->
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
<!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "d4d9229f2a274196abc7fa7fc90428f4"}'></script><!-- End Cloudflare Web Analytics -->
</body> </body>
</html> </html>

15
src/main.css
View File

@ -1,10 +1,12 @@
html{ /* index.css */
html {
font-size: 12px; font-size: 12px;
font-family: 'Poppins', sans-serif;
} }
:root { :root {
--navbar-height: 5rem; --navbar-height: 5rem;
--navbar-background-color: #333; --navbar-background-color: #100D25;
--navbar-color: #fff; --navbar-color: #fff;
--profile-pic-size: 3rem; --profile-pic-size: 3rem;
--logout-button-bg: #ff4b4b; --logout-button-bg: #ff4b4b;
@ -12,9 +14,12 @@ html{
--card-width: 90%; --card-width: 90%;
--card-padding: 2.5rem; --card-padding: 2.5rem;
--card-border-color: #343947; --card-border-color: #343947;
--card-bg-color: #1E2227; --card-bg-color: #1D1836;
--main-bg-color: #23272E; --main-bg-color: #050816;
--text-color: white; --text-color: white;
--text-color-black: black; --text-color-black: black;
}
body {
font-family: 'Poppins', sans-serif;
} }

179
src/pages/DashboardPage/DashboardPage.jsx
View File

@ -1,38 +1,16 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { getAuth } from 'firebase/auth';
import ServerCard from '../../components/serverCard/serverCard'; import ServerCard from '../../components/serverCard/serverCard';
import Navbar from '../../components/navbar/Navbar'; import Navbar from '../../components/navbar/Navbar';
import styles from './DashboardPage.module.scss'; import styles from './DashboardPage.module.scss';
import NoServer from '../NoServer/NoServer';
import { fetchServers, createServer, runServer, stopServer, deleteServer } from '../../serverService';
const DashboardPage = ({ user }) => { const DashboardPage = ({ user }) => {
const [servers, setServers] = useState([]); const [servers, setServers] = useState([]);
const auth = getAuth();
const fetchServers = async () => { const loadServers = async () => {
try { try {
const currentUser = auth.currentUser; const data = await fetchServers();
if (!currentUser) {
console.error('No current user found');
return;
}
const userId = currentUser.uid;
console.log('User ID:', userId);
const response = await fetch('http://176.165.62.226:3000/FetchServers', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${userId}`,
},
body: JSON.stringify({ token: userId }),
});
if (!response.ok) {
const errorText = await response.text();
console.error('Error response text:', errorText);
throw new Error(`Network response was not ok: ${response.statusText}`);
}
const data = await response.json();
console.log('Data:', data);
setServers(data); setServers(data);
} catch (error) { } catch (error) {
console.error('Error fetching servers:', error); console.error('Error fetching servers:', error);
@ -40,32 +18,23 @@ const DashboardPage = ({ user }) => {
}; };
useEffect(() => { useEffect(() => {
fetchServers(); loadServers();
}, [auth]); }, []);
const handleCreateServer = async () => {
try {
const serverName = prompt('Enter the name for the new server:');
if (!serverName) return;
await createServer(serverName);
loadServers();
} catch (error) {
console.error('Error creating server:', error);
}
};
const handleRunServer = async (serverName) => { const handleRunServer = async (serverName) => {
try { try {
const currentUser = auth.currentUser; await runServer(serverName);
if (!currentUser) {
console.error('No current user found');
return;
}
const userId = currentUser.uid;
console.log('Run server:', serverName);
const response = await fetch('http://176.165.62.226:3000/ServerRun', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${userId}`,
},
body: JSON.stringify({ name: serverName, token: userId }),
});
if (!response.ok) {
const errorText = await response.text();
console.error('Error response text:', errorText);
throw new Error(`Failed to start server: ${response.statusText}`);
}
} catch (error) { } catch (error) {
console.error('Error starting server:', error); console.error('Error starting server:', error);
} }
@ -73,27 +42,7 @@ const DashboardPage = ({ user }) => {
const handleStopServer = async (serverName) => { const handleStopServer = async (serverName) => {
try { try {
const currentUser = auth.currentUser; await stopServer(serverName);
if (!currentUser) {
console.error('No current user found');
return;
}
const userId = currentUser.uid;
console.log('Stop server:', serverName);
const response = await fetch('http://176.165.62.226:3000/ServerStop', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${userId}`,
},
body: JSON.stringify({ name: serverName, token: userId }),
});
if (!response.ok) {
const errorText = await response.text();
console.error('Error response text:', errorText);
throw new Error(`Failed to stop server: ${response.statusText}`);
}
} catch (error) { } catch (error) {
console.error('Error stopping server:', error); console.error('Error stopping server:', error);
} }
@ -101,86 +50,34 @@ const DashboardPage = ({ user }) => {
const handleDeleteServer = async (serverName) => { const handleDeleteServer = async (serverName) => {
try { try {
const currentUser = auth.currentUser; await deleteServer(serverName);
if (!currentUser) { loadServers();
console.error('No current user found');
return;
}
const userId = currentUser.uid;
console.log('Delete server:', serverName);
const response = await fetch('http://176.165.62.226:3000/ServerDelete', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${userId}`,
},
body: JSON.stringify({ name: serverName, token: userId }),
});
if (!response.ok) {
const errorText = await response.text();
console.error('Error response text:', errorText);
throw new Error(`Failed to delete server: ${response.statusText}`);
} else {
// Fetch the updated list of servers
fetchServers();
}
} catch (error) { } catch (error) {
console.error('Error deleting server:', error); console.error('Error deleting server:', error);
} }
}; };
const handleCreateServer = async () => {
try {
const currentUser = auth.currentUser;
if (!currentUser) {
console.error('No current user found');
return;
}
const userId = currentUser.uid;
const serverName = prompt('Enter server name:');
const serverVersion = prompt('Enter server version:');
console.log('Create server:', serverName);
const response = await fetch('http://176.165.62.226:3000/ServerCreate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${userId}`,
},
body: JSON.stringify({ name: serverName, version: serverVersion, token: userId , framework: "paper"}),
});
if (!response.ok) {
const errorText = await response.text();
console.error('Error response text:', errorText);
throw new Error(`Failed to create server: ${response.statusText}`);
} else {
// Fetch the updated list of servers
fetchServers();
}
} catch (error) {
console.error('Error creating server:', error);
}
};
return ( return (
<div className={styles.dashboardContainer}> <div className={styles.dashboardContainer}>
<Navbar user={user} /> <Navbar user={user} />
<div className={styles.cardsContainer}> <div className={styles.cardsContainer}>
<button onClick={handleCreateServer}>Create Server</button> {servers.length === 0 ? (
{servers.map((server, index) => ( <NoServer onCreateServer={handleCreateServer} />
<ServerCard ) : (
key={index} servers.map((server, index) => (
color="#f0f0f0" <ServerCard
status={server.running ? 'En cours' : 'Hors ligne'} key={index}
version={server.version} color="#f0f0f0"
name={server.name} status={server.running ? 'En cours' : 'Hors ligne'}
link={`#`} version={server.version}
onRunClick={handleRunServer} name={server.name}
onStopClick={handleStopServer} link="#"
onDeleteClick={handleDeleteServer} onRunClick={() => handleRunServer(server.name)}
/> onStopClick={() => handleStopServer(server.name)}
))} onDeleteClick={() => handleDeleteServer(server.name)}
/>
))
)}
</div> </div>
</div> </div>
); );

16
src/pages/NoServer/NoServer.jsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import styles from './NoServer.module.scss';
const NoServer = ({ onCreateServer }) => {
return (
<div className={styles.container}>
<div className={styles.mainCard}>
<div className={styles.nsSubTitle}>Erreur </div>
<div className={styles.nsTitle}>Aucun serveur possédé</div>
<button className={styles.btnServCreate} onClick={onCreateServer}>Créer un nouveau serveur</button>
</div>
</div>
);
};
export default NoServer;

45
src/pages/NoServer/NoServer.module.scss Normal file
View File

@ -0,0 +1,45 @@
.container{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.mainCard{
display: flex;
justify-content: start;
align-items: start;
flex-direction: column;
width: 75rem;
padding: 4rem 5rem 3rem 5rem;
background-color: #1D1836;
border-radius: 1.5rem;
}
.nsTitle{
font-size: 3.5rem;
color: #F2F2F2;
font-weight: 900;
}
.nsSubTitle{
font-size: 1.8rem;
color: #AAA6C3;
font-weight: 300;
}
.btnServCreate{
display: flex;
justify-content: center;
align-items: center;
background-color: #090325;
width: 40rem;
height: 5rem;
color: white;
margin-top: 5rem;
border: solid 0.1rem #090325;
cursor: pointer;
font-size: 2rem;
font-weight: 900;
border-radius: 1rem;
}

123
src/serverService.jsx Normal file
View File

@ -0,0 +1,123 @@
// src/services/serverService.js
import { getAuth } from 'firebase/auth';
const apiUrl = 'http://176.165.62.226:3000';
const fetchServers = async () => {
const auth = getAuth();
const currentUser = auth.currentUser;
if (!currentUser) {
throw new Error('No current user found');
}
const userId = currentUser.uid;
const response = await fetch(`${apiUrl}/FetchServers`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${userId}`,
},
body: JSON.stringify({ token: userId }),
});
if (!response.ok) {
const errorText = await response.text();
throw new Error(`Network response was not ok: ${errorText}`);
}
return await response.json();
};
const createServer = async (serverName) => {
const auth = getAuth();
const currentUser = auth.currentUser;
if (!currentUser) {
throw new Error('No current user found');
}
const userId = currentUser.uid;
const response = await fetch(`${apiUrl}/CreateServer`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${userId}`,
},
body: JSON.stringify({ name: serverName, token: userId }),
});
if (!response.ok) {
const errorText = await response.text();
throw new Error(`Failed to create server: ${errorText}`);
}
};
const runServer = async (serverName) => {
const auth = getAuth();
const currentUser = auth.currentUser;
if (!currentUser) {
throw new Error('No current user found');
}
const userId = currentUser.uid;
const response = await fetch(`${apiUrl}/ServerRun`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${userId}`,
},
body: JSON.stringify({ name: serverName, token: userId }),
});
if (!response.ok) {
const errorText = await response.text();
throw new Error(`Failed to start server: ${errorText}`);
}
};
const stopServer = async (serverName) => {
const auth = getAuth();
const currentUser = auth.currentUser;
if (!currentUser) {
throw new Error('No current user found');
}
const userId = currentUser.uid;
const response = await fetch(`${apiUrl}/ServerStop`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${userId}`,
},
body: JSON.stringify({ name: serverName, token: userId }),
});
if (!response.ok) {
const errorText = await response.text();
throw new Error(`Failed to stop server: ${errorText}`);
}
};
const deleteServer = async (serverName) => {
const auth = getAuth();
const currentUser = auth.currentUser;
if (!currentUser) {
throw new Error('No current user found');
}
const userId = currentUser.uid;
const response = await fetch(`${apiUrl}/ServerDelete`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${userId}`,
},
body: JSON.stringify({ name: serverName, token: userId }),
});
if (!response.ok) {
const errorText = await response.text();
throw new Error(`Failed to delete server: ${errorText}`);
}
};
export { fetchServers, createServer, runServer, stopServer, deleteServer };