Skip to content

Commit 0d5da73

Browse files
robindanilo2218robindanilo2218
committed
correccion de sessiones e historial de lectura
1 parent c40f72f commit 0d5da73

2 files changed

Lines changed: 221 additions & 56 deletions

File tree

‎js/sidebar.js‎

Lines changed: 71 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,39 @@
115115
document.querySelectorAll('.sidebar-tabs button').forEach(b => b.classList.remove('active'));
116116
const tb = document.getElementById('tab-' + t);
117117
if (tb) tb.classList.add('active');
118-
119-
if (t === 'books') renderSidebarBooks();
118+
if (t === 'books') {
119+
document.getElementById('tab-books').classList.add('active');
120+
renderSidebarBooks();
121+
122+
let readArr = JSON.parse(localStorage.getItem('biblia_read_verses') || '[]');
123+
let totalVerses = currentData.filter(x => x.type === 'verse').length;
124+
let percent = totalVerses > 0 ? (readArr.length / totalVerses * 100).toFixed(2) : 0;
125+
126+
let progressDiv = document.createElement('div');
127+
progressDiv.innerHTML = `
128+
<div style="padding:10px; background:#f4f9f9; border-bottom:1px solid #ddd; margin-bottom:10px; border-radius:5px;">
129+
<div style="display:flex; justify-content:space-between; font-size:0.8rem; font-weight:bold; color:var(--primary); margin-bottom:5px;">
130+
<span>Progreso de Lectura</span>
131+
<span>${percent}%</span>
132+
</div>
133+
<div style="width:100%; background:#e0e0e0; height:8px; border-radius:4px; overflow:hidden;">
134+
<div style="width:${percent}%; background:var(--secondary); height:100%;"></div>
135+
</div>
136+
<div style="font-size:0.75rem; color:#666; margin-top:5px; text-align:right;">${readArr.length} / ${totalVerses} versículos leídos</div>
137+
<button id="btn-show-history" style="width:100%; margin-top:8px; padding:6px; background:var(--primary); color:white; border:none; border-radius:4px; font-size:0.8rem; cursor:pointer;">Ver Historial de Lectura</button>
138+
</div>
139+
`;
140+
if(sidebarContent.firstChild) {
141+
sidebarContent.insertBefore(progressDiv, sidebarContent.firstChild);
142+
} else {
143+
sidebarContent.appendChild(progressDiv);
144+
}
145+
146+
let historyBtn = document.getElementById('btn-show-history');
147+
if(historyBtn && window.viewReadingHistory) {
148+
historyBtn.onclick = window.viewReadingHistory;
149+
}
150+
}
120151
else if (t === 'persp') {
121152
if (sidebarContent) {
122153
sidebarContent.innerHTML = `
@@ -287,21 +318,46 @@
287318
let sShow = isEdit ? existingSession.showStudy : true;
288319

289320
mainView.innerHTML = `
290-
<div class="verse-card" style="padding:20px; box-shadow:0 4px 15px rgba(0,0,0,0.1);">
291-
<h2>${isEdit ? '✏️ Editar Sesión' : '📅 Nueva Sesión / Agenda'}</h2>
292-
<label style="font-weight:bold;">Fecha:</label>
293-
<input type="date" id="ses-date" value="${sDate}" style="width:100%; padding:10px; margin-bottom:15px; border-radius:5px; border:1px solid #ccc;">
294-
<label style="font-weight:bold;">Título de la Sesión:</label>
295-
<input type="text" id="ses-title" value="${sTitle}" placeholder="Ej: Servicio de Domingo" style="width:100%; padding:10px; margin-bottom:15px; border-radius:5px; border:1px solid #ccc;">
296-
<label style="font-weight:bold;">Versículos a incluir (uno por línea):</label>
297-
<p style="font-size:0.85rem; color:#666; margin-bottom:5px;">Ejemplo: <b>Salmos 109:3-9</b> o <b>Juan 3:16</b></p>
298-
<textarea id="ses-refs" rows="7" style="width:100%; padding:10px; margin-bottom:15px; border-radius:5px; border:1px solid #ccc; font-family:monospace;">${sRefs}</textarea>
299-
<label style="display:flex; align-items:center; gap:10px; margin-bottom:20px; font-weight:bold; cursor:pointer;">
300-
<input type="checkbox" id="ses-show-study" ${sShow ? 'checked' : ''} style="transform:scale(1.5);"> Mostrar Notas de Estudio durante la sesión
301-
</label>
302-
<button id="btn-save-session" style="width:100%; padding:12px; background:var(--primary); color:white; border:none; border-radius:8px; cursor:pointer; font-size:1.1rem; font-weight:bold;">💾 Guardar Sesión</button>
321+
<div class="verse-card" style="padding:15px; max-width:650px; margin:0 auto; box-shadow:0 4px 15px rgba(0,0,0,0.1); border-top:4px solid var(--primary);">
322+
<h2 style="font-size:1.3rem; margin-bottom:15px;">${isEdit ? '✏️ Editar Sesión' : '📅 Nueva Sesión / Agenda'}</h2>
323+
324+
<div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px;">
325+
<div style="flex:1; min-width:140px;">
326+
<label style="font-weight:bold; font-size:0.85rem; color:#555; display:block; margin-bottom:3px;">Fecha: <span id="ses-day-name" style="color:var(--secondary); font-weight:normal;"></span></label>
327+
<input type="date" id="ses-date" value="${sDate}" style="width:100%; padding:8px; border-radius:5px; border:1px solid #ccc; font-size:0.9rem;">
328+
</div>
329+
<div style="flex:2; min-width:200px;">
330+
<label style="font-weight:bold; font-size:0.85rem; color:#555; display:block; margin-bottom:3px;">Título / Ocasión:</label>
331+
<input type="text" id="ses-title" value="${sTitle}" placeholder="Ej: Servicio de Domingo" style="width:100%; padding:8px; border-radius:5px; border:1px solid #ccc; font-size:0.9rem;">
332+
</div>
333+
</div>
334+
335+
<label style="font-weight:bold; font-size:0.85rem; color:#555; display:block; margin-bottom:3px;">Versículos a incluir:</label>
336+
<p style="font-size:0.75rem; color:#888; margin-bottom:5px; line-height:1.2;">Ejemplo: <b>Salmos 109:3-9</b> o <b>Juan 3:16</b> (uno por línea)</p>
337+
<textarea id="ses-refs" rows="6" style="width:100%; padding:8px; margin-bottom:10px; border-radius:5px; border:1px solid #ccc; font-family:monospace; font-size:0.85rem; resize:vertical;">${sRefs}</textarea>
338+
339+
<div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;">
340+
<label style="display:flex; align-items:center; gap:8px; font-weight:bold; font-size:0.85rem; cursor:pointer;">
341+
<input type="checkbox" id="ses-show-study" ${sShow ? 'checked' : ''} style="transform:scale(1.2);"> Mostrar Notas de Estudio
342+
</label>
343+
<button id="btn-save-session" style="padding:10px 20px; background:var(--primary); color:white; border:none; border-radius:6px; cursor:pointer; font-size:1rem; font-weight:bold;">💾 Guardar Sesión</button>
344+
</div>
303345
</div>
304346
`;
347+
348+
const updateDayName = () => {
349+
let d = document.getElementById('ses-date').value;
350+
if(d) {
351+
let dateObj = new Date(d + 'T12:00:00');
352+
let days = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
353+
document.getElementById('ses-day-name').textContent = `(${days[dateObj.getDay()]})`;
354+
} else {
355+
document.getElementById('ses-day-name').textContent = '';
356+
}
357+
};
358+
document.getElementById('ses-date').addEventListener('change', updateDayName);
359+
updateDayName();
360+
305361
document.getElementById('btn-save-session').onclick = () => {
306362
let d = document.getElementById('ses-date').value;
307363
let t = document.getElementById('ses-title').value;

0 commit comments

Comments
 (0)