diff --git a/src/js/scripts.js b/src/js/scripts.js index d5a963e..4d2374c 100644 --- a/src/js/scripts.js +++ b/src/js/scripts.js @@ -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 = ` +
+ ${event.title} +
+ + +
+
+ + ${event.locationUrl ? `` : ''} + ${event.location || 'Noch nicht bestimmt'} + ${event.locationUrl ? '' : ''} +
+
+ + ${event.storyTellers.length > 0 ? event.storyTellers.join(", ") : 'Noch nicht bestimmt'} +
+ ${event.extra ? `
${event.extra}
` : ''} +
+ ${event.url ? `` : ''} + `; + 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 = ` -
- ${event.title} -
- - -
-
- - ${event.locationUrl ? `` : ''} - ${event.location || 'Noch nicht bestimmt'} - ${event.locationUrl ? '' : ''} -
-
- - ${event.storyTellers.length > 0 ? event.storyTellers.join(", ") : 'Noch nicht bestimmt'} -
- ${event.extra ? `
${event.extra}
` : ''} -
- ${event.url ? `` : ''} - `; - 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); diff --git a/src/pug/index.pug b/src/pug/index.pug index 86dab9b..652ed2d 100644 --- a/src/pug/index.pug +++ b/src/pug/index.pug @@ -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 @@ -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 @@ -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. @@ -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 | @@ -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? @@ -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 © 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