diff --git a/README.md b/README.md
index 44a0a773..9070ff84 100644
--- a/README.md
+++ b/README.md
@@ -120,7 +120,7 @@ If you are writing javascript code in the node backend, you can test everything
### Local previews using production data
-As an alternative to `npm run dev`, you can preview a local frontend with the actual production backend by using: `npm run -w tools preview`.
+As an alternative to `npm run dev`, you can preview a local frontend with the actual production backend by using: `npm run preview`.
**NOTE:** any events you create while previewing this way *will* be seen by the world!
diff --git a/site/themes/s2b_hugo_theme/assets/js/cal/main.js b/site/themes/s2b_hugo_theme/assets/js/cal/main.js
index 3a30b522..beb46a6c 100755
--- a/site/themes/s2b_hugo_theme/assets/js/cal/main.js
+++ b/site/themes/s2b_hugo_theme/assets/js/cal/main.js
@@ -1,5 +1,24 @@
// uses CONSTANTS from config.js
+class Summary {
+ constructor(title) {
+ this.title = title;
+ this.before = 0;
+ this.after = 0;
+ this.now = dayjs();
+ this.total = 0;
+ }
+ addEvent(evt) {
+ const fullTime = dayjs(`${evt.date}T${evt.time}`);
+ if (fullTime.isBefore(this.now)) {
+ ++this.before;
+ } else {
+ ++this.after;
+ }
+ ++this.total;
+ }
+};
+
$(document).ready(function() {
var container = $('#mustache-html');
@@ -16,6 +35,12 @@ $(document).ready(function() {
throw Error("requires id or range");
}
+ const today = options.today;
+ const start = options.startdate;
+ const end = options.enddate;
+ const inRange = today >= start && today <= end;
+ const viewFrom = (options.pp) ? today : start;
+
var opts = {
type: 'GET',
url: url.toString(),
@@ -24,9 +49,23 @@ $(document).ready(function() {
var groupedByDate = [];
var mustacheData = { dates: [] };
+ const summary = new Summary("Bike Summer 2025");
+
$.each(data.events, function( index, value ) {
+ // summarize:
+ if (!value.cancelled) {
+ summary.addEvent(value);
+ }
+ // check if we want to see this date in detail:
+ const dayOfEvent = dayjs(value.date);
+ const shouldView = viewFrom.isSame(dayOfEvent, 'day') ||
+ viewFrom.isBefore(dayOfEvent, 'day');
+ if (!shouldView) {
+ return;
+ }
- var date = dayjs(value.date).format('dddd, MMMM D, YYYY');
+ // add the date in detail:
+ const date = dayOfEvent.format('dddd, MMMM D, YYYY');
if (groupedByDate[date] === undefined) {
groupedByDate[date] = {
yyyymmdd: value.date,
@@ -64,6 +103,13 @@ $(document).ready(function() {
for ( var date in groupedByDate ) {
groupedByDate[date].events.sort(container.compareTimes);
}
+
+ if (options.pp) {
+ const summaryTemplate = $('#summary-template').html()
+ const summaryHTML = Mustache.render(summaryTemplate, {summary});
+ $('#summary-html').replaceWith(summaryHTML);
+ }
+
var template = $('#view-events-template').html();
var info = Mustache.render(template, mustacheData);
if (options.id) {
@@ -106,17 +152,13 @@ $(document).ready(function() {
const start = options.startdate ? dayjs(options.startdate) : dayjs(today);
const end = options.enddate ? dayjs(options.enddate) : dayjs(today);
- const inRange = today >= start && today <= end;
- const from = (inRange && options.pp) ? today : start;
-
return {
- // since this year's PP will be in range
- // ( as will the normal calendar events page )
- // 'from' is today; for other PP pages it's options startdate.
- startdate: from,
+ today,
+ pp: options.pp,
+ startdate: start,
// if there was an enddate, use it; otherwise use a fixed number of days.
// subtract 1 so range is inclusive
- enddate: options.enddate ? end : from.add( (DEFAULT_DAYS_TO_FETCH - 1), 'day'),
+ enddate: options.enddate ? end : start.add( (DEFAULT_DAYS_TO_FETCH - 1), 'day'),
// pass this on to the events listing.
show_details: options.show_details,
};
diff --git a/site/themes/s2b_hugo_theme/layouts/partials/cal/events.html b/site/themes/s2b_hugo_theme/layouts/partials/cal/events.html
index 2824aa0b..cb00bd6e 100644
--- a/site/themes/s2b_hugo_theme/layouts/partials/cal/events.html
+++ b/site/themes/s2b_hugo_theme/layouts/partials/cal/events.html
@@ -3,6 +3,13 @@
Mustache.tags = ["[[", "]]"];
+
+