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

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

References

forSpecifica a quale id è associato l'elemento in cui è dichiarato.
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<abbr>Inserisce abbreviazioni e acronimi
<i>Formatta il testo in corsivo/italico non enfatizzato
animationDefinisce i parametri dell'animazione di un elemento o selettore

Users

Log in to search for users

Explore

Find inspiration

Modal Animations

progetti scolastici

formattazione_testo.html.

Heads Or Tails Random Tally

Aurion Agency | Digital Alchemy

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>