Esercizio - Pagina AJAX per creare e cancellare prenotazioni (applicazione web)

// api.js - il "model" del client: parla con l'API REST, non conosce la pagina HTML.
const BASE = "/api";                      // l'API sta sotto /api, alla radice del sito

export class ErroreApi extends Error {
  constructor(stato, messaggio) {
    super(messaggio);
    this.stato = stato;                   // codice di stato HTTP della risposta
  }
}

async function richiesta(metodo, percorso, corpo) {
  const opzioni = { method: metodo, headers: { Accept: "application/json" } };
  if (corpo !== undefined) {
    opzioni.headers["Content-Type"] = "application/json";
    opzioni.body = JSON.stringify(corpo);
  }
  const risposta = await fetch(`${BASE}${percorso}`, opzioni);   // rifiuta solo se la rete fallisce
  if (risposta.status === 204) {
    return null;                          // successo senza corpo (DELETE)
  }
  const dati = await risposta.json().catch(() => null);          // il corpo potrebbe non essere JSON
  if (!risposta.ok) {                     // 4xx e 5xx NON fanno rifiutare fetch: si controllano a mano
    throw new ErroreApi(risposta.status, dati?.errore ?? risposta.statusText);
  }
  return dati;
}

export const elencaAule = () => richiesta("GET", "/aule");

export function elencaPrenotazioni(aulaId, giorno) {
  const parametri = new URLSearchParams({ giorno });
  if (aulaId) {
    parametri.set("aula", aulaId);
  }
  return richiesta("GET", `/prenotazioni?${parametri}`);
}

export const creaPrenotazione = (prenotazione) => richiesta("POST", "/prenotazioni", prenotazione);

export const cancellaPrenotazione = (id) => richiesta("DELETE", `/prenotazioni/${id}`);

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Prenota un'aula</title>
  <style>
    .ok { color: #166534; }
    .errore { color: #b91c1c; }
    td, th { padding: .25rem .75rem; text-align: left; }
  </style>
</head>
<body>
  <h1>Prenotazione aule</h1>

  <form id="modulo">
    <label>Aula <select id="aula_id"></select></label>
    <label>Giorno <input type="date" id="giorno" required></label>
    <label>Dalle <input type="time" id="ora_inizio" required></label>
    <label>Alle <input type="time" id="ora_fine" required></label>
    <label>Studente <input type="text" id="studente" maxlength="40" required></label>
    <button>Prenota</button>
  </form>

  <p id="messaggio" role="status"></p>

  <table>
    <thead><tr><th>Dalle</th><th>Alle</th><th>Studente</th><th></th></tr></thead>
    <tbody id="righe"></tbody>
  </table>

  <script type="module" src="js/pagina.js"></script>
</body>
</html>

// pagina.js - la "view" e il "controller" del client: legge il form, chiama api.js, aggiorna la tabella.
import { ErroreApi, elencaAule, elencaPrenotazioni, creaPrenotazione, cancellaPrenotazione } from "./api.js";

const $ = (id) => document.getElementById(id);

function messaggio(testo, errore = false) {
  const p = $("messaggio");
  p.textContent = testo;                  // textContent: il testo non viene mai interpretato come HTML
  p.className = errore ? "errore" : "ok";
}

function riga(prenotazione) {
  const tr = document.createElement("tr");
  for (const testo of [prenotazione.ora_inizio, prenotazione.ora_fine, prenotazione.studente]) {
    const td = document.createElement("td");
    td.textContent = testo;
    tr.append(td);
  }
  const bottone = document.createElement("button");
  bottone.textContent = "Cancella";
  bottone.dataset.id = prenotazione.id;
  const tdAzione = document.createElement("td");
  tdAzione.append(bottone);
  tr.append(tdAzione);
  return tr;
}

async function aggiorna() {
  try {
    const lista = await elencaPrenotazioni($("aula_id").value, $("giorno").value);
    $("righe").replaceChildren(...lista.map(riga));
  } catch (e) {
    messaggio(`Impossibile leggere le prenotazioni: ${e.message}`, true);
  }
}

$("modulo").addEventListener("submit", async (evento) => {
  evento.preventDefault();                // niente invio classico del form: la pagina non si ricarica
  const prenotazione = {
    aula_id: Number($("aula_id").value),
    giorno: $("giorno").value,
    ora_inizio: $("ora_inizio").value,
    ora_fine: $("ora_fine").value,
    studente: $("studente").value,
  };
  const bottone = evento.submitter;       // il bottone "Prenota" che ha inviato il form
  bottone.disabled = true;                // un secondo clic durante la richiesta non invia una seconda POST
  try {
    await creaPrenotazione(prenotazione);
    messaggio("Prenotazione registrata.");
    await aggiorna();
  } catch (e) {
    const testo = e instanceof ErroreApi && e.stato === 409 ? "Orario già occupato." : e.message;
    messaggio(testo, true);
  } finally {
    bottone.disabled = false;             // in ogni caso, riuscita o no, il bottone torna attivo
  }
});

$("righe").addEventListener("click", async (evento) => {   // un solo ascoltatore per tutti i bottoni
  const id = evento.target.dataset.id;
  if (!id) {
    return;
  }
  try {
    await cancellaPrenotazione(id);
    messaggio("Prenotazione cancellata.");
    await aggiorna();
  } catch (e) {
    messaggio(e.message, true);
  }
});

$("aula_id").addEventListener("change", aggiorna);
$("giorno").addEventListener("change", aggiorna);

const aule = await elencaAule();          // await al livello superiore: consentito nei moduli
$("aula_id").replaceChildren(...aule.map((a) => new Option(`${a.nome} (${a.posti} posti)`, a.id)));
$("giorno").value = new Date().toISOString().slice(0, 10);
await aggiorna();

// giorno.js - la vista "tutte le aule di un giorno": due API, richieste in parallelo con Promise.all.
import { elencaAule, elencaPrenotazioni } from "./api.js";

export async function prenotazioniDelGiorno(giorno) {
  const aule = await elencaAule();                                                 // 1 richiesta
  const liste = await Promise.all(aule.map((a) => elencaPrenotazioni(a.id, giorno)));   // N richieste insieme
  return aule.map((aula, i) => ({ aula, prenotazioni: liste[i] }));
}

// una riga di testo per aula: "Aula A1 (80 posti): 09:00-11:00 Rossi, 14:00-16:00 Bianchi"
export function riepilogo(gruppi) {
  return gruppi.map(({ aula, prenotazioni }) => {
    const elenco = prenotazioni.length === 0
      ? "libera"
      : prenotazioni.map((p) => `${p.ora_inizio}-${p.ora_fine} ${p.studente}`).join(", ");
    return `${aula.nome} (${aula.posti} posti): ${elenco}`;
  });
}

Aula A1 (80 posti): 09:00-11:00 Rossi, 14:00-16:00 Bianchi
Aula B2 (45 posti): libera
Lab Info (30 posti): libera