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 pull request #23 from hubHarmony/newdetails

Browse Source 
new properties panel
This commit is contained in:
Antoninop 2024-08-20 17:06:23 +02:00 committed by GitHub
commit 471b49cd79
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 181 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/ServerConsole/ServerConsole.jsx
View File

@ -37,8 +37,6 @@ const ServerConsole = ({ user }) => {
logString = logString.replace(/'{2,}/g, ''); logString = logString.replace(/'{2,}/g, '');
logString = logString.trim(); logString = logString.trim();
setLogs(logString); setLogs(logString);
} else {
setError(`Erreur lors de la récupération des logs: ${response.message}`);
} }
} catch (err) { } catch (err) {
setError(`Erreur: ${err.message}`); setError(`Erreur: ${err.message}`);

123
src/pages/ServerProperties/ServerProperties.jsx
View File

@ -84,59 +84,72 @@ const ServerProprieties = ({ user }) => {
<div className={styles.serverDetailsContainer}> <div className={styles.serverDetailsContainer}>
<div className={styles.details}> <div className={styles.details}>
<h1>Propriétés du serveur {server.name}</h1> <h1>Propriétés du serveur {server.name}</h1>
<div className={styles.formGroup}>
<label htmlFor="difficulty">Difficultée:</label> <div className={styles.formRow}>
<select id="difficulty" name="difficulty" value={server.difficulty} onChange={handleChange}> <div className={styles.formGroup}>
<option value="easy">Facile</option> <label htmlFor="difficulty">Difficulté:</label>
<option value="normal">Normal</option> <select id="difficulty" name="difficulty" value={server.difficulty} onChange={handleChange}>
<option value="hard">Difficile</option> <option value="easy">Facile</option>
</select> <option value="normal">Normal</option>
<option value="hard">Difficile</option>
</select>
</div>
<div className={styles.formGroup}>
<label htmlFor="enableCommandBlock">Activation des commandes block:</label>
<select id="enableCommandBlock" name="enableCommandBlock" value={server.enableCommandBlock} onChange={handleChange}>
<option value="true">Activé</option>
<option value="false">Désactivé</option>
</select>
</div>
</div> </div>
<div className={styles.formGroup}>
<label htmlFor="enableCommandBlock">Activation des commandes block:</label> <div className={styles.formRow}>
<select id="enableCommandBlock" name="enableCommandBlock" value={server.enableCommandBlock} onChange={handleChange}> <div className={styles.formGroup}>
<option value="true">Activé</option> <label htmlFor="gamemode">Gamemode:</label>
<option value="false">Désactivé</option> <select id="gamemode" name="gamemode" value={server.gamemode} onChange={handleChange}>
</select> <option value="survival">Survie</option>
<option value="creative">Créatif</option>
<option value="adventure">Aventure</option>
<option value="spectator">Spectateur</option>
</select>
</div>
<div className={styles.formGroup}>
<label htmlFor="hardcore">Hardcore:</label>
<select id="hardcore" name="hardcore" value={server.hardcore} onChange={handleChange}>
<option value="true">Activé</option>
<option value="false">Désactivé</option>
</select>
</div>
</div> </div>
<div className={styles.formGroup}>
<label htmlFor="gamemode">Gamemode:</label> <div className={styles.formRow}>
<select id="gamemode" name="gamemode" value={server.gamemode} onChange={handleChange}> <div className={styles.formGroup}>
<option value="survival">Survie</option> <label htmlFor="maxPlayers">Max de joueurs:</label>
<option value="creative">Créatif</option> <input type="number" id="maxPlayers" name="maxPlayers" value={server.maxPlayers} onChange={handleChange} />
<option value="adventure">Aventure</option> </div>
<option value="spectator">Spectateur</option> <div className={styles.formGroup}>
</select> <label htmlFor="motd">Description du serveur:</label>
<input type="text" id="motd" name="motd" value={server.motd} onChange={handleChange} />
</div>
</div> </div>
<div className={styles.formGroup}>
<label htmlFor="hardcore">Hardcore:</label> <div className={styles.formRow}>
<select id="hardcore" name="hardcore" value={server.hardcore} onChange={handleChange}> <div className={styles.formGroup}>
<option value="true">Activé</option> <label htmlFor="onlineMode">Mode en ligne:</label>
<option value="false">Désactivé</option> <select id="onlineMode" name="onlineMode" value={server.onlineMode} onChange={handleChange}>
</select> <option value="true">Activé</option>
</div> <option value="false">Désactivé</option>
<div className={styles.formGroup}> </select>
<label htmlFor="maxPlayers">Max de joueurs:</label> </div>
<input type="number" id="maxPlayers" name="maxPlayers" value={server.maxPlayers} onChange={handleChange} /> <div className={styles.formGroup}>
</div> <label htmlFor="pvp">PVP:</label>
<div className={styles.formGroup}> <select id="pvp" name="pvp" value={server.pvp} onChange={handleChange}>
<label htmlFor="motd">Description du serveur:</label> <option value="true">Activé</option>
<input type="text" id="motd" name="motd" value={server.motd} onChange={handleChange} /> <option value="false">Désactivé</option>
</div> </select>
<div className={styles.formGroup}> </div>
<label htmlFor="onlineMode">Mode en ligne:</label>
<select id="onlineMode" name="onlineMode" value={server.onlineMode} onChange={handleChange}>
<option value="true">Activé</option>
<option value="false">Désactivé</option>
</select>
</div>
<div className={styles.formGroup}>
<label htmlFor="pvp">PVP:</label>
<select id="pvp" name="pvp" value={server.pvp} onChange={handleChange}>
<option value="true">Activé</option>
<option value="false">Désactivé</option>
</select>
</div> </div>
<button className={styles.saveButton} onClick={handleSave}>Sauvegarder</button> <button className={styles.saveButton} onClick={handleSave}>Sauvegarder</button>
</div> </div>
</div> </div>
@ -144,13 +157,11 @@ const ServerProprieties = ({ user }) => {
}; };
ServerProprieties.propTypes = { ServerProprieties.propTypes = {
user: PropTypes.oneOfType([ user: PropTypes.shape({
PropTypes.shape({ uid: PropTypes.string.isRequired,
uid: PropTypes.string.isRequired, displayName: PropTypes.string,
displayName: PropTypes.string, email: PropTypes.string,
email: PropTypes.string, }),
}),
]),
}; };
export default ServerProprieties; export default ServerProprieties;

209
src/pages/ServerProperties/ServerProperties.module.scss
View File

@ -1,63 +1,71 @@
.serverDetailsContainer { .serverDetailsContainer {
padding-top: var(--navbar-height); padding-top: var(--navbar-height);
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
color: var(--text-color); color: var(--text-color);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
}
.details {
padding: 2rem;
background-color: #100D25;
width: 50rem;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
border-radius: 0.5rem;
border: 0.1rem solid #343947;
box-sizing: border-box;
}
.formRow {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.formGroup {
display: flex;
flex-direction: column;
flex: 1;
margin-right: 0.625rem;
margin-bottom: 1.5rem;
&:last-child {
margin-right: 0;
} }
.details { label {
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; font-weight: 600;
margin-bottom: 1rem; margin-bottom: 0.5rem;
font-size: 1.4rem; font-size: 1rem;
color: var(--label-color); color: #EAEAEA;
} }
.formGroup input, input,
.formGroup select { select {
width: 100%; width: 15rem;
padding: 1.2rem; max-width: 20rem;
height: auto; padding: 0.7rem;
background-color: var(--input-bg-color); background-color: #2C2C44;
border: 1px solid var(--input-border-color); border: 0.1rem solid #44476A;
border-radius: 0.75rem; border-radius: 0.5rem;
color: var(--text-color); color: #EAEAEA;
font-size: 1.2rem; font-size: 1rem;
line-height: 1.5rem;
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease; transition: border-color 0.3s ease, box-shadow 0.3s ease;
} }
.formGroup input:focus, input:focus,
.formGroup select:focus { select:focus {
border-color: var(--focus-border-color); border-color: #5B5EE6;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 0.5rem rgba(91, 94, 230, 0.5);
outline: none; outline: none;
} }
/* Chrome- styles */
@supports (-webkit-appearance: none) { @supports (-webkit-appearance: none) {
.formGroup select { select {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
@ -68,66 +76,63 @@
padding-right: 3rem; padding-right: 3rem;
} }
} }
}
.saveButton {
width: 10rem;
padding: .5rem .5rem;
color: #FFF;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
font-size: 1.1rem;
background-color: #1D1836;
&:active {
transform: translateY(0);
}
}
.error {
color: #FF5C5C;
font-size: 1.2rem;
}
.details h1 {
font-size: 1.75rem;
margin-bottom: 2rem;
color: #FFF;
text-align: center;
}
@media (max-width: 48rem) {
.details {
width: 90%;
padding: 1.5rem;
}
.formGroup {
margin-right: 0;
}
.formGroup input,
.formGroup select {
width: 100%;
font-size: 1rem;
padding: 0.75rem;
}
.saveButton, .saveButton,
.quitButton { .quitButton {
padding: 1.2rem 2.5rem; padding: 0.75rem;
color: var(--button-text-color); font-size: 1rem;
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 { .details h1 {
font-size: 2.5rem; font-size: 1.5rem;
margin-bottom: 3rem; margin-bottom: 1.25rem;
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;
}
}