Structuration

javascript/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
+

javascript/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

javascript/school-info.js

@@ -0,0 +1,10 @@
+var schoolInfo = {
+  css: null,
+  exports: {
+    onMounted() {}
+  },
+  template: (template, expressionTypes, bindingTypes, getComponent) => template('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css"/><div><div></div></div>', []),
+  name: 'school-info'
+};
+
+export { schoolInfo as default };

javascript/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