Exercices JavaScript corrigés type examen

const dateCourte = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'short', timeZone: 'UTC' });
const CLASSES = { 'terminée': 'ok', 'en cours': 'encours', 'en attente': 'attente' };

function ligneIntervention(i) {
  const tr = document.createElement('tr');
  tr.classList.add(CLASSES[i.statut] ?? 'inconnu');
  for (const texte of [dateCourte.format(new Date(i.date)), i.client, i.appareil, i.statut]) {
    const td = document.createElement('td');
    td.textContent = texte;
    tr.append(td);
  }
  return tr;
}

function afficherInterventions(tbody, interventions) {
  const triees = interventions.toSorted((a, b) => b.date.localeCompare(a.date));
  tbody.replaceChildren(...triees.map(ligneIntervention));
}

const TEL = /^0[1-9](\s?\d{2}){4}$/;
const MAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const SERIE = /^[A-Z0-9]{8,12}$/;

function validerPriseEnCharge(s) {
  const erreurs = {};
  if (s.nom.trim().length < 2) erreurs.nom = 'Nom obligatoire (2 caractères minimum).';
  const tel = s.telephone.trim();
  const mail = s.email.trim();
  if (tel === '' && mail === '') {
    erreurs.contact = 'Indique au moins un téléphone ou un e-mail.';
  }
  if (tel !== '' && !TEL.test(tel)) erreurs.telephone = 'Téléphone au format 06 12 34 56 78.';
  if (mail !== '' && !MAIL.test(mail)) erreurs.email = 'Adresse e-mail invalide.';
  if (!SERIE.test(s.serie.trim().toUpperCase())) {
    erreurs.serie = 'Numéro de série : 8 à 12 lettres ou chiffres.';
  }
  if (s.panne.trim().length < 10) erreurs.panne = 'Décris la panne en 10 caractères au moins.';
  return erreurs;
}

const zoneEtat = document.querySelector('#etat-chargement');
const liste = document.querySelector('#liste-interventions');

async function chargerInterventions(url) {
  zoneEtat.textContent = 'Chargement des interventions…';
  liste.replaceChildren();
  try {
    const reponse = await fetch(url, {
      headers: { Accept: 'application/json' },
      signal: AbortSignal.timeout(5000),
    });
    if (!reponse.ok) throw new Error(`le serveur a répondu ${reponse.status}`);
    const interventions = await reponse.json();
    if (interventions.length === 0) {
      zoneEtat.textContent = 'Aucune intervention en cours.';
      return;
    }
    liste.replaceChildren(...interventions.map((i) => {
      const li = document.createElement('li');
      li.textContent = `${i.client} : ${i.appareil}`;
      return li;
    }));
    zoneEtat.textContent = `${interventions.length} intervention(s) chargée(s).`;
  } catch (erreur) {
    zoneEtat.textContent = `Impossible de charger les interventions : ${erreur.message}.`;
  }
}

chargerInterventions('/api/interventions?statut=en-cours');

// 1.
interventions
  .filter((i) => i.statut === 'terminée')
  .reduce((total, i) => total + i.duree, 0);
// 330 (45 + 90 + 120 + 75)

// 2.
const parTechnicien = interventions.reduce((acc, i) => {
  acc[i.technicien] = (acc[i.technicien] ?? 0) + i.duree;
  return acc;
}, {});
// { Julie: 150, Karim: 160, Sofiane: 120 }

// 3.
const [plusCharge] = Object.entries(parTechnicien).toSorted((a, b) => b[1] - a[1]);
// ['Karim', 160]

// 4.
Math.round(interventions.reduce((total, i) => total + i.duree, 0) / interventions.length);
// 72 (430 / 6 = 71,67)

// 5.
interventions
  .filter((i) => i.statut !== 'terminée')
  .map((i) => i.client)
  .toSorted((a, b) => a.localeCompare(b, 'fr'));
// ['Garnier', 'Roux']

const CLE = 'reparinfo.favoris';

function lireFavoris() {
  try {
    const donnees = JSON.parse(localStorage.getItem(CLE));
    return new Set(Array.isArray(donnees) ? donnees : []);
  } catch {
    return new Set();
  }
}

function enregistrerFavoris(favoris) {
  try {
    localStorage.setItem(CLE, JSON.stringify([...favoris]));
  } catch {
    // Stockage indisponible : les favoris marchent pendant la visite, sans être retenus.
  }
}

const favoris = lireFavoris();
const catalogue = document.querySelector('#catalogue');

catalogue.addEventListener('click', (event) => {
  const b = event.target.closest('button[data-ref]');
  if (!b) return;
  const { ref } = b.dataset;
  if (favoris.has(ref)) favoris.delete(ref);
  else favoris.add(ref);
  enregistrerFavoris(favoris);
  b.setAttribute('aria-pressed', String(favoris.has(ref)));
});

let taches = [];
const listeTaches = document.querySelector('#taches');
const formTache = document.querySelector('#form-tache');

function bouton(texte, action, id) {
  const b = document.createElement('button');
  b.type = 'button';
  b.textContent = texte;
  b.dataset.action = action;
  b.dataset.id = id;
  return b;
}

