tp05ex01

TP04/EX03/modules/helpers.js

@@ -0,0 +1,11 @@
+function debounce(f,wait)
+{
+	let timeout 
+
+	return function(...args){
+		clearTimeout(timeout)
+		timeout=setTimeout(()=>f(...args),wait)
+	}
+}
+
+export default debounce

TP04/EX03/modules/loader.js

@@ -0,0 +1,15 @@
+class loader {
+	div = null
+	constructor(node){
+		this.div = node
+	}
+	set(loading){
+		if (loading)
+			this.div.classList.add("is-loading")
+		else
+			this.div.classList.remove("is-loading")
+	}
+}
+
+
+export default loader

TP04/EX03/modules/table.js

@@ -0,0 +1,85 @@
+import debounce from './helpers'
+
+
+class tableManager {
+	tbody = null 
+	props = ["intRank","strTeamBadge","strTeam","intPlayed","intWin","intDraw",
+		"intLoss","intGoalsFor","intGoalsAgainst","intGoalDifference","intPoints"]
+	sort = -1 // -1 ou 1
+	teamSearch = ''  
+	data = []  // données à afficher
+	//
+	constructor(tbodyNode){
+		this.tbody = tbodyNode
+
+
+		document
+			.getElementById("myInput")
+			.addEventListener("input",debounce(e=>{
+			this.teamSearch = e.target.value.toUpperCase()
+			this.tableRender()
+			},500))
+
+		document
+			.getElementById("sort")
+			.addEventListener("click",((e) => {
+				this.sort *= -1
+				e.preventDefault()
+				this.tableRender()
+
+			}))
+
+	}
+	setData(data){
+		this.data = data
+	}
+	_setDate = (()=>{
+		if (this.data.length == 0 ) return
+		let date=new Date(this.data[0].dateUpdated)
+		document.getElementById("date").textContent = date.toLocaleDateString("fr")
+	})
+
+	setNom(nom){
+		document.getElementById("nom").textContent = nom	
+	}
+	_getRow = (v => {
+		let tr = document.createElement("tr")
+		for (let p of this.props){
+			let td = document.createElement("td")
+			if (p !== "strTeamBadge"){
+				td.textContent = v[p]
+			} else {
+				let figure = document.createElement("figure")
+				let img = document.createElement("img")
+				figure.classList.add("image","is-32x32")
+				img.src = v[p]
+				figure.appendChild(img)
+				td.appendChild(figure)
+			}
+			tr.appendChild(td)
+		}
+		return tr
+	})
+
+	tableRender(){
+		let dataFilter 
+		if (this.teamSearch) 
+			dataFilter = this.data.filter( item => item.strTeam.toUpperCase().includes(this.teamSearch))
+		else
+			dataFilter = [...this.data]
+
+		dataFilter.sort((eq1,eq2)=>this.sort*(eq2.intRank - eq1.intRank))
+		this._setDate()
+
+		let content = document.createDocumentFragment()
+		dataFilter.forEach(v =>{
+			content.appendChild(this._getRow(v))
+		})
+
+		this.tbody.replaceChildren(content)
+	}
+}
+
+export { tableManager }
+
+