Ela_Front/src/pages/Contact.js

783 lines
32 KiB
JavaScript

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: <img src="./img/cours.png" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16" />
},
{
value: 2,
text: 'Coaching',
icon: <img src="./img/coaching.png" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16" />
},
{
value: 3,
text: 'Video',
icon: <img src="./img/video.png" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16" />
},
{
value: 4,
text: 'Right Arrow tt',
icon: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
</svg>
}
];
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 (
<div className={"contact"}>
<Navigation/>
<div className={"searchbar"}>
<div className="container justify-content-center">
<div className="row">
<div className="col-md-8">
<div className="input-group mb-3" >
<input type="text" className="form-control input-text" id="search" name="search"
placeholder="La recherche sur : titre, obj pédagogique, formateur "
aria-label="Recipient's username" aria-describedby="basic-addon2"/>
&nbsp;
<div style={{color: "red", width: "20%"}} >
<Select
placeholder="Type..."
value={selectedOption}
options={data}
onChange={newhandleChange}
getOptionLabel={e => (
<div style={{ display: 'flex', alignItems: 'center' }}>
{e.icon}
<span style={{ marginLeft: 5 }}>{e.text}</span>
</div>
)}
/>
</div>
<button id="search-button" type="button" className="btn btn-primary" onClick={toto}>
<img className={"ch_login_img"} alt={"login"}
src={"./img/search.svg"}
width="16"
height="16"
/>
</button>
</div>
</div>
</div>
</div>
</div>
<h1> Resultat vide </h1>
<div className={"div1"}>
<div className="badge bg-primary text-wrap" >Critères.</div>
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm">Critere 1</span>
<input type="text" className="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm" id={"criteria1"}/>
</div>
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm2">Critere 2</span>
<input type="text" className="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm" id={"criteria2"}/>
</div>
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm3">Critere 3</span>
<select className="form-select form-select-sm" onChange={SelectHandle} aria-label=".form-select-sm example" id={"criteria3"}>
<option selected>Choisir une valeur</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>
<div className="slidecontainer">
<span className="input-group-text" id="inputGroup-sizing-sm3">C. 4</span>
<input
id="typeinp"
type="range"
min="0" max="5"
value={myRange}
onChange={handleChange}
step="1"/>
<span id="demo">{myRange}</span>
</div>
<Select
placeholder="Type..."
value={selectedOption}
options={data}
onChange={newhandleChange}
getOptionLabel={e => (
<div style={{ display: 'flex', alignItems: 'center' }}>
{e.icon}
<span style={{ marginLeft: 5 }}>{e.text}</span>
</div>
)}
/>
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm">Critere 1</span>
<input type="text" className="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm" id={"criteria1"}/>
</div>
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm2">Critere 2</span>
<input type="text" className="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm" id={"criteria2"}/>
</div>
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm2"
style={{width: "100%"}}>Quel niveau</span>
<select style={{width: "100%"}}>
<option value="">aucun</option>
<option value="">Debutant</option>
<option value="">Confirmé</option>
<option value="">Expert</option>
</select>
</div>
<div className="input-group input-group-sm mb-3">
<select id="insightList" multiple="multiple"style={{width: "95%"}}>
<optgroup label="Type de formation">
<option value="vide"></option>
<option value="1-1">Tutoriel</option>
<option value="2-1">Cours</option>
<option value="2-2">Coaching</option>
</optgroup>
</select>
</div>
<div >
<span className="input-group-text" id="inputGroup-sizing-sm2"
style={{width: "100%"}}>Prix</span>
<span>
<label htmlFor="test" align={"left"} style={{width: "80%"}}>10 euro</label>
<input name="test" id="test" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
<span>
<label htmlFor="test1" align={"left"} style={{width: "80%"}}>20 - 50 euro</label>
<input name="test1" id="test1" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
<span>
<label htmlFor="test3" align={"left"} style={{width: "80%"}}>50 - 100 euro</label>
<input name="test3" id="test3" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
<span>
<label htmlFor="test4" align={"left"} style={{width: "80%"}}> > 100 euro</label>
<input name="test4" id="test4" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
</div>
<div >
<span className="input-group-text" id="inputGroup-sizing-sm2"
style={{width: "100%"}}>Durée</span>
<span><label htmlFor="d_courte" align={"left"} style={{width: "80%"}}>1 - 5 jours</label>
<input name="d_courte" id="d_courte" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
<span><label htmlFor="d_inter" align={"left"} style={{width: "80%"}}>1 sem - 4 sem</label>
<input name="d_inter" id="d_inter" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
<span><label htmlFor="d_long" align={"left"} style={{width: "80%"}}>+ 1 mois</label>
<input name="d_long" id="d_long" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
</div>
<div className="slidecontainer">
<span className="input-group-text" id="inputGroup-sizing-sm3">C. 4</span>
<input
id="typeinp"
type="range"
min="0" max="5"
value={myRange}
onChange={handleChange}
step="1"/>
<span id="demo">{myRange}</span>
</div>
</div>
<div className={"div2"}>
<input
className="button"
type="button"
value="Relancer la recherche"
onClick={toto}
/>
</div>
<div className={"div3"}>
<div className="badge bg-primary text-wrap" > Sponsoring </div>
</div>
<Footer/>
</div>
)
}
else {
return (
<div className={"contact"}>
<Navigation/>
<div className={"searchbar"}>
<div className="container justify-content-center">
<div className="row">
<div className="col-md-8">
<div className="input-group mb-3" >
<input type="text" className="form-control input-text" id="search" name="search"
placeholder="La recherche sur : titre, obj pédagogique, formateur "
aria-label="Recipient's username" aria-describedby="basic-addon2"/>
&nbsp;
<div style={{color: "red", width: "20%"}} >
<Select
placeholder="Type..."
value={selectedOption}
options={data}
onChange={newhandleChange}
getOptionLabel={e => (
<div style={{ display: 'flex', alignItems: 'center' }}>
{e.icon}
<span style={{ marginLeft: 5 }}>{e.text}</span>
</div>
)}
/>
</div>
<button id="search-button" type="button" className="btn btn-primary" onClick={toto}>
<img className={"ch_login_img"} alt={"login"}
src={"./img/search.svg"}
width="16"
height="16"
/>
</button>
</div>
</div>
</div>
</div>
</div>
<input
className="button"
type="button"
value="Lancer la recherche"
onClick={toto}
/>
<div className={"div1"}>
<div className="badge bg-primary text-wrap" >Critères.</div>
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm">Critere 1</span>
<input type="text" className="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm" id={"criteria1"}/>
</div>
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm2">Critere 2</span>
<input type="text" className="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm" id={"criteria2"}/>
</div>
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm3">Critere 3</span>
<select className="form-select form-select-sm" onChange={SelectHandle} aria-label=".form-select-sm example" id={"criteria3"}>
<option selected>Choisir une valeur</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>
<div className="slidecontainer">
<span className="input-group-text" id="inputGroup-sizing-sm3">C. 4</span>
<input
id="typeinp"
type="range"
min="0" max="5"
value={myRange}
onChange={handleChange}
step="1"/>
<span id="demo">{myRange}</span>
</div>
<Select
placeholder="Type..."
value={selectedOption}
options={data}
onChange={newhandleChange}
getOptionLabel={e => (
<div style={{ display: 'flex', alignItems: 'center' }}>
{e.icon}
<span style={{ marginLeft: 5 }}>{e.text}</span>
</div>
)}
/>
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm">Critere 1</span>
<input type="text" className="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm" id={"criteria1"}/>
</div>
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm2">Critere 2</span>
<input type="text" className="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm" id={"criteria2"}/>
</div>
<div >
<span className="input-group-text" id="inputGroup-sizing-sm2"
style={{width: "100%"}}>Prix</span>
<span>
<label htmlFor="test" align={"left"} style={{width: "80%"}}>10 euro</label>
<input name="test" id="test" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
</div>
<div className="input-group input-group-sm mb-3">
<span className="input-group-text" id="inputGroup-sizing-sm2"
style={{width: "100%"}}>Quel niveau xx</span>
<select style={{width: "100%"}}>
<option value="">aucun</option>
<option value="">Debutant</option>
<option value="">Confirmé</option>
<option value="">Expert</option>
</select>
</div>
<div className="input-group input-group-sm mb-3">
<select id="insightList" multiple="multiple"style={{width: "95%"}}>
<optgroup label="Type de formation">
<option value="vide"></option>
<option value="1-1">Tutoriel</option>
<option value="2-1">Cours</option>
<option value="2-2">Coaching</option>
</optgroup>
</select>
</div>
<div >
<span className="input-group-text" id="inputGroup-sizing-sm2"
style={{width: "100%"}}>Prix</span>
<span>
<label htmlFor="test" align={"left"} style={{width: "80%"}}>10 euro</label>
<input name="test" id="test" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
<span>
<label htmlFor="test1" align={"left"} style={{width: "80%"}}>20 - 50 euro</label>
<input name="test1" id="test1" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
<span>
<label htmlFor="test3" align={"left"} style={{width: "80%"}}>50 - 100 euro</label>
<input name="test3" id="test3" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
<span>
<label htmlFor="test4" align={"left"} style={{width: "80%"}}> > 100 euro</label>
<input name="test4" id="test4" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
</div>
<div >
<span className="input-group-text" id="inputGroup-sizing-sm2"
style={{width: "100%"}}>Durée</span>
<span><label htmlFor="d_courte" align={"left"} style={{width: "80%"}}>1 - 5 jours</label>
<input name="d_courte" id="d_courte" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
<span><label htmlFor="d_inter" align={"left"} style={{width: "80%"}}>1 sem - 4 sem</label>
<input name="d_inter" id="d_inter" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
<span><label htmlFor="d_long" align={"left"} style={{width: "80%"}}>+ 1 mois</label>
<input name="d_long" id="d_long" lign={"right"}
type="checkbox" style={{width: "20%"}}/>
</span>
</div>
<div className="slidecontainer">
<span className="input-group-text" id="inputGroup-sizing-sm3">C. 4</span>
<input
id="typeinp"
type="range"
min="0" max="5"
value={myRange}
onChange={handleChange}
step="1"/>
<span id="demo">{myRange}</span>
</div>
</div>
<div className={"div2"}>
<div className="badge bg-primary text-wrap" > Resultat recherche </div>
<nav className={"nb_page"}>
<ul className={"pagination"} id="bulk">
{pagenumber.map(number => (
<li key={number} className={"page-item"} id={number} value="ii">
<a href="#" id={number} value="ici" className={"page-link"} onClick={ MyPageNumber }> {number}</a>
</li>
))}
</ul>
</nav>
<div className={"user_list"}>
{mydata.slice(debutpage,finpage).map((formation) => (
<ul>
<li><Formation formation={JSON.parse(formation)} key={JSON.parse(formation).title}/></li>
</ul>
))}
</div>
</div>
<div className={"div3"}>
<div className="badge bg-primary text-wrap" > Sponsoring </div>
</div>
<Footer/>
</div>
)
}
}
export default Contact;