diff options
| -rwxr-xr-x | routes.js | 15 | ||||
| -rwxr-xr-x | views/event.handlebars | 122 | ||||
| -rw-r--r-- | views/partials/editeventmodal.handlebars | 96 |
3 files changed, 132 insertions, 101 deletions
@@ -146,8 +146,10 @@ router.get('/:eventID', (req, res) => { else { displayDate = moment.tz(event.start, event.timezone).format('dddd D MMMM YYYY [<span class="text-muted">at</span>] h:mm a') + moment.tz(event.end, event.timezone).format(' [<span class="text-muted">–</span>] dddd D MMMM YYYY [<span class="text-muted">at</span>] h:mm a [<span class="text-muted">](z)[</span>]'); } + eventStartISO = moment.tz(event.start, event.timezone).toISOString(); + eventEndISO = moment.tz(event.end, event.timezone).toISOString(); parsedStart = moment.tz(event.start, event.timezone).format('YYYYMMDD[T]HHmmss'); - parsedEnd = moment.tz(event.end, event.timezone).format('YYYYMMDD[T]HHmmss'); + parsedEnd = moment.tz(event.start, event.timezone).format('YYYYMMDD[T]HHmmss'); let eventHasConcluded = false; if (moment.tz(event.end, event.timezone).isBefore(moment.tz(event.timezone))){ eventHasConcluded = true; @@ -205,6 +207,8 @@ router.get('/:eventID', (req, res) => { title: event.name, escapedName: escapedName, eventData: event, + eventStartISO: eventStartISO, + eventEndISO: eventEndISO, parsedLocation: parsedLocation, parsedStart: parsedStart, parsedEnd: parsedEnd, @@ -397,16 +401,19 @@ router.post('/editevent/:eventID/:editToken', (req, res) => { if (err) throw err; img .resize(920, Jimp.AUTO) // resize - .quality(80) // set JPEG [<span class="text-muted">](z)[</span>] + .quality(80) // set JPEG .write('./public/events/' + eventID + '.jpg'); // save }); eventImageFilename = eventID + '.jpg'; } + startUTC = moment.tz(req.body.eventStart, 'D MMMM YYYY, hh:mm a', req.body.timezone); + endUTC = moment.tz(req.body.eventEnd, 'D MMMM YYYY, hh:mm a', req.body.timezone); const updatedEvent = { name: req.body.eventName, location: req.body.eventLocation, - start: req.body.eventStart, - end: req.body.eventEnd, + start: startUTC, + end: endUTC, + timezone: req.body.timezone, description: req.body.eventDescription, url: req.body.eventURL, hostName: req.body.hostName, diff --git a/views/event.handlebars b/views/event.handlebars index 437a5a7..daacfc5 100755 --- a/views/event.handlebars +++ b/views/event.handlebars @@ -10,7 +10,7 @@ {{#if editingEnabled}} <div class="col-lg-2 text-right"> <div class="btn-group" role="group" aria-label="Event controls"> - <button type="button" id="editEvent" class="btn btn-success" data-toggle="modal" data-target="#editModal"><i class="fas fa-pencil-alt"></i></button> + <button type="button" id="editEvent" class="btn btn-success" data-toggle="modal" data-target="#editModal" {{#if eventHasConcluded}}disabled{{/if}}><i class="fas fa-edit"></i></button> <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i></button> </div> </div> @@ -75,7 +75,7 @@ </div> {{#if eventHasConcluded}} <div class="alert alert-warning mb-4" role="alert"> - This event has concluded. It will be automatically deleted <span class="daysToDeletion"></span>. + This event has concluded. It can no longer be edited, and will be automatically deleted <span class="daysToDeletion"></span>. </div> {{/if}} {{#if firstLoad}} @@ -219,96 +219,10 @@ {{/if}} {{#if editingEnabled}} -<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true"> - <div class="modal-dialog" role="document"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="editModalLabel">Edit '{{eventData.name}}'</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> - </div> - <form id="editEventForm" action="/editevent/{{eventData.id}}/{{eventData.editToken}}" method="post" enctype="multipart/form-data"> - <div class="modal-body"> - <div class="form-group row"> - <label for="eventName" class="col-sm-2 col-form-label">Event name</label> - <div class="form-group col-sm-10"> - <input type="text" class="form-control" id="eventName" name="eventName" placeholder="Make it snappy." value="{{eventData.name}}" data-validation="required length" data-validation-length="3-60"> - </div> - </div> - <div class="form-group row"> - <label for="eventLocation" class="col-sm-2 col-form-label">Location</label> - <div class="form-group col-sm-10"> - <input type="text" class="form-control" id="eventLocation" name="eventLocation" placeholder="Be specific." value="{{eventData.location}}" data-validation="required length" data-validation-length="3-60"> - </div> - </div> - <div class="form-group row"> - <label for="eventStart" class="col-sm-2 col-form-label">Starts</label> - <div class="form-group col-sm-10"> - <input readonly type="text" class="form-control" id="eventStart" name="eventStart" value="" data-validation="required"> - </div> - </div> - <div class="form-group row"> - <label for="eventEnd" class="col-sm-2 col-form-label">Ends</label> - <div class="form-group col-sm-10"> - <input readonly type="text" class="form-control" id="eventEnd" name="eventEnd" value="" data-validation="required"> - </div> - </div> - <div class="form-group row"> - <label for="eventDescription" class="col-sm-2 col-form-label">Description</label> - <div class="form-group col-sm-10"> - <textarea class="form-control" id="eventDescription" name="eventDescription" data-validation="required">{{eventData.description}}</textarea> - <small class="form-text"><a href="https://commonmark.org/help/">Markdown</a> formatting supported.</small> - </div> - </div> - <div class="form-group row"> - <label for="eventURL" class="col-sm-2 col-form-label">Link</label> - <div class="form-group col-sm-10"> - <input type="url" class="form-control" id="eventURL" name="eventURL" value="{{eventData.url}}" placeholder="For tickets or another event page (optional)." data-validation="url" data-validation-optional="true"> - </div> - </div> - <div class="form-group row"> - <label for="hostName" class="col-sm-2 col-form-label">Host name</label> - <div class="form-group col-sm-10"> - <input type="text" class="form-control" id="hostName" name="hostName" placeholder="Will be shown on the event page (optional)." value="{{eventData.hostName}}" data-validation="length" data-validation-length="3-60" data-validation-optional="true"> - </div> - </div> - <div class="form-group row"> - <label for="eventImage" class="col-sm-2 col-form-label">Cover image</label> - <div class="form-group col-sm-10"> - <div id="image-preview"> - <label for="image-upload" id="image-label">Choose file</label> - <input type="file" name="imageUpload" id="image-upload" /> - </div> - <small class="form-text">Recommended dimensions (w x h): 920px by 300px.</small> - </div> - </div> - <div class="form-group row"> - <div class="col-sm-2">Options</div> - <div class="col-sm-10"> - <div class="form-check"> - <input class="form-check-input" type="checkbox" id="joinCheckbox" name="joinCheckbox" {{#if eventData.usersCanAttend}}checked{{/if}}> - <label class="form-check-label" for="joinCheckbox"> - Users can mark themselves as attending this event - </label> - </div> - <div class="form-check"> - <input class="form-check-input" type="checkbox" id="interactionCheckbox" name="interactionCheckbox" {{#if eventData.usersCanComment}}checked{{/if}}> - <label class="form-check-label" for="interactionCheckbox"> - Users can post comments on this event - </label> - </div> - </div> - </div> - </div> - <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> - <button type="submit" class="btn btn-primary">Save changes</button> - </div> - </form> - </div> - </div> -</div> +{{#unless eventHasConcluded}} +<script type="text/javascript" src="/js/generate-timezones.js"></script> +{{> editeventmodal }} +{{/unless}} <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> @@ -336,6 +250,7 @@ <script> + $.validate({ lang: 'en', errorElementClass: "is-invalid", @@ -343,9 +258,9 @@ successElementClass: "is-valid" }); {{#if editingEnabled}} + {{#unless eventHasConcluded}} $('#eventStart').datepicker({ language: 'en', - minDate: new Date(), timepicker: true, dateFormat: 'd MM yyyy', dateTimeSeparator: ', ', @@ -355,11 +270,13 @@ }); $('#eventEnd').datepicker({ language: 'en', - minDate: new Date(), timepicker: true, dateFormat: 'd MM yyyy', dateTimeSeparator: ', ' }); + $("#timezone").val('{{eventData.timezone}}').trigger('change'); + console.log('{{eventData.timezone}}') + {{/unless}} {{/if}} $(".commentTimestamp").html(function(){ parsedDate = moment($(this).html()).fromNow(); @@ -370,6 +287,7 @@ $(this).closest(".comment").find(".replyContainer").slideToggle(); }) $(document).ready(function() { + $.uploadPreview({ input_field: "#image-upload", preview_box: "#image-preview", @@ -382,8 +300,18 @@ $("#image-preview").css("background-size", "cover"); $("#image-preview").css("background-position", "center center"); {{#if editingEnabled}} - $('#eventStart').datepicker().data('datepicker').selectDate(moment('{{parsedStart}}', 'YYYYMMDD[T]HHmmss').toDate()); - $('#eventEnd').datepicker().data('datepicker').selectDate(moment('{{parsedEnd}}', 'YYYYMMDD[T]HHmmss').toDate()); + {{#unless eventHasConcluded}} + // This is meant to determine the time for the date selectors in the editing modal, but there's + // some sort of bug which keeps adjusting the time by - I think - the local timezone, and I've + // not been able to fix it. + localOffset = new Date().getTimezoneOffset() * 60 * 1000; // In milliseconds + startOffset = moment.tz.zone('{{eventData.timezone}}').utcOffset(moment('{{eventStartISO}}').format('X')) * 60 * 1000; // In milliseconds + endOffset = moment.tz.zone('{{eventData.timezone}}').utcOffset(moment('{{eventEndISO}}').format('X')) * 60 * 1000; // In milliseconds + startWithOffset = moment(new Date('{{eventStartISO}}').getTime() + localOffset + startOffset).toISOString(); + endWithOffset = moment(new Date('{{eventEndISO}}').getTime() + localOffset + endOffset).toISOString(); + $('#eventStart').datepicker().data('datepicker').selectDate(new Date(startWithOffset)); + $('#eventEnd').datepicker().data('datepicker').selectDate(new Date(endWithOffset)); + {{/unless}} {{/if}} new ClipboardJS('#copyEventLink'); autosize($('textarea')); @@ -391,7 +319,7 @@ $(this).html('<i class="fas fa-copy"></i> Copied!'); setTimeout(function(){ $("#copyEventLink").html('<i class="fas fa-copy"></i> Copy');}, 5000); }) - $(".daysToDeletion").html(moment("{{eventData.end}}").add('days', 7).fromNow()); + $(".daysToDeletion").html(moment("{{eventEndISO}}").add(7, 'days').fromNow()); }); </script> diff --git a/views/partials/editeventmodal.handlebars b/views/partials/editeventmodal.handlebars new file mode 100644 index 0000000..ceb172b --- /dev/null +++ b/views/partials/editeventmodal.handlebars @@ -0,0 +1,96 @@ +<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="editModalLabel">Edit '{{eventData.name}}'</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <form id="editEventForm" action="/editevent/{{eventData.id}}/{{eventData.editToken}}" method="post" enctype="multipart/form-data"> + <div class="modal-body"> + <div class="form-group row"> + <label for="eventName" class="col-sm-2 col-form-label">Event name</label> + <div class="form-group col-sm-10"> + <input type="text" class="form-control" id="eventName" name="eventName" placeholder="Make it snappy." value="{{eventData.name}}" data-validation="required length" data-validation-length="3-60"> + </div> + </div> + <div class="form-group row"> + <label for="eventLocation" class="col-sm-2 col-form-label">Location</label> + <div class="form-group col-sm-10"> + <input type="text" class="form-control" id="eventLocation" name="eventLocation" placeholder="Be specific." value="{{eventData.location}}" data-validation="required length" data-validation-length="3-60"> + </div> + </div> + <div class="form-group row"> + <label for="eventStart" class="col-sm-2 col-form-label">Starts</label> + <div class="form-group col-sm-10"> + <input readonly type="text" class="form-control" id="eventStart" name="eventStart" value="" data-validation="required"> + </div> + </div> + <div class="form-group row"> + <label for="eventEnd" class="col-sm-2 col-form-label">Ends</label> + <div class="form-group col-sm-10"> + <input readonly type="text" class="form-control" id="eventEnd" name="eventEnd" value="" data-validation="required"> + </div> + </div> + <div class="form-group row"> + <label for="timezone" class="col-sm-2 col-form-label">Timezone</label> + <div class="form-group col-sm-10"> + <select class="select2" id="timezone" name="timezone"></select> + </div> + </div> + <div class="form-group row"> + <label for="eventDescription" class="col-sm-2 col-form-label">Description</label> + <div class="form-group col-sm-10"> + <textarea class="form-control" id="eventDescription" name="eventDescription" data-validation="required">{{eventData.description}}</textarea> + <small class="form-text"><a href="https://commonmark.org/help/">Markdown</a> formatting supported.</small> + </div> + </div> + <div class="form-group row"> + <label for="eventURL" class="col-sm-2 col-form-label">Link</label> + <div class="form-group col-sm-10"> + <input type="url" class="form-control" id="eventURL" name="eventURL" value="{{eventData.url}}" placeholder="For tickets or another event page (optional)." data-validation="url" data-validation-optional="true"> + </div> + </div> + <div class="form-group row"> + <label for="hostName" class="col-sm-2 col-form-label">Host name</label> + <div class="form-group col-sm-10"> + <input type="text" class="form-control" id="hostName" name="hostName" placeholder="Will be shown on the event page (optional)." value="{{eventData.hostName}}" data-validation="length" data-validation-length="3-60" data-validation-optional="true"> + </div> + </div> + <div class="form-group row"> + <label for="eventImage" class="col-sm-2 col-form-label">Cover image</label> + <div class="form-group col-sm-10"> + <div id="image-preview"> + <label for="image-upload" id="image-label">Choose file</label> + <input type="file" name="imageUpload" id="image-upload" /> + </div> + <small class="form-text">Recommended dimensions (w x h): 920px by 300px.</small> + </div> + </div> + <div class="form-group row"> + <div class="col-sm-2">Options</div> + <div class="col-sm-10"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" id="joinCheckbox" name="joinCheckbox" {{#if eventData.usersCanAttend}}checked{{/if}}> + <label class="form-check-label" for="joinCheckbox"> + Users can mark themselves as attending this event + </label> + </div> + <div class="form-check"> + <input class="form-check-input" type="checkbox" id="interactionCheckbox" name="interactionCheckbox" {{#if eventData.usersCanComment}}checked{{/if}}> + <label class="form-check-label" for="interactionCheckbox"> + Users can post comments on this event + </label> + </div> + </div> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="submit" class="btn btn-primary">Save changes</button> + </div> + </form> + </div> + </div> +</div>
\ No newline at end of file |