test / index.html
Eris1298's picture
Add 3 files
2c9ab75 verified
Raw History Blame Contribute Delete
41.8 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diário Comunitário - Paróquia Nossa Senhora dos Remédios</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.tab-button.active {
background-color: #3b82f6;
color: white;
}
.presence-present {
background-color: #4ade80 !important;
}
.presence-absent {
background-color: #f87171 !important;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin-top: 2rem;
}
.logo-item {
display: flex;
flex-direction: column;
align-items: center;
}
.logo-caption {
margin-top: 0.5rem;
text-align: center;
font-size: 0.875rem;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<header class="text-center mb-8">
<h1 class="text-3xl font-bold text-blue-800">Diário Comunitário</h1>
<h2 class="text-xl text-blue-700">Paróquia Nossa Senhora dos Remédios</h2>
<h3 class="text-lg text-blue-600">Diocese de Petrolina</h3>
</header>
<div class="flex border-b border-gray-300 mb-6">
<button class="tab-button px-4 py-2 font-medium rounded-t-lg active" data-tab="turmas">
<i class="fas fa-users mr-2"></i>Registrar Turmas
</button>
<button class="tab-button px-4 py-2 font-medium rounded-t-lg" data-tab="encontros">
<i class="fas fa-calendar-alt mr-2"></i>Registro de Encontro
</button>
<button class="tab-button px-4 py-2 font-medium rounded-t-lg" data-tab="documentos">
<i class="fas fa-archive mr-2"></i>Repositório de Documentos
</button>
</div>
<!-- Turmas Section -->
<div id="turmas" class="tab-content active bg-white p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold mb-4 text-blue-800 border-b pb-2">
<i class="fas fa-users mr-2"></i>Registrar Nova Turma
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-gray-700 font-medium mb-2" for="responsavel-turma">Responsável</label>
<input type="text" id="responsavel-turma" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700 font-medium mb-2" for="tipo-catequese">Tipo de Catequese</label>
<select id="tipo-catequese" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">Selecione...</option>
<option value="Pre-Catequese">Pré-Catequese</option>
<option value="Eucaristia-I">Eucaristia I</option>
<option value="Eucaristia-II">Eucaristia II</option>
<option value="Perseveranca">Perseverança</option>
<option value="Crisma-Jovem">Crisma Jovem</option>
<option value="Crisma-Adulta">Crisma Adulta</option>
<option value="Adulto-I">Adulto I</option>
<option value="Adulto-II">Adulto II</option>
</select>
</div>
<div>
<label class="block text-gray-700 font-medium mb-2" for="ano-turma">Ano</label>
<input type="number" id="ano-turma" min="2000" max="2100" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-700 mb-3">Alunos</h3>
<div id="alunos-container" class="space-y-3">
<div class="flex items-center">
<input type="text" class="aluno-nome flex-grow px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Nome do aluno">
<button class="remove-aluno ml-2 p-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<button id="add-aluno" class="mt-3 px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200">
<i class="fas fa-plus mr-2"></i>Adicionar Aluno
</button>
</div>
<div class="flex justify-between mt-8">
<button id="limpar-turma" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
<i class="fas fa-broom mr-2"></i>Limpar Seleção
</button>
<button id="salvar-turma" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
<i class="fas fa-save mr-2"></i>Salvar Turma
</button>
</div>
<div class="logo-container">
<div class="logo-item">
<img src="brasao-paroquia.png" alt="Brasão da Paróquia" class="h-20">
<span class="logo-caption">Paróquia Nossa Senhora dos Remédios</span>
</div>
<div class="logo-item">
<img src="brasao-diocese.png" alt="Brasão da Diocese" class="h-20">
<span class="logo-caption">Diocese de Petrolina</span>
</div>
</div>
</div>
<!-- Encontros Section -->
<div id="encontros" class="tab-content bg-white p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold mb-4 text-blue-800 border-b pb-2">
<i class="fas fa-calendar-alt mr-2"></i>Registro de Encontro
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div>
<label class="block text-gray-700 font-medium mb-2" for="responsavel-encontro">Responsável</label>
<select id="responsavel-encontro" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">Selecione...</option>
</select>
</div>
<div>
<label class="block text-gray-700 font-medium mb-2" for="tipo-catequese-encontro">Tipo de Catequese</label>
<select id="tipo-catequese-encontro" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">Selecione...</option>
</select>
</div>
<div>
<label class="block text-gray-700 font-medium mb-2" for="ano-encontro">Ano</label>
<select id="ano-encontro" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">Selecione...</option>
</select>
</div>
</div>
<div id="alunos-turma-container" class="hidden mb-6">
<h3 class="text-lg font-medium text-gray-700 mb-3">Alunos da Turma</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border">
<thead>
<tr class="bg-gray-100">
<th class="py-2 px-4 border">#</th>
<th class="py-2 px-4 border">Nome</th>
<th class="py-2 px-4 border">Presente</th>
<th class="py-2 px-4 border">Justificativa</th>
<th class="py-2 px-4 border">Observação</th>
</tr>
</thead>
<tbody id="alunos-turma-body">
<!-- Alunos will be added here dynamically -->
</tbody>
</table>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-gray-700 font-medium mb-2" for="leitura-dia">Leitura do Dia</label>
<input type="text" id="leitura-dia" placeholder="Ex.: Gn 1, 1-23" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700 font-medium mb-2" for="tema-encontro">Tema do Encontro</label>
<input type="text" id="tema-encontro" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700 font-medium mb-2" for="auxiliares">Auxiliar(es)</label>
<input type="text" id="auxiliares" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700 font-medium mb-2" for="data-encontro">Data</label>
<input type="date" id="data-encontro" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2" for="resumo-encontro">Resumo do Encontro</label>
<textarea id="resumo-encontro" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
</div>
<div class="flex justify-between mt-8">
<button id="limpar-encontro" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
<i class="fas fa-broom mr-2"></i>Limpar Página
</button>
<button id="gerar-pdf" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
<i class="fas fa-file-pdf mr-2"></i>Gerar PDF
</button>
</div>
<div class="logo-container">
<div class="logo-item">
<img src="brasao-paroquia.png" alt="Brasão da Paróquia" class="h-20">
<span class="logo-caption">Paróquia Nossa Senhora dos Remédios</span>
</div>
<div class="logo-item">
<img src="brasao-diocese.png" alt="Brasão da Diocese" class="h-20">
<span class="logo-caption">Diocese de Petrolina</span>
</div>
</div>
</div>
<!-- Documentos Section -->
<div id="documentos" class="tab-content bg-white p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold mb-4 text-blue-800 border-b pb-2">
<i class="fas fa-archive mr-2"></i>Repositório de Documentos
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div>
<label class="block text-gray-700 font-medium mb-2" for="responsavel-documento">Responsável</label>
<select id="responsavel-documento" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">Selecione...</option>
</select>
</div>
<div>
<label class="block text-gray-700 font-medium mb-2" for="tipo-catequese-documento">Tipo de Catequese</label>
<select id="tipo-catequese-documento" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">Selecione...</option>
</select>
</div>
<div>
<label class="block text-gray-700 font-medium mb-2" for="ano-documento">Ano</label>
<select id="ano-documento" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">Selecione...</option>
</select>
</div>
</div>
<div id="documentos-container" class="hidden mb-6">
<h3 class="text-lg font-medium text-gray-700 mb-3">Documentos Disponíveis</h3>
<div class="space-y-3" id="lista-documentos">
<!-- Documents will be listed here -->
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-700 mb-3">Upload de Documentos</h3>
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
<input type="file" id="upload-documento" class="hidden" accept=".pdf,.xlsx,.xls">
<label for="upload-documento" class="cursor-pointer">
<i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-2"></i>
<p class="text-gray-600">Arraste e solte arquivos aqui ou clique para selecionar</p>
<p class="text-sm text-gray-500 mt-1">Formatos aceitos: PDF, Excel (.xlsx, .xls)</p>
</label>
</div>
</div>
<div class="logo-container">
<div class="logo-item">
<img src="brasao-paroquia.png" alt="Brasão da Paróquia" class="h-20">
<span class="logo-caption">Paróquia Nossa Senhora dos Remédios</span>
</div>
<div class="logo-item">
<img src="brasao-diocese.png" alt="Brasão da Diocese" class="h-20">
<span class="logo-caption">Diocese de Petrolina</span>
</div>
</div>
</div>
</div>
<script>
// Initialize the jsPDF library
const { jsPDF } = window.jspdf;
// Tab functionality
document.querySelectorAll('.tab-button').forEach(button => {
button.addEventListener('click', () => {
// Remove active class from all buttons and content
document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
// Add active class to clicked button and corresponding content
button.classList.add('active');
const tabId = button.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});
// Turmas Section Functionality
let alunosCount = 1;
document.getElementById('add-aluno').addEventListener('click', () => {
const container = document.getElementById('alunos-container');
const newAluno = document.createElement('div');
newAluno.className = 'flex items-center';
newAluno.innerHTML = `
<input type="text" class="aluno-nome flex-grow px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Nome do aluno">
<button class="remove-aluno ml-2 p-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
`;
container.appendChild(newAluno);
// Add event listener to the new remove button
newAluno.querySelector('.remove-aluno').addEventListener('click', () => {
container.removeChild(newAluno);
});
});
// Remove aluno when clicking on existing remove buttons
document.querySelectorAll('.remove-aluno').forEach(button => {
button.addEventListener('click', function() {
this.parentElement.remove();
});
});
// Limpar Turma button
document.getElementById('limpar-turma').addEventListener('click', () => {
document.getElementById('responsavel-turma').value = '';
document.getElementById('tipo-catequese').value = '';
document.getElementById('ano-turma').value = '';
const container = document.getElementById('alunos-container');
container.innerHTML = `
<div class="flex items-center">
<input type="text" class="aluno-nome flex-grow px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Nome do aluno">
<button class="remove-aluno ml-2 p-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
</div>
`;
// Re-add event listener
document.querySelector('.remove-aluno').addEventListener('click', function() {
this.parentElement.remove();
});
});
// Salvar Turma button
document.getElementById('salvar-turma').addEventListener('click', () => {
const responsavel = document.getElementById('responsavel-turma').value.trim();
const tipoCatequese = document.getElementById('tipo-catequese').value;
const ano = document.getElementById('ano-turma').value.trim();
const alunos = Array.from(document.querySelectorAll('.aluno-nome')).map(input => input.value.trim()).filter(name => name);
if (!responsavel || !tipoCatequese || !ano || alunos.length === 0) {
alert('Por favor, preencha todos os campos obrigatórios e adicione pelo menos um aluno.');
return;
}
// Save to localStorage
const turmas = JSON.parse(localStorage.getItem('turmas')) || [];
const novaTurma = {
id: Date.now(),
responsavel,
tipoCatequese,
ano,
alunos
};
turmas.push(novaTurma);
localStorage.setItem('turmas', JSON.stringify(turmas));
// Update dropdowns in other sections
updateDropdowns();
alert('Turma salva com sucesso!');
document.getElementById('limpar-turma').click();
});
// Encontros Section Functionality
function updateDropdowns() {
const turmas = JSON.parse(localStorage.getItem('turmas')) || [];
// Responsaveis
const responsaveis = [...new Set(turmas.map(t => t.responsavel))];
const responsavelEncontro = document.getElementById('responsavel-encontro');
const responsavelDocumento = document.getElementById('responsavel-documento');
responsavelEncontro.innerHTML = '<option value="">Selecione...</option>';
responsavelDocumento.innerHTML = '<option value="">Selecione...</option>';
responsaveis.forEach(r => {
responsavelEncontro.innerHTML += `<option value="${r}">${r}</option>`;
responsavelDocumento.innerHTML += `<option value="${r}">${r}</option>`;
});
// When responsavel changes in encontros
responsavelEncontro.addEventListener('change', function() {
const selectedResponsavel = this.value;
const tipos = [...new Set(turmas
.filter(t => t.responsavel === selectedResponsavel)
.map(t => t.tipoCatequese))];
const tipoSelect = document.getElementById('tipo-catequese-encontro');
tipoSelect.innerHTML = '<option value="">Selecione...</option>';
tipos.forEach(t => {
tipoSelect.innerHTML += `<option value="${t}">${getTipoCatequeseName(t)}</option>`;
});
});
// When tipo changes in encontros
document.getElementById('tipo-catequese-encontro').addEventListener('change', function() {
const selectedResponsavel = document.getElementById('responsavel-encontro').value;
const selectedTipo = this.value;
const anos = [...new Set(turmas
.filter(t => t.responsavel === selectedResponsavel && t.tipoCatequese === selectedTipo)
.map(t => t.ano))];
const anoSelect = document.getElementById('ano-encontro');
anoSelect.innerHTML = '<option value="">Selecione...</option>';
anos.forEach(a => {
anoSelect.innerHTML += `<option value="${a}">${a}</option>`;
});
});
// When ano is selected in encontros
document.getElementById('ano-encontro').addEventListener('change', function() {
const selectedResponsavel = document.getElementById('responsavel-encontro').value;
const selectedTipo = document.getElementById('tipo-catequese-encontro').value;
const selectedAno = this.value;
const turma = turmas.find(t =>
t.responsavel === selectedResponsavel &&
t.tipoCatequese === selectedTipo &&
t.ano === selectedAno
);
if (turma) {
document.getElementById('alunos-turma-container').classList.remove('hidden');
const tbody = document.getElementById('alunos-turma-body');
tbody.innerHTML = '';
turma.alunos.forEach((aluno, index) => {
const row = document.createElement('tr');
row.className = 'hover:bg-gray-50';
row.innerHTML = `
<td class="py-2 px-4 border">${index + 1}</td>
<td class="py-2 px-4 border">${aluno}</td>
<td class="py-2 px-4 border text-center">
<select class="presenca-select px-2 py-1 border rounded">
<option value="presente">Presente</option>
<option value="ausente">Ausente</option>
</select>
</td>
<td class="py-2 px-4 border">
<input type="text" class="justificativa w-full px-2 py-1 border rounded" placeholder="Justificativa">
</td>
<td class="py-2 px-4 border">
<input type="text" class="observacao w-full px-2 py-1 border rounded" placeholder="Observação">
</td>
`;
tbody.appendChild(row);
// Add event listener to presence select
row.querySelector('.presenca-select').addEventListener('change', function() {
const row = this.closest('tr');
if (this.value === 'presente') {
row.querySelector('td:nth-child(3)').classList.add('presence-present');
row.querySelector('td:nth-child(3)').classList.remove('presence-absent');
} else {
row.querySelector('td:nth-child(3)').classList.add('presence-absent');
row.querySelector('td:nth-child(3)').classList.remove('presence-present');
}
});
});
}
});
// Similar functionality for documentos section
const responsavelDoc = document.getElementById('responsavel-documento');
const tipoDoc = document.getElementById('tipo-catequese-documento');
const anoDoc = document.getElementById('ano-documento');
responsavelDoc.addEventListener('change', function() {
const selectedResponsavel = this.value;
const tipos = [...new Set(turmas
.filter(t => t.responsavel === selectedResponsavel)
.map(t => t.tipoCatequese))];
tipoDoc.innerHTML = '<option value="">Selecione...</option>';
tipos.forEach(t => {
tipoDoc.innerHTML += `<option value="${t}">${getTipoCatequeseName(t)}</option>`;
});
});
tipoDoc.addEventListener('change', function() {
const selectedResponsavel = responsavelDoc.value;
const selectedTipo = this.value;
const anos = [...new Set(turmas
.filter(t => t.responsavel === selectedResponsavel && t.tipoCatequese === selectedTipo)
.map(t => t.ano))];
anoDoc.innerHTML = '<option value="">Selecione...</option>';
anos.forEach(a => {
anoDoc.innerHTML += `<option value="${a}">${a}</option>`;
});
});
anoDoc.addEventListener('change', function() {
const selectedResponsavel = responsavelDoc.value;
const selectedTipo = tipoDoc.value;
const selectedAno = this.value;
if (selectedResponsavel && selectedTipo && selectedAno) {
loadDocuments(selectedResponsavel, selectedTipo, selectedAno);
}
});
}
function getTipoCatequeseName(value) {
const tipos = {
'Pre-Catequese': 'Pré-Catequese',
'Eucaristia-I': 'Eucaristia I',
'Eucaristia-II': 'Eucaristia II',
'Perseveranca': 'Perseverança',
'Crisma-Jovem': 'Crisma Jovem',
'Crisma-Adulta': 'Crisma Adulta',
'Adulto-I': 'Adulto I',
'Adulto-II': 'Adulto II'
};
return tipos[value] || value;
}
// Limpar Encontro button
document.getElementById('limpar-encontro').addEventListener('click', () => {
document.getElementById('responsavel-encontro').value = '';
document.getElementById('tipo-catequese-encontro').value = '';
document.getElementById('ano-encontro').value = '';
document.getElementById('leitura-dia').value = '';
document.getElementById('tema-encontro').value = '';
document.getElementById('auxiliares').value = '';
document.getElementById('data-encontro').value = '';
document.getElementById('resumo-encontro').value = '';
document.getElementById('alunos-turma-container').classList.add('hidden');
});
// Gerar PDF button
document.getElementById('gerar-pdf').addEventListener('click', async () => {
const responsavel = document.getElementById('responsavel-encontro').value;
const tipoCatequese = document.getElementById('tipo-catequese-encontro').value;
const ano = document.getElementById('ano-encontro').value;
const leitura = document.getElementById('leitura-dia').value;
const tema = document.getElementById('tema-encontro').value;
const auxiliares = document.getElementById('auxiliares').value;
const data = document.getElementById('data-encontro').value;
const resumo = document.getElementById('resumo-encontro').value;
if (!responsavel || !tipoCatequese || !ano || !leitura || !tema || !data) {
alert('Por favor, preencha todos os campos obrigatórios antes de gerar o PDF.');
return;
}
// Create a temporary div to hold the PDF content
const pdfContent = document.createElement('div');
pdfContent.className = 'p-6 bg-white';
// Format date
const dataObj = new Date(data);
const dataFormatada = dataObj.toLocaleDateString('pt-BR');
// Get alunos data
const alunosRows = document.querySelectorAll('#alunos-turma-body tr');
const alunosData = Array.from(alunosRows).map(row => {
return {
numero: row.cells[0].textContent,
nome: row.cells[1].textContent,
presenca: row.cells[2].querySelector('select').value,
justificativa: row.cells[3].querySelector('input').value,
observacao: row.cells[4].querySelector('input').value
};
});
// Build HTML for PDF
pdfContent.innerHTML = `
<h1 class="text-2xl font-bold text-center mb-4">Registro de Encontro - Paróquia Nossa Senhora dos Remédios</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div>
<p class="font-semibold">Responsável:</p>
<p>${responsavel}</p>
</div>
<div>
<p class="font-semibold">Tipo de Catequese:</p>
<p>${getTipoCatequeseName(tipoCatequese)}</p>
</div>
<div>
<p class="font-semibold">Ano:</p>
<p>${ano}</p>
</div>
<div>
<p class="font-semibold">Data:</p>
<p>${dataFormatada}</p>
</div>
</div>
<div class="mb-6">
<p class="font-semibold">Leitura do Dia:</p>
<p>${leitura}</p>
</div>
<div class="mb-6">
<p class="font-semibold">Tema do Encontro:</p>
<p>${tema}</p>
</div>
<div class="mb-6">
<p class="font-semibold">Auxiliar(es):</p>
<p>${auxiliares || 'Nenhum'}</p>
</div>
<div class="mb-6">
<p class="font-semibold">Resumo do Encontro:</p>
<p>${resumo || 'Nenhum resumo fornecido.'}</p>
</div>
<h2 class="text-xl font-semibold mb-3">Frequência dos Alunos</h2>
<table class="min-w-full border mb-6">
<thead>
<tr class="bg-gray-100">
<th class="py-2 px-4 border">#</th>
<th class="py-2 px-4 border">Nome</th>
<th class="py-2 px-4 border">Presença</th>
<th class="py-2 px-4 border">Justificativa</th>
<th class="py-2 px-4 border">Observação</th>
</tr>
</thead>
<tbody>
${alunosData.map(aluno => `
<tr>
<td class="py-2 px-4 border">${aluno.numero}</td>
<td class="py-2 px-4 border">${aluno.nome}</td>
<td class="py-2 px-4 border ${aluno.presenca === 'presente' ? 'bg-green-200' : 'bg-red-200'}">
${aluno.presenca === 'presente' ? 'Presente' : 'Ausente'}
</td>
<td class="py-2 px-4 border">${aluno.justificativa || '-'}</td>
<td class="py-2 px-4 border">${aluno.observacao || '-'}</td>
</tr>
`).join('')}
</tbody>
</table>
<div class="text-center text-sm text-gray-500 mt-8">
<p>Documento gerado em: ${new Date().toLocaleString('pt-BR')}</p>
</div>
<div style="display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 2rem;">
<div style="display: flex; flex-direction: column; align-items: center;">
<img src="brasao-paroquia.png" alt="Brasão da Paróquia" style="height: 80px;">
<span style="margin-top: 0.5rem; text-align: center; font-size: 0.875rem;">Paróquia Nossa Senhora dos Remédios</span>
</div>
<div style="display: flex; flex-direction: column; align-items: center;">
<img src="brasao-diocese.png" alt="Brasão da Diocese" style="height: 80px;">
<span style="margin-top: 0.5rem; text-align: center; font-size: 0.875rem;">Diocese de Petrolina</span>
</div>
</div>
`;
// Append to body temporarily
document.body.appendChild(pdfContent);
try {
// Generate PDF
const pdf = new jsPDF('p', 'pt', 'a4');
await html2canvas(pdfContent, {
scale: 2,
logging: false,
useCORS: true
}).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const imgWidth = pdf.internal.pageSize.getWidth();
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
// Save the PDF
const fileName = `Encontro_${responsavel}_${tipoCatequese}_${dataFormatada.replace(/\//g, '-')}.pdf`;
pdf.save(fileName);
// Save to documentos repository
saveToDocumentos(responsavel, tipoCatequese, ano, fileName, imgData);
});
} catch (error) {
console.error('Error generating PDF:', error);
alert('Ocorreu um erro ao gerar o PDF. Por favor, tente novamente.');
} finally {
// Remove temporary element
document.body.removeChild(pdfContent);
}
});
function saveToDocumentos(responsavel, tipoCatequese, ano, fileName, pdfData) {
const documentos = JSON.parse(localStorage.getItem('documentos')) || [];
const novoDocumento = {
id: Date.now(),
responsavel,
tipoCatequese,
ano,
fileName,
pdfData,
dateCreated: new Date().toISOString()
};
documentos.push(novoDocumento);
localStorage.setItem('documentos', JSON.stringify(documentos));
// Update documentos list if on documentos tab
if (document.getElementById('documentos').classList.contains('active')) {
const responsavelDoc = document.getElementById('responsavel-documento').value;
const tipoDoc = document.getElementById('tipo-catequese-documento').value;
const anoDoc = document.getElementById('ano-documento').value;
if (responsavelDoc === responsavel && tipoDoc === tipoCatequese && anoDoc === ano) {
loadDocuments(responsavel, tipoCatequese, ano);
}
}
}
// Documentos Section Functionality
function loadDocuments(responsavel, tipoCatequese, ano) {
const documentos = JSON.parse(localStorage.getItem('documentos')) || [];
const filteredDocs = documentos.filter(doc =>
doc.responsavel === responsavel &&
doc.tipoCatequese === tipoCatequese &&
doc.ano === ano
);
const listaDocumentos = document.getElementById('lista-documentos');
listaDocumentos.innerHTML = '';
if (filteredDocs.length === 0) {
listaDocumentos.innerHTML = '<p class="text-gray-500">Nenhum documento encontrado para esta turma.</p>';
} else {
filteredDocs.forEach(doc => {
const docElement = document.createElement('div');
docElement.className = 'flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50';
docElement.innerHTML = `
<div>
<i class="fas fa-file-pdf text-red-500 mr-2"></i>
<span>${doc.fileName}</span>
<span class="text-sm text-gray-500 ml-2">(${new Date(doc.dateCreated).toLocaleString('pt-BR')})</span>
</div>
<div>
<button class="view-document p-2 text-blue-500 hover:text-blue-700" data-id="${doc.id}">
<i class="fas fa-eye"></i>
</button>
<button class="download-document p-2 text-green-500 hover:text-green-700" data-id="${doc.id}">
<i class="fas fa-download"></i>
</button>
</div>
`;
listaDocumentos.appendChild(docElement);
// Add event listeners
docElement.querySelector('.view-document').addEventListener('click', () => viewDocument(doc.id));
docElement.querySelector('.download-document').addEventListener('click', () => downloadDocument(doc.id));
});
}
document.getElementById('documentos-container').classList.remove('hidden');
}
function viewDocument(id) {
const documentos = JSON.parse(localStorage.getItem('documentos')) || [];
const doc = documentos.find(d => d.id == id);
if (doc) {
// Open PDF in new tab
const pdfWindow = window.open('', '_blank');
pdfWindow.document.write(`
<html>
<head>
<title>${doc.fileName}</title>
<style>
body { margin: 0; padding: 0; }
iframe { width: 100%; height: 100vh; border: none; }
</style>
</head>
<body>
<iframe src="${doc.pdfData}"></iframe>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Eris1298/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>