25/04/23 - 21h
parent
3758437c96
commit
0c11084e1f
|
@ -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" }}>
|
||||
|
||||
</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 <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" }}>
|
||||
|
||||
</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" }}>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="div_row"> Import du background <br />
|
||||
<div className="div_row" style={{ "border": "None" }}>
|
||||
|
||||
</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 <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" }}>
|
||||
|
||||
</div>
|
||||
{<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
|
||||
<div className="div_row" style={{ "border": "None" }}>
|
||||
|
||||
</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" }}>
|
||||
|
||||
</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" }}>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>);
|
||||
|
|
|
@ -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/",
|
||||
|
|
Loading…
Reference in New Issue