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

2023-03-25 16:31:36 +01:00 · 2023-03-25 16:31:36 +01:00 · 1ef73b1a2f
commit 1ef73b1a2f
parent e7654dc675
5 changed files with 144 additions and 1 deletions
--- a/controllerSearch.js
+++ b/controllerSearch.js
@ -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
+
--- a/index.html
+++ b/index.html
@ -5,10 +5,18 @@
 		<title>Parcoursup</title>
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<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>
 	</head>

 	<body>
+		<search></search>
+		<script>
+			riot.compile().then(() => {
+				riot.mount('search', {
+					formation:'Formation'
+				})
+			})
+		</script>
 	</body>
 </html>
--- a/modelSearch.js
+++ b/modelSearch.js
@ -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
--- a/search.riot
+++ b/search.riot
@ -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>
--- a/viewSearch.js
+++ b/viewSearch.js
@ -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