chrisseto · March 4, 2016 02:56
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>jQuery Experimenter Interface</title>
  </head>
  <body>
    <select id="exp"></select>
    <select id="session"></select>

    <h1>Experiment Info</h1>
    <pre id="exp"></pre>

    <h1>Session Info</h1>
    <pre id="session"></pre>
    <input type="text"><button>Submit Feedback</button>

    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="/index.js"></script>
  </body>
 </html>
diff --git a/index.js b/index.js
 ;(function(window, $) {
  //Additional docs on JamDB can be found at https://jamdb.readthedocs.org/en/latest/

  var NAMESPACE = 'experimenter';
  var JAM_URL = 'http://localhost:1212';

  //Utility function to go through JamDB's pagination
  function getAll(url, page, accu) {
    page = page || 1; //The current page of data to get
    accu = accu || []; //The accumulated value
    return $.get({
      url: url + '?limit=100&page=' +page,
      dataType: 'json',
      contentType: 'application/json',
    }).then(function(data) {
      //Unwrap data from JSON API and append it to our list
      accu = accu.concat(data.data);
      //If there are more documents to get increment the page and continue the loop
      if (data.meta.total > accu.length)
        return getAll(url, page + 1, accu);
      //No more pages, we can return all the collected documents
      return accu;
    });
  }

  function authenticate() {
    //Authenticate to JamDB, the backend for experimenter
    return $.post({
      url: JAM_URL + '/v1/auth',
      data: JSON.stringify({
        data: {
          type: 'users',
          attributes: {
            provider: 'jam',
            username: 'tester0',
            password: 'password',
            collection: 'accounts',
            namespace: 'experimenter',
          }
        }
      })
    }).then(function(resp) {
     //JamDB returns a JWT to be used as the Authorization header
     //$.ajaxSetup ensures that all of our requests will be authenticated
      var token = resp.data.attributes.token;
      $.ajaxSetup({headers: {Authorization: token}});
    });
  }

  function getExperiments() {
    //Experiments live in the collection experiments under the namespace experimenter
    //All documents, or experiments in this case, may be accessed at either
    // /v1/id/collections/experimenter.experiments/documents Or
    // /v1/namespaces/experimenter/collections/experiments/documents
    var url = JAM_URL + ['/v1/id', 'collections', 'experimenter.experiments', 'documents'].join('/');
    return getAll(url);
  }

  function experimentInfo(experimentId) {
    return $.get({
      url: JAM_URL + ['/v1/id', 'documents', experimentId].join('/')
    }).then(function(data) {
      //Unwrap data from JSON API
      return data.data;
    });
  }

  function getExperimentSessions(experiment) {
    //Get a list of sessions for this experiment
    //Sessions live in a collection determined by their experiment under the namespace experimenter
    //All documents, or sessions in this case, may be accessed at either
    // /v1/id/collections/experimenter.session{experiment short id}s/documents Or
    // /v1/namespaces/experimenter/collections/session{experiment short id}s/documents
     var sessionId = 'experimenter.session' +experiment.attributes.id + 's';
     var url = JAM_URL + ['/v1/id', 'collections', sessionId, 'documents'].join('/');
    return getAll(url);
  }

  function getSessionInfo(sessionId) {
    return $.get({
      url: JAM_URL + ['/v1/id', 'documents', sessionId].join('/')
    }).then(function(data) {
      //Unwrap data from JSON API
      return data.data;
    });
  }

  function setFeedback(sessionId, feedback) {
    //Using JamDB's jsonpatch feature we can update a single field
    //https://jamdb.readthedocs.org/en/latest/api.html#jsonpatch
    return $.ajax({
      method: 'PATCH',
      contentType: 'application/vnd.api+json; ext=jsonpatch',
      url: JAM_URL + ['/v1/id', 'documents', sessionId].join('/'),
      data: JSON.stringify([{
        op: 'add',
        path: '/feedback',
        value: feedback,
      }])
    }).then(function(data){
      return data.data;
    });
  }

  //Event Listeners
  $('select#exp').on('change', function() {
    //Set the pre's text to the chosen experiments info
    experimentInfo($('select#exp').val())
      .then(function(info) {
        $('pre#exp').text(JSON.stringify(info, null, 4));
        return info;
      })
      .then(getExperimentSessions)
      .then(function(sessions) {
        //Load all sessions into our second select
        $.map(sessions, function(session) {
          $('select#session')
            .append($('<option>', {value: session.id})
            .text(session.attributes.id));
        });
        //Make sure no session is currently selected
        $('select#session').val(null);
      });
  });

  $('select#session').on('change', function() {
    getSessionInfo($('select#session').val())
      .then(function(info) {
        $('pre#session').text(JSON.stringify(info, null, 4));
      });
  });

  $('button').on('click', function() {
    setFeedback($('select#session').val(), $('input').val())
      .then(function(info) {
        $('input').val('');
        $('pre#session').text(JSON.stringify(info, null, 4));
      });
  });
  //End Event Listeners

  authenticate()
    .then(getExperiments)
    .then(function(experiments) {
      //Load all experiments into our select
      $.map(experiments, function(experiment) {
        $('select#exp')
          .append($('<option>', {value: experiment.id})
          .text(experiment.attributes.title));
      });

      //Make sure no experiment is currently selected
      $('select#exp').val(null);
    });

 })(window, window.jQuery);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>jQuery Experimenter Interface</title>
	</head>
	<body>
	<select id="exp"></select>
	<select id="session"></select>

	<h1>Experiment Info</h1>
	<pre id="exp"></pre>

	<h1>Session Info</h1>
	<pre id="session"></pre>
	<input type="text"><button>Submit Feedback</button>

	<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
	<script src="/index.js"></script>
	</body>
	</html>
	;(function(window, $) {
	//Additional docs on JamDB can be found at https://jamdb.readthedocs.org/en/latest/

	var NAMESPACE = 'experimenter';
	var JAM_URL = 'http://localhost:1212';

	//Utility function to go through JamDB's pagination
	function getAll(url, page, accu) {
	page = page \|\| 1; //The current page of data to get
	accu = accu \|\| []; //The accumulated value
	return $.get({
	url: url + '?limit=100&page=' +page,
	dataType: 'json',
	contentType: 'application/json',
	}).then(function(data) {
	//Unwrap data from JSON API and append it to our list
	accu = accu.concat(data.data);
	//If there are more documents to get increment the page and continue the loop
	if (data.meta.total > accu.length)
	return getAll(url, page + 1, accu);
	//No more pages, we can return all the collected documents
	return accu;
	});
	}

	function authenticate() {
	//Authenticate to JamDB, the backend for experimenter
	return $.post({
	url: JAM_URL + '/v1/auth',
	data: JSON.stringify({
	data: {
	type: 'users',
	attributes: {
	provider: 'jam',
	username: 'tester0',
	password: 'password',
	collection: 'accounts',
	namespace: 'experimenter',
	}
	}
	})
	}).then(function(resp) {
	//JamDB returns a JWT to be used as the Authorization header
	//$.ajaxSetup ensures that all of our requests will be authenticated
	var token = resp.data.attributes.token;
	$.ajaxSetup({headers: {Authorization: token}});
	});
	}

	function getExperiments() {
	//Experiments live in the collection experiments under the namespace experimenter
	//All documents, or experiments in this case, may be accessed at either
	// /v1/id/collections/experimenter.experiments/documents Or
	// /v1/namespaces/experimenter/collections/experiments/documents
	var url = JAM_URL + ['/v1/id', 'collections', 'experimenter.experiments', 'documents'].join('/');
	return getAll(url);
	}

	function experimentInfo(experimentId) {
	return $.get({
	url: JAM_URL + ['/v1/id', 'documents', experimentId].join('/')
	}).then(function(data) {
	//Unwrap data from JSON API
	return data.data;
	});
	}

	function getExperimentSessions(experiment) {
	//Get a list of sessions for this experiment
	//Sessions live in a collection determined by their experiment under the namespace experimenter
	//All documents, or sessions in this case, may be accessed at either
	// /v1/id/collections/experimenter.session{experiment short id}s/documents Or
	// /v1/namespaces/experimenter/collections/session{experiment short id}s/documents
	var sessionId = 'experimenter.session' +experiment.attributes.id + 's';
	var url = JAM_URL + ['/v1/id', 'collections', sessionId, 'documents'].join('/');
	return getAll(url);
	}

	function getSessionInfo(sessionId) {
	return $.get({
	url: JAM_URL + ['/v1/id', 'documents', sessionId].join('/')
	}).then(function(data) {
	//Unwrap data from JSON API
	return data.data;
	});
	}

	function setFeedback(sessionId, feedback) {
	//Using JamDB's jsonpatch feature we can update a single field
	//https://jamdb.readthedocs.org/en/latest/api.html#jsonpatch
	return $.ajax({
	method: 'PATCH',
	contentType: 'application/vnd.api+json; ext=jsonpatch',
	url: JAM_URL + ['/v1/id', 'documents', sessionId].join('/'),
	data: JSON.stringify([{
	op: 'add',
	path: '/feedback',
	value: feedback,
	}])
	}).then(function(data){
	return data.data;
	});
	}

	//Event Listeners
	$('select#exp').on('change', function() {
	//Set the pre's text to the chosen experiments info
	experimentInfo($('select#exp').val())
	.then(function(info) {
	$('pre#exp').text(JSON.stringify(info, null, 4));
	return info;
	})
	.then(getExperimentSessions)
	.then(function(sessions) {
	//Load all sessions into our second select
	$.map(sessions, function(session) {
	$('select#session')
	.append($('<option>', {value: session.id})
	.text(session.attributes.id));
	});
	//Make sure no session is currently selected
	$('select#session').val(null);
	});
	});

	$('select#session').on('change', function() {
	getSessionInfo($('select#session').val())
	.then(function(info) {
	$('pre#session').text(JSON.stringify(info, null, 4));
	});
	});

	$('button').on('click', function() {
	setFeedback($('select#session').val(), $('input').val())
	.then(function(info) {
	$('input').val('');
	$('pre#session').text(JSON.stringify(info, null, 4));
	});
	});
	//End Event Listeners

	authenticate()
	.then(getExperiments)
	.then(function(experiments) {
	//Load all experiments into our select
	$.map(experiments, function(experiment) {
	$('select#exp')
	.append($('<option>', {value: experiment.id})
	.text(experiment.attributes.title));
	});

	//Make sure no experiment is currently selected
	$('select#exp').val(null);
	});

	})(window, window.jQuery);