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

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

References

_selfApre collegamenti ipertestuali nella stessa pagina del browser
<hr>Inserisce una linea orizzontale
<abbr>Inserisce abbreviazioni e acronimi
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
<iframe>Crea un frame all'interno di una pagina HTML.
relServe a definire la relazione tra il documento e una risorsa.

Users

Log in to search for users

Explore

Find inspiration

La Vita di Pablo Picasso

5/10/24 es. 2 - conta Parole

la mia prima pagina html pt3

4395-Indovina numero mio

Heads Or Tails Random Tally

Appunti Informatica

Batch versamento settimanale

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>