comment on importe des modules dans le .riot ;-;
This commit is contained in:
parent
e7654dc675
commit
1ef73b1a2f
31
controllerSearch.js
Normal file
31
controllerSearch.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
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)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Controller
|
||||||
|
|
10
index.html
10
index.html
@ -5,10 +5,18 @@
|
|||||||
<title>Parcoursup</title>
|
<title>Parcoursup</title>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<link rel="stylesheet" href="parcoursup.css">
|
<link rel="stylesheet" href="parcoursup.css">
|
||||||
<script src="parcoursup.riot" type="riot"></script>
|
<script src="search.riot" type="riot"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/7.1.0/riot+compiler.min.js" integrity="sha512-sSGKGR9MvL0bUx3CScaBb56crXwspwDkL/JnB0IrLFQfw3uvSUlITQtsTtDZctshhv5wdwIt+qZeN8zThRF4Dw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/7.1.0/riot+compiler.min.js" integrity="sha512-sSGKGR9MvL0bUx3CScaBb56crXwspwDkL/JnB0IrLFQfw3uvSUlITQtsTtDZctshhv5wdwIt+qZeN8zThRF4Dw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<search></search>
|
||||||
|
<script>
|
||||||
|
riot.compile().then(() => {
|
||||||
|
riot.mount('search', {
|
||||||
|
formation:'Formation'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
21
modelSearch.js
Normal file
21
modelSearch.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
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()
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default model
|
32
search.riot
Normal file
32
search.riot
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<search>
|
||||||
|
<label>
|
||||||
|
<input oninput={search} type="input" placeholder= {state.formation}>
|
||||||
|
<p class="error"></p>
|
||||||
|
<div id="list-formations">
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import model from './modelSearch.js';
|
||||||
|
import Controller from './controllerSearch.js';
|
||||||
|
import View from './viewSearch.js';
|
||||||
|
export default function search(){
|
||||||
|
return {
|
||||||
|
onBeforeMount(props, state) {
|
||||||
|
// initial state
|
||||||
|
this.state = {
|
||||||
|
formation: props.formation
|
||||||
|
}
|
||||||
|
},
|
||||||
|
search(){
|
||||||
|
|
||||||
|
console.log("test1")
|
||||||
|
const view = new View()
|
||||||
|
const app = new Controller(view,model)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</search>
|
51
viewSearch.js
Normal file
51
viewSearch.js
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
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))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default View
|
Loading…
Reference in New Issue
Block a user