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

new properties panel

Browse Source
This commit is contained in:
AntoninoP 2024-08-20 16:56:00 +02:00
parent fcdbf628d8
commit 034336a40d
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.trim();
setLogs(logString);
} else {
setError(`Erreur lors de la récupération des logs: ${response.message}`);
}
} catch (err) {
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.details}>
<h1>Propriétés du serveur {server.name}</h1>
<div className={styles.formGroup}>
<label htmlFor="difficulty">Difficultée:</label>
<select id="difficulty" name="difficulty" value={server.difficulty} onChange={handleChange}>
<option value="easy">Facile</option>
<option value="normal">Normal</option>
<option value="hard">Difficile</option>
</select>
<div className={styles.formRow}>
<div className={styles.formGroup}>
<label htmlFor="difficulty">Difficulté:</label>
<select id="difficulty" name="difficulty" value={server.difficulty} onChange={handleChange}>
<option value="easy">Facile</option>
<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 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 className={styles.formRow}>
<div className={styles.formGroup}>
<label htmlFor="gamemode">Gamemode:</label>
<select id="gamemode" name="gamemode" value={server.gamemode} onChange={handleChange}>
<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 className={styles.formGroup}>
<label htmlFor="gamemode">Gamemode:</label>
<select id="gamemode" name="gamemode" value={server.gamemode} onChange={handleChange}>
<option value="survival">Survie</option>
<option value="creative">Créatif</option>
<option value="adventure">Aventure</option>
<option value="spectator">Spectateur</option>
</select>
<div className={styles.formRow}>
<div className={styles.formGroup}>
<label htmlFor="maxPlayers">Max de joueurs:</label>
<input type="number" id="maxPlayers" name="maxPlayers" value={server.maxPlayers} onChange={handleChange} />
</div>
<div className={styles.formGroup}>
<label htmlFor="motd">Description du serveur:</label>
<input type="text" id="motd" name="motd" value={server.motd} onChange={handleChange} />
</div>
</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 className={styles.formGroup}>
<label htmlFor="maxPlayers">Max de joueurs:</label>
<input type="number" id="maxPlayers" name="maxPlayers" value={server.maxPlayers} onChange={handleChange} />
</div>
<div className={styles.formGroup}>
<label htmlFor="motd">Description du serveur:</label>
<input type="text" id="motd" name="motd" value={server.motd} onChange={handleChange} />
</div>
<div className={styles.formGroup}>
<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 className={styles.formRow}>
<div className={styles.formGroup}>
<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>
</div>
</div>
@ -144,13 +157,11 @@ const ServerProprieties = ({ user }) => {
};
ServerProprieties.propTypes = {
user: PropTypes.oneOfType([
PropTypes.shape({
uid: PropTypes.string.isRequired,
displayName: PropTypes.string,
email: PropTypes.string,
}),
]),
user: PropTypes.shape({
uid: PropTypes.string.isRequired,
displayName: PropTypes.string,
email: PropTypes.string,
}),
};
export default ServerProprieties;

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

@ -1,63 +1,71 @@
.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;
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: 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 {
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 {
label {
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.4rem;
color: var(--label-color);
margin-bottom: 0.5rem;
font-size: 1rem;
color: #EAEAEA;
}
.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;
input,
select {
width: 15rem;
max-width: 20rem;
padding: 0.7rem;
background-color: #2C2C44;
border: 0.1rem solid #44476A;
border-radius: 0.5rem;
color: #EAEAEA;
font-size: 1rem;
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);
input:focus,
select:focus {
border-color: #5B5EE6;
box-shadow: 0 0 0.5rem rgba(91, 94, 230, 0.5);
outline: none;
}
/* Chrome- styles */
@supports (-webkit-appearance: none) {
.formGroup select {
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@ -68,66 +76,63 @@
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,
.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;
padding: 0.75rem;
font-size: 1rem;
}
.details h1 {
font-size: 2.5rem;
margin-bottom: 3rem;
color: var(--header-color);
font-size: 1.5rem;
margin-bottom: 1.25rem;
}
@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;
}
}
}