Skip to content

Commit 68c6521

Browse files
hellcphellcp
committed
Update events page for the new api and submissions
Signed-off-by: Stasia Michalska <hel@lcp.world>
1 parent 92487ec commit 68c6521

File tree

4 files changed

+118
-81
lines changed

4 files changed

+118
-81
lines changed

‎Dockerfile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ ENV LANG=C.UTF-8
1818
ENV LC_ALL=C.UTF-8
1919
ENV URL=http://developer.rebble.io
2020
ENV HTTPS_URL=https://developer.rebble.io
21-
ENV EXTERNAL_SERVER=https://example.com
21+
ENV EXTERNAL_SERVER=https://events.rebble.io
2222
ENV SKIP_DOCS=true
2323
ENV JEKYLL_ENV=production
2424

‎_config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ url: https://developer.rebble.io
1616
https_url: https://developer.rebble.io
1717
baseurl:
1818
asset_path: /assets
19-
external_server: https://developer-api.getpebble.com
19+
external_server: https://events.rebble.io
2020

2121
title: Pebble Developers
2222
description: The official developer website for the Pebble smartwatch.

‎source/_includes/community/events/form.html‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,20 @@
1515
{% endcomment %}
1616

1717
<form action="{{ site.data_server }}/events/submit" method="post" id="js-events-form">
18-
<div class="gray-box">
19-
<h3>Add an Event</h3>
18+
<div>
19+
<h3>Adding a new event</h3>
20+
<p>You can add events to the list (<code>events.yml</code>) by
21+
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork">creating a Pull Request</a>
22+
targetting the
23+
<a href="https://github.com/pebble-dev/rebble-events">Events GitHub repository</a>.</p>
24+
25+
<p>We don't just accept submission by the event organizers, we want to create a
26+
comprehensive list, so if you are aware of a trustworthy public event, we would
27+
like to know about it.</p>
28+
<p>Below is a convinience form to help you submit properly formatted YAML with all the details we need in the submissions.</p>
2029
<div class="alert" id="form-errors" style="display: none;"></div>
2130
<div class="row">
2231
<div class="col-m-6">
23-
<div class="form__group">
24-
<label for="submission_name">Your Name</label><input type="text" id="event-name" name="submission_name">
25-
</div>
26-
<div class="form__group">
27-
<label for="email">Email Address</label><input type="email" id="event-email" name="submission_email">
28-
</div>
2932
<div class="form__group">
3033
<label for="title">Event Title</label><input type="text" id="event-title" name="title">
3134
</div>
@@ -57,8 +60,10 @@ <h3>Add an Event</h3>
5760
<div class="form__group">
5861
<label for="details">Details</label><textarea id="event-description" name="details" rows=5></textarea></div>
5962

60-
<p style="text-right"><input type="submit" value="Submit" class="btn btn--fg-white btn--bg-green"></p>
63+
<p style="text-right"><input type="submit" value="Generate" class="btn btn--fg-white btn--bg-green"></p>
6164
</div>
6265
</div>
66+
<p>Output:</p>
67+
<pre class="gray-box" id="js-events-form-output"></pre>
6368
</div>
6469
</form>

‎source/assets/js/community/events.js‎

Lines changed: 102 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ function init() {
2525
nextMonth();
2626
});
2727

