diff --git a/src/components/HebergementLms.js b/src/components/HebergementLms.js index b312ba0..0c6f7e1 100644 --- a/src/components/HebergementLms.js +++ b/src/components/HebergementLms.js @@ -151,6 +151,7 @@ function HebergementLms(props) { useEffect(() => { + window.scrollTo(0, 0); GetLms_Themes(); submenu_design(); }, []) @@ -171,6 +172,9 @@ function HebergementLms(props) { const [img_logo_file, setimg_logo_file] = useState(); const [img_bg_file, setimg_bg_file] = useState(); + const [img_logo_file2, setimg_logo_file2] = useState(); + const [img_bg_file2, setimg_bg_file2] = useState(); + const handleSubmission_logo = event => { clear_message(); @@ -188,7 +192,7 @@ function HebergementLms(props) { //image/png if (String(file_type) !== "image/png") { - alert("Le fichier n'est pas au formation PNG"); + alert("Le fichier n'est pas au format PNG"); return; } @@ -205,52 +209,19 @@ function HebergementLms(props) { img_height = this.height; img_width = this.width; _URL.revokeObjectURL(objectUrl); + console.log(" img_width = ", img_width, " img_height = ", img_height) - if (parseFloat(img_width) > 200 && parseFloat(img_width) < 280 && - parseFloat(img_height) > 60 && parseFloat(img_height) < 80) { + if (parseFloat(img_width) > 150 && parseFloat(img_width) < 280 && + parseFloat(img_height) > 60 && parseFloat(img_height) < 90) { //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])); + setimg_logo_file2(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_message(" La taille de l'image est incorrecte."); sethandleSubmission_logo_api("false"); setLoading(false); return; @@ -263,6 +234,58 @@ function HebergementLms(props) { }; + const [Send_logo_Img_api, setSend_logo_Img_api] = useState(); + const [Send_logo_Img_result, setSend_logo_Img_result] = useState(); + const [Send_logo_Img_message, setSend_logo_Img_message] = useState(); + + function Send_logo_Img() { + clear_message(); + + + setLoading(true); + + + const formData = new FormData(); + formData.append('File', img_logo_file2); + //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")) { + setSend_logo_Img_api("true"); + alert(" La mise à jour du logo a été correctement effectuée. ") + + } + else { + setSend_logo_Img_api("false"); + setSend_logo_Img_message(result['message']); + } + setLoading(false); + + }) + .catch((error) => { + console.error('Error:', result); + setSend_logo_Img_api("false"); + setSend_logo_Img_message(result['message']); + setLoading(false); + }); + + } + + + const changeHandler2_logo = (event) => { clear_message(); hiddenFileInput_logo.current.click(); @@ -288,7 +311,7 @@ function HebergementLms(props) { //image/png if (String(file_type) !== "image/png") { - alert("Le fichier n'est pas au formation PNG"); + alert("Le fichier n'est pas au format PNG"); return; } @@ -313,44 +336,9 @@ function HebergementLms(props) { setbg_file_name(event.target.files[0].name); setimg_bg_file(URL.createObjectURL(event.target.files[0])); + setimg_bg_file2(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"); @@ -367,6 +355,55 @@ function HebergementLms(props) { }; + const [SendBackground_Img_api, setSendBackground_Img_api] = useState(); + const [SendBackground_Img_result, setSendBackground_Img_result] = useState(); + const [SendBackground_Img_message, setSendBackground_Img_message] = useState(); + + function SendBackground_Img() { + clear_message(); + + setLoading(true); + + const formData = new FormData(); + formData.append('File', img_bg_file2); + //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")) { + setSendBackground_Img_api("true"); + alert(" L'image bannière a été correctement mise à jour") + + } + else { + setSendBackground_Img_api("false"); + setSendBackground_Img_message(result['message']); + } + setLoading(false); + + }) + .catch((error) => { + console.error('Error:', result); + setSendBackground_Img_api("false"); + setSendBackground_Img_message(result['message']); + setLoading(false); + }); + + + }; + const changeHandler2_bg = (event) => { clear_message(); hiddenFileInput_bg.current.click(); @@ -376,6 +413,8 @@ function HebergementLms(props) { function clear_message() { sethandleSubmission_logo_message(); sethandleSubmission_logo_api(); + setSendBackground_Img_api(); + setSendBackground_Img_message(); } const [submenu, setsubmenu] = useState("design"); @@ -404,10 +443,13 @@ function HebergementLms(props) { } {String(menu) === String("default") &&
-

Espace de parametrage de l'environnement d'hébergement

+

Parametrage de l'environnement LMS


} + + +
@@ -477,8 +519,9 @@ function HebergementLms(props) { "minWidth": "15rem", "color": "black", "width": "auto" }} id='menu_import_formation' name='menu_import_formation'>Choisir une image  
- (Le logo doit être de taille 250 x 70 px et au format PNG) +
+ {logo_file_name && } } - {String(handleSubmission_logo_api) === "false" && - } + {String(Send_logo_Img_api) === "true" &&
La mise à jour a été correctement faite
} + + {String(Send_logo_Img_api) === "false" &&
{Send_logo_Img_message}
} +
@@ -512,7 +557,7 @@ function HebergementLms(props) {
- @@ -536,9 +581,11 @@ function HebergementLms(props) { "background": "#c8cfd5", "minWidth": "15rem", "color": "black", "width": "auto" }} - id='menu_import_formation' name='menu_import_formation'>Choisir une image GB  
- (Le BG doit être de taille 1920 x 195 px et au format PNG) + id='menu_import_formation' name='menu_import_formation'>Choisir une image bannière  
+
+ + {bg_file_name && } } + + {String(SendBackground_Img_api) === "true" &&
La mise à jour a été correctement faite
} + + {String(SendBackground_Img_api) === "false" &&
{SendBackground_Img_message}
} + +
@@ -568,7 +621,7 @@ function HebergementLms(props) {
- diff --git a/src/components/Partner.js b/src/components/Partner.js index 39f60f0..5468f9e 100644 --- a/src/components/Partner.js +++ b/src/components/Partner.js @@ -14,6 +14,11 @@ import PartenairStat from "./PartenairStat"; import { Helmet } from "react-helmet"; import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png"; import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png"; + +import downarrow from "../mysy_img/downarrow.png"; +import uparrow from "../mysy_img/uparrow.png"; + + import Footer from "./Fotter"; import { confirmAlert } from 'react-confirm-alert'; // Import import { useCookies } from "react-cookie"; @@ -616,7 +621,7 @@ const Partner = (props) => {
} - +
{parntername && {parntername} - {String(partnerPackService).toUpperCase()} ({parnternbformation})} {!parntername && Partenaire }

