Skip to content

Commit

Permalink
Limit visible events and add event navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@dennisschuerholz
dennisschuerholz committed Apr 5, 2024
1 parent 5b6f319 commit 4a9244b
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 78 deletions.
132 changes: 76 additions & 56 deletions src/js/scripts.js
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,83 @@
let events = [];
let chunksize = 4;
let startCounter = 0;

function nextEvents(decrease = false) {
const oc = startCounter;
if (decrease) startCounter = Math.max(0, startCounter-chunksize);
else startCounter = Math.min(events.length - events.length % chunksize, startCounter + chunksize);
if (oc !== startCounter) fillEvents();
}

function fillEvents() {
const rootElement = document.getElementById('botc-event-widget');
rootElement.innerHTML = '';
const eventsCounter = document.getElementById('eventsCounter');
eventsCounter.innerHTML = `Seite ${Math.floor(startCounter/chunksize)+1} von ${Math.ceil(events.length/chunksize)}`;
const dateFormat = new Intl.DateTimeFormat('de-DE', {
weekday: 'short',
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
});
let counter = 0;
events.forEach(event => {
counter++;
if (counter <= startCounter || counter > startCounter+chunksize) {
return;
}
const eventElement = document.createElement('li');
eventElement.classList.add('d-flex', 'list-group-item', 'justify-content-between', 'align-items-center', 'event');
eventElement.innerHTML = `
<div>
<b class="title d-inline-block mb-1">${event.title}</b>
<div title="Start">
<i class="fa-solid fa-calendar-days"></i>
<time class="ms-1" datetime="${event.start}">${dateFormat.formatRange(new Date(event.start), new Date(event.end))}</time>
</div>
<div title="Ort">
<i class="fa-solid fa-location-dot"></i>
${event.locationUrl ? `<a href="${event.locationUrl}" target="_blank">` : ''}
<span class="ms-1">${event.location || '<i>Noch nicht bestimmt</i>'}</span>
${event.locationUrl ? '</a>' : ''}
</div>
<div title="Storyteller">
<i class="fa-solid fa-person-chalkboard"></i>
<span class="ms-1">${event.storyTellers.length > 0 ? event.storyTellers.join(", ") : '<i>Noch nicht bestimmt</i>'}</span>
</div>
${event.extra ? `<div title="Extra" class="extra"><i class="fa-solid fa-info-circle"></i> <span class="ms-1">${event.extra}</span></div>` : ''}
</div>
${event.url ? `<a href="${event.url}" target="_blank"><i class="fa-solid fa-up-right-from-square"></i></a>` : ''}
`;
eventElement.addEventListener('mouseover', () => {
eventElement.classList.add('bg-light');
});
eventElement.addEventListener('mouseout', () => {
eventElement.classList.remove('bg-light');
});
if (event.url) {
eventElement.addEventListener('click', (clickEvent) => {
if (clickEvent.target.parentElement.tagName === 'A') {
return;
}
window.open(event.url, '_blank');
});
eventElement.classList.add('cursor-pointer');
}
rootElement.appendChild(eventElement);
});
}

