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

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

Referenze

<b>Formatta il testo in grassetto
<h2>Titolo di intestazione di secondo livello
relServe a definire la relazione tra il documento e una risorsa.
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<blockquote>Inserisce citazioni in un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

APEX Flux - Enhance your Atmospere

venezia esercizio pretest

QUESTA è LA HOMEPAGE V.1

Stuff and Things

Banner cercatutto

Primo esercizio in classe

prova elenco puntato

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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>