tp05ex01
This commit is contained in:
24
TP04/EX03/app.js
Normal file
24
TP04/EX03/app.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import {tableManager} from './modules/table';
|
||||
import loader from './modules/loader';
|
||||
let leagues = [];
|
||||
let url = "https://www.thesportsdb.com/api/v1/json/3/lookuptable.php?l=4334&s=2023-2024";
|
||||
|
||||
let leagueList = document.querySelector(".menu-list");
|
||||
let table = new tableManager(document.querySelector("table tbody"));
|
||||
let loaderDiv = new loader(document.getElementById("loader"));
|
||||
|
||||
async function getEquipeFoot(){
|
||||
try{
|
||||
return (await fetch(url)).json();
|
||||
}
|
||||
catch(error){
|
||||
console.error(error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let equipeFoot = await getEquipeFoot();
|
||||
console.log(equipeFoot);
|
||||
table.setData(equipeFoot);
|
||||
table.tableRender();
|
||||
25
TP04/EX03/css/style.css
Normal file
25
TP04/EX03/css/style.css
Normal file
@@ -0,0 +1,25 @@
|
||||
div.is-loading {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
overflow: show;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
div.is-loading:after {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid hsl(0deg, 0%, 86%);
|
||||
border-radius: 9999px;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
top: calc(50% - 5em);
|
||||
left: calc(50% - 5em);
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
border-width: 0.25em;
|
||||
}
|
||||
75
TP04/EX03/index.html
Normal file
75
TP04/EX03/index.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
|
||||
<title>French Soccer</title>
|
||||
</head>
|
||||
<body class="m-6">
|
||||
<main class="container">
|
||||
<div id="loader" ></div>
|
||||
<section class="columns">
|
||||
<aside class="menu column is-narrow">
|
||||
<div class="box">
|
||||
<p class="menu-label">Championnats de Football</p>
|
||||
<ul class="menu-list">
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="column is-offset-1">
|
||||
<h5 class="title is-5 has-text-primary-dark">
|
||||
<span id="nom"></span><span class="tag" id="date"></span>
|
||||
<div class="block control has-icons-left is-inline-block is-pulled-right">
|
||||
<input class="input" type="search" placeholder="Equipe" id="myInput">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
</div>
|
||||
</h5>
|
||||
|
||||
|
||||
<table class="table is-fullwidth is-hoverable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><abbr title="Position">Pos</abbr><a id="sort" href="#"><span class="icon"><i class="fas fa-sort"></i></span></a></th>
|
||||
<th></th>
|
||||
<th>Team</th>
|
||||
<th><abbr title="Played">Pld</abbr></th>
|
||||
<th><abbr title="Won">W</abbr></th>
|
||||
<th><abbr title="Drawn">D</abbr></th>
|
||||
<th><abbr title="Lost">L</abbr></th>
|
||||
<th><abbr title="Goals for">GF</abbr></th>
|
||||
<th><abbr title="Goals against">GA</abbr></th>
|
||||
<th><abbr title="Goal difference">GD</abbr></th>
|
||||
<th><abbr title="Points">Pts</abbr></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th><abbr title="Position">Pos</abbr></th>
|
||||
<th></th>
|
||||
<th>Team</th>
|
||||
<th><abbr title="Played">Pld</abbr></th>
|
||||
<th><abbr title="Won">W</abbr></th>
|
||||
<th><abbr title="Drawn">D</abbr></th>
|
||||
<th><abbr title="Lost">L</abbr></th>
|
||||
<th><abbr title="Goals for">GF</abbr></th>
|
||||
<th><abbr title="Goals against">GA</abbr></th>
|
||||
<th><abbr title="Goal difference">GD</abbr></th>
|
||||
<th><abbr title="Points">Pts</abbr></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<script type="module" src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
11
TP04/EX03/modules/helpers.js
Normal file
11
TP04/EX03/modules/helpers.js
Normal file
@@ -0,0 +1,11 @@
|
||||
function debounce(f,wait)
|
||||
{
|
||||
let timeout
|
||||
|
||||
return function(...args){
|
||||
clearTimeout(timeout)
|
||||
timeout=setTimeout(()=>f(...args),wait)
|
||||
}
|
||||
}
|
||||
|
||||
export default debounce
|
||||
15
TP04/EX03/modules/loader.js
Normal file
15
TP04/EX03/modules/loader.js
Normal file
@@ -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
|
||||
85
TP04/EX03/modules/table.js
Normal file
85
TP04/EX03/modules/table.js
Normal file
@@ -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 }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user