import React, { useRef, useState, useEffect } from "react"; import { useParams } from 'react-router-dom' import axios from "axios"; import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png"; import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png"; import { Helmet } from "react-helmet"; import 'react-slideshow-image/dist/styles.css' import { Fade } from 'react-slideshow-image'; import slideimg1 from "../mysy_img/education.jpg"; import slideimg4 from "../mysy_img/mysy_img.png"; import Footer from "./Fotter"; import Header from "./Header"; import bannerimg from "../mysy_img/MYSY_banner_compte.png"; import img_met_program from "../mysy_img/met_programmation.jpg"; import img_met_hotel from "../mysy_img/met_hotel.jpg"; import img_met_graphisme from "../mysy_img/metier_graphisme.jpg"; import img_met_autre from "../mysy_img/met_autre.jpg"; import img_met_digital from "../mysy_img/met_digital.jpg"; import img_met_management from "../mysy_img/met_management.jpg"; import img_met_projet from "../mysy_img/met_projet.jpg"; import img_met_market from "../mysy_img/met_market.jpg"; import img_met_autre2 from "../mysy_img/met_autre2.jpg"; import img_met_dev_perso from "../mysy_img/metier_dev_perso.jpg"; import img_met_rh from "../mysy_img/met_rh.jpg"; import img_met_bureautic from "../mysy_img/met_burautic.jpg"; import img_met_vente from "../mysy_img/met_vente.jpg"; /* /!\ important: les images du slides doivent avoir une dimension de : 250 X 450 */ import { Button, } from "reactstrap"; import { useHistory } from "react-router-dom"; import { useCookies } from "react-cookie"; import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share"; import { SocialIcon } from 'react-social-icons'; import { confirmAlert } from 'react-confirm-alert'; import { Rating } from 'react-simple-star-rating'; import parse from 'html-react-parser'; import Inscription_Information from "./Inscription_Information"; import { Editor } from '@tinymce/tinymce-react'; const DisplayDetailClassAction = (props) => { const { classId, action } = useParams(); const [result, setResult] = useState(""); const [myApiResponse, setmyApiResponse] = useState(); const [DetailTraining, setDetailTraining] = useState([]); const [closepopup, setclosepopup] = useState(0); const [country_code, setcountry_code] = useState(""); const [country_name, setcountry_name] = useState(""); const [city, setcity] = useState(""); const [postal, setpostal] = useState(""); const [latitude, setlatitude] = useState(""); const [longitude, setlongitude] = useState(""); const [IPv4, setIPv4] = useState(""); const [state, setstate] = useState(""); const [userIp, setuserIp] = useState(""); const [mynote, setmynote] = useState(0); const [userconnected, setuserconnected] = useState("0"); const [someoneconnected, setsomeoneconnected] = useState("0"); const [partnerconnected, setpartnerconnected] = useState("0"); const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']); const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']); const [inscritpion, setinscritpion] = useState("1"); // Gestion des Cookies const stored_partner = cookie_part.tokenmysypart; const stored_user = cookie.tokenmysych; useEffect(() => { var local_user_connect = 0; var local_part_connect = 0; if (typeof (stored_user) === "undefined" || String(stored_user) === '') { setuserconnected("0"); local_user_connect = 0; } else { setuserconnected("1"); local_user_connect = 1; } if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') { setpartnerconnected("0"); local_part_connect = 0; } else { setpartnerconnected("1"); local_part_connect = 1; } async function fetchData() { const result = await axios('https://geolocation-db.com/json/',); setuserIp(result.data.IPv4); setcountry_code(result.data.country_code); setcountry_name(result.data.country_name); setcity(result.data.city); setpostal(result.data.postal); setlatitude(result.data.latitude); setlongitude(result.data.longitude); setIPv4(result.data.IPv4); setstate(result.data.state); setuserIp(result.data.IPv4); submenu_datelieu(); } fetchData(); Display(); GetAssociatedTraning(); window.scrollTo(0, 0); document.getElementsByName('mytitle')[0].focus(); }, []); function contactUs(e) { var sender_mail = ""; var sender_tel = ""; var token = ""; if (String(userconnected) === "0") { sender_mail = document.getElementsByName("usermail")[0].value; sender_tel = document.getElementsByName("usernumtel")[0].value; if (sender_mail.length == 0 && sender_tel.length == 0) { alert(" Les information fournies sont incorrectes "); return; } } else { token = String(stored_user) } var useravis = document.getElementsByName("useravis")[0].value; var usersupqual = document.getElementsByName("userqualsup")[0].value; var usernote = document.getElementsByName("usernote")[0].value; if (useravis.length < 20 || usersupqual.length < 20 || usernote.length < 0) { alert("Merci de saisir le nombre minimum de caractère requis pour les champs "); return; } var re = /\S+@\S+\.\S+/; if (re.test(sender_mail) == false) { alert("l'email est incorrecte"); return; } ////console.log("contacter " + sender_mail + " - " + sender_tel + " - ") //alert("contacter "+sender_mail+" - "+sender_tel+" - "+usermessage+" - url = " //+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude); var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/"; var form = new FormData(); form.append("type", "email"); form.append("recever_mail", ""); form.append("recever_tel", ""); form.append("sender_mail", sender_mail); form.append("sender_tel", sender_tel); form.append("object", DetailTraining["external_code"]); form.append("token", ""); form.append("user_ip", IPv4); form.append("user_country_code", country_code); form.append("user_country_name", country_name); form.append("user_city", city); form.append("user_postal", postal); form.append("user_latitude", latitude); form.append("user_longitude", longitude); form.append("user_state", state); axios.post(myurl, form).then(res => { if (res.data.status != "False") { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); setclosepopup(1); document.getElementsByName("usermail")[0].value = ""; document.getElementsByName("usernumtel")[0].value = ""; document.getElementsByName("usercomment")[0].value = ""; } else { //console.log(" contact-nous statut = " + res.data.status); //console.log(" contact-nous res.data.message = " + res.data.message); } }).catch((error) => { console.warn('contact-nous Not good man :( mysearchtext = '); }) } function Display(e) { var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class/"; var form = new FormData(); form.append("internal_url", classId); form.append("token", ""); // Ajout des info IP user form.append("user_ip", IPv4); form.append("user_country_code", country_code); form.append("user_country_name", country_name); form.append("user_city", city); form.append("user_postal", postal); form.append("user_latitude", latitude); form.append("user_longitude", longitude); form.append("user_state", state); //alert("myurl = "+myurl); axios.post(myurl, form).then(res => { if (String(res.data.status) !== String("false")) { console.log(" In Display res.data.status = " + res.data.status); console.log(" In Display res.data.message = " + res.data.message); if (res.data.message.length > 0) { setmyApiResponse("True"); if (String(JSON.parse(res.data.message).coeur) !== String("1") && String(JSON.parse(res.data.message).freeacces) !== String("1")) { //alert(" ce n'est pas un coeur = " + JSON.parse(res.data.message).coeur) // Verification si on est en e connecté ou non. var local_user_connect = 0; var local_part_connect = 0; if (typeof (stored_user) === "undefined" || String(stored_user) === '') { setuserconnected("0"); local_user_connect = 0; } else { setuserconnected("1"); local_user_connect = 1; } if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') { setpartnerconnected("0"); local_part_connect = 0; } else { setpartnerconnected("1"); local_part_connect = 1; } if (local_user_connect === 0 && local_part_connect === 0) { confirmAlert({ title: 'Connexion ?', message: 'Connectez-vous pour acceder au detail de cette formation', buttons: [ { label: 'Vous avez un compte', onClick: () => { history.push("/mysy-training-login/training/" + classId) } }, { label: "Vous n'avez pas de compte", onClick: () => { history.push("/create_account") } }, ], closeOnEscape: false, closeOnClickOutside: false, keyCodeForClose: [8, 32], willUnmount: () => { }, afterClose: () => { }, onClickOutside: () => { }, onKeypress: () => { }, onKeypressEscape: () => { }, }); } } else { //alert(" c'est pas un coeur = " + JSON.parse(res.data.message).coeur) } } else { setmyApiResponse("False"); } //console.log(" In displaydetailclass res.data.status = " + res.data.status); console.log(" In displaydetailclass res.data.message = " + res.data.message); setResult(res.data.message); setDetailTraining(JSON.parse(res.data.message)); } else { //console.log(" In Erreur res.data.status = " + res.data.status); //console.log(" In Erreur res.data.message = " + res.data.message); setmyApiResponse("False"); } }).catch((error) => { console.warn('Not good man :( Display = ', error); console.log(error); setmyApiResponse("False"); }) } const [associatedtraining_api, setassociatedtraining_api] = useState(""); const [associatedtraining_message, setassociatedtraining_message] = useState(""); function GetAssociatedTraning(e) { var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_associated_class_of_partnair/"; var form = new FormData(); form.append("internal_url", classId); // Ajout des info IP user form.append("user_ip", IPv4); form.append("user_country_code", country_code); form.append("user_country_name", country_name); form.append("user_city", city); form.append("user_postal", postal); form.append("user_latitude", latitude); form.append("user_longitude", longitude); form.append("user_state", state); //alert("myurl = "+myurl); axios.post(myurl, form).then(res => { if (String(res.data.status) !== String("false")) { console.log(" In GetAssociatedTraning res.data.status = " + res.data.status); console.log(" In GetAssociatedTraning res.data.message = " + res.data.message); setassociatedtraining_api("True"); setassociatedtraining_message(res.data.message); } else { //console.log(" In Erreur res.data.status = " + res.data.status); //console.log(" In Erreur res.data.message = " + res.data.message); setassociatedtraining_api("False"); } }).catch((error) => { console.warn('Not good man :( GetAssociatedTraning = '); setassociatedtraining_api("False"); }) } const history = useHistory(); const fadeImages = [ { url: slideimg1, }, { url: slideimg4, }, ]; function CheckAvis(e) { const val = document.getElementById("useravis").value //alert(" evalu " + val); if (val.length < 20) { alert(" Le champ 'Avis' doit etre plus renseigné"); } //alert(val); } function CheckNote(e) { const val = e.target.value; if (isNaN(val)) { //alert(val + " is not a number
mynote = "+mynote); document.getElementById("usernote").value = mynote; } else { if (val > 5) { alert(" Valeur Maxi doit etre 5"); document.getElementById("usernote").value = mynote; } else { setmynote(val); } } } const [submenu, setsubmenu] = useState("datelieu"); function submenu_info() { setsubmenu("formateur"); //if (document.getElementsByName("menu_formateur")[0]) //document.getElementsByName('menu_formateur')[0].focus(); if (document.getElementsByName("menu_datelieu")[0]) document.getElementsByName('menu_datelieu')[0].blur(); if (document.getElementsByName("submenu_divers")[0]) document.getElementsByName('submenu_divers')[0].blur(); } function submenu_datelieu() { setsubmenu("datelieu"); //if (document.getElementsByName("menu_datelieu")[0]) // document.getElementsByName('menu_datelieu')[0].focus(); if (document.getElementsByName("menu_formateur")[0]) document.getElementsByName('menu_formateur')[0].blur(); if (document.getElementsByName("submenu_divers")[0]) document.getElementsByName('submenu_divers')[0].blur(); } function submenu_divers() { setsubmenu("divers"); // if (document.getElementsByName("submenu_divers")[0]) // document.getElementsByName('submenu_divers')[0].focus(); if (document.getElementsByName("menu_datelieu")[0]) document.getElementsByName('menu_datelieu')[0].blur(); if (document.getElementsByName("submenu_divers")[0]) document.getElementsByName('submenu_divers')[0].blur(); } /// ---- return (
{`${DetailTraining["title"]}`}

{`${DetailTraining["title"]}`}

Du même organisme
{associatedtraining_message && String(associatedtraining_api) === "True" && associatedtraining_message.map((formation) => (
{ e.preventDefault(); //test(props.formation.external_code); window.open( "/Display-Detail-formation/" + JSON.parse(formation).internal_url, '_blank' ); }}>
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") && informatique} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") && graphisme} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") && management} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") && digital} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") && office} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") && ressources humaines} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") && vente} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") && developpement personnel} {!JSON.parse(formation).metier && autre personnel}
{parse(String(JSON.parse(formation).title))}
{parse(String((JSON.parse(formation).description).substring(0, 50)))}
))}
 
