This commit is contained in:
HORVILLE 2023-03-27 23:27:29 +02:00
commit 24095e2f73
5 changed files with 318 additions and 109 deletions

View File

@ -1,10 +1,11 @@
<search> <search>
<label> <label>
<input onkeydown={searchF} type="input" placeholder= {state.formation}> <input onkeydown={searchF} type="input" placeholder= {state.placeholder}>
<button onclick={back}><</button>
<div id="list-formations"> <div id="list-formations">
<ul> <ul>
<li each={item in this.state.items}> <li each={item in this.state.items}>
<a href={item.path} target="_blank">{item.name}</a> <span onclick={()=>filter(item.name)}>{item.name}</span>
<span>{item.count}</span> <span>{item.count}</span>
</li> </li>
</ul> </ul>
@ -12,11 +13,18 @@
</label> </label>
<script> <script>
async function formation(){ const searchURL = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&timezone=Europe%2FBerlin`
let result = await fetch("https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin")
let resultats = await result.json() async function fetchFiliere(state) {
let table = resultats["facet_groups"][0]["facets"] if (state.sousfili){
return table var request = await fetch(`${searchURL}&rows=0&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${state.sousfili}`)
} else if (state.fili&&!state.sousfili){
var request = await fetch(`${searchURL}&rows=0&sort=tri&facet=form_lib_voe_acc&refine.fili=${state.fili}`)
} else if (!state.fili&&!state.sousfili){
var request = await fetch(`${searchURL}&rows=0&sort=tri&facet=fili`)
}
let result = await request.json()
return result["facet_groups"][0]["facets"]
} }
export default function search(){ export default function search(){
@ -24,11 +32,13 @@
onBeforeMount(props, state) { onBeforeMount(props, state) {
// initial state // initial state
this.state = { this.state = {
formation: props.formation, placeholder: "Formation",
items: null, items: null,
allitems: null allitems: null,
fili: null,
sousfili: null
} }
formation().then((response) => { fetchFiliere(this.state).then((response) => {
this.update({ this.update({
items: response, items: response,
allitems: response allitems: response
@ -38,14 +48,54 @@
searchF(e){ searchF(e){
let responseFiltered=[] let responseFiltered=[]
this.state.allitems.forEach(formation => { this.state.allitems.forEach(formation => {
if (formation.name.includes(e.target.value)) { if (formation.name.toUpperCase().includes(e.target.value.toUpperCase())) {
responseFiltered.push(formation) responseFiltered.push(formation)
} }
}); });
this.update({ this.update({
items: responseFiltered items: responseFiltered
}) })
},
filter(fili){
console.log("filter! "+fili)
if (this.state.placeholder==="Filière de formation"){
this.update({
placeholder: "Filière de formation détaillée",
sousfili: fili,
})
} else if (this.state.placeholder="Formation"){
this.update({
placeholder: "Filière de formation",
fili: fili
})
}
fetchFiliere(this.state).then((response) => {
this.update({
allitems: response,
items: response
})
console.log(this.state.items) console.log(this.state.items)
})
},
back(){
console.log("back")
if (this.state.placeholder==="Filière de formation"){
this.update({
placeholder: "Formation",
fili: null,
})
} else if (this.state.placeholder="Filière de formation détaillée"){
this.update({
placeholder: "Filière de formation",
sousfili: null
})
}
fetchFiliere(this.state).then((response) => {
this.update({
allitems: response,
items: response
})
})
} }
} }
} }

View File

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

View File

@ -0,0 +1,158 @@
const searchURL = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&timezone=Europe%2FBerlin`;
async function fetchFiliere(state) {
if (state.sousfili) {
await fetch(`${searchURL}&rows=0&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${sousfiliere}`);
} else if (state.fili & !state.sousfili) {
await fetch(`${searchURL}&rows=0&sort=tri&facet=form_lib_voe_acc&refine.fili=${filiere}`);
} else if (!state.fili & !state.sousfili) {
await fetch(`${searchURL}&rows=0&sort=tri&facet=fili`);
} else {
console.log("ta verif elle pue");
}
let result = await request.json();
return result["facet_groups"][0]["facets"];
}
var search = {
css: null,
exports: function search() {
return {
onBeforeMount(props, state) {
// initial state
this.state = {
placeholder: "Formation",
items: null,
allitems: null,
fili: null,
sousfili: null
};
fetchFiliere(this.state).then(response => {
this.update({
items: response,
allitems: response
});
});
},
searchF(e) {
let responseFiltered = [];
this.state.allitems.forEach(formation => {
if (formation.name.toUpperCase().includes(e.target.value.toUpperCase())) {
responseFiltered.push(formation);
}
});
this.update({
items: responseFiltered
});
},
filter(fili) {
console.log("filter! " + fili);
if (this.state.placeholder === "Filière de formation") {
this.update({
placeholder: "Filière de formation détaillée",
sousfili: fili
});
fetchFiliere(this.state).then(response => {
this.update({
allitems: response,
items: response
});
});
console.log(this.state.items);
} else if (this.state.placeholder = "Formation") {
this.update({
placeholder: "Filière de formation",
fili: fili
});
fetchFiliere(this.state).then(response => {
this.update({
allitems: response,
items: response
});
console.log(this.state.items);
});
}
},
back() {
console.log("back");
if (this.state.placeholder === "Filière de formation") {
this.update({
placeholder: "Formation",
fili: null
});
fetchFiliere(state).then(response => {
this.update({
allitems: response,
items: response
});
});
console.log(this.state.items);
} else if (this.state.placeholder = "Filière de formation détaillée") {
this.update({
placeholder: "Filière de formation",
sousfili: null
});
fetchFiliere(this.state).then(response => {
this.update({
allitems: response,
items: response
});
console.log(this.state.items);
});
}
}
};
},
template: (template, expressionTypes, bindingTypes, getComponent) => template('<label><input expr0="expr0" type="input"/><button expr1="expr1"><</button><div id="list-formations"><ul><li expr2="expr2"></li></ul></div></label>', [{
redundantAttribute: 'expr0',
selector: '[expr0]',
expressions: [{
type: expressionTypes.EVENT,
name: 'onkeydown',
evaluate: _scope => _scope.searchF
}, {
type: expressionTypes.ATTRIBUTE,
name: 'placeholder',
evaluate: _scope => _scope.state.placeholder
}]
}, {
redundantAttribute: 'expr1',
selector: '[expr1]',
expressions: [{
type: expressionTypes.EVENT,
name: 'onclick',
evaluate: _scope => _scope.back
}]
}, {
type: bindingTypes.EACH,
getKey: null,
condition: null,
template: template('<span expr3="expr3"> </span><span expr4="expr4"> </span>', [{
redundantAttribute: 'expr3',
selector: '[expr3]',
expressions: [{
type: expressionTypes.TEXT,
childNodeIndex: 0,
evaluate: _scope => _scope.item.name
}, {
type: expressionTypes.EVENT,
name: 'onclick',
evaluate: _scope => () => _scope.filter(_scope.item.name)
}]
}, {
redundantAttribute: 'expr4',
selector: '[expr4]',
expressions: [{
type: expressionTypes.TEXT,
childNodeIndex: 0,
evaluate: _scope => _scope.item.count
}]
}]),
redundantAttribute: 'expr2',
selector: '[expr2]',
itemName: 'item',
indexName: null,
evaluate: _scope => _scope.state.items
}]),
name: 'search'
};
export { search as default };

View File

@ -17,7 +17,7 @@ class PAPI {
} }
static async fetchFiliere(filiere) { static async fetchFiliere(filiere) {
let request = await fetch(`${PAPI.searchURL}&rows=0&sort=tri&facet=lib_for_voe_ins&refine.fili=${filiere}`) let request = await fetch(`${PAPI.searchURL}&rows=0&sort=tri&facet=form_lib_voe_acc&refine.fili=${filiere}`)
let result = await request.json() let result = await request.json()
return result["facet_groups"][0]["facets"] return result["facet_groups"][0]["facets"]

View File

@ -1,89 +1,19 @@
let model = { const searchURL = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&timezone=Europe%2FBerlin`;
getFormations(search) { async function fetchFiliere0() {
return new Promise((resolve, reject) => { let request = await fetch(`${searchURL}&rows=0&sort=tri&facet=fili`);
let xhr = new XMLHttpRequest(); let result = await request.json();
xhr.open("GET", "/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin"); return result["facet_groups"][0]["facets"];
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);
});
}
} }
async function fetchFiliere1(filiere) {
function debounce(fn, wait) { let request = await fetch(`${searchURL}&rows=0&sort=tri&facet=form_lib_voe_acc&refine.fili=${filiere}`);
let timeout; let result = await request.json();
return (...args) => { return result["facet_groups"][0]["facets"];
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), wait);
};
} }
class View { async function fetchFiliere2(sousfiliere) {
constructor() { let request = await fetch(`${searchURL}&rows=0&sort=tri&facet=fil_lib_voe_acc&refine.form_lib_voe_acc=${sousfiliere}`);
this.listFormations = document.querySelector("#list-formations"); let result = await request.json();
this.inputSearch = document.querySelector("input"); return result["facet_groups"][0]["facets"];
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 = { var search = {
css: null, css: null,
exports: function search() { exports: function search() {
@ -91,28 +21,101 @@ var search = {
onBeforeMount(props, state) { onBeforeMount(props, state) {
// initial state // initial state
this.state = { this.state = {
formation: props.formation placeholder: "Formation",
items: null,
allitems: null,
fili: null
}; };
fetchFiliere0().then(response => {
this.update({
items: response,
allitems: response
});
});
}, },
search() { searchF(e) {
console.log("test1"); let responseFiltered = [];
const view = new View(); this.state.allitems.forEach(formation => {
new Controller(view, model); if (formation.name.toUpperCase().includes(e.target.value.toUpperCase())) {
responseFiltered.push(formation);
}
});
this.update({
items: responseFiltered
});
},
filter(fili) {
console.log("filter! " + fili);
if (this.state.placeholder === "Filière de formation") {
this.update({
placeholder: "Filière de formation détaillée",
fili: fili
});
fetchFiliere2(this.state.fili).then(response => {
this.update({
allitems: response,
items: response
});
});
console.log(this.state.items);
} else if (this.state.placeholder = "Formation") {
this.update({
placeholder: "Filière de formation",
fili: fili
});
fetchFiliere1(this.state.fili).then(response => {
this.update({
allitems: response,
items: response
});
console.log(this.state.items);
});
}
} }
}; };
}, },
template: (template, expressionTypes, bindingTypes, getComponent) => template('<label><input expr1="expr1" type="input"/><p class="error"></p><div id="list-formations"></div></label>', [{ template: (template, expressionTypes, bindingTypes, getComponent) => template('<label><input expr36="expr36" type="input"/><div id="list-formations"><ul><li expr37="expr37"></li></ul></div></label>', [{
redundantAttribute: 'expr1', redundantAttribute: 'expr36',
selector: '[expr1]', selector: '[expr36]',
expressions: [{ expressions: [{
type: expressionTypes.EVENT, type: expressionTypes.EVENT,
name: 'oninput', name: 'onkeydown',
evaluate: _scope => _scope.search evaluate: _scope => _scope.searchF
}, { }, {
type: expressionTypes.ATTRIBUTE, type: expressionTypes.ATTRIBUTE,
name: 'placeholder', name: 'placeholder',
evaluate: _scope => _scope.state.formation evaluate: _scope => _scope.state.placeholder
}] }]
}, {
type: bindingTypes.EACH,
getKey: null,
condition: null,
template: template('<span expr38="expr38"> </span><span expr39="expr39"> </span>', [{
redundantAttribute: 'expr38',
selector: '[expr38]',
expressions: [{
type: expressionTypes.TEXT,
childNodeIndex: 0,
evaluate: _scope => _scope.item.name
}, {
type: expressionTypes.EVENT,
name: 'onclick',
evaluate: _scope => () => _scope.filter(_scope.item.name)
}]
}, {
redundantAttribute: 'expr39',
selector: '[expr39]',
expressions: [{
type: expressionTypes.TEXT,
childNodeIndex: 0,
evaluate: _scope => _scope.item.count
}]
}]),
redundantAttribute: 'expr37',
selector: '[expr37]',
itemName: 'item',
indexName: null,
evaluate: _scope => _scope.state.items
}]), }]),
name: 'search' name: 'search'
}; };