Add attendee type management and staff codes
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,36 @@
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
.dashboard {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 30px 20px;
|
||||
box-sizing: border-box;
|
||||
max-width: 1600px;
|
||||
}
|
||||
.events-list {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) !important;
|
||||
gap: 1.5rem !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.event-item {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
.event-item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.event-info {
|
||||
width: 100%;
|
||||
}
|
||||
.progress-bar-container {
|
||||
background: #e9ecef;
|
||||
border-radius: 4px;
|
||||
@@ -89,11 +119,11 @@
|
||||
background: #dee2e6;
|
||||
}
|
||||
.section-toggle::after {
|
||||
content: '▼';
|
||||
content: '▶';
|
||||
font-size: 10px;
|
||||
}
|
||||
.section-toggle.collapsed::after {
|
||||
content: '▶';
|
||||
content: '▼';
|
||||
}
|
||||
.section-content {
|
||||
padding: 10px 0;
|
||||
@@ -126,6 +156,18 @@
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
.pagination-controls button {
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Wide screen - spread content */
|
||||
@media (min-width: 1400px) {
|
||||
@@ -165,8 +207,46 @@
|
||||
function toggleSection(id) {
|
||||
const content = document.getElementById(id);
|
||||
const toggle = content.previousElementSibling;
|
||||
const wasCollapsed = content.classList.contains('collapsed');
|
||||
content.classList.toggle('collapsed');
|
||||
toggle.classList.toggle('collapsed');
|
||||
if (wasCollapsed && content.dataset.itemCount) {
|
||||
const perPage = parseInt(content.dataset.perPage) || 5;
|
||||
setupPagination(id, parseInt(content.dataset.itemCount), perPage);
|
||||
}
|
||||
}
|
||||
|
||||
function showPage(sectionId, page, perPage) {
|
||||
const section = document.getElementById(sectionId);
|
||||
const items = section.querySelectorAll('.list-item');
|
||||
items.forEach((item, i) => {
|
||||
const start = (page - 1) * perPage;
|
||||
const end = start + perPage;
|
||||
item.style.display = i >= start && i < end ? 'flex' : 'none';
|
||||
});
|
||||
const totalPages = parseInt(section.dataset.totalPages);
|
||||
section.querySelectorAll('.pagination-controls button').forEach(btn => {
|
||||
btn.disabled = parseInt(btn.dataset.page) == page;
|
||||
});
|
||||
}
|
||||
|
||||
function setupPagination(sectionId, totalItems, perPage) {
|
||||
const section = document.getElementById(sectionId);
|
||||
const totalPages = Math.ceil(totalItems / perPage);
|
||||
if (totalPages <= 1) return;
|
||||
section.dataset.totalPages = totalPages;
|
||||
const controls = section.querySelector('.pagination-controls');
|
||||
controls.innerHTML = '';
|
||||
for (let p = 1; p <= totalPages; p++) {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'btn btn-sm btn-outline';
|
||||
btn.dataset.page = p;
|
||||
btn.textContent = p;
|
||||
btn.onclick = () => showPage(sectionId, p, perPage);
|
||||
if (p === 1) btn.disabled = true;
|
||||
controls.appendChild(btn);
|
||||
}
|
||||
showPage(sectionId, 1, perPage);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -215,7 +295,7 @@ function toggleSection(id) {
|
||||
<div class="section-toggle" onclick="toggleSection('staff-{{ event.id }}')">
|
||||
<strong>Staff ({{ event.staff|length }})</strong>
|
||||
</div>
|
||||
<div id="staff-{{ event.id }}" class="section-content collapsed">
|
||||
<div id="staff-{{ event.id }}" class="section-content collapsed" data-item-count="{{ event.staff|length }}" data-per-page="5">
|
||||
<div class="item-list">
|
||||
{% for s in event.staff %}
|
||||
<div class="list-item">
|
||||
@@ -232,6 +312,7 @@ function toggleSection(id) {
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="pagination-controls"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -241,7 +322,7 @@ function toggleSection(id) {
|
||||
<div class="section-toggle" onclick="toggleSection('sessions-{{ event.id }}')">
|
||||
<strong>{{ 'breakout_sessions'|t }} ({{ event.breakout_sessions|length }})</strong>
|
||||
</div>
|
||||
<div id="sessions-{{ event.id }}" class="section-content collapsed">
|
||||
<div id="sessions-{{ event.id }}" class="section-content collapsed" data-item-count="{{ event.breakout_sessions|length }}" data-per-page="5">
|
||||
<div class="item-list">
|
||||
{% for session in event.breakout_sessions %}
|
||||
<div class="list-item">
|
||||
@@ -262,6 +343,7 @@ function toggleSection(id) {
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="pagination-controls"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -271,7 +353,7 @@ function toggleSection(id) {
|
||||
<div class="section-toggle" onclick="toggleSection('attendees-{{ event.id }}')">
|
||||
<strong>{{ 'attendees'|t }} ({{ event.attendees|length }})</strong>
|
||||
</div>
|
||||
<div id="attendees-{{ event.id }}" class="section-content collapsed">
|
||||
<div id="attendees-{{ event.id }}" class="section-content collapsed" data-item-count="{{ event.attendees|length }}" data-per-page="5">
|
||||
<div class="item-list">
|
||||
{% for att in event.attendees %}
|
||||
<div class="list-item">
|
||||
@@ -291,6 +373,7 @@ function toggleSection(id) {
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="pagination-controls"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user