diff options
Diffstat (limited to 'views')
| -rwxr-xr-x | views/event.handlebars | 81 |
1 files changed, 74 insertions, 7 deletions
diff --git a/views/event.handlebars b/views/event.handlebars index 9b0dab3..be5a9f8 100755 --- a/views/event.handlebars +++ b/views/event.handlebars @@ -95,12 +95,17 @@ {{#if eventData.usersCanAttend}} <div class="card mb-4" id="eventAttendees"> - <h5 class="card-header" style="width:100%;display:flex;justify-content:space-between;align-items:center">Attendees {{#if eventData.attendees}}({{eventData.attendees.length}}){{/if}}<button type="button" id="attendEvent" class="btn btn-primary" data-toggle="modal" data-target="#attendModal"><i class="fas fa-user-plus"></i> I'm going!</button></h5> + <h5 class="card-header" style="width:100%;display:flex;justify-content:space-between;align-items:center">Attendees {{#if eventData.attendees}}({{eventData.attendees.length}}){{/if}} + <div class="btn-group" role="group" aria-label="Attendance controls"> + <button type="button" id="attendEvent" class="btn btn-success" data-toggle="modal" data-target="#attendModal"><i class="fas fa-user-plus"></i> Add me</button> + <button type="button" id="unattendEvent" class="btn btn-secondary" data-toggle="modal" data-target="#unattendModal"><i class="fas fa-user-times"></i> Remove me</button> + </div> + </h5> <div class="card-body"> {{#if eventData.attendees}} <ul class="attendeesList"> {{#each eventData.attendees}} - <li>{{this.name}}</li> + <li{{#if ../editingEnabled}} data-attendee-name="{{this.name}}" data-attendee-id="{{this._id}}"{{/if}}>{{this.name}}{{#if ../editingEnabled}}<a href="#" id="removeAttendee" data-toggle="modal" data-target="#removeAttendeeModal"><i class="fas fa-user-times"></i></a>{{/if}}</li> {{/each}} </ul> {{else}} @@ -129,8 +134,8 @@ <div class="form-group row"> <label for="attendeeEmail" class="col-sm-2 col-form-label">Your email</label> <div class="form-group col-sm-10"> - <input type="email" class="form-control" id="attendeeEmail" name="attendeeEmail" placeholder="We won't spam you <3" data-validation="email" data-validation-optional="true"> - <small class="form-text">Optional - we'll use it to send you any updates to the event.</small> + <input type="email" class="form-control" id="attendeeEmail" name="attendeeEmail" placeholder="We won't spam you <3" data-validation="email"> + <small class="form-text">We'll only use it to send you updates to the event.</small> </div> </div> </div> @@ -142,8 +147,61 @@ </div> </div> </div> + +<div class="modal fade" id="unattendModal" tabindex="-1" role="dialog" aria-labelledby="unattendModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="unattendModalLabel">Remove yourself from '{{eventData.name}}'</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <form id="unattendEventForm" action="/unattendevent/{{eventData.id}}" method="post"> + <div class="modal-body"> + <div class="form-group row"> + <label for="attendeeEmail" class="col-sm-2 col-form-label">Your email</label> + <div class="form-group col-sm-10"> + <input type="email" class="form-control" id="attendeeEmail" name="attendeeEmail" placeholder="name@domain.com" data-validation="email" data-validation-optional="true"> + <small class="form-text">Enter the email you used when signing up for this event.</small> + </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">Remove myself</button> + </div> + </form> + </div> + </div> +</div> + + {{#if editingEnabled}} + <div class="modal fade" id="removeAttendeeModal" tabindex="-1" role="dialog" aria-labelledby="removeAttendeeModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="removeAttendeeModalLabel">Remove attendee from '{{eventData.name}}'</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <form id="removeAttendeeForm" action="/removeattendee/{{eventData.id}}/" method="post"> + <div class="modal-body"> + <p>Are you sure you want to remove this attendee from the event? This action cannot be undone.</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="submit" class="btn btn-danger">Remove attendee</button> + </div> + </form> + </div> + </div> + </div> + {{/if}} {{/if}} + {{#if eventData.usersCanComment}} <div class="card mb-4" id="eventComments"> <h5 class="card-header">Discussion</h5> @@ -220,7 +278,6 @@ {{#if editingEnabled}} {{#unless eventHasConcluded}} -<script type="text/javascript" src="/js/generate-timezones.js"></script> {{> editeventmodal }} {{/unless}} @@ -248,9 +305,10 @@ {{/if}} - +{{#unless eventHasConcluded}} +<script type="text/javascript" src="/js/generate-timezones.js"></script> +{{/unless}} <script> - $.validate({ lang: 'en', errorElementClass: "is-invalid", @@ -258,6 +316,15 @@ successElementClass: "is-valid" }); {{#if editingEnabled}} + + $('#removeAttendeeModal').on('show.bs.modal', function (event) { + var listItem = $(event.relatedTarget).closest('li'); // List element enclosing button + var attendeeName = listItem.data('attendee-name'); + var attendeeID = listItem.data('attendee-id'); + var modal = $(this); + modal.find('.modal-title').text('Remove ' + attendeeName + ' from {{eventData.name}}') + modal.find('#removeAttendeeForm').attr('action', '/removeattendee/{{eventData.id}}/' + attendeeID); + }) {{#unless eventHasConcluded}} $('#eventStart').datepicker({ language: 'en', |