26/04/23 - 21h

recette2
cherif 2023-04-26 21:41:13 +02:00
parent 0c11084e1f
commit 84216b25aa
2 changed files with 234 additions and 139 deletions

View File

@ -152,6 +152,7 @@ function HebergementLms(props) {
useEffect(() => {
GetLms_Themes();
submenu_design();
}, [])
const [isLoading, setLoading] = useState();
@ -363,9 +364,6 @@ function HebergementLms(props) {
}
setLoading(false);
};
@ -380,6 +378,24 @@ function HebergementLms(props) {
sethandleSubmission_logo_api();
}
const [submenu, setsubmenu] = useState("design");
function submenu_design() {
clear_message();
setsubmenu("design");
}
function submenu_logo() {
clear_message();
setsubmenu("logo");
}
function submenu_img_bg() {
clear_message();
setsubmenu("img_bg");
}
return (
<div className="hebergementlms">
@ -392,166 +408,180 @@ function HebergementLms(props) {
<br />
</div>}
{String(RecordData_api) === "true" && <div className="okUpdateData"> la mise à jour a été correctement faite</div>}
{String(RecordData_api) === "false" && <div className="koUpdateData"> {RecordData_message}</div>}
<div className="session_caract">Choisir un exemple de thème : <br />
<select id="lms_theme_liste" name="lms_theme_liste" value={selected_lms_theme} onChange={handleChangeselected_lms_theme} className="selectsession">
<option value="">Choisir un modèle </option>
{GetLms_Themes_result &&
GetLms_Themes_result.map((lms_theme) => (
<option value={JSON.parse(lms_theme).template_preview_url}>
{JSON.parse(lms_theme).nom_template}
</option>
))}
</select>
<div style={{ "textAlign": "left", "float": "left", "width": "100%", "marginBottom": "1rem" }} id="participant_menu_tab">
<Button variant="outlined" onClick={submenu_design} className="detail_class_submenu" id='menu_preinscrit' name='menu_preinscrit'>Thème & Design</Button>
<Button variant="outlined" onClick={submenu_logo} className="detail_class_submenu" id='menu_preinscrit' name='menu_preinscrit'>Logo</Button>
<Button variant="outlined" onClick={submenu_img_bg} className="detail_class_submenu" id='menu_inscrit' name='menu_inscrit'>Arriere plan</Button>
</div>
<div className="session_caract">Le modèle d'attestation :
<img className="preview_certif" src={urlpreview_lms_theme} />
</div>
{String(submenu) === String("design") && <div className="detail_class_submenu_data" style={{ "border": "None" }}>
<div className="div_row">
{String(RecordData_api) === "true" && <div className="okUpdateData"> la mise à jour a été correctement faite</div>}
<div className="div_row">
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
{<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
{String(RecordData_api) === "false" && <div className="koUpdateData"> {RecordData_message}</div>}
<div className="div_row_gauche " style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
<Button variant="contained" className="btn_modif" onClick={"One_annuleSessionUpdate"}>Annuler
</Button>
</div>
<div className="session_caract">Choisir un exemple de thème : <br />
<div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
<Button variant="contained" className="btn_enreg" onClick={RecordData}>Enregistrer
</Button>
<select id="lms_theme_liste" name="lms_theme_liste" value={selected_lms_theme} onChange={handleChangeselected_lms_theme} className="selectsession">
<option value="">Choisir un modèle </option>
{GetLms_Themes_result &&
GetLms_Themes_result.map((lms_theme) => (
<option value={JSON.parse(lms_theme).template_preview_url}>
{JSON.parse(lms_theme).nom_template}
</option>
))}
</select>
</div>
</div>}
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
<div className="session_caract">Le modèle d'attestation :
<img className="preview_certif" src={urlpreview_lms_theme} />
</div>
<div className="div_row">
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
{<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
<div className="div_row_gauche " style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
<Button variant="contained" className="btn_modif" onClick={"One_annuleSessionUpdate"}>Annuler
</Button>
</div>
<div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
<Button variant="contained" className="btn_enreg" onClick={RecordData}>Enregistrer
</Button>
</div>
</div>}
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
</div>
</div>
</div>}
</div>
{String(submenu) === String("logo") && <div className="detail_class_submenu_data" style={{ "border": "None" }}>
<div className="div_row"> Import du logo <br />
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
<Button variant="outlined" onClick={changeHandler2_logo} className="detail_class_submenu" style={{
"background": "#c8cfd5",
"minWidth": "15rem", "color": "black", "width": "auto"
}}
id='menu_import_formation' name='menu_import_formation'>Choisir une image &nbsp; <br />
<i> (Le logo doit être de taille 250 x 70 px et au format PNG) </i>
</Button><br />
{logo_file_name && <nav className="okUpdateData"><i>{logo_file_name}</i></nav>}
<input type="file"
accept=".png"
ref={hiddenFileInput_logo}
style={{ display: 'none' }}
name="liste_formation_file"
onChange={handleSubmission_logo}
/>
<div className="div_row"> Import du logo <br />
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
<Button variant="outlined" onClick={changeHandler2_logo} className="detail_class_submenu" style={{
"background": "#c8cfd5",
"minWidth": "15rem", "color": "black", "width": "auto"
}}
id='menu_import_formation' name='menu_import_formation'>Choisir une image &nbsp; <br />
<i> (Le logo doit être de taille 250 x 70 px et au format PNG) </i>
</Button><br />
{logo_file_name && <nav className="okUpdateData"><i>{logo_file_name}</i></nav>}
<input type="file"
accept=".png"
ref={hiddenFileInput_logo}
style={{ display: 'none' }}
name="liste_formation_file"
onChange={handleSubmission_logo}
/>
{img_logo_file && <nav> Fichier à importer : {img_logo_file.name} <br />
<img src={img_logo_file} alt={""} />
{img_logo_file && <nav> Fichier à importer : {img_logo_file.name} <br />
<img src={img_logo_file} alt={""} />
<br />
</nav>}
{String(handleSubmission_logo_api) === "false" &&
<nav className="koUpdateData"> {handleSubmission_logo_message} </nav>}
<br />
</nav>}
{String(handleSubmission_logo_api) === "false" &&
<nav className="koUpdateData"> {handleSubmission_logo_message} </nav>}
<div className="div_row">
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
{<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
<br />
<div className="div_row_gauche " style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
<Button variant="contained" className="btn_modif" onClick={"One_annuleSessionUpdate"}>Annuler le logo
</Button>
</div>
<div className="div_row">
<div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
<Button variant="contained" className="btn_enreg" onClick={"RecordData"}>Enregistrer le logo
</Button>
</div>
</div>}
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
</div>
</div>
</div>}
{String(submenu) === String("img_bg") && <div className="detail_class_submenu_data" style={{ "border": "None" }}>
<div className="div_row"> Import du background <br />
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
{<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
<Button variant="outlined" onClick={changeHandler2_bg} className="detail_class_submenu" style={{
"background": "#c8cfd5",
"minWidth": "15rem", "color": "black", "width": "auto"
}}
id='menu_import_formation' name='menu_import_formation'>Choisir une image GB &nbsp; <br />
<i> (Le BG doit être de taille 1920 x 195 px et au format PNG) </i>
</Button><br />
{bg_file_name && <nav className="okUpdateData"><i>{bg_file_name}</i></nav>}
<input type="file"
accept=".png"
ref={hiddenFileInput_bg}
style={{ display: 'none' }}
name="liste_formation_file"
onChange={handleSubmission_bg}
/>
<div className="div_row_gauche " style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
<Button variant="contained" className="btn_modif" onClick={"One_annuleSessionUpdate"}>Annuler le logo
</Button>
</div>
{img_bg_file && <nav> Fichier à importer : {img_bg_file.name} <br />
<img src={img_bg_file} alt={""} />
<div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
<Button variant="contained" className="btn_enreg" onClick={"RecordData"}>Enregistrer le logo
</Button>
</div>
</div>}
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
</div>
</div>
<div className="div_row"> Import du background <br />
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
<Button variant="outlined" onClick={changeHandler2_bg} className="detail_class_submenu" style={{
"background": "#c8cfd5",
"minWidth": "15rem", "color": "black", "width": "auto"
}}
id='menu_import_formation' name='menu_import_formation'>Choisir une image GB &nbsp; <br />
<i> (Le BG doit être de taille 1920 x 195 px et au format PNG) </i>
</Button><br />
{bg_file_name && <nav className="okUpdateData"><i>{bg_file_name}</i></nav>}
<input type="file"
accept=".png"
ref={hiddenFileInput_bg}
style={{ display: 'none' }}
name="liste_formation_file"
onChange={handleSubmission_bg}
/>
{img_bg_file && <nav> Fichier à importer : {img_bg_file.name} <br />
<img src={img_bg_file} alt={""} />
<br />
</nav>}
<br />
</nav>}
<br />
<div className="div_row">
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
{<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
<div className="div_row">
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
{<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
<div className="div_row_gauche " style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
<Button variant="contained" className="btn_modif" onClick={"One_annuleSessionUpdate"}>Annuler le BG
</Button>
</div>
<div className="div_row_gauche " style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
<Button variant="contained" className="btn_modif" onClick={"One_annuleSessionUpdate"}>Annuler le BG
</Button>
<div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
<Button variant="contained" className="btn_enreg" onClick={"RecordData"}>Enregistrer le BG
</Button>
</div>
</div>}
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
<div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
<Button variant="contained" className="btn_enreg" onClick={"RecordData"}>Enregistrer le BG
</Button>
</div>
</div>}
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
</div>
</div>
</div>}
</div>);

View File

@ -15,14 +15,14 @@
background-color: transparent;
}
.mysy_spinner{
.mysy_spinner {
border-radius: 5px;
border: 1px solid black;
opacity: 100%;
}
.spinner {
width:20rem;
width: 20rem;
height: 10rem;
border: 8px solid;
border-color: #3d5af1 transparent #3d5af1 transparent;
@ -149,7 +149,7 @@
float: right;
//border:0px solid black;
border-width: 0.01rem;
width: 55%;
width: 45%;
padding-left: 2%;
border-radius: 0px;
}
@ -228,7 +228,7 @@
float: right;
//border:0px solid black;
border-width: 0.01rem;
width: 55%;
width: 45%;
padding-left: 2%;
border-radius: 0px;
}
@ -300,7 +300,7 @@
float: left;
//border:0px solid black;
border-width: 0.01rem;
width: 50%;
width: 48%;
border-radius: 0px;
font-family: "verdana", "Quicksand", "Signika", sans-serif;
font-size: small;
@ -311,7 +311,7 @@
float: right;
//border:0px solid black;
border-width: 0rem;
width: 50%;
width: 48%;
padding-left: 5px;
border-radius: 0px;
font-family: "verdana", "Quicksand", "Signika", sans-serif;
@ -334,15 +334,35 @@
.btn_modif {
width: 10rem;
background-color: #212121 !important;
color: white;
border-radius: 15px;
margin-right: 1rem;
padding: 0.3rem;
margin-bottom: 0.5rem;
width: 15rem;
text-align: center;
border: 1px solid #9cf;
font-family: "verdana", "Quicksand", "Signika", sans-serif;
font-size: small;
letter-spacing: 0.1rem;
font-weight: normal;
}
.btn_enreg {
width: 10rem;
background-color: green !important;
color: white;
border-radius: 15px;
margin-right: 1rem;
padding: 0.3rem;
margin-bottom: 0.5rem;
width: 15rem;
text-align: center;
border: 1px solid #9cf;
font-family: "verdana", "Quicksand", "Signika", sans-serif;
font-size: small;
letter-spacing: 0.1rem;
font-weight: normal;
}
.preview_certif {
@ -371,7 +391,52 @@
height: 2rem;
font-size: small;
}
.detail_class_submenu {
background: #d8edfc;
border-radius: 15px;
margin-right: 1rem;
padding: 0.3rem;
margin-bottom: 0.5rem;
width: 11rem;
text-align: center;
border: 1px solid #9cf;
color: #3b3e40;
font-family: "verdana", "Quicksand", "Signika", sans-serif;
font-size: small;
letter-spacing: 0.1rem;
font-weight: normal;
}
.detail_class_submenu:hover:active,
.detail_class_submenu:hover {
background-color: #104277;
color: white;
}
.detail_class_submenu:focus {
//border: 3px dotted green;
background-color: #104277;
color: white;
}
.detail_class_submenu_data {
width: 95%;
background-color: #d8edfc;
padding-left: 5px;
text-align: left;
padding: 0;
border: 0px;
color: #3b3e40;
padding-left: 5px;
font-family: "verdana", "Quicksand", "Signika", sans-serif;
font-size: small;
border-radius: 10px;
border: 1px solid;
display: block;
}
}
// End media