API tools faq
paste
Advertisement
MizunoBrasil

Registro de Pagtos de Prestadores de Serviços

MizunoBrasil
Dec 8th, 2024 (edited)
178
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.50 KB | None | 0 0
raw download clone embed print report
  1. <!--Registro de Pagamentos de Prestadores de Serviços-->
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Registro de Pagamentos</title>
  9.     <style>
  10.         body {
  11.             font-family: Arial, sans-serif;
  12.             margin: 20px;
  13.         }
  14.         h1 {
  15.             color: #333;
  16.         }
  17.         form {
  18.             margin-bottom: 20px;
  19.         }
  20.         label {
  21.             margin-right: 10px;
  22.         }
  23.         table {
  24.             width: 100%;
  25.             border-collapse: collapse;
  26.             margin-top: 20px;
  27.         }
  28.         th, td {
  29.             border: 1px solid #ddd;
  30.             padding: 8px;
  31.             text-align: left;
  32.         }
  33.         th {
  34.             background-color: #f4f4f4;
  35.         }
  36.         #total {
  37.             margin-top: 20px;
  38.             font-weight: bold;
  39.         }
  40.         #clear, #print, #filter {
  41.             margin-top: 20px;
  42.             padding: 10px 15px;
  43.             border: none;
  44.             cursor: pointer;
  45.         }
  46.         #clear {
  47.             background-color: red;
  48.             color: white;
  49.         }
  50.         #print {
  51.             background-color: green;
  52.             color: white;
  53.         }
  54.         #filter {
  55.             background-color: blue;
  56.             color: white;
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <h1>Registro de Pagamentos</h1>
  62.     <form id="dataForm">
  63.         <label for="prestador">Prestador:</label>
  64.         <input type="text" id="prestador" placeholder="Nome do prestador" required>
  65.         <label for="data">Data:</label>
  66.         <input type="date" id="data" required>
  67.         <label for="valor">Valor (R$):</label>
  68.         <input type="number" id="valor" step="0.01" required>
  69.         <button type="submit">Adicionar</button>
  70.     </form>
  71.  
  72.     <label for="prestadorFilter">Filtrar por Prestador:</label>
  73.     <select id="prestadorFilter">
  74.         <option value="all">Todos</option>
  75.     </select>
  76.  
  77.     <table id="tabela">
  78.         <thead>
  79.             <tr>
  80.                 <th>Prestador</th>
  81.                 <th>Data</th>
  82.                 <th>Valor (R$)</th>
  83.             </tr>
  84.         </thead>
  85.         <tbody>
  86.         </tbody>
  87.     </table>
  88.  
  89.     <div id="total">Total: R$ 0.00</div>
  90.     <button id="print">Imprimir</button>
  91.     <button id="clear">Limpar Tudo</button>
  92.  
  93.     <script>
  94.         const form = document.getElementById('dataForm');
  95.         const tabela = document.getElementById('tabela').querySelector('tbody');
  96.         const totalDiv = document.getElementById('total');
  97.         const clearButton = document.getElementById('clear');
  98.         const printButton = document.getElementById('print');
  99.         const prestadorFilter = document.getElementById('prestadorFilter');
  100.  
  101.         let total = 0;
  102.         let dados = JSON.parse(localStorage.getItem('dados')) || [];
  103.         let filtroSelecionado = localStorage.getItem('filtroSelecionado') || 'all';
  104.  
  105.         // Atualiza a tabela com base no filtro
  106.         function atualizarTabela(filtro = 'all') {
  107.             tabela.innerHTML = ''; // Limpa a tabela
  108.             total = 0;
  109.  
  110.             // Filtra os dados se necessário
  111.             const dadosFiltrados = filtro === 'all'
  112.                 ? dados
  113.                 : dados.filter(item => item.prestador === filtro);
  114.  
  115.             dadosFiltrados.forEach((item) => {
  116.                 const row = tabela.insertRow();
  117.                 const prestadorCell = row.insertCell(0);
  118.                 const dataCell = row.insertCell(1);
  119.                 const valorCell = row.insertCell(2);
  120.  
  121.                 prestadorCell.textContent = item.prestador;
  122.                 dataCell.textContent = item.data.split('-').reverse().join('/');
  123.                 valorCell.textContent = `R$ ${item.valor.toFixed(2)}`;
  124.  
  125.                 total += item.valor;
  126.             });
  127.  
  128.             totalDiv.textContent = `Total: R$ ${total.toFixed(2)}`;
  129.         }
  130.  
  131.         // Atualiza o campo de filtro com prestadores únicos
  132.         function atualizarFiltro() {
  133.             const prestadores = [...new Set(dados.map(item => item.prestador))];
  134.             prestadorFilter.innerHTML = '<option value="all">Todos</option>';
  135.             prestadores.forEach(prestador => {
  136.                 const option = document.createElement('option');
  137.                 option.value = prestador;
  138.                 option.textContent = prestador;
  139.                 prestadorFilter.appendChild(option);
  140.             });
  141.  
  142.             // Restaura o filtro selecionado
  143.             prestadorFilter.value = filtroSelecionado;
  144.         }
  145.  
  146.         // Carregar dados ao abrir a página
  147.         atualizarTabela(filtroSelecionado);
  148.         atualizarFiltro();
  149.  
  150.         // Evento ao adicionar novos dados
  151.         form.addEventListener('submit', (e) => {
  152.             e.preventDefault();
  153.  
  154.             const prestador = document.getElementById('prestador').value.trim();
  155.             const data = document.getElementById('data').value; // Data no formato ISO (YYYY-MM-DD)
  156.             const valor = parseFloat(document.getElementById('valor').value);
  157.  
  158.             if (prestador && data && valor) {
  159.                // Adicionando o item à lista de dados
  160.                dados.push({ prestador, data, valor });
  161.  
  162.                 // Salvando no localStorage
  163.                 localStorage.setItem('dados', JSON.stringify(dados));
  164.  
  165.                 // Atualizando a tabela, o filtro e o total
  166.                 atualizarTabela();
  167.                 atualizarFiltro();
  168.  
  169.                 // Limpando o formulário
  170.                 form.reset();
  171.             }
  172.         });
  173.  
  174.         // Botão para limpar tudo
  175.         clearButton.addEventListener('click', () => {
  176.             if (confirm('Tem certeza que deseja limpar todos os dados?')) {
  177.                 dados = [];
  178.                 localStorage.removeItem('dados');
  179.                 localStorage.removeItem('filtroSelecionado');
  180.                 atualizarTabela();
  181.                 atualizarFiltro();
  182.             }
  183.         });
  184.  
  185.         // Botão para imprimir
  186.         printButton.addEventListener('click', () => {
  187.             window.print(); // Chama a função de impressão do navegador
  188.         });
  189.  
  190.         // Evento de filtro por prestador
  191.         prestadorFilter.addEventListener('change', (e) => {
  192.             filtroSelecionado = e.target.value;
  193.             localStorage.setItem('filtroSelecionado', filtroSelecionado); // Salva o filtro selecionado
  194.             atualizarTabela(filtroSelecionado);
  195.         });
  196.     </script>
  197. </body>
  198. </html>
  199.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!