Skip to content

Instantly share code, notes, and snippets.

@chrisseto

chrisseto/index.html

Last active March 4, 2016 02:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chrisseto/2ec8ec6bfe8bb523da38 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chrisseto/2ec8ec6bfe8bb523da38 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chrisseto revised this gist Mar 3, 2016. 2 changed files with 113 additions and 83 deletions.
    57 changes: 10 additions & 47 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,56 +3,19 @@
    <head>
    <meta charset="utf-8">
    <title>jQuery Experimenter Interface</title>
    <style>
    .spinnie {
    margin: 20px;
    width: 100px;
    height: 100px;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    }
    @-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
    }
    @-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
    }
    @-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin {
    from {
    transform:rotate(0deg);
    }
    to {
    transform:rotate(360deg);
    }
    }
    </style>
    </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>
    <marquee class="spinnie">Loading</marquee>
    <pre id="expInfo"></pre>
    <pre id="sessionInfo"></pre>
    </body>
    </html>
    139 changes: 103 additions & 36 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,47 +1,62 @@
    ;(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';
    var TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE4MTY4NjQ3MTgsInN1YiI6ImphbS1leHBlcmltZW50ZXI6c3lzLXJvb3QifQ.kNjFxlnjzEtQox_lz079iGr_PtTB4DIEyBWpycL3OPw';


    //Utility function to go through JamDB's pagination
    function getAll(url, page, accu) {
    page = page || 1;
    accu = 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
    //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
    //$.post({
    // url: JAM_URL + '/v1/auth',
    // data: JSON.stringify(payload)
    //}).then(function(resp) {
    // //JamDB returns a JWT to be used as the Authorization header
    // //$.ajaxSetup ensures that all of our requests will be authenticated
    //}).then(function() {
    // //Get a list of all experiments

    $.ajaxSetup({headers: {Authorization: TOKEN}});
    return $.Deferred().resolve();
    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) {
    //Get all the info for the given experiment
    return $.get({
    url: JAM_URL + ['/v1/id', 'documents', experimentId].join('/')
    }).then(function(data) {
    @@ -52,38 +67,90 @@

    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) {
    $('marquee')
    .replaceWith($('<select>')
    .on('change', function() {
    experimentInfo($('select').val())
    .then(function(info) {
    $('pre#expInfo').text(JSON.stringify(info, null, 4));
    return info;
    })
    .then(function(info) {
    return getExperimentSessions(info);
    })
    .then(function(sessions) {
    $('pre#sessionInfo').text(JSON.stringify(sessions, null, 4));
    })
    }));

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

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

    })(window, window.jQuery);
    })(window, window.jQuery);
  2. chrisseto created this gist Mar 2, 2016.
    58 changes: 58 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery Experimenter Interface</title>
    <style>
    .spinnie {
    margin: 20px;
    width: 100px;
    height: 100px;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    }
    @-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
    }
    @-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
    }
    @-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin {
    from {
    transform:rotate(0deg);
    }
    to {
    transform:rotate(360deg);
    }
    }
    </style>
    </head>
    <body>
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="/index.js"></script>
    <marquee class="spinnie">Loading</marquee>
    <pre id="expInfo"></pre>
    <pre id="sessionInfo"></pre>
    </body>
    </html>
    89 changes: 89 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,89 @@
    ;(function(window, $) {
    var NAMESPACE = 'experimenter';
    var JAM_URL = 'http://localhost:1212';
    var TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE4MTY4NjQ3MTgsInN1YiI6ImphbS1leHBlcmltZW50ZXI6c3lzLXJvb3QifQ.kNjFxlnjzEtQox_lz079iGr_PtTB4DIEyBWpycL3OPw';


    function getAll(url, page, accu) {
    page = page || 1;
    accu = accu || [];
    return $.get({
    url: url + '?limit=100&page=' +page,
    dataType: 'json',
    contentType: 'application/json',
    }).then(function(data) {
    //Unwrap data from JSON API
    accu = accu.concat(data.data);
    if (data.meta.total > accu.length)
    return getAll(url, page + 1, accu);
    return accu;
    });
    }

    function authenticate() {
    //Authenticate to JamDB, the backend for experimenter
    //$.post({
    // url: JAM_URL + '/v1/auth',
    // data: JSON.stringify(payload)
    //}).then(function(resp) {
    // //JamDB returns a JWT to be used as the Authorization header
    // //$.ajaxSetup ensures that all of our requests will be authenticated
    //}).then(function() {
    // //Get a list of all experiments

    $.ajaxSetup({headers: {Authorization: TOKEN}});
    return $.Deferred().resolve();
    }

    function getExperiments() {
    var url = JAM_URL + ['/v1/id', 'collections', 'experimenter.experiments', 'documents'].join('/');
    return getAll(url);
    }

    function experimentInfo(experimentId) {
    //Get all the info for the given experiment
    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
    var sessionId = 'experimenter.session' +experiment.attributes.id + 's';
    var url = JAM_URL + ['/v1/id', 'collections', sessionId, 'documents'].join('/');
    return getAll(url);
    }

    authenticate()
    .then(getExperiments)
    .then(function(experiments) {
    $('marquee')
    .replaceWith($('<select>')
    .on('change', function() {
    experimentInfo($('select').val())
    .then(function(info) {
    $('pre#expInfo').text(JSON.stringify(info, null, 4));
    return info;
    })
    .then(function(info) {
    return getExperimentSessions(info);
    })
    .then(function(sessions) {
    $('pre#sessionInfo').text(JSON.stringify(sessions, null, 4));
    })
    }));

    $.map(experiments, function(experiment) {
    $('select')
    .append($('<option>', {value: experiment.id})
    .text(experiment.attributes.title));
    });

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

    })(window, window.jQuery);