diff options
Diffstat (limited to 'views')
| -rwxr-xr-x | views/event.handlebars | 122 | ||||
| -rw-r--r-- | views/partials/editeventmodal.handlebars | 96 |
2 files changed, 121 insertions, 97 deletions
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 |