add initial project files including JSON data, PHP scripts, and HTML structure

scripts/Exercice_2_AJAX.js

@@ -0,0 +1,95 @@
+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));
+
+}