{(String(action).toLocaleLowerCase() === "inscription" || String(action).toLocaleLowerCase() === "information") &&
}
{parse(String(DetailTraining["title"]))}
Descriptions : {DetailTraining["description"] &&

{parse(String(DetailTraining["description"]))}

}

Objectif : {DetailTraining["objectif"] &&

{parse(String(DetailTraining["objectif"]))}  

} {!DetailTraining["objectif"] &&

En cours  

}

{DetailTraining["prerequis"] &&
Pré-requis : {DetailTraining["prerequis"] &&

{parse(String(DetailTraining["prerequis"]))}  

} {!DetailTraining["prerequis"] &&

---  

}
} {DetailTraining["pointsfort"] &&
Points forts : {DetailTraining["pointsfort"] &&

{parse(String(DetailTraining["pointsfort"]))}  

} {!DetailTraining["pointsfort"] &&

En cours  

}
} {DetailTraining["programme"] &&
Programme : {DetailTraining["programme"] &&

{parse(String(DetailTraining["programme"]))}  

} {!DetailTraining["programme"] &&

---  

}
}
Caracteristiques

Prix :
{DetailTraining["price"]} €
Durée :
{DetailTraining["duration"]}   {DetailTraining["duration_unit"]}
Certification :
{DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") &&
Non  
} {DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") &&
Oui  
}
distanciel :
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" &&
Oui
} {DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" &&
Non
}
Presentiel :
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" &&
Oui
} {DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" &&
Non
}
Support :
{DetailTraining["support"] &&
{DetailTraining["support"]}  
} {!DetailTraining["certif"] &&
Inconnu  
}
Note
 
{/*
*/}
{String(submenu) === String("formateur") &&
{DetailTraining.trainer &&

{DetailTraining.trainer}
} {!DetailTraining.trainer &&

}
} {String(submenu) === String("datelieu") &&
{DetailTraining.datelieu && DetailTraining.datelieu.map((datelieu) => (
{String(datelieu.code_postal) === "0" && } {String(datelieu.code_postal) !== "0" && }
))}
} {String(submenu) === String("divers") &&
divers
}
Du même organisme
{associatedtraining_message && String(associatedtraining_api) === "True" && associatedtraining_message.map((formation) => (
{ e.preventDefault(); //test(props.formation.external_code); window.open( "/Display-Detail-formation/" + JSON.parse(formation).internal_url, '_blank' ); }}>
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") && informatique} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") && graphisme} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") && management} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") && digital} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") && office} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") && ressources humaines} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") && vente} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") && developpement personnel} {!JSON.parse(formation).metier && autre personnel}
{parse(String(JSON.parse(formation).title))}
{parse(String((JSON.parse(formation).description).substring(0, 50)))}
))}
) } export default DisplayDetailClassAction;