document.addEventListener('DOMContentLoaded', () => {
const rootElement = document.getElementsByClassName('botc-event-widget')[0];
fetch('/events.json')
.then(response => response.json())
.then(events => {
rootElement.innerHTML = '';
events.sort((a, b) => new Date(a.start) - new Date(b.start));
.then(all_events => {
all_events.sort((a, b) => new Date(a.start) - new Date(b.start));
const now = new Date();
const dateFormat = new Intl.DateTimeFormat('de-DE', {
weekday: 'short',
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
});
events.forEach(event => {
if (new Date(event.end) < now) {
return;
}
const eventElement = document.createElement('li');
eventElement.classList.add('d-flex', 'list-group-item', 'justify-content-between', 'align-items-center', 'event');
eventElement.innerHTML = `
<div>
<b class="title d-inline-block mb-1">${event.title}</b>
<div title="Start">
<i class="fa-solid fa-calendar-days"></i>
<time class="ms-1" datetime="${event.start}">${dateFormat.formatRange(new Date(event.start), new Date(event.end))}</time>
</div>
<div title="Ort">
<i class="fa-solid fa-location-dot"></i>
${event.locationUrl ? `<a href="${event.locationUrl}" target="_blank">` : ''}
<span class="ms-1">${event.location || '<i>Noch nicht bestimmt</i>'}</span>
${event.locationUrl ? '</a>' : ''}
</div>
<div title="Storyteller">
<i class="fa-solid fa-person-chalkboard"></i>
<span class="ms-1">${event.storyTellers.length > 0 ? event.storyTellers.join(", ") : '<i>Noch nicht bestimmt</i>'}</span>
</div>
${event.extra ? `<div title="Extra" class="extra"><i class="fa-solid fa-info-circle"></i> <span class="ms-1">${event.extra}</span></div>` : ''}
</div>
${event.url ? `<a href="${event.url}" target="_blank"><i class="fa-solid fa-up-right-from-square"></i></a>` : ''}
`;
eventElement.addEventListener('mouseover', () => {
eventElement.classList.add('bg-light');
});
eventElement.addEventListener('mouseout', () => {
eventElement.classList.remove('bg-light');
});
if (event.url) {
eventElement.addEventListener('click', (clickEvent) => {
if (clickEvent.target.parentElement.tagName === 'A') {
return;
}
window.open(event.url, '_blank');
});
eventElement.classList.add('cursor-pointer');
}
rootElement.appendChild(eventElement);
});
events = all_events.filter((event) => new Date(event.end) >= now);
fillEvents(0);
})
.catch(error => {
console.error(error);
Expand Down
52 changes: 30 additions & 22 deletions src/pug/index.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ html(lang='de')

// Navigation
nav.navbar.navbar-expand-lg.navbar-dark.navbar-custom.fixed-top
.container.px-md-5.px-3
.container.px-xl-5.px-3
a.navbar-brand(href='#top') BotC Bremen & Umzu
button.navbar-toggler(type='button', data-bs-toggle='collapse', data-bs-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
span.navbar-toggler-icon
Expand All @@ -40,7 +40,7 @@ html(lang='de')
// Header
header.masthead.text-center.text-white
.masthead-content
.container.px-md-5.px-3
.container.px-xl-5.px-3
h1.masthead-heading.mb-0 Blood on the Clocktower
h2.masthead-subheading.mb-0 Lokalcommunity Bremen & Umzu
a.btn.btn-primary.btn-xl.rounded-pill.mt-5(href='#events') Anstehende Veranstaltungen
Expand All @@ -51,34 +51,42 @@ html(lang='de')

// Content section 1
section#events
.container.px-md-5.px-3
.container.px-xl-5.px-3
.row.gx-5.align-items-center
.col-lg-6.order-lg-2
.p-md-5.p-2
.p-xl-5.p-2
img.img-fluid.rounded-circle(src='assets/img/clocktower.jpg', alt='...')
.col-lg-6.order-lg-1
.p-md-5.p-2
.p-xl-5.p-2
h2.display-4 Veranstaltungen
p.mb-0
| Hier findet ihr immer die nächsten geplanten Veranstaltungen. Anmeldungen werden über den Link oder ggf. direkt von Storytellern entgegen genommen.
.text-end.mb-2
| Hier abonnieren:
a(href='/events.ics', title='Termindownload oder Kalenderabonnement (ics/ical)').p-1.m-1
i.fa-solid.fa-calendar-check
ul.list-group.botc-event-widget
.row.mb-2.mt-2
.text-start.col-sm-8
a(href='javascript:nextEvents(true)', title='Frühere Veranstaltungen')#prevEvents.p-1.m1
i.fa-solid.fa-calendar-minus
span#eventsCounter.p-1.m1
| Seite 1 von ...
a(href='javascript:nextEvents()', title='Spätere Veranstaltungen')#nextEvents.p-1.m1
i.fa-solid.fa-calendar-plus
.text-end.col-sm-4
| Abonnieren:
a(href='/events.ics', title='Termindownload oder Kalenderabonnement (ics/ical)').p-1.m-1
i.fa-solid.fa-calendar-check
ul.list-group#botc-event-widget
li.list-group-item.d-flex.justify-content-center.align-items-center
i.fa-solid-fa-circle-notch.fa-spin
span.m-2 Lade Veranstaltungen...

// Content section 2
section#locations
.container.px-md-5.px-3
.container.px-xl-5.px-3
.row.gx-5.align-items-center
.col-lg-6
.p-md-5.p-2
.p-xl-5.p-2
img.img-fluid.rounded-circle(src='assets/img/townsquare.jpg', alt='...')
.col-lg-6
.p-md-5.p-2
.p-xl-5.p-2
h2.display-4 Orte
p
| Unsere offenen Spielerunden finden an verschiedenen Locations statt. Da wir immer unterschiedliche räumliche Möglichkeiten haben wechselt die mögliche Teilnehmendenanzahl auch bei jedem Event.
Expand All @@ -100,13 +108,13 @@ html(lang='de')

// Content section 3
section#links
.container.px-md-5.px-3
.container.px-xl-5.px-3
.row.gx-5.align-items-center
.col-lg-6.order-lg-2
.p-md-5.p-2
.p-xl-5.p-2
img.img-fluid.rounded-circle(src='assets/img/network.jpg', alt='...')
.col-lg-6.order-lg-1
.p-md-5.p-2
.p-xl-5.p-2
h2.display-4 Links
p
|
Expand All @@ -130,13 +138,13 @@ html(lang='de')

// Content section 4
section#contact
.container.px-md-5.px-3
.container.px-xl-5.px-3
.row.gx-5.align-items-center
.col-lg-6
.p-md-5.p-2
.col-lg-6.order-lg-2
.p-xl-5.p-2
img.img-fluid.rounded-circle(src='assets/img/grimsetup.jpg', alt='...')
.col-lg-6
.p-md-5.p-2
.col-lg-6.order-lg-1
.p-xl-5.p-2
h2.display-4 Kontakt
p
| Du möchtest Informationen zum Spiel selbst bekommen?
Expand All @@ -158,7 +166,7 @@ html(lang='de')

// Footer
footer.py-5.bg-black
.container.px-md-5.px-3
.container.px-xl-5.px-3
p.m-0.text-center.text-white.small Copyright &copy; BotC Community Bremen & Umzu 2024
p.m-0.text-center.text-white.small "Blood on the Clocktower" ist eine eingetragene Marke von
a(href='https://bloodontheclocktower.com/about-us', target='_blank') The Pandemonium Institute
Expand Down

0 comments on commit 4a9244b

Please sign in to comment.