28+
window.addEventListener('hashchange', function () {
29+
loadStartDate();
30+
build();
31+
});
32+
33+
2834
$('#js-events-form').on('submit', function (event) {
2935
$('#form-errors').html('').hide().removeClass('alert--success').removeClass('alert--error');
3036

@@ -35,12 +41,8 @@ function init() {
3541
submission.location = { text: $('#event-location').val() };
3642
submission.type = $('#event-type').val();
3743
submission.website = $('#event-website').val();
38-
submission.submission = {
39-
name: $('#event-name').val(),
40-
email: $('#event-email').val()
41-
};
42-
submission.startDate = moment.utc($('#event-start-date').val(), 'YYYY-MM-DD').toDate();
43-
submission.endDate = moment.utc($('#event-end-date').val(), 'YYYY-MM-DD').toDate();
44+
submission.startDate = Date.parse($('#event-start-date').val());
45+
submission.endDate = Date.parse($('#event-end-date').val());
4446
submission.isAllDay = true;
4547
if (!dateRegex.test($('#event-start-date').val())) {
4648
return setError('Start date is not valid', 'Please use the format YYYY-MM-DD', 'alert--error');
@@ -54,33 +56,60 @@ function init() {
5456
if (submission.endDate < new Date()) {
5557
return setError('End date is not valid', 'Please enter a end date that is in the future', 'alert--error');
5658
}
57-
$.post('{{ site.external_server }}/events/submit.json', submission, function (res) {
58-
if (res && res.message) {
59-
setError(res.message, 'We will review the details of your event and contact you when it has been approved for inclusion on our site.', 'alert--success');
60-
$('#js-events-form').get(0).reset();
61-
}
62-
else {
63-
console.log(res);
64-
}
65-
}).fail(function (res) {
66-
console.log(res.responseJSON);
67-
if (res.responseJSON && res.responseJSON.error && res.responseJSON.error.name == 'ValidationError') {
68-
$('#form-errors').append($('<p/>').text(res.responseJSON.error.details[0].message));
69-
}
70-
else if (res.responseJSON && res.responseJSON.error && res.responseJSON.error.details) {
71-
$('#form-errors').text(res.responseJSON.error.details.messsage).show();
72-
}
73-
else {
74-
$('#form-errors').append($('<p/>').text('An unknown error has occurred!'));
75-
}
76-
$('#form-errors').addClass('alert--error').show();
59+
fetchLongLat(submission).finally(updated => {
60+
if (!updated)
61+
updated = submission;
62+
var output = "";
63+
Object.keys(updated).forEach((key, index) => {
64+
if (updated[key] === null || updated[key] === '')
65+
return
66+
if (index === 0)
67+
output += '- '
68+
else
69+
output += ' '
70+
output += key + ': '
71+
if (typeof updated[key] === 'object')
72+
output += `"${updated[key]['text']}"`;
73+
else if (typeof updated[key] === 'number')
74+
output += new moment(updated[key]).format('YYYY-MM-DD');
75+
else if (typeof updated[key] === 'boolean' || key === 'longitude' || key === 'latitude')
76+
output += updated[key];
77+
else if (key === 'description') {
78+
output += '|'
79+
updated[key].split("\n").forEach((line) => {
80+
output += "\n"
81+
output += ' '
82+
output += line
83+
});
84+
} else
85+
output += `"${updated[key]}"`;
86+
output += "\n"
87+
});
88+
$('#js-events-form-output').html(output);
7789
});
7890
});
7991

80-
window.addEventListener('hashchange', function () {
81-
loadStartDate();
82-
build();
83-
});
92+
async function fetchLongLat(submission) {
93+
if (!submission.location || !submission.location.text) return submission;
94+
95+
try {
96+
const res = await fetch(
97+
'https://nominatim.openstreetmap.org/search?format=jsonv2&q=' + encodeURIComponent(submission.location)
98+
);
99+
100+
const data = await res.json();
101+
102+
if (data.length > 0) {
103+
const result = data[0];
104+
submission.longitude = result.lon;
105+
submission.latitude = result.lat;
106+
}
107+
} catch (err) {
108+
console.error('Location Lookup failed:', err);
109+
}
110+
111+
return submission;
112+
}
84113

85114
function setError(title, body, cssClass) {
86115
$('#form-errors').append($('<h4/>').text(title));
@@ -178,7 +207,7 @@ function init() {
178207
}
179208

180209
function loadLocations() {
181-
var locationsUrl = '{{ site.external_server }}/events/locations';
210+
var locationsUrl = '{{ site.external_server }}/locations.json';
182211
$.getJSON(locationsUrl, function (locations) {
183212
if (locations && locations.length > 0) {
184213
buildMap(locations);
@@ -189,54 +218,57 @@ function init() {
189218
function loadEvents() {
190219
$('.js-events__list').html('<span class="spinner spinner--padded spinner--large spinner--center"></span>');
191220
var tplInfo = Handlebars.templates['events-info'];
192-
var eventsUrl = '{{ site.external_server }}/events/upcoming.json?limit=60&start=' +
193-
startDate.format('YYYY/MM/DD') + '&end=' + endDate.format('YYYY/MM/DD');
221+
var eventsUrl = `{{ site.external_server }}/events-${startDate.format('YYYY-MM')}.json`
222+
223+
fetch(eventsUrl)
224+
.then(response => {
225+
return response.json();
226+
})
227+
.then(events => {
228+
if (events.length === 0) {
229+
$('.js-events__list').html(Handlebars.templates['events-info-none']({ month: startDate.format('MMMM YYYY') }));
230+
}
231+
else {
232+
$('.js-events__list').html('');
233+
var today = new Date(); today.setHours(0,0,0,0);
194234

195-
$.getJSON(eventsUrl, function (events) {
196-
if (events.length === 0) {
197-
$('.js-events__list').html(Handlebars.templates['events-info-none']({ month: startDate.format('MMMM YYYY') }));
198-
}
199-
else {
200-
$('.js-events__list').html('');
201-
var today = new Date(); today.setHours(0,0,0,0);
235+
events.forEach(function (event, index) {
236+
var eventDate = new moment(event.startDate);
202237

203-
events.forEach(function (event, index) {
204-
var eventDate = new moment(event.startDate);
238+
event.number = index + 1;
239+
event.description = event.description.replace(/\n\n\n/g, '<br><br>');
240+
event.description = event.description.replace(/\n/g, '<br>');
241+
event.dateString = eventDate.format("YYYY-MM-DD");
205242

206-
event.number = index + 1;
207-
event.description = event.description.replace(/\n\n\n/g, '<br><br>');
208-
event.description = event.description.replace(/\n/g, '<br>');
209-
event.dateString = eventDate.format("YYYY-MM-DD");
243+
var $event = $(tplInfo(event));
210244

211-
var $event = $(tplInfo(event));
245+
if (index % 2 === 0 && index > 0) $event.addClass('reset-m');
246+
if (eventDate < today) $event.children('article').addClass("event--past");
212247

213-
if (index % 2 === 0 && index > 0) $event.addClass('reset-m');
214-
if (eventDate < today) $event.children('article').addClass("event--past");
248+
var descToggle = $event.find(".event__toggle");
249+
descToggle.click(function(e) {
250+
e.preventDefault();
215251

216-
var descToggle = $event.find(".event__toggle");
217-
descToggle.click(function(e) {
218-
e.preventDefault();
252+
var desc = $event.find(".event__description");
253+
if (desc.attr("hidden")) {
254+
desc.removeAttr("hidden");
255+
desc.removeClass("hidden");
219256

220-
var desc = $event.find(".event__description");
221-
if (desc.attr("hidden")) {
222-
desc.removeAttr("hidden");
223-
desc.removeClass("hidden");
257+
this.innerText = "Less..";
258+
} else {
259+
desc.attr("hidden", "true");
260+
desc.addClass("hidden");
224261

225-
this.innerText = "Less..";
226-
} else {
227-
desc.attr("hidden", "true");
228-
desc.addClass("hidden");
262+
this.innerText = "More..";
263+
}
264+
});
229265

230-
this.innerText = "More..";
231-
}
266+
$('.js-events__list').append($event);
267+
addEventToCalendar(event);
232268
});
233-
234-
$('.js-events__list').append($event);
235-
addEventToCalendar(event);
236-
});
237-
}
238-
buildMap(events);
239-
});
269+
}
270+
buildMap(events);
271+
});
240272
}
241273

242274
function buildMap(events) {
@@ -267,7 +299,7 @@ function init() {
267299

268300
popup_content = `<h5>${event.location}</h5>`
269301
popup_content += `<b>${event.title}</b>`
270-
popup_content += `<p>${event.startDate} - ${event.endDate}</p>`
302+
popup_content += `<p>${new moment(event.startDate).format('YYYY-MM-DD')} - ${new moment(event.endDate).format('YYYY-MM-DD')}</p>`
271303
popup_content += `<p><a href="${event.website}">Website</a></p>`
272304
var popup = L.popup({ content: popup_content, className: `${event.number}` });
273305
marker.bindPopup(popup);

0 commit comments

Comments
 (0)