@@ -652,14 +657,15 @@ const Partner = (props) => {

- {String(deplie_hebergement) === "1" &&
- Espace Hébergement (++) + {String(deplie_hebergement) === "1" &&
+ Espace Hébergement
}
- {String(deplie_hebergement) !== "1" &&
- Espace Hébergement (--) + + {String(deplie_hebergement) !== "1" &&
+ Espace Hébergement
{String(has_partner_lms_url) === "1" &&
{ @@ -668,12 +674,12 @@ const Partner = (props) => { partner_lms_url, '_blank' ); - }}>  MON HEBERGEMENT
} + }}>   MON HEBERGEMENT
} {String(has_partner_lms_url) === "1" &&

- {String(menu) !== "statistique" &&
  CONFIGURATION
} - {String(menu) === "statistique" &&
   Configuration
} + {String(menu) !== "statistique" &&
   CONFIGURATION
} + {String(menu) === "statistique" &&
    CONFIGURATION
}
}
} diff --git a/src/mysy_img/downarrow.png b/src/mysy_img/downarrow.png new file mode 100644 index 0000000..8b51271 Binary files /dev/null and b/src/mysy_img/downarrow.png differ diff --git a/src/mysy_img/menu_open.png b/src/mysy_img/menu_open.png new file mode 100644 index 0000000..31113f0 Binary files /dev/null and b/src/mysy_img/menu_open.png differ diff --git a/src/mysy_img/menu_open_1.png b/src/mysy_img/menu_open_1.png new file mode 100644 index 0000000..467a3a7 Binary files /dev/null and b/src/mysy_img/menu_open_1.png differ diff --git a/src/mysy_img/uparrow.png b/src/mysy_img/uparrow.png new file mode 100644 index 0000000..640a5fe Binary files /dev/null and b/src/mysy_img/uparrow.png differ diff --git a/src/styles/components/_hebergementlms.scss b/src/styles/components/_hebergementlms.scss index dffb93c..adc053b 100644 --- a/src/styles/components/_hebergementlms.scss +++ b/src/styles/components/_hebergementlms.scss @@ -100,17 +100,110 @@ margin-top: 2rem; } - .btn_enreg_cmd { - background: #81BC3A; - padding: 0.3rem; - border-radius: 5rem; - font-size: small; - text-align: left; - border: solid 1px; - height: 2.5rem; + .btn_modif { + background-color: #212121 !important; color: white; - width: 90%; + 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 { + 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 { + display: block; + width: 90%; + height: 200px; + border-radius: 1rem !important; + margin-top: 1rem !important; + } + + .preview_certif:hover { + //transform: scale(1.8); + //margin-left: 10rem; + } + + .session_caract { + width: 95%; + padding: 5px; + float: left; + text-align: left; + font-size: small; + } + + .selectsession { + width: 90%; + height: 2rem; + font-size: small; + } + + + .detail_class_submenu { + background: #d8edfc; + border-radius: 15px; + margin-right: 1rem; + padding: 0.3rem; + margin-bottom: 0.5rem; + width: 95%; + 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: 100%; + 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; + } + } @media only screen and (min-width: 601px) and (max-width: 991px) { @@ -180,16 +273,108 @@ margin-top: 2rem; } - .btn_enreg_cmd { - background: #81BC3A; - padding: 0.3rem; - border-radius: 5rem; - font-size: small; - text-align: left; - border: solid 1px; - height: 2.5rem; + .btn_modif { + background-color: #212121 !important; color: white; - width: 80%; + 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 { + 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 { + display: block; + width: 90%; + height: 200px; + border-radius: 1rem !important; + margin-top: 1rem !important; + } + + .preview_certif:hover { + transform: scale(1.1); + //margin-left: 10rem; + } + + .session_caract { + width: 95%; + padding: 5px; + float: left; + text-align: left; + font-size: small; + } + + .selectsession { + width: 90%; + 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: 100%; + 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; } } @@ -259,18 +444,112 @@ margin-top: 2rem; } - .btn_enreg_cmd { - background: #81BC3A; - padding: 0.3rem; - border-radius: 5rem; - font-size: small; - text-align: left; - border: solid 1px; - height: 2.5rem; + + .btn_modif { + background-color: #212121 !important; color: white; - width: 80%; + 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 { + 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 { + display: block; + width: 90%; + height: 200px; + border-radius: 1rem !important; + margin-top: 1rem !important; + } + + .preview_certif:hover { + transform: scale(1.2); + //margin-left: 10rem; + } + + .session_caract { + width: 95%; + padding: 5px; + float: left; + text-align: left; + font-size: small; + } + + .selectsession { + width: 90%; + 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: 100%; + 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; + } + + } @media only screen and (min-width: 1200px) { @@ -374,12 +653,12 @@ } .preview_certif:hover { - transform: scale(1.8); - margin-left: 10rem; + transform: scale(1.3); + //margin-left: 10rem; } .session_caract { - width: 30%; + width: 45%; padding: 5px; float: left; text-align: left; diff --git a/src/styles/components/_partner.scss b/src/styles/components/_partner.scss index dc8e880..274ab4e 100644 --- a/src/styles/components/_partner.scss +++ b/src/styles/components/_partner.scss @@ -1949,9 +1949,13 @@ width: 2rem; height: 1.5rem; } + + } - + .hebergement_icone{ + width: 10%; + } // end media .css-1wgeduv-MuiFormControl-root-MuiTextField-root { padding-top: 5px;