import React, {useState, useEffect} from "react"; import Navigation from "../components/Navigation"; import Footer from "../components/Fotter"; import axios from 'axios'; import Formation from "../components/Formation"; import Select from "react-select"; const Contact = (props) => { const [title, settitle] = useState(""); const [domain, setdomain] = useState(""); const [level, setlevel] = useState(""); const [trainer, settrainer] = useState(""); const [mydata,setmydata] = useState([]); const [mysearchtext,setmysearchtext] = useState(""); const [myApiUrl,setmyApiUrl] = useState("spa"); const [myApiResponse,setmyApiResponse] = useState("false"); const [myRange,setmyRange] = useState(0); const [myCriteria1,setmyCriteria1] = useState(""); const [myCriteria2,setmyCriteria2] = useState(""); const [myCriteria3,setmyCriteria3] = useState(""); const [myCriteria4,setmyCriteria4] = useState(""); const [currentPage,setcurrentPage] = useState(0); const [debutpage, setdebutpage] = useState(0); const [finpage, setfinpage] = useState(0) const [nbligneresultpage, setnbligneresultpage ] = useState(5); const pagenumber = []; var totalligne = 100; var ligneparpage = 15; const data = [ { value: 1, text: 'Cours', icon: }, { value: 2, text: 'Coaching', icon: }, { value: 3, text: 'Video', icon: }, { value: 4, text: 'Right Arrow tt', icon: } ]; const [selectedOption, setSelectedOption] = useState(null); // handle onChange event of the dropdown const newhandleChange = e => { setSelectedOption(e); } for (let i = 1;i <= Math.ceil(totalligne/ligneparpage);i++) pagenumber.push((i)); MyPageNumber(); function EventHandler(e) { //console.log(e.target.id); } const getRepo = () => { //var myurl = process.env.REACT_APP_API_URL+"myclass/api/get_class_global_search/"+mysearchtext; var myurl = process.env.REACT_APP_API_URL+"myclass/api/get_recherche_gle_class/"+mysearchtext; if( mysearchtext.toString().length == 0 ) myurl = process.env.REACT_APP_API_URL+"myclass/api/get_all_class/"; axios.get(myurl, { }).then(res => { if(res.data.status != "False"){ //console.log(" In test res.data.status = "+res.data.status); setmydata(res.data); setmyApiResponse("true"); } else { setmyApiResponse("false"); } //console.log('setmyApiResponse main : ' + myApiResponse); }).catch((error) => { console.warn('Not good man :( mysearchtext = '+mysearchtext ); setmyApiResponse("false"); }) } useEffect( () => getRepo(),[mysearchtext]) window.addEventListener('keyup', (e) => { if (e.defaultPrevented) { return; // Ne devrait rien faire si l'événement de la touche était déjà consommé. }switch (e.key) { case "ArrowDown": // Faire quelque chose pour la touche "flèche vers le bas" pressée. break; case "ArrowUp": // Faire quelque chose pour la touche "up arrow" pressée. break; case "ArrowLeft": // Faire quelque chose pour la touche "left arrow" pressée. break; case "ArrowRight": // Faire quelque chose pour la touche "right arrow" pressée. break; case "Enter": alert(" ENTREEE"); break; case "Escape": // Faire quelque chose pour la touche "esc" pressée. break; default: return; // Quitter lorsque cela ne gère pas l'événement touche. } // Annuler l'action par défaut pour éviter qu'elle ne soit traitée deux fois. e.preventDefault(); }, true); window.addEventListener('click', (e) => { //console.log("€€€€ "+e.target.tagName+" => "+ e.target.id); // Annuler l'action par défaut pour éviter qu'elle ne soit traitée deux fois. if (e.target.tagName === 'A') { //alert(e.target.id); // Check if the element is a LI setcurrentPage(e.target.id); //console.log("#### "+e.target.tagName+" => "+ e.target.id); var tmp = (e.target.id-1)*5; //console.log("tmp = "+tmp); setdebutpage(tmp); tmp = tmp + nbligneresultpage; setfinpage(tmp); //console.log("debutpage = "+debutpage+" finpage = "+finpage) } /*else { setcurrentPage(e.target.id); //alert(e.target.tagName+" uuu "+e.target.id); }*/ //e.preventDefault(); //console.log("page nombre = " + currentPage); }, true); function local_api(e){ var myurl = process.env.REACT_APP_API_URL+"myclass/api/get_all_class/"; // Verifier si la recherche est vide if( mysearchtext.toString().length == 0 ) myurl = process.env.REACT_APP_API_URL+"myclass/api/get_all_class/"; axios.get(myurl, { }).then(res => { //console.log('response is : ' + res.data); setmydata(res.data); //console.log(mydata); }).catch((error) => { console.warn('Not good man :('); setmyApiResponse("false"); }) } function MyPageNumber(){ var ul = document.getElementById('bulk'); // if( ul ) { ul.addEventListener('click', function (e) { ////console.log(" Tagname = " + e.target.tagName.toString()); if (e.target.tagName === 'LI') { //alert(e.target.id); // Check if the element is a LI setcurrentPage(e.target.id); } else { setcurrentPage(e.target.id); //alert(e.target.tagName+" uuu "+e.target.id); } }); } } function toto(e){ var search_value = document.getElementById("search").value; //Get Criterias var criteria1 = document.getElementById("criteria1").value; var criteria2 = document.getElementById("criteria2").value; var criteria3 = myCriteria3; var criteria4 = myRange; //console.log('criteria1 = '+criteria1+' - criteria2 = '+criteria2+' - criteria3 = '+criteria3+' - criteria4 '+criteria4) //var myurl = process.env.REACT_APP_API_URL+"myclass/api/get_class_global_search/"+search_value; var myurl = process.env.REACT_APP_API_URL+"myclass/api/get_recherche_gle_class/"+search_value; if( search_value.length == 0 ) myurl = process.env.REACT_APP_API_URL+"myclass/api/get_all_class/"; setmyApiUrl(myurl); setmysearchtext(search_value); //console.log("search_value TOTO = "+search_value) axios.get(myurl, { headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'Content-Type, Authorization', }, }).then(res => { if(res.data.status != "False"){ //console.log(" In test res.data.status = "+res.data.status); setmydata(res.data); setmyApiResponse("true"); } else { setmyApiResponse("false"); } }).catch((error) => { console.warn('Not good man :('); }) } function getInitialState() { return {value: 3}; } function handleChange(event) { setmyRange(event.target.value); } function SelectHandle(event) { setmyCriteria3(event.target.value); } function handleClick(e) { e.preventDefault(); var mytitle = document.getElementById("title").value; var mydomain = document.getElementById("domain").value; var mylevel = document.getElementById("level").value; var mytrainer = document.getElementById("trainer").value; if( mytitle.length == 0 ) alert("WRONG mytitle "+mytitle+" taille = "+mytitle.length); else settitle(mytitle); if( mydomain.length == 0 ) alert("WRONG mydomain "+mydomain+" taille = "+mydomain.length); else setdomain(mydomain); if( mylevel.length == 0 ) alert("WRONG mylevel "+mylevel+" taille = "+mylevel.length); else setlevel(mylevel); if( mytrainer.length == 0 ) alert("WRONG mytrainer "+mytrainer+" taille = "+mytrainer.length); else settrainer(mytrainer); } if ( myApiResponse == "false") { return (
 
Critere 2
Critere 3
C. 4 {myRange}
Critere 2
Quel niveau
Prix
Durée
C. 4 {myRange}
Sponsoring
) } else { return (
 
Critères.
Critere 1
Critere 2
Critere 3
C. 4 {myRange}
Critere 2
Prix
Quel niveau xx
Prix
Durée
C. 4 {myRange}
Resultat recherche
{mydata.slice(debutpage,finpage).map((formation) => (
))}
Sponsoring
) } } export default Contact;