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; |
+ } |
+ }); |
+}); |