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

comment on importe des modules dans le .riot ;-;

Browse Source
This commit is contained in:
Haïssous Kayyissa 2023-03-25 16:31:36 +01:00
parent e7654dc675
commit 1ef73b1a2f
5 changed files with 144 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
controllerSearch.js Normal file
View 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
View File

@ -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
View 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
View 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
View 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