95 lines
3.4 KiB
JavaScript
95 lines
3.4 KiB
JavaScript
window.onload = function () {
|
|
let request = new XMLHttpRequest();
|
|
request.open('GET', 'abandons.php');
|
|
request.send();
|
|
request.onreadystatechange = function () {
|
|
if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
|
|
document.abandons = JSON.parse(request.responseText.trim());
|
|
|
|
request = new XMLHttpRequest();
|
|
request.open('GET', 'data.php');
|
|
request.send();
|
|
request.onreadystatechange = function () {
|
|
if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
|
|
afficherData(JSON.parse(request.responseText.trim()));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function afficherData(data) {
|
|
|
|
// on affiche les classes
|
|
const classes = data.classes;
|
|
const nomAfficheDiv = document.getElementById('nomDeClasse');
|
|
const logosDiv = document.getElementById('logos');
|
|
|
|
for (let i = 0; i < classes.length; i++) {
|
|
const bateau = classes[i];
|
|
const img = document.createElement('img');
|
|
img.className = 'logo';
|
|
img.src = 'images/logo_' + bateau.logo.toLocaleLowerCase();
|
|
img.alt = bateau.nom;
|
|
|
|
img.addEventListener('pointerover', function () {
|
|
nomAfficheDiv.innerHTML = bateau.nom;
|
|
|
|
var voiliers = data.voiliers;
|
|
const voiliersFiltres = voiliers.filter(voilier => voilier.classe === bateau.nom);
|
|
rafraichirTableau(voiliersFiltres);
|
|
})
|
|
logosDiv.appendChild(img);
|
|
}
|
|
|
|
// on affiche les voiliers suivant la classe hovered
|
|
rafraichirTableau(data.voiliers)
|
|
console.log(data.voiliers)
|
|
}
|
|
|
|
function rafraichirTableau(voiliers) {
|
|
const tbody = document.getElementById('liste');
|
|
tbody.innerHTML = '';
|
|
|
|
for (let i = 0; i < voiliers.length; i++) {
|
|
const voilier = voiliers[i];
|
|
const tr = document.createElement('tr');
|
|
|
|
const td_id = document.createElement('td');
|
|
td_id.innerText = i.toString();
|
|
tr.appendChild(td_id);
|
|
|
|
const td_nom = document.createElement('td');
|
|
td_nom.innerText = voilier.nom + " " + voilier.année
|
|
tr.appendChild(td_nom);
|
|
|
|
const td_skippers = document.createElement('td');
|
|
for (let skipperI = 0; skipperI < voilier.skipper.length; skipperI++) {
|
|
const skipper = voilier.skipper[skipperI];
|
|
td_skippers.innerText += skipper.nom + " et ";
|
|
}
|
|
td_skippers.innerText = td_skippers.innerText.slice(0, -3);
|
|
tr.appendChild(td_skippers);
|
|
|
|
const td_abandon = document.createElement('td');
|
|
const is_abandon = document.abandons.includes(voilier.nom)
|
|
console.log("est ce que " + document.abandons + " inclut " + voilier.nom + "? " + is_abandon)
|
|
td_abandon.innerHTML = "<input type='checkbox' " + (is_abandon ? "checked" : "")
|
|
+ " onchange='toggleabandon(\"" + voilier.nom + "\")'" +
|
|
">";
|
|
tr.appendChild(td_abandon);
|
|
|
|
tbody.appendChild(tr);
|
|
}
|
|
}
|
|
|
|
function toggleabandon(nomVoilier) {
|
|
document.abandons.includes(nomVoilier) ? document.abandons.splice(document.abandons.indexOf(nomVoilier), 1) : document.abandons.push(nomVoilier);
|
|
console.log(document.abandons);
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('POST', 'abandons.php');
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.send(JSON.stringify(document.abandons));
|
|
|
|
} |