| Index: foo/test.js
|
| diff --git a/foo/test.js b/foo/test.js
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..bd27485040923622564df212a44414a55a6b1700
|
| --- /dev/null
|
| +++ b/foo/test.js
|
| @@ -0,0 +1,301 @@
|
| +data = null;
|
| +idx = 0;
|
| +
|
| +nextUpdateId = 0;
|
| +
|
| +urlHolder = document.querySelector('#url-holder');
|
| +dataTable = document.querySelector('#data-table');
|
| +$dataRows = null;
|
| +
|
| +baseImage = document.querySelector('#base-img');
|
| +distilledImage = document.querySelector('#distilled-img');
|
| +imageHolder = document.querySelector('#image-holder');
|
| +
|
| +goodButton = document.querySelector('#good');
|
| +badButton = document.querySelector('#bad');
|
| +resetButton = document.querySelector('#reset');
|
| +poorButton = document.querySelector('#poor');
|
| +errorButton = document.querySelector('#error');
|
| +
|
| +function changeIndex(newIndex) {
|
| + var oldIndex = idx;
|
| + idx = Math.max(0, Math.min(data.length - 1, newIndex));
|
| + showImage(idx);
|
| + $dataRows.eq(oldIndex).removeClass('active');
|
| + var $currentRow = $dataRows.eq(idx);
|
| + $currentRow.addClass('active');
|
| + $currentRow[0].scrollIntoViewIfNeeded();
|
| + $('.current-position').text(idx + 1);
|
| +}
|
| +
|
| +function recordValue(v) {
|
| + var e = data[idx];
|
| + e['good'] = v;
|
| + updateTableRow(idx);
|
| + sendUpdate(e, function() {
|
| + changeIndex(idx + 1);
|
| + });
|
| +}
|
| +
|
| +function recordGood() {
|
| + recordValue(1);
|
| +}
|
| +
|
| +function recordBad() {
|
| + recordValue(0);
|
| +}
|
| +
|
| +function recordError() {
|
| + recordValue(-1);
|
| +}
|
| +
|
| +function resetEntry() {
|
| + var e = data[idx];
|
| + delete e['good']
|
| + updateTableRow(idx);
|
| + sendUpdate(e, function() {
|
| + });
|
| +}
|
| +
|
| +function sendMessage(type, message, callback) {
|
| + $.ajax({
|
| + 'type': type,
|
| + 'url': '/message',
|
| + 'contentType': 'application/json',
|
| + 'processData': false,
|
| + 'data': JSON.stringify(message),
|
| + 'error': function(response, status) {
|
| + console.log('wtf response: ', response, status);
|
| + },
|
| + 'success': function(response) {
|
| + console.log('response: ', response);
|
| + callback(response);
|
| + },
|
| + 'dataType': 'json',
|
| + });
|
| +}
|
| +
|
| +function sendUpdate(e, callback) {
|
| + sendMessage(
|
| + 'POST',
|
| + {
|
| + 'action': 'update',
|
| + 'data': e,
|
| + },
|
| + callback);
|
| +}
|
| +
|
| +function back() {
|
| + changeIndex(idx - 1);
|
| +}
|
| +
|
| +function skip() {
|
| + changeIndex(idx + 1);
|
| +}
|
| +
|
| +poorButton.onclick = function() { recordValue(2); }
|
| +goodButton.onclick = recordGood
|
| +badButton.onclick = recordBad
|
| +resetButton.onclick = resetEntry
|
| +errorButton.onclick = recordError
|
| +$('.right-caret').click(skip);
|
| +$('.left-caret').click(back);
|
| +
|
| +function showImage(i) {
|
| + goodButton.disabled = false;
|
| + badButton.disabled = false;
|
| + var e = data[i]
|
| + baseImage.src = '/images/' + e['screenshot'].replace(/.*\//, '')
|
| + distilledImage.src = '/images/' + e['distilled'].replace(/.*\//, '')
|
| + urlHolder.innerText = e['url']
|
| + urlHolder.href = e['url']
|
| + imageHolder.classList.remove('bad');
|
| + imageHolder.classList.remove('good');
|
| + imageHolder.classList.remove('error');
|
| + imageHolder.classList.remove('poor');
|
| + if (typeof e['good'] != 'undefined') {
|
| + imageHolder.classList.add(
|
| + e['good'] == 1
|
| + ? 'good'
|
| + : e['good'] == -1
|
| + ? 'error'
|
| + : e['good'] == 2
|
| + ? 'poor'
|
| + : 'bad');
|
| + }
|
| +}
|
| +
|
| +function updateTableRow(i) {
|
| + var row = dataTable.querySelectorAll('tr')[i];
|
| + row.classList.remove('good');
|
| + row.classList.remove('bad');
|
| + row.classList.remove('error');
|
| + row.classList.remove('poor');
|
| + var e = data[i];
|
| + if (typeof e['good'] != 'undefined') {
|
| + row.classList.add(
|
| + e['good'] == 1
|
| + ? 'good'
|
| + : e['good'] == -1
|
| + ? 'error'
|
| + : e['good'] == 2
|
| + ? 'poor'
|
| + : 'bad');
|
| + }
|
| + if (i == idx) {
|
| + // forces ui update
|
| + changeIndex(idx);
|
| + }
|
| +}
|
| +
|
| +function createTable() {
|
| + var dataRows = [];
|
| + for (var i = 0; i < data.length; i++) {
|
| + row = document.createElement('tr');
|
| + cell = document.createElement('td');
|
| + row.appendChild(cell);
|
| + cell.appendChild(document.createTextNode(data[i]['url']));
|
| + dataTable.appendChild(row);
|
| + dataRows.push(row);
|
| + }
|
| +
|
| + $dataRows = $(dataRows);
|
| +
|
| + $dataRows.each(function(i, r) {
|
| + $(r).click(function() {
|
| + console.log(i);
|
| + // forces ui update
|
| + changeIndex(i);
|
| + });
|
| + })
|
| +}
|
| +
|
| +function setData(d, i) {
|
| + var needsTable = data == null;
|
| + data = d; //.slice(0, 100);
|
| + $('.total-entries').text(data.length);
|
| + if (needsTable) {
|
| + createTable();
|
| + }
|
| + for (var i = 0; i < data.length; i++) {
|
| + updateTableRow(i);
|
| + }
|
| +}
|
| +
|
| +function handleVisibilityChange() {
|
| + if (!document.hidden) sendGetUpdates(1000);
|
| +}
|
| +
|
| +function getData() {
|
| + sendMessage(
|
| + 'POST',
|
| + {
|
| + 'action': 'getData'
|
| + },
|
| + function(rsp) {
|
| + document.addEventListener('visibilitychange', handleVisibilityChange, false);
|
| + var data = rsp['response']['data'];
|
| + nextUpdateId = rsp['response']['nextId'];
|
| + setData(data);
|
| + var startIndex = parseInt(window.location.hash.substr(1)) - 1;
|
| + if (isNaN(startIndex)) {
|
| + startIndex = 0;
|
| + }
|
| + changeIndex(startIndex);
|
| + sendGetUpdates(1000);
|
| + }
|
| + );
|
| +}
|
| +
|
| +
|
| +getUpdatesSent = false;
|
| +function sendGetUpdates(delay) {
|
| + if (document.hidden) return;
|
| + if (getUpdatesSent) return;
|
| + getUpdatesSent = true;
|
| + setTimeout(function() { getUpdates(delay); }, delay);
|
| +}
|
| +
|
| +function getUpdates(delay) {
|
| + $.ajax({
|
| + 'type': 'GET',
|
| + 'url': '/getupdates?nextId=' + nextUpdateId,
|
| + 'contentType': 'application/json',
|
| + 'processData': false,
|
| + 'error': function(response, status) {
|
| + console.log('xx: wtf response: ', response, status);
|
| + },
|
| + 'success': function(rawResponse) {
|
| + getUpdatesSent = false;
|
| + var response = rawResponse['response'];
|
| + nextUpdateId = response['nextId'];
|
| + if (response['data'] != null) {
|
| + setData(response['data']);
|
| + } else if (response['updates'] != null) {
|
| + updates = response['updates'];
|
| + for (var i = 0; i < updates.length; i++) {
|
| + var u = updates[i];
|
| + var idx = u['index'];
|
| + var entry = u['entry'];
|
| + var curr = data[idx];
|
| + if (curr['url'] != entry['url']) {
|
| + console.error(curr, entry);
|
| + }
|
| + data[idx] = entry;
|
| + updateTableRow(idx);
|
| + }
|
| + nextUpdateId = nextUpdateId;
|
| + delay = 1000;
|
| + } else {
|
| + delay = Math.min(30 * 1000, 1.5 * delay);
|
| + }
|
| + console.log('xx: response: ', response, delay);
|
| + sendGetUpdates(delay);
|
| + },
|
| + 'dataType': 'json',
|
| + });
|
| +}
|
| +
|
| +logkeys = false
|
| +$(document).ready(function(){
|
| + getData();
|
| + $(document).keypress(function(e){
|
| + if (logkeys) {
|
| + console.log(e)
|
| + }
|
| + switch (e.which) {
|
| + case 93: // /
|
| + case 47: // ]
|
| + recordValue(2);
|
| + break;
|
| + case 42: // *
|
| + case 48: // 0
|
| + recordError();
|
| + break;
|
| + case 43: // +
|
| + case 61: // =
|
| + recordGood();
|
| + break;
|
| + case 45: // -
|
| + recordBad();
|
| + break;
|
| + }
|
| + });
|
| + $(document).keydown(function(e) {
|
| + switch (e.which) {
|
| + case 37: // <--
|
| + case 39: // >--
|
| + e.preventDefault();
|
| + }
|
| + });
|
| + $(document).keyup(function(e){
|
| + switch (e.which) {
|
| + case 37: // <--
|
| + back();
|
| + break;
|
| + case 39: // >--
|
| + skip();
|
| + break;
|
| + }
|
| + });
|
| +});
|
|
|