function afficherTaches() {
  listeTaches.replaceChildren(...taches.map((t) => {
    const li = document.createElement('li');
    li.classList.toggle('terminee', t.terminee);
    const texte = document.createElement('span');
    texte.textContent = t.texte;
    li.append(
      texte, ' ',
      bouton(t.terminee ? 'Rouvrir' : 'Terminer', 'basculer', t.id), ' ',
      bouton('Supprimer', 'supprimer', t.id),
    );
    return li;
  }));
}

formTache.addEventListener('submit', (event) => {
  event.preventDefault();
  const texte = formTache.tache.value.trim();
  if (texte === '') return;
  taches = [...taches, { id: crypto.randomUUID(), texte, terminee: false }];
  formTache.reset();
  afficherTaches();
});

listeTaches.addEventListener('click', (event) => {
  const b = event.target.closest('button[data-action]');
  if (!b) return;
  const { action, id } = b.dataset;
  if (action === 'supprimer') {
    taches = taches.filter((t) => t.id !== id);
  } else {
    taches = taches.map((t) => (t.id === id ? { ...t, terminee: !t.terminee } : t));
  }
  afficherTaches();
});

li.terminee span { text-decoration: line-through; }

const euros = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' });

async function afficherCategorie(categorie) {
  const liste = document.querySelector('#liste');
  try {
    const reponse = await fetch('/api/pieces', { signal: AbortSignal.timeout(5000) });
    if (!reponse.ok) throw new Error(`Le serveur a répondu ${reponse.status}.`);
    const pieces = await reponse.json();
    const items = pieces
      .filter((p) => p.categorie === categorie)
      .toSorted((a, b) => a.prix - b.prix)
      .map((p) => {
        const li = document.createElement('li');
        li.textContent = `${p.nom} : ${euros.format(p.prix)}`;
        return li;
      });
    liste.replaceChildren(...items);
  } catch (erreur) {
    const li = document.createElement('li');
    li.textContent = `Impossible d'afficher les pièces : ${erreur.message}`;
    liste.replaceChildren(li);
  }
}

export function bonDeCommande(pieces) {
  const lignes = pieces
    .filter(estEnAlerte)
    .map((p) => {
      const aCommander = Math.max(1, p.seuil * 2 - p.quantite);
      return { ref: p.ref, nom: p.nom, aCommander, montant: aCommander * p.prix };
    });
  const total = lignes.reduce((t, l) => t + l.montant, 0);
  return { lignes, total };
}

// piecesDeDepart : le tableau des cinq pièces du chapitre 1, déclaré en haut du fichier de test.
test('commande les pièces en alerte au double du seuil', () => {
  const { lignes, total } = bonDeCommande(piecesDeDepart);
  expect(lignes.map((l) => [l.ref, l.aCommander])).toEqual([['RAM-16', 5], ['CHG-65', 4]]);
  expect(total).toBeCloseTo(288.5);
});

test('commande au moins une unité si le seuil vaut 0', () => {
  const { lignes } = bonDeCommande([{ ref: 'VEN-12', nom: 'Ventilateur', quantite: 0, seuil: 0, prix: 7.9 }]);
  expect(lignes[0].aCommander).toBe(1);
});

const euros = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' });
const zoneBon = document.querySelector('#bon-commande');

document.querySelector('#preparer-commande').addEventListener('click', () => {
  const { lignes, total } = bonDeCommande(etat.pieces);
  const titre = document.createElement('h2');
  titre.textContent = 'Bon de commande';
  if (lignes.length === 0) {
    const p = document.createElement('p');
    p.textContent = 'Aucune pièce à commander.';
    zoneBon.replaceChildren(titre, p);
    return;
  }
  const ul = document.createElement('ul');
  ul.append(...lignes.map((l) => {
    const li = document.createElement('li');
    li.textContent = `${l.ref} · ${l.nom} · ${l.aCommander} unité(s) · ${euros.format(l.montant)}`;
    return li;
  }));
  const pTotal = document.createElement('p');
  pTotal.textContent = `Total : ${euros.format(total)}`;
  zoneBon.replaceChildren(titre, ul, pTotal);
});

<label><input type="checkbox" name="prestation" value="diagnostic"> Diagnostic (29 €)</label>
<!-- … une case par prestation … -->

const PRESTATIONS = { diagnostic: 29, nettoyage: 19, ssd: 49, systeme: 59 };
const euros = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' });

function totalDevis(choix, tauxTva = 0.2) {
  const ht = choix.reduce((t, c) => t + PRESTATIONS[c], 0);
  const tva = Math.round(ht * tauxTva * 100) / 100;
  return { ht, tva, ttc: ht + tva };
}

const zonePrestations = document.querySelector('#prestations');
const zoneTotal = document.querySelector('#total-devis');

function majDevis() {
  const choix = [...zonePrestations.querySelectorAll('input:checked')].map((c) => c.value);
  const { ht, tva, ttc } = totalDevis(choix);
  zoneTotal.textContent = `Total : ${euros.format(ht)} HT, TVA ${euros.format(tva)}, ${euros.format(ttc)} TTC`;
}

zonePrestations.addEventListener('change', majDevis);
majDevis();