Lettura dati da Google Sheet

Question

Pochi posts

Iscritto da: set, 2024

Messaggi:: 13

Lettura dati da Google Sheet

12 dic 2025, 12:56

Riesco ad aggiornare con successo la colonna presenze del Google Sheet composto da tre colonne (Data, Nome, Presenza)

ma vorrei che all'apertura (o alla selezione di una data differente) questo HTML potesse visualizzare i pulsanti in giallo sulla base del valore della stessa colonna

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Registro Presenze Classe</title>
<style>
body { font-family: Arial; padding: 20px; }
h1 { margin-bottom: 10px; }
table { border-collapse: collapse; width: 100%; margin-top: 20px; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
button { padding: 6px 12px; margin: 2px; cursor: pointer; }
.present { background-color: #c8f7c5; }
.absent { background-color: #f7c5c5; }
.selected { background-color: yellow !important; font-weight: bold; }
</style>
</head>
<body>

<h1>Registro Presenze Classe</h1>
<p>Seleziona una data e marca Presente / Assente per ogni allievo.</p>

<label for="dateSelect"><b>Data:</b></label>
<select id="dateSelect"></select>

<table>
  <thead>
    <tr>
      <th>Studente</th>
      <th>Presente</th>
      <th>Assente</th>
    </tr>
  </thead>
  <tbody id="studentTable"></tbody>
</table>

<script>
const WEBAPP_URL = "***********************exec"; // Inserisci l’URL della WebApp

const STUDENTS = [
  "Studente 1","Studente 2","Studente 3","Studente 4","Studente 5",
  "Studente 6","Studente 7","Studente 8","Studente 9","Studente 10"
];

const DATES = [
  "2025-01-10","2025-01-17","2025-01-24","2025-01-31",
  "2025-02-07","2025-02-14"
];

const dateSelect = document.getElementById("dateSelect");
DATES.forEach(d => {
  const opt = document.createElement("option");
  opt.value = d;
  opt.textContent = d;
  dateSelect.appendChild(opt);
});

function renderTable() {
  const tbody = document.getElementById("studentTable");
  tbody.innerHTML = "";

  STUDENTS.forEach(student => {
    const tr = document.createElement("tr");

    const tdName = document.createElement("td");
    tdName.textContent = student;

    const tdPres = document.createElement("td");
    const btnPres = document.createElement("button");
    btnPres.textContent = "Presente";
    btnPres.className = "present";
    btnPres.onclick = (e) => sendPresence(true, student, e.target);
    tdPres.appendChild(btnPres);

    const tdAbs = document.createElement("td");
    const btnAbs = document.createElement("button");
    btnAbs.textContent = "Assente";
    btnAbs.className = "absent";
    btnAbs.onclick = (e) => sendPresence(false, student, e.target);
    tdAbs.appendChild(btnAbs);

    tr.appendChild(tdName);
    tr.appendChild(tdPres);
    tr.appendChild(tdAbs);

    tbody.appendChild(tr);
  });
}

function sendPresence(isPresent, student, btn) {
  const date = dateSelect.value;
  const row = btn.parentElement.parentElement;
  row.querySelectorAll("button").forEach(b => b.classList.remove("selected"));
  btn.classList.add("selected");

  const payload = { date, student, present: isPresent };

  fetch(WEBAPP_URL, { method: "POST", mode: "no-cors", body: JSON.stringify(payload) });
}

async function loadPresences() {
  const date = dateSelect.value;

  try {
    const response = await fetch(`${WEBAPP_URL}?date=${date}`);
    const data = await response.json();

    data.forEach(record => {
      const row = Array.from(document.querySelectorAll("#studentTable tr"))
                       .find(r => r.cells[0].textContent === record.student);
      if (row) {
        const btnPres = row.querySelector("button.present");
        const btnAbs = row.querySelector("button.absent");
        btnPres.classList.remove("selected");
        btnAbs.classList.remove("selected");

        if (record.present === true) btnPres.classList.add("selected");
        else if (record.present === false) btnAbs.classList.add("selected");
      }
    });
  } catch (err) {
    console.error("Errore nel caricamento presenze:", err);
  }
}

function init() {
  renderTable();
  loadPresences();
}

window.onload = init;
dateSelect.addEventListener("change", init);
</script>

</body>
</html>

L'errore si verifica sia che tenti di aprire il file HTML in locale che da un server web e sembra un blocco di sicurezza di Chrome.

Come posso "leggere" il valore della colonna presenze e aggiornare il file HTML?

Lettura dati da Google Sheet

Lettura dati da Google Sheet

1 Risposte

Re: Lettura dati da Google Sheet