25/04/23 - 21h

recette2
cherif 2023-04-25 21:38:36 +02:00
parent 3758437c96
commit 0c11084e1f
2 changed files with 291 additions and 42 deletions

View File

@ -155,38 +155,231 @@ function HebergementLms(props) {
}, [])
const [isLoading, setLoading] = useState();
const [formation_file_name, setformation_file_name] = useState();
const hiddenFileInput_formation = React.useRef(null);
const [handleSubmission_api, sethandleSubmission_api] = useState();
const [handleSubmission_result, sethandleSubmission_result] = useState();
const [handleSubmission_message, sethandleSubmission_message] = useState();
const [logo_file_name, setlogo_file_name] = useState();
const hiddenFileInput_logo = React.useRef(null);
const [bg_file_name, setbg_file_name] = useState();
const hiddenFileInput_bg = React.useRef(null);
const [handleSubmission_logo_api, sethandleSubmission_logo_api] = useState();
const [handleSubmission_logo_result, sethandleSubmission_logo_result] = useState();
const [handleSubmission_logo_message, sethandleSubmission_logo_message] = useState();
const [img_logo_file, setimg_logo_file] = useState();
const [img_bg_file, setimg_bg_file] = useState();
const handleSubmission_logo = event => {
clear_message();
const handleSubmission = event => {
const fileUploaded = event.target.files[0];
let file_size = event.target.files[0].size;
let file_type = event.target.files[0].type;
//console.log("file_size = ",file_size," file_type = ",file_type);
//console.log("file_size = ", file_size, " file_type = ", file_type);
//console.log(" fileUploaded = ", fileUploaded);
if (file_size > 1000000) {
alert("Le fichier ne doit pas depasser un 1 Méga octets");
return;
}
setformation_file_name(event.target.files[0].name);
setimg_logo_file(URL.createObjectURL(event.target.files[0]));
//image/png
if (String(file_type) !== "image/png") {
alert("Le fichier n'est pas au formation PNG");
return;
}
setLoading(true);
var _URL = window.URL || window.webkitURL;
var file, img;
var img_height, img_width;
if ((file = event.target.files[0])) {
img = new Image();
var objectUrl = _URL.createObjectURL(file);
img.onload = function () {
img_height = this.height;
img_width = this.width;
_URL.revokeObjectURL(objectUrl);
if (parseFloat(img_width) > 200 && parseFloat(img_width) < 280 &&
parseFloat(img_height) > 60 && parseFloat(img_height) < 80) {
//console.log(" img_height est = ", img_height, " < à 1500 ");
setlogo_file_name(event.target.files[0].name);
setimg_logo_file(URL.createObjectURL(event.target.files[0]));
const formData = new FormData();
formData.append('File', fileUploaded);
//formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
fetch(
process.env.REACT_APP_API_URL + "myclass/api/Lms_Add_Logo_File/",
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
//console.log('Success:', result['message']);
if (String(result['status']) === String("true")) {
sethandleSubmission_logo_api("true");
}
else {
sethandleSubmission_logo_api("false");
sethandleSubmission_logo_message(result['message']);
}
setLoading(false);
})
.catch((error) => {
console.error('Error:', result);
sethandleSubmission_logo_api("false");
sethandleSubmission_logo_message(result['message']);
setLoading(false);
});
} else {
sethandleSubmission_logo_message(" La taille de l'image est incorrecte");
sethandleSubmission_logo_api("false");
setLoading(false);
return;
}
};
img.src = objectUrl;
}
setLoading(false);
};
const changeHandler2_logo = (event) => {
clear_message();
hiddenFileInput_logo.current.click();
};
const [handleSubmission_bg_api, sethandleSubmission_bg_api] = useState();
const [handleSubmission_bg_result, sethandleSubmission_bg_result] = useState();
const [handleSubmission_bg_message, sethandleSubmission_bg_message] = useState();
const handleSubmission_bg = event => {
clear_message();
const fileUploaded = event.target.files[0];
let file_size = event.target.files[0].size;
let file_type = event.target.files[0].type;
console.log("file_size = ", file_size, " file_type = ", file_type, " naturalWidth = ", fileUploaded.naturalWidth);
if (file_size > 1000000) {
alert("Le fichier ne doit pas depasser un 1 Méga octets");
return;
}
//image/png
if (String(file_type) !== "image/png") {
alert("Le fichier n'est pas au formation PNG");
return;
}
setLoading(true);
var _URL = window.URL || window.webkitURL;
var file, img;
var img_height, img_width;
if ((file = event.target.files[0])) {
img = new Image();
var objectUrl = _URL.createObjectURL(file);
img.onload = function () {
img_height = this.height;
img_width = this.width;
console.log(" img_width = ", img_width);
_URL.revokeObjectURL(objectUrl);
if (parseFloat(img_width) > 1500 && parseFloat(img_width) < 1950 &&
parseFloat(img_height) > 180 && parseFloat(img_height) < 200) {
//console.log(" img_height est = ", img_height, " < à 1500 ");
setbg_file_name(event.target.files[0].name);
setimg_bg_file(URL.createObjectURL(event.target.files[0]));
const formData = new FormData();
formData.append('File', fileUploaded);
//formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
fetch(
process.env.REACT_APP_API_URL + "myclass/api/Lms_Add_BG_File/",
{
method: 'POST',
body: formData,
}
)
.then((response) => response.json())
.then((result) => {
//console.log('Success:', result['message']);
if (String(result['status']) === String("true")) {
sethandleSubmission_logo_api("true");
}
else {
sethandleSubmission_bg_api("false");
sethandleSubmission_bg_message(result['message']);
}
setLoading(false);
})
.catch((error) => {
console.error('Error:', result);
sethandleSubmission_logo_api("false");
sethandleSubmission_logo_message(result['message']);
setLoading(false);
});
} else {
sethandleSubmission_bg_message(" La taille de l'image est incorrecte");
sethandleSubmission_bg_api("false");
setLoading(false);
return;
}
};
img.src = objectUrl;
}
setLoading(false);
};
const changeHandler2 = (event) => {
hiddenFileInput_formation.current.click();
const changeHandler2_bg = (event) => {
clear_message();
hiddenFileInput_bg.current.click();
};
function clear_message() {
sethandleSubmission_logo_message();
sethandleSubmission_logo_api();
}
return (
<div className="hebergementlms">
@ -194,8 +387,6 @@ function HebergementLms(props) {
<div className="mysy_spinner"> <img src={img_loading_spin} /> </div>
</div>}
{String(menu) === String("default") && <div>
<h2 style={{ "textAlign": "center", "marginBottom": "2rem" }} ref={scrollDiv}> Espace de parametrage de l'environnement d'hébergement</h2>
@ -250,58 +441,116 @@ function HebergementLms(props) {
</div>
<div className="div_row"> Import du background <br />
<div className="div_row"> Import du logo <br />
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
<Button variant="outlined" onClick={changeHandler2} className="detail_class_submenu" style={{
<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 />
{formation_file_name && <nav className="okUpdateData"><i>{formation_file_name}</i></nav>}
{logo_file_name && <nav className="okUpdateData"><i>{logo_file_name}</i></nav>}
<input type="file"
accept=".png"
ref={hiddenFileInput_formation}
ref={hiddenFileInput_logo}
style={{ display: 'none' }}
name="liste_formation_file"
onChange={handleSubmission}
onChange={handleSubmission_logo}
/>
{img_logo_file && <nav> Fichier à importer : {img_logo_file.name} <br />
<img src={img_logo_file} alt={""}/>
<br />
<img src={img_logo_file} alt={""} />
<br />
</nav>}
{String(handleSubmission_logo_api) === "false" &&
<nav className="koUpdateData"> {handleSubmission_logo_message} </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_gauche " style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
<Button variant="contained" className="btn_modif" onClick={"One_annuleSessionUpdate"}>Annuler le logo
</Button>
</div>
<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 />
<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" 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 logo
</Button>
<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_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 logo
</Button>
</div>
</div>}
<div className="div_row" style={{ "border": "None" }}>
&nbsp;
</div>
</div>
</div>
</div>);

View File

@ -129,9 +129,9 @@ const Partner = (props) => {
const stored_cookie = getCookie('tokenmysypart');
formData.append("token", stored_cookie);
//console.log("token = " + stored_cookie);
//console.log("token = " + stored_cookie); theme_name
fetch(
process.env.REACT_APP_API_URL + "myclass/api/add_class_mass/",