Overhaul and deduplicate ajax code

app/assets/javascripts/buttonhandlers.js

@@ -2,69 +2,108 @@
 
 $(setup_handlers);
 
+// Add the presence handler to all buttons on the page
 function setup_handlers()
 {
-  $('.btn-present').on("click", set_present);
-  $('.btn-absent').on("click", set_absent);
+  $('.btn-presence').on("click", change_presence);
 }
 
-// Update all references on the page to this activity:
-// 1. The present/absent buttons
-// 2. The activity's row-color in any tables
-function activity_changed(activity_id, new_state)
+// Callback that is triggered when a presence button is clicked.
+// Creates an AJAX-request and registers the appropriate handlers once it is done.
+function change_presence(e)
 {
-    // Set the present buttons and absent buttons to their appropriate state
+	// Gather data
+	var group, person, activity, state;
+	group 	 = this.dataset["groupId"];
+	person   = this.dataset["personId"];
+	activity = this.dataset["activityId"];
+	rstate 	 = this.dataset["newState"];
+
+	var state;
+	switch (rstate)
+	{
+		case "present":
+			state = true;
+			break;
+
+		case "absent":
+			state = false;
+			break;
 
+		case "unknown":
+			state = null;
+			break;
+	}
+
+	// Make request
+	var req;
+	req = $.ajax(`/groups/${group}/activities/${activity}/presence`,
+		{
+		  method: 'PUT',
+		  data: {person_id: person, attending: state}
+		}
+	)
+	.done( activity_changed )
+	.fail( alert_failure );
+
+	// Pack data for success
+	req.aardbei_activity_data =
+		{
+			group: group,
+			person: person,
+			activity: activity,
+			state: state
+		};
 }
 
-function set_present(e)
+// Update all references on the page to this activity:
+// 1. The activity's row-color in any tables
+// 2. The present/absent buttons
+function activity_changed(data, textStatus, xhr)
 {
-  var group, person, activity;
-  group = this.dataset["groupId"];
-  person = this.dataset["personId"];
-  activity = this.dataset["activityId"];
-  $.ajax(`/groups/${group}/activities/${activity}/presence`,
-    {
-      method: 'PUT',
-      data: {person_id: person, attending: true}
-    }
-  );
-
-  // Set row state to success
-  $(`tr[data-person-id=${person}][data-activity-id=${activity}]`)
-    .removeClass('danger warning')
-    .addClass('success');
-
-  // Update present buttons
-  $(`.btn-present[data-person-id=${person}][data-activity-id=${activity}]`)
-    .html(check_selected);
-  $(`.btn-absent[data-person-id=${person}][data-activity-id=${activity}]`)
-    .html(times_unselected);
+	// Unpack activity-data
+	var target;
+	target = xhr.aardbei_activity_data;
+
+	// Determine what color and icons we're going to use
+	var new_rowclass;
+	var new_confirm_icon, new_decline_icon;
+	switch (target.state)
+	{
+		case true:
+			new_rowclass = "success";
+			new_confirm_icon = check_selected;
+			new_decline_icon = times_unselected;
+			break;
+
+		case false:
+			new_rowclass = "danger";
+			new_confirm_icon = check_unselected;
+			new_decline_icon = times_selected;
+			break;
+
+		case null:
+			new_rowclass = "warning";
+			new_confirm_icon = check_unselected;
+			new_decline_icon = times_unselected;
+			break;
+	}
+
+	// Update all tr's containing this person's presence
+	$(`tr[data-person-id=${target.person}][data-activity-id=${target.activity}]`)
+	  .removeClass('success danger warning')
+	  .addClass(new_rowclass);
+
+	// Update all buttons for this person's presence
+    $(`.btn-present[data-person-id=${target.person}][data-activity-id=${target.activity}]`)
+      .html(new_confirm_icon);
+    $(`.btn-absent[data-person-id=${target.person}][data-activity-id=${target.activity}]`)
+      .html(new_decline_icon);
 }
 
-function set_absent()
+function alert_failure(data, textStatus, xhr)
 {
-  var group, person, activity;
-  group = this.dataset["groupId"];
-  person = this.dataset["personId"];
-  activity = this.dataset["activityId"];
-  $.ajax(`/groups/${group}/activities/${activity}/presence`,
-    {
-      method: 'PUT',
-      data: {person_id: person, attending: false}
-    }
-  );
-
-  // Set row state to danger
-  $(`tr[data-person-id=${person}][data-activity-id=${activity}]`)
-    .removeClass('success warning')
-    .addClass('danger');
-
-  // Update present buttons
-  $(`.btn-present[data-person-id=${person}][data-activity-id=${activity}]`)
-    .html(check_unselected);
-  $(`.btn-absent[data-person-id=${person}][data-activity-id=${activity}]`)
-    .html(times_selected);
+	alert(`Something broke! We got a ${textStatus}, (${data}).`);
 }
 
 var check_unselected = '<i class="fa fa-check"></i>';

app/views/activities/_presence_buttons.haml

@@ -1,11 +1,11 @@
 .btn-group.btn-group-xs{role: "group"}
-  %button.btn.btn-success.btn-present{data: {person_id: person.id, activity_id: activity.id, group_id: activity.group.id}}
+  %button.btn.btn-success.btn-present.btn-presence{data: {person_id: person.id, activity_id: activity.id, group_id: activity.group.id, new_state: "present"}}
     - if !state
       %i.fa.fa-check
     - else
       %i.fa.fa-check-circle
 
-  %button.btn.btn-danger.btn-absent{data: {person_id: person.id, activity_id: activity.id, group_id: activity.group.id}}
+  %button.btn.btn-danger.btn-absent.btn-presence{data: {person_id: person.id, activity_id: activity.id, group_id: activity.group.id, new_state: "absent"}}
     - if state == false
       %i.fa.fa-times-circle
     - else