Listino Scontistica test by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<strong>Definisce una parte del testo importante con formattazione in grassetto.
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
getDefinisce un metodo di invio di dati al server
<h4>Titolo di intestazione di quarto livello
headersDetermina la relazione tra celle e celle di intestazione di una tabella.

Users

Log in to search for users

Explore

Find inspiration

Color Assigment

La storia dell\\\\

Pagina di esempio

Esercio-selettori-di-relazione

Esercitazione n. 1

conta vocali nella stringa

DEMO: Hi-Lo Game

form per il torneo misto disfor s

esercizio HTML modalità interna

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Listino Scontistica</title>
  <style>
    :root {
      --bg: #f5f7fa;
      --white: #fff;
      --border: #e0e6ed;
      --accent: #007bff;
      --accent-dark: #0056b3;
      --text: #333;
      --text-light: #666;
      --highlight: #ffeb3b;
    }

    body {
      font-family: "Inter", Arial, sans-serif;
      margin: 0;
      background: var(--bg);
      color: var(--text);
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: var(--white);
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      padding: 10px 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 100;
    }

    h1 {
      margin: 0;
      flex: 1;
      font-size: 1.4rem;
      color: var(--accent-dark);
    }

    #searchBar {
      flex: 2;
      padding: 8px 12px;
      font-size: 1rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      outline: none;
    }

    #searchBar:focus {
      border-color: var(--accent);
      box-shadow: 0 0 6px rgba(0,123,255,0.3);
    }

    .btn {
      background: var(--accent);
      border: none;
      color: white;
      border-radius: 6px;
      padding: 8px 12px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: background 0.2s, opacity 0.2s;
    }

    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .btn:hover:not(:disabled) {
      background: var(--accent-dark);
    }

    table {
      width: 95%;
      margin: 100px auto 40px;
      border-collapse: collapse;
      background: var(--white);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    thead {
      background: var(--accent);
      color: white;
      text-align: left;
    }

    th, td {
      padding: 12px 10px;
      border-bottom: 1px solid var(--border);
    }

    th:first-child, td:first-child {
      width: 35px;
      text-align: center;
    }

    input[type="checkbox"] {
      transform: scale(1.1);
      cursor: pointer;
    }

    tbody tr:hover {
      background: #f1f8ff;
    }

    td[contenteditable="true"] {
      cursor: text;
    }

    td:last-child {
      width: 60%;
    }

    mark {
      background: var(--highlight);
      padding: 0 2px;
    }

    .no-results {
      text-align: center;
      color: var(--text-light);
      padding: 20px;
    }
  </style>
</head>
<body>

  <header>
    <h1>? Listino Scontistica</h1>
    <input type="text" id="searchBar" placeholder="? Cerca per produttore, sconto o descrizione...">
    <button class="btn" id="addBtn">➕ Aggiungi</button>
    <button class="btn" id="deleteBtn" disabled>?️ Elimina</button>
    <button class="btn" id="printBtn">?️ Stampa</button>
    <button class="btn" id="saveBtn">? Salva</button>
  </header>

  <table id="tabellaSconti">
    <thead>
      <tr>
        <th>✔</th>
        <th>Produttore</th>
        <th>Sconto (%)</th>
        <th>Prezzo Unitario (€)</th>
        <th>Descrizione</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    // Carica dati iniziali
    let dati = { scontistica: [] };

    async function caricaDati() {
      const res = await fetch('db.json');
      dati = await res.json();
      popolaTabella(dati.scontistica);
    }

    const tbody = document.querySelector("#tabellaSconti tbody");
    const searchBar = document.getElementById("searchBar");
    const deleteBtn = document.getElementById("deleteBtn");

    function evidenziaTesto(testo, parola) {
      if (!parola) return testo;
      const regex = new RegExp(`(${parola})`, "gi");
      return testo.replace(regex, `<mark>$1</mark>`);
    }

    function popolaTabella(lista, filtro = "") {
      tbody.innerHTML = "";

      if (lista.length === 0) {
        tbody.innerHTML = `<tr><td colspan="5" class="no-results">Nessun risultato trovato.</td></tr>`;
        return;
      }

      lista.forEach(item => {
        const row = document.createElement("tr");

        const selCell = document.createElement("td");
        const check = document.createElement("input");
        check.type = "checkbox";
        check.addEventListener("change", aggiornaStatoElimina);
        selCell.appendChild(check);
        row.appendChild(selCell);

        const campi = ["produttore", "sconto", "prezzo_unitario", "descrizione"];
        campi.forEach(campo => {
          const cell = document.createElement("td");
          cell.innerHTML = evidenziaTesto(item[campo] || "", filtro);
          cell.contentEditable = "true";
          row.appendChild(cell);
        });

        tbody.appendChild(row);
      });
    }

    function aggiornaStatoElimina() {
      const qualcheSelezionato = [...document.querySelectorAll("tbody input[type=checkbox]")]
        .some(c => c.checked);
      deleteBtn.disabled = !qualcheSelezionato;
    }

    searchBar.addEventListener("input", () => {
      const term = searchBar.value.toLowerCase();
      const filtrati = dati.scontistica.filter(item =>
        item.produttore.toLowerCase().includes(term) ||
        item.sconto.toLowerCase().includes(term) ||
        item.descrizione.toLowerCase().includes(term)
      );
      popolaTabella(filtrati, term);
    });

    document.getElementById("addBtn").addEventListener("click", () => {
      const nuovaRiga = {
        produttore: "Nuovo Produttore",
        sconto: "0",
        prezzo_unitario: "0",
        descrizione: "Nuova descrizione..."
      };
      dati.scontistica.push(nuovaRiga);
      popolaTabella(dati.scontistica);
    });

    document.getElementById("deleteBtn").addEventListener("click", () => {
      const righe = [...tbody.querySelectorAll("tr")];
      const nuove = [];
      righe.forEach(r => {
        const chk = r.querySelector("input[type=checkbox]");
        if (!chk?.checked) {
          const celle = r.querySelectorAll("td");
          nuove.push({
            produttore: celle[1].innerText.trim(),
            sconto: celle[2].innerText.trim(),
            prezzo_unitario: celle[3].innerText.trim(),
            descrizione: celle[4].innerText.trim()
          });
        }
      });
      dati.scontistica = nuove;
      popolaTabella(dati.scontistica);
      aggiornaStatoElimina();
    });

    document.getElementById("printBtn").addEventListener("click", () => window.print());

    document.getElementById("saveBtn").addEventListener("click", async () => {
      const righe = tbody.querySelectorAll("tr");
      const nuoviDati = [];

      righe.forEach(riga => {
        const celle = riga.querySelectorAll("td");
        if (celle.length >= 5 && !celle[1].classList.contains("no-results")) {
          nuoviDati.push({
            produttore: celle[1].innerText.trim(),
            sconto: celle[2].innerText.trim(),
            prezzo_unitario: celle[3].innerText.trim(),
            descrizione: celle[4].innerText.trim()
          });
        }
      });

      // Salva su server
      const res = await fetch('/salva', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ scontistica: nuoviDati })
      });

      if (res.ok) {
        alert("? Dati salvati e backup creato!");
      } else {
        alert("❌ Errore durante il salvataggio!");
      }
    });

    caricaDati();
  </script>

</body>
</html>