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

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
Charles Le Maux 2024-07-04 02:25:26 +01:00
commit 03e13fd6a3
8 changed files with 143 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.jsx
View File

@ -7,13 +7,7 @@ import LoginPage from './pages/LoginPage/LoginPage';
import DashboardPage from './pages/DashboardPage/DashboardPage'; import DashboardPage from './pages/DashboardPage/DashboardPage';
import { auth } from './service/firebase'; import { auth } from './service/firebase';
import styles from './App.module.scss'; import styles from './App.module.scss';
import Loading from './pages/Loading/loading';
const Loading = () => (
<div className={styles.loading}>
<div className={styles.spinner}></div>
<p style={{ color: 'white' }}>Chargement...</p>
</div>
);
const App = () => { const App = () => {
const [user, setUser] = useState(null); const [user, setUser] = useState(null);

28
src/App.module.scss
View File

@ -1,28 +0,0 @@
.loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 1.5rem;
}
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
width: 6rem;
height: 6rem;
border-radius: 50%;
border-left-color: #09f;
animation: spin 1s ease infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

39
src/components/CreateServer/CreateServer.jsx
View File

@ -4,8 +4,10 @@ import { getUserSubdomain } from "../../service/firebase";
import serviiApi from "../../service/api.tsx"; import serviiApi from "../../service/api.tsx";
const CreateServer = ({ user, onCreateServer }) => { const CreateServer = ({ user, onCreateServer }) => {
const [subdomain, setSubdomain] = useState('loading'); // Utiliser 'loading' au lieu de null const [subdomain, setSubdomain] = useState('loading');
const [subdomainInput, setSubdomainInput] = useState(''); const [subdomainInput, setSubdomainInput] = useState('');
const [serverName, setServerName] = useState('');
const [serverVersion, setServerVersion] = useState('');
const loadSubdomain = async () => { const loadSubdomain = async () => {
try { try {
@ -33,6 +35,14 @@ const CreateServer = ({ user, onCreateServer }) => {
} }
}; };
const handleCreateServer = async () => {
try {
await onCreateServer(serverName, serverVersion);
} catch (error) {
console.error('Error creating server:', error);
}
};
if (subdomain === 'loading') { if (subdomain === 'loading') {
return ( return (
<div className={styles.container}> <div className={styles.container}>
@ -45,11 +55,12 @@ const CreateServer = ({ user, onCreateServer }) => {
{subdomain === '' ? ( {subdomain === '' ? (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.mainCardSubdomain}> <div className={styles.mainCardSubdomain}>
<div className={styles.Title}>Ecrivez votre sous domaine</div> <div className={styles.title}>Ecrivez votre sous domaine</div>
<div className={styles.SubTitlesdomain}> <div className={styles.subtitle}>
Le sous-domaine est le nom sous lequel vos amis et vous rejoignez le serveur, un peu comme une adresse. Choisissez-le bien, car il n'est pas facilement modifiable ! Le sous-domaine est le nom sous lequel vos amis et vous rejoignez le serveur, un peu comme une adresse. Choisissez-le bien, car il n'est pas facilement modifiable !
</div> </div>
<input <input
className={styles.input}
type="text" type="text"
value={subdomainInput} value={subdomainInput}
onChange={(e) => setSubdomainInput(e.target.value)} onChange={(e) => setSubdomainInput(e.target.value)}
@ -62,9 +73,25 @@ const CreateServer = ({ user, onCreateServer }) => {
) : ( ) : (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.mainCard}> <div className={styles.mainCard}>
<div className={styles.SubTitle}>Création du serveur</div> <div className={styles.title}>Création du serveur</div>
<input className={styles.Input} type="text" placeholder="Nom du serveur" /> <input
<button className={styles.btnServCreate} onClick={onCreateServer}> {/* Utilisation de onCreateServer ici */} className={styles.input}
type="text"
placeholder="Nom du serveur"
value={serverName}
onChange={(e) => setServerName(e.target.value)}
/>
<select
className={styles.select}
name="version"
id="version-select"
value={serverVersion}
onChange={(e) => setServerVersion(e.target.value)}
>
<option value="">Version</option>
<option value="1.20.6">1.20.6</option>
</select>
<button className={styles.btnServCreate} onClick={handleCreateServer}>
Créer Créer
</button> </button>
</div> </div>

55
src/components/CreateServer/CreateServer.module.scss
View File

@ -11,35 +11,50 @@
align-items: start; align-items: start;
flex-direction: column; flex-direction: column;
width: 75rem; width: 75rem;
padding: 4rem 5rem 3rem 5rem;
background-color: #1D1836; background-color: #1D1836;
border-radius: 1.5rem; border-radius: 1.5rem;
} }
.Title{ .title {
font-size: 3.5rem; font-size: 2.5rem;
color: #F2F2F2; color: #F2F2F2;
font-weight: 900; font-weight: 700;
} margin-bottom: 1.5rem;
}
.SubTitle{ .subtitle {
font-size: 1.8rem; font-size: 1.2rem;
color: #AAA6C3; color: #AAA6C3;
font-weight: 300; font-weight: 300;
} text-align: center;
margin-bottom: 2rem;
}
.btnServCreate{ .input, .select {
display: flex; width: 100%;
justify-content: center; padding: 1rem;
align-items: center; margin-top: 1rem;
background-color: #090325; background-color: #090325;
width: 40rem; border: none;
height: 5rem; border-radius: 0.5rem;
color: white; color: white;
margin-top: 5rem; font-size: 1rem;
border: solid 0.1rem #090325; }
.btnSubCreate, .btnServCreate {
margin-top: 2rem;
padding: 1rem 2rem;
background-color: #090325;
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer; cursor: pointer;
font-size: 2rem; font-size: 1rem;
font-weight: 900; transition: background-color 0.3s, transform 0.3s;
border-radius: 1rem; }
}
.btnSubCreate:hover, .btnServCreate:hover {
background-color: #120a8f;
transform: scale(1.05);
}

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

@ -4,24 +4,25 @@ import Navbar from '../../components/navbar/Navbar';
import styles from './DashboardPage.module.scss'; import styles from './DashboardPage.module.scss';
import NoServer from '../NoServer/NoServer'; import NoServer from '../NoServer/NoServer';
import { getUserSubdomain } from "../../service/firebase"; import { getUserSubdomain } from "../../service/firebase";
import '../../service/api.tsx';
import serviiApi from "../../service/api.tsx"; import serviiApi from "../../service/api.tsx";
import Api from "../../service/api.tsx"; import Loading from '../Loading/loading';
const DashboardPage = ({ user }) => { const DashboardPage = ({ user }) => {
const [servers, setServers] = useState([]); const [servers, setServers] = useState([]);
const [subdomain, setSubdomain] = useState(""); const [subdomain, setSubdomain] = useState("");
const [loading, setLoading] = useState(true);
const loadServers = async () => { const loadServers = async () => {
try { try {
const ApiResponse = await serviiApi.fetchServers(); const ApiResponse = await serviiApi.fetchServers();
const data = ApiResponse.message const data = ApiResponse.message;
setServers(data); setServers(data);
const userSubdomain = await getUserSubdomain(user.uid); const userSubdomain = await getUserSubdomain(user.uid);
setSubdomain(userSubdomain); setSubdomain(userSubdomain);
} catch (error) { } catch (error) {
console.error('Error fetching data:', error); console.error('Error fetching data:', error);
} finally {
setLoading(false);
} }
}; };
@ -29,11 +30,10 @@ const DashboardPage = ({ user }) => {
loadServers(); loadServers();
}, []); }, []);
const handleCreateServer = async () => { const handleCreateServer = async (serverName, serverVersion) => {
try { try {
const serverName = prompt('Enter the name for the new server:'); if (!serverName || !serverVersion) return;
if (!serverName) return; await serviiApi.serverCreate(serverName, serverVersion, "paper");
await serviiApi.serverCreate(serverName, "1.20.6", "paper");
await loadServers(); await loadServers();
} catch (error) { } catch (error) {
console.error('Error creating server:', error); console.error('Error creating server:', error);
@ -68,25 +68,29 @@ const DashboardPage = ({ user }) => {
return ( return (
<div className={styles.dashboardContainer}> <div className={styles.dashboardContainer}>
<Navbar user={user} /> <Navbar user={user} />
<div className={styles.cardsContainer}> {loading ? (
{servers.length === 0 ? ( <Loading />
<NoServer user={user} onCreateServer={handleCreateServer} /> ) : (
) : ( <div className={styles.cardsContainer}>
servers.map((server, index) => ( {servers.length === 0 ? (
<ServerCard <NoServer user={user} onCreateServer={handleCreateServer} />
key={index} ) : (
color="#f0f0f0" servers.map((server, index) => (
status={server.running ? 'En cours' : 'Hors ligne'} <ServerCard
version={server.version} key={index}
name={server.name} color="#f0f0f0"
link="#" status={server.running ? 'En cours' : 'Hors ligne'}
onRunClick={() => handleRunServer(server.name)} version={server.version}
onStopClick={() => handleStopServer(server.name)} name={server.name}
onDeleteClick={() => handleDeleteServer(server.name)} link="#"
/> onRunClick={() => handleRunServer(server.name)}
)) onStopClick={() => handleStopServer(server.name)}
)} onDeleteClick={() => handleDeleteServer(server.name)}
</div> />
))
)}
</div>
)}
</div> </div>
); );
}; };

10
src/pages/Loading/loading.jsx Normal file
View File

@ -0,0 +1,10 @@
import styles from './loading.module.scss';
const Loading = () => (
<div className={styles.loading}>
<div className={styles.spinner}></div>
<p style={{ color: 'white' }}>Chargement...</p>
</div>
);
export default Loading;

28
src/pages/Loading/loading.module.scss Normal file
View File

@ -0,0 +1,28 @@
.loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 1.5rem;
}
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
width: 6rem;
height: 6rem;
border-radius: 50%;
border-left-color: #09f;
animation: spin 1s ease infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

6
src/pages/NoServer/NoServer.jsx
View File

@ -8,15 +8,15 @@ const NoServer = ({ user, onCreateServer }) => {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.mainCard}> <div className={styles.mainCard}>
{ isCreating === false ? ( {isCreating === false ? (
<> <>
<div className={styles.nsSubTitle}>Erreur </div> <div className={styles.nsSubTitle}>Erreur</div>
<div className={styles.nsTitle}>Aucun serveur possédé</div> <div className={styles.nsTitle}>Aucun serveur possédé</div>
<button className={styles.btnServCreate} onClick={() => setIsCreating(true)}>Créer un nouveau serveur</button> <button className={styles.btnServCreate} onClick={() => setIsCreating(true)}>Créer un nouveau serveur</button>
</> </>
) : ( ) : (
<> <>
<CreateServer user={user} onCreateServer={onCreateServer} /> {} <CreateServer user={user} onCreateServer={onCreateServer} />
</> </>
)} )}
</div> </div>