Merge pull request #5 from lowercasename/attendee-removal

Attendee removal

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">&times;</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">&times;</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',