feat(share): group entries by date on public /s/<token> page
This commit is contained in:
+21
-2
@@ -239,7 +239,15 @@ function renderShare(data, password) {
|
|||||||
const isAnonymized = !data.show_student_names;
|
const isAnonymized = !data.show_student_names;
|
||||||
const showStudentMessage = !!data.show_student_message;
|
const showStudentMessage = !!data.show_student_message;
|
||||||
const showEntryDate = !!data.show_entry_date;
|
const showEntryDate = !!data.show_entry_date;
|
||||||
grid.innerHTML = data.entries.map(e => {
|
const dayKey = e => {
|
||||||
|
const d = new Date(e.created_at);
|
||||||
|
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
|
||||||
|
};
|
||||||
|
const dayLabel = k => {
|
||||||
|
const [y,m,d] = k.split('-').map(Number);
|
||||||
|
return new Date(y, m-1, d).toLocaleDateString('ru-RU', { day:'numeric', month:'long', year:'numeric' });
|
||||||
|
};
|
||||||
|
const cardHTML = e => {
|
||||||
const body = [
|
const body = [
|
||||||
!isAnonymized ? `<div class="name">${esc(e.student_name)}</div>` : '',
|
!isAnonymized ? `<div class="name">${esc(e.student_name)}</div>` : '',
|
||||||
!isAnonymized && e.group_name ? `<div><span class="group">${esc(e.group_name)}</span></div>` : '',
|
!isAnonymized && e.group_name ? `<div><span class="group">${esc(e.group_name)}</span></div>` : '',
|
||||||
@@ -257,7 +265,18 @@ function renderShare(data, password) {
|
|||||||
${showEntryDate ? `<div class="foot">${new Date(e.created_at).toLocaleString('ru',{day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'})}</div>` : ''}
|
${showEntryDate ? `<div class="foot">${new Date(e.created_at).toLocaleString('ru',{day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'})}</div>` : ''}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}).join('');
|
};
|
||||||
|
const groups = [];
|
||||||
|
let lastKey = null;
|
||||||
|
data.entries.forEach(e => {
|
||||||
|
const k = dayKey(e);
|
||||||
|
if (k !== lastKey) { groups.push({ key: k, entries: [] }); lastKey = k; }
|
||||||
|
groups[groups.length-1].entries.push(e);
|
||||||
|
});
|
||||||
|
grid.innerHTML = groups.map(g =>
|
||||||
|
`<div class="date-sep"><span class="date-chip">${esc(dayLabel(g.key))}</span><span class="date-line"></span></div>` +
|
||||||
|
g.entries.map(cardHTML).join('')
|
||||||
|
).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('lightbox').addEventListener('click', () => document.getElementById('lightbox').classList.remove('open'));
|
document.getElementById('lightbox').addEventListener('click', () => document.getElementById('lightbox').classList.remove('open'));
|
||||||
|
|||||||
@@ -38,6 +38,9 @@ body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;background
|
|||||||
.card .files a.ftype-presentation .ficon{background:#F6E4E8}
|
.card .files a.ftype-presentation .ficon{background:#F6E4E8}
|
||||||
.card .files a.ftype-other .ficon{background:#EFEFEF}
|
.card .files a.ftype-other .ficon{background:#EFEFEF}
|
||||||
.card .foot{margin-top:auto;padding:8px 6px 2px;font-size:.78rem;color:var(--gray)}
|
.card .foot{margin-top:auto;padding:8px 6px 2px;font-size:.78rem;color:var(--gray)}
|
||||||
|
.date-sep{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:8px 0 -8px}
|
||||||
|
.date-sep .date-chip{background:var(--dark);color:#fff;font-size:.82rem;font-weight:700;padding:7px 16px;border-radius:999px;letter-spacing:.01em}
|
||||||
|
.date-sep .date-line{flex:1;height:1px;background:#E3E3E3}
|
||||||
.empty{grid-column:1/-1;background:#fff;border-radius:var(--radius);padding:48px 24px;text-align:center;color:var(--gray);box-shadow:0 1px 3px rgba(20,30,40,.06)}
|
.empty{grid-column:1/-1;background:#fff;border-radius:var(--radius);padding:48px 24px;text-align:center;color:var(--gray);box-shadow:0 1px 3px rgba(20,30,40,.06)}
|
||||||
.empty .big{font-size:2rem;margin-bottom:10px}
|
.empty .big{font-size:2rem;margin-bottom:10px}
|
||||||
.loading{grid-column:1/-1;text-align:center;color:var(--gray);padding:40px}
|
.loading{grid-column:1/-1;text-align:center;color:var(--gray);padding:40px}
|
||||||
|
|||||||
Reference in New Issue
Block a user