mirror of
https://github.com/hubHarmony/servii-frontend.git
synced 2024-11-18 05:40:31 +00:00
ajout no server et facto
This commit is contained in:
AntoninoP
parent
d3fc09370a
commit
708284d071
@ -5,10 +5,16 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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>
|
||||
<body>
|
||||
<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>
|
||||
<!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "d4d9229f2a274196abc7fa7fc90428f4"}'></script><!-- End Cloudflare Web Analytics -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
13
src/main.css
13
src/main.css
@ -1,10 +1,12 @@
|
||||
/* index.css */
|
||||
html {
|
||||
font-size: 12px;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
--navbar-height: 5rem;
|
||||
--navbar-background-color: #333;
|
||||
--navbar-background-color: #100D25;
|
||||
--navbar-color: #fff;
|
||||
--profile-pic-size: 3rem;
|
||||
--logout-button-bg: #ff4b4b;
|
||||
@ -12,9 +14,12 @@ html{
|
||||
--card-width: 90%;
|
||||
--card-padding: 2.5rem;
|
||||
--card-border-color: #343947;
|
||||
--card-bg-color: #1E2227;
|
||||
--main-bg-color: #23272E;
|
||||
--card-bg-color: #1D1836;
|
||||
--main-bg-color: #050816;
|
||||
--text-color: white;
|
||||
--text-color-black: black;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
@ -1,38 +1,16 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { getAuth } from 'firebase/auth';
|
||||
import ServerCard from '../../components/serverCard/serverCard';
|
||||
import Navbar from '../../components/navbar/Navbar';
|
||||
import styles from './DashboardPage.module.scss';
|
||||
import NoServer from '../NoServer/NoServer';
|
||||
import { fetchServers, createServer, runServer, stopServer, deleteServer } from '../../serverService';
|
||||
|
||||
const DashboardPage = ({ user }) => {
|
||||
const [servers, setServers] = useState([]);
|
||||
const auth = getAuth();
|
||||
|
||||
const fetchServers = async () => {
|
||||
const loadServers = async () => {
|
||||
try {
|
||||
const currentUser = auth.currentUser;
|
||||
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);
|
||||
const data = await fetchServers();
|
||||
setServers(data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching servers:', error);
|
||||
@ -40,32 +18,23 @@ const DashboardPage = ({ user }) => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchServers();
|
||||
}, [auth]);
|
||||
loadServers();
|
||||
}, []);
|
||||
|
||||
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) => {
|
||||
try {
|
||||
const currentUser = auth.currentUser;
|
||||
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}`);
|
||||
}
|
||||
await runServer(serverName);
|
||||
} catch (error) {
|
||||
console.error('Error starting server:', error);
|
||||
}
|
||||
@ -73,27 +42,7 @@ const DashboardPage = ({ user }) => {
|
||||
|
||||
const handleStopServer = async (serverName) => {
|
||||
try {
|
||||
const currentUser = auth.currentUser;
|
||||
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}`);
|
||||
}
|
||||
await stopServer(serverName);
|
||||
} catch (error) {
|
||||
console.error('Error stopping server:', error);
|
||||
}
|
||||
@ -101,86 +50,34 @@ const DashboardPage = ({ user }) => {
|
||||
|
||||
const handleDeleteServer = async (serverName) => {
|
||||
try {
|
||||
const currentUser = auth.currentUser;
|
||||
if (!currentUser) {
|
||||
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();
|
||||
}
|
||||
await deleteServer(serverName);
|
||||
loadServers();
|
||||
} catch (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 (
|
||||
<div className={styles.dashboardContainer}>
|
||||
<Navbar user={user} />
|
||||
<div className={styles.cardsContainer}>
|
||||
<button onClick={handleCreateServer}>Create Server</button>
|
||||
{servers.map((server, index) => (
|
||||
{servers.length === 0 ? (
|
||||
<NoServer onCreateServer={handleCreateServer} />
|
||||
) : (
|
||||
servers.map((server, index) => (
|
||||
<ServerCard
|
||||
key={index}
|
||||
color="#f0f0f0"
|
||||
status={server.running ? 'En cours' : 'Hors ligne'}
|
||||
version={server.version}
|
||||
name={server.name}
|
||||
link={`#`}
|
||||
onRunClick={handleRunServer}
|
||||
onStopClick={handleStopServer}
|
||||
onDeleteClick={handleDeleteServer}
|
||||
link="#"
|
||||
onRunClick={() => handleRunServer(server.name)}
|
||||
onStopClick={() => handleStopServer(server.name)}
|
||||
onDeleteClick={() => handleDeleteServer(server.name)}
|
||||
/>
|
||||
))}
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
16
src/pages/NoServer/NoServer.jsx
Normal file
16
src/pages/NoServer/NoServer.jsx
Normal 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
45
src/pages/NoServer/NoServer.module.scss
Normal 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
123
src/serverService.jsx
Normal 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 };
|
||||
Loading…
Reference in New Issue
Block a user