haissous/ProjetRIOT
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

aled le search.js en sueurs

Browse Source
This commit is contained in:
Haïssous Kayyissa 2023-03-27 16:15:49 +02:00
parent 14e253bbc7
commit 77c36b7d8b
3 changed files with 19 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/search.riot
View File

@ -1,6 +1,6 @@
<search>
<label>
<input onkeydown={searchF} type="input" placeholder= {state.formation}>
<input onkeydown={searchF} type="input" placeholder= {state.placeholder}>
<div id="list-formations">
<ul>
<li each={item in this.state.items}>
@ -12,10 +12,10 @@
</label>
<script>
async function formation(whatToSearch){
async function apiLink(whatToSearch, whereToSearch){
let result = await fetch("https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet="+whatToSearch+"&timezone=Europe%2FBerlin")
let resultats = await result.json()
let table = resultats["facet_groups"][0]["facets"]
let table = resultats["facet_groups"][whereToSearch]["facets"]
return table
}
@ -24,12 +24,14 @@
onBeforeMount(props, state) {
// initial state
this.state = {
formation: props.formation,
placeholder: "Formation",
items: null,
allitems: null,
whatToSearch: "fili"
whatToSearch: "fili",
fili: null,
sousfili: null
}
formation(this.state.whatToSearch).then((response) => {
apiLink(this.state.whatToSearch,0).then((response) => {
this.update({
items: response,
allitems: response
@ -49,34 +51,27 @@
},
filter(fili){
console.log("filter! "+fili)
if (this.state.whatToSearch==="form_lib_voe_acc"){
let step=0;
if (this.state.placeholder==="Filière de formation"){
this.update({
formation: "Filière de formation détaillée",
whatToSearch: "lib_for_voe_ins"
placeholder: "Filière de formation détaillée",
sousfili: fili,
whatToSearch: "fili&facet=form_lib_voe_acc&facet=fil_lib_voe_acc&refine.form_lib_voe_acc="+this.state.sousfili+"&refine.fili="this.state.fili
})
} else {
this.update({
formation: "Filière de formation",
whatToSearch: "form_lib_voe_acc"
placeholder: "Filière de formation",
fili: fili,
whatToSearch: "fili&facet=form_lib_voe_acc&refine.fili="+this.state.fili
})
}
formation(this.state.whatToSearch).then((response) => {
apiLink(this.state.whatToSearch).then((response) => {
this.update({
allitems: response,
item: response
})
console.log(this.state.items)
})
let responseFiltered=[]
this.state.allitems.forEach(formation => {
if (formation.name.includes(fili)) {
responseFiltered.push(formation)
}
});
this.update({
allitems: responseFiltered,
items: responseFiltered
})
}
}
}

2
index.html
View File

@ -17,8 +17,6 @@
<script>
riot.compile().then(() => {
riot.mount('search', {
formation:'Formation',
items: null
})
})
</script>

120
javascript/search.js
View File

@ -1,120 +0,0 @@
let model = {
getFormations(search) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open("GET", "/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin");
xhr.responseType = "json";
xhr.onload = ev => {
if (xhr.status == 200) resolve(xhr.response);
};
xhr.onerror = () => {
reject("error");
};
xhr.send();
});
}
};
class Controller {
constructor(view, model) {
this.view = view;
this.model = model;
this.loading = false;
this.lastSearch = null;
this.error = null;
this.results = [];
this.view.setLoading(false);
this.view.bindSearch(this.search.bind(this));
}
reset() {
this.loading = false;
this.error = null;
this.results = [];
}
async search(formation) {
this.model.getFormations(formation).then(response => {
let table = response["facet groups"][0]["facets"];
this.view.renderList(table);
}).catch(error => {
this.view.renderMessage(error);
});
}
}
function debounce(fn, wait) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), wait);
};
}
class View {
constructor() {
this.listFormations = document.querySelector("#list-formations");
this.inputSearch = document.querySelector("input");
this.message = document.querySelector("p.error");
}
_getInput() {
return this.inputSearch.value;
}
renderMessage(error) {
this.message.style.display = "block";
this.message.textContent = error;
}
renderList(formations) {
let ul = document.createElement("ul");
formations.forEach(formation => {
let li = document.createElement("li");
let a = document.createElement("a");
let span = document.createElement("span");
//a.href = `test`
a.target = "_blank";
a.textContent = formation.name;
span.textContent = formation.name;
li.appendChild(a);
li.appendChild(span);
ul.appendChild(li);
});
this.listFormations.replaceChildren(ul);
}
bindSearch(handler) {
this.inputSearch.addEventListener("input", debounce(e => {
handler(this._getInput());
}, 500));
}
}
var search = {
css: null,
exports: function search() {
return {
onBeforeMount(props, state) {
// initial state
this.state = {
formation: props.formation
};
},
search() {
console.log("test1");
const view = new View();
new Controller(view, model);
}
};
},
template: (template, expressionTypes, bindingTypes, getComponent) => template('<label><input expr1="expr1" type="input"/><p class="error"></p><div id="list-formations"></div></label>', [{
redundantAttribute: 'expr1',
selector: '[expr1]',
expressions: [{
type: expressionTypes.EVENT,
name: 'oninput',
evaluate: _scope => _scope.search
}, {
type: expressionTypes.ATTRIBUTE,
name: 'placeholder',
evaluate: _scope => _scope.state.formation
}]
}]),
name: 'search'
};
export { search as default };