samchrisinger/index.html

## 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>

## index.js
;
(function(window, $) {
    //Additional docs on JamDB can be found at https://jamdb.readthedocs.org/en/latest/

    //Namespace more or less corresponds with a mongodb database. It is a fully separate set
    //of collections and permissions. Eventually this will transition from 'experimenter' to
    //something like 'mit-lookit'
    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: 'self',
                        username: 'root',
                        password: 'password',
                        collection: 'sys',
                        namespace: NAMESPACE
                    }
                }
            })
        }).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', NAMESPACE + '.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 = NAMESPACE + '.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/

	//Namespace more or less corresponds with a mongodb database. It is a fully separate set
	//of collections and permissions. Eventually this will transition from 'experimenter' to
	//something like 'mit-lookit'
	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: 'self',
	username: 'root',
	password: 'password',
	collection: 'sys',
	namespace: NAMESPACE
	}
	}
	})
	}).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', NAMESPACE + '.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 = NAMESPACE + '.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);