
33 changed files with 392 additions and 728 deletions
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,33 +0,0 @@
@@ -1,33 +0,0 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<link rel="stylesheet" type="text/css" href="style.css" /> |
||||
<script src='/socket.io/socket.io.js'></script> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<div id="wrapper"> |
||||
<div id="logo"> <img src="amazon.svg" /> </div> |
||||
<table> |
||||
<thead> |
||||
<tr> |
||||
<th>worker id</th> |
||||
<th>ip address</th> |
||||
<th>country</th> |
||||
<th>fee</th> |
||||
<th>task start time</th> |
||||
<th>task completion time</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
|
||||
|
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
|
||||
<script src="script.js"></script> |
||||
</body> |
||||
</html> |
@ -1,12 +0,0 @@
@@ -1,12 +0,0 @@
|
||||
|
||||
|
||||
let list = document.querySelector("tbody") |
||||
let testdata = `<td>AMZ3976824398</td><td>234.183.281.221</td><td>united states</td><td>€0.20</td><td>wed 30 oct 14:56</td><td>04m 37s</td>` |
||||
|
||||
for(let i=0; i < 200; i++){ |
||||
|
||||
let entry = document.createElement('tr') |
||||
entry.innerHTML = testdata |
||||
list.append(entry) |
||||
|
||||
} |
@ -1,110 +0,0 @@
@@ -1,110 +0,0 @@
|
||||
@font-face { |
||||
font-family: 'bebas'; |
||||
src: url('font/BebasNeue-Regular.ttf'); |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'freesans'; |
||||
src: url('font/FreeSans.ttf') |
||||
} |
||||
|
||||
|
||||
:root{ |
||||
|
||||
--base-font-size: 12px; |
||||
--spec_name-font-size: 120%; |
||||
--spec_value-font-size: 250%; |
||||
|
||||
--base-color: #271601; /* tekst */ |
||||
--alt-color: #FFF5DF; /* achtergrond */ |
||||
--amazon-color: #F0C14C; |
||||
|
||||
/* ////// GAT ACHTERKANT PLEK & POSITIE /////// */ |
||||
/* */ /* */ |
||||
/* */ --pos-x: 20px; /* */ |
||||
/* */ --pos-y: 20px; /* */ |
||||
/* */ --width: 90%; /* 115mm */ |
||||
/* */ --height: 100%; /* 500mm */ |
||||
/* */ /* */ |
||||
/* //////////////////////////////////////////// */ |
||||
|
||||
} |
||||
|
||||
|
||||
html, body{ |
||||
margin: 0; |
||||
padding: 0; |
||||
border: 0; |
||||
text-decoration: none; |
||||
font-family: 'freesans'; |
||||
font-size: var(--base-font-size); |
||||
line-height: 1.1; |
||||
background: #555; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
#logo{ |
||||
background: #555; |
||||
width: 100%; |
||||
padding: 2% 0% 1% 0%; |
||||
text-align: right; |
||||
} |
||||
|
||||
#wrapper{ |
||||
|
||||
position: absolute; |
||||
left: var(--pos-x); |
||||
top: var(--pos-y); |
||||
width: var(--width); |
||||
/* height: var(--height); */ |
||||
|
||||
background: var(--alt-color); |
||||
box-sizing: border-box; |
||||
/* padding: 2%; */ |
||||
} |
||||
|
||||
|
||||
table{ |
||||
display: grid; |
||||
border-collapse: collapse; |
||||
min-width: 100%; |
||||
grid-template-columns: repeat(6, 1fr); |
||||
} |
||||
|
||||
thead, tbody, tr{ |
||||
display: contents; |
||||
} |
||||
|
||||
|
||||
th, |
||||
td { |
||||
padding: 2%; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
th { |
||||
position: -webkit-sticky; |
||||
position: sticky; |
||||
background-image: linear-gradient(var(--alt-color), var(--amazon-color)) ; |
||||
top: 0; |
||||
text-align: left; |
||||
font-weight: normal; |
||||
font-size: 1.1rem; |
||||
color: var(--base-color); |
||||
} |
||||
|
||||
th:last-child { |
||||
border: 0; |
||||
} |
||||
|
||||
td { |
||||
padding-top: 2%; |
||||
padding-bottom: 2%; |
||||
color: #808080; |
||||
} |
||||
|
||||
tr:nth-child(even) td { |
||||
background: #f8f6f9; |
||||
} |
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
* |
||||
!.gitignore |
||||
|
@ -1,3 +0,0 @@
@@ -1,3 +0,0 @@
|
||||
<a href="worker_specs/index.html">worker specs</a><br /> |
||||
<a href="animation/index.html">frame animation</a><br /> |
||||
<a href="backend/index.html">backend</a> |
@ -1,125 +0,0 @@
@@ -1,125 +0,0 @@
|
||||
/* |
||||
* Date Format 1.2.3 |
||||
* (c) 2007-2009 Steven Levithan <stevenlevithan.com> |
||||
* MIT license |
||||
* |
||||
* Includes enhancements by Scott Trenda <scott.trenda.net> |
||||
* and Kris Kowal <cixar.com/~kris.kowal/> |
||||
* |
||||
* Accepts a date, a mask, or a date and a mask. |
||||
* Returns a formatted version of the given date. |
||||
* The date defaults to the current date/time. |
||||
* The mask defaults to dateFormat.masks.default. |
||||
*/ |
||||
|
||||
var dateFormat = function () { |
||||
var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g, |
||||
timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g, |
||||
timezoneClip = /[^-+\dA-Z]/g, |
||||
pad = function (val, len) { |
||||
val = String(val); |
||||
len = len || 2; |
||||
while (val.length < len) val = "0" + val; |
||||
return val; |
||||
}; |
||||
|
||||
// Regexes and supporting functions are cached through closure
|
||||
return function (date, mask, utc) { |
||||
var dF = dateFormat; |
||||
|
||||
// You can't provide utc if you skip other args (use the "UTC:" mask prefix)
|
||||
if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) { |
||||
mask = date; |
||||
date = undefined; |
||||
} |
||||
|
||||
// Passing date through Date applies Date.parse, if necessary
|
||||
date = date ? new Date(date) : new Date; |
||||
if (isNaN(date)) throw SyntaxError("invalid date"); |
||||
|
||||
mask = String(dF.masks[mask] || mask || dF.masks["default"]); |
||||
|
||||
// Allow setting the utc argument via the mask
|
||||
if (mask.slice(0, 4) == "UTC:") { |
||||
mask = mask.slice(4); |
||||
utc = true; |
||||
} |
||||
|
||||
var _ = utc ? "getUTC" : "get", |
||||
d = date[_ + "Date"](), |
||||
D = date[_ + "Day"](), |
||||
m = date[_ + "Month"](), |
||||
y = date[_ + "FullYear"](), |
||||
H = date[_ + "Hours"](), |
||||
M = date[_ + "Minutes"](), |
||||
s = date[_ + "Seconds"](), |
||||
L = date[_ + "Milliseconds"](), |
||||
o = utc ? 0 : date.getTimezoneOffset(), |
||||
flags = { |
||||
d: d, |
||||
dd: pad(d), |
||||
ddd: dF.i18n.dayNames[D], |
||||
dddd: dF.i18n.dayNames[D + 7], |
||||
m: m + 1, |
||||
mm: pad(m + 1), |
||||
mmm: dF.i18n.monthNames[m], |
||||
mmmm: dF.i18n.monthNames[m + 12], |
||||
yy: String(y).slice(2), |
||||
yyyy: y, |
||||
h: H % 12 || 12, |
||||
hh: pad(H % 12 || 12), |
||||
H: H, |
||||
HH: pad(H), |
||||
M: M, |
||||
MM: pad(M), |
||||
s: s, |
||||
ss: pad(s), |
||||
l: pad(L, 3), |
||||
L: pad(L > 99 ? Math.round(L / 10) : L), |
||||
t: H < 12 ? "a" : "p", |
||||
tt: H < 12 ? "am" : "pm", |
||||
T: H < 12 ? "A" : "P", |
||||
TT: H < 12 ? "AM" : "PM", |
||||
Z: utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""), |
||||
o: (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4), |
||||
S: ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10] |
||||
}; |
||||
|
||||
return mask.replace(token, function ($0) { |
||||
return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1); |
||||
}); |
||||
}; |
||||
}(); |
||||
|
||||
// Some common format strings
|
||||
dateFormat.masks = { |
||||
"default": "ddd mmm dd yyyy HH:MM:ss", |
||||
shortDate: "m/d/yy", |
||||
mediumDate: "mmm d, yyyy", |
||||
longDate: "mmmm d, yyyy", |
||||
fullDate: "dddd, mmmm d, yyyy", |
||||
shortTime: "h:MM TT", |
||||
mediumTime: "h:MM:ss TT", |
||||
longTime: "h:MM:ss TT Z", |
||||
isoDate: "yyyy-mm-dd", |
||||
isoTime: "HH:MM:ss", |
||||
isoDateTime: "yyyy-mm-dd'T'HH:MM:ss", |
||||
isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'" |
||||
}; |
||||
|
||||
// Internationalization strings
|
||||
dateFormat.i18n = { |
||||
dayNames: [ |
||||
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", |
||||
"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" |
||||
], |
||||
monthNames: [ |
||||
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", |
||||
"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" |
||||
] |
||||
}; |
||||
|
||||
// For convenience...
|
||||
Date.prototype.format = function (mask, utc) { |
||||
return dateFormat(this, mask, utc); |
||||
}; |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,58 +0,0 @@
@@ -1,58 +0,0 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<link rel="stylesheet" type="text/css" href="style.css" /> |
||||
<script src='dateformat.js'></script> |
||||
<script src='reconnecting-websocket.min.js'></script> |
||||
</head> |
||||
<body> |
||||
|
||||
<div id="wrapper"> |
||||
|
||||
<!-- <div class="phase" id="waiting_for_human"> |
||||
<span class="narrative_phase_text">waiting for human worker to accept task</span> |
||||
</div> |
||||
|
||||
<div class="phase" id="human_accepted_task"> |
||||
<span class="narrative_phase_text">task accepted by human worker</span> |
||||
</div> --> |
||||
|
||||
<div class="phase" id="worker_specs"> |
||||
<span class="grid-item spec_name" id="hit_id_descriptor">human intelligent task id</span> |
||||
<span class="grid-item spec_value" id="hit_id"> </span> |
||||
|
||||
<span class="grid-item spec_name" id="worker_id_descriptor">human worker id</span> |
||||
<span class="grid-item spec_value" id="worker_id"> </span> |
||||
<span class="grid-item spec_name" id="ip_descriptor">ip address</span> |
||||
<span class="grid-item spec_value" id="ip"> </span> |
||||
<span class="grid-item spec_name" id="location_descriptor">location</span> |
||||
<span class="grid-item spec_value" id="location"> </span> |
||||
<span class="grid-item spec_name" id="browser_descriptor">browser</span> |
||||
<span class="grid-item spec_value" id="browser"> </span> |
||||
<span class="grid-item spec_name" id="os_descriptor">os</span> |
||||
<span class="grid-item spec_value" id="os"> </span> |
||||
|
||||
<span class="grid-item spec_name" id="hit_opened_descriptor">task started at</span> |
||||
<span class="grid-item spec_value" id="hit_opened"> </span> |
||||
<span class="grid-item spec_name" id="state_descriptor">task status</span> |
||||
<span class="grid-item spec_value" id="state"> </span> |
||||
<span class="grid-item spec_name" id="fee_descriptor">task fee</span> |
||||
<span class="grid-item spec_value" id="fee"> </span> |
||||
|
||||
|
||||
<span class="grid-item spec_name" id="elapsed_time_descriptor">time elapsed</span> |
||||
<span class="grid-item spec_value" id="elapsed_time"> </span> |
||||
</div> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div> |
||||
|
||||
<script src="script.js"></script> |
||||
</body> |
||||
</html> |
@ -1 +0,0 @@
@@ -1 +0,0 @@
|
||||
!function(a,b){"function"==typeof define&&define.amd?define([],b):"undefined"!=typeof module&&module.exports?module.exports=b():a.ReconnectingWebSocket=b()}(this,function(){function a(b,c,d){function l(a,b){var c=document.createEvent("CustomEvent");return c.initCustomEvent(a,!1,!1,b),c}var e={debug:!1,automaticOpen:!0,reconnectInterval:1e3,maxReconnectInterval:3e4,reconnectDecay:1.5,timeoutInterval:2e3};d||(d={});for(var f in e)this[f]="undefined"!=typeof d[f]?d[f]:e[f];this.url=b,this.reconnectAttempts=0,this.readyState=WebSocket.CONNECTING,this.protocol=null;var h,g=this,i=!1,j=!1,k=document.createElement("div");k.addEventListener("open",function(a){g.onopen(a)}),k.addEventListener("close",function(a){g.onclose(a)}),k.addEventListener("connecting",function(a){g.onconnecting(a)}),k.addEventListener("message",function(a){g.onmessage(a)}),k.addEventListener("error",function(a){g.onerror(a)}),this.addEventListener=k.addEventListener.bind(k),this.removeEventListener=k.removeEventListener.bind(k),this.dispatchEvent=k.dispatchEvent.bind(k),this.open=function(b){h=new WebSocket(g.url,c||[]),b||k.dispatchEvent(l("connecting")),(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","attempt-connect",g.url);var d=h,e=setTimeout(function(){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","connection-timeout",g.url),j=!0,d.close(),j=!1},g.timeoutInterval);h.onopen=function(){clearTimeout(e),(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onopen",g.url),g.protocol=h.protocol,g.readyState=WebSocket.OPEN,g.reconnectAttempts=0;var d=l("open");d.isReconnect=b,b=!1,k.dispatchEvent(d)},h.onclose=function(c){if(clearTimeout(e),h=null,i)g.readyState=WebSocket.CLOSED,k.dispatchEvent(l("close"));else{g.readyState=WebSocket.CONNECTING;var d=l("connecting");d.code=c.code,d.reason=c.reason,d.wasClean=c.wasClean,k.dispatchEvent(d),b||j||((g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onclose",g.url),k.dispatchEvent(l("close")));var e=g.reconnectInterval*Math.pow(g.reconnectDecay,g.reconnectAttempts);setTimeout(function(){g.reconnectAttempts++,g.open(!0)},e>g.maxReconnectInterval?g.maxReconnectInterval:e)}},h.onmessage=function(b){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onmessage",g.url,b.data);var c=l("message");c.data=b.data,k.dispatchEvent(c)},h.onerror=function(b){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onerror",g.url,b),k.dispatchEvent(l("error"))}},1==this.automaticOpen&&this.open(!1),this.send=function(b){if(h)return(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","send",g.url,b),h.send(b);throw"INVALID_STATE_ERR : Pausing to reconnect websocket"},this.close=function(a,b){"undefined"==typeof a&&(a=1e3),i=!0,h&&h.close(a,b)},this.refresh=function(){h&&h.close()}}return a.prototype.onopen=function(){},a.prototype.onclose=function(){},a.prototype.onconnecting=function(){},a.prototype.onmessage=function(){},a.prototype.onerror=function(){},a.debugAll=!1,a.CONNECTING=WebSocket.CONNECTING,a.OPEN=WebSocket.OPEN,a.CLOSING=WebSocket.CLOSING,a.CLOSED=WebSocket.CLOSED,a}); |
@ -1,118 +0,0 @@
@@ -1,118 +0,0 @@
|
||||
|
||||
// DOM STUFF ///////////////////////////////////////////////////////////////////
|
||||
|
||||
let divs = {}, |
||||
spec_names = [ |
||||
'worker_id', |
||||
'ip', |
||||
'location', |
||||
'browser', |
||||
'os', |
||||
'state', |
||||
'fee', |
||||
'hit_created', |
||||
'hit_opened', |
||||
'hit_submitted', |
||||
'elapsed_time', |
||||
'hit_id' |
||||
] |
||||
|
||||
divs.linkDOM = function(name){ |
||||
divs[name] = document.getElementById(`${name}`) |
||||
} |
||||
|
||||
spec_names.forEach(function(name){ |
||||
divs.linkDOM(name) |
||||
}) |
||||
|
||||
|
||||
|
||||
let request_time = timeStamp(), |
||||
hit_started = false, |
||||
elapsed_time, |
||||
hit_finished = false |
||||
|
||||
|
||||
// SOCKET STUFF ////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
let ws = new ReconnectingWebSocket('ws://localhost:8888/status/ws') |
||||
|
||||
|
||||
ws.addEventListener('open', () => { |
||||
// ws.send('hi server')
|
||||
}) |
||||
|
||||
|
||||
ws.addEventListener('message', (event) => { |
||||
console.log('message: ' + event.data) |
||||
|
||||
let data = JSON.parse(event.data) |
||||
if(data.property === 'hit_opened') { |
||||
if(data.value != null){ |
||||
hit_started = true |
||||
hit_finished = false |
||||
request_time = new Date() |
||||
divs[data.property].innerHTML = `${request_time.format('dd mmm HH:MM:ss')}` |
||||
}else{ |
||||
divs[data.property].innerHTML = `—` |
||||
hit_started = false |
||||
} |
||||
} |
||||
else if(data.property === 'hit_submitted'){ |
||||
hit_finished = true; |
||||
} |
||||
else if(divs[data.property]){ |
||||
data.value === null ? divs[data.property].innerHTML = `—` : divs[data.property].innerHTML = `${data.value}` |
||||
} |
||||
}) |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ANIMATION STUFF /////////////////////////////////////////////////////////////
|
||||
|
||||
let frames, |
||||
frames_per_sec = 10, |
||||
current_frame = 0 |
||||
|
||||
|
||||
|
||||
function makeAnimation(){ |
||||
let now, |
||||
delta = 0, |
||||
last = timeStamp(), |
||||
step = 1/frames_per_sec |
||||
function frame() { |
||||
now = timeStamp() |
||||
delta += Math.min(1, (now - last) / 1000) |
||||
while(delta > step){ |
||||
delta -= step |
||||
update(step) |
||||
} |
||||
last = now |
||||
requestAnimationFrame(frame) |
||||
} |
||||
requestAnimationFrame(frame) |
||||
} |
||||
|
||||
function update(step){ |
||||
|
||||
if(!hit_finished) elapsed_time = `${new Date((Date.now() - request_time)).format('MM"m "ss"s"')}` |
||||
if(hit_started){ |
||||
divs['elapsed_time'].innerHTML = elapsed_time |
||||
}else{ |
||||
divs['elapsed_time'].innerHTML = `—` |
||||
} |
||||
} |
||||
|
||||
|
||||
makeAnimation() |
||||
|
||||
|
||||
function timeStamp(){return window.performance && window.performance.now ? window.performance.now() : new Date().getTime()} |
@ -1,93 +0,0 @@
@@ -1,93 +0,0 @@
|
||||
@font-face { |
||||
font-family: 'bebas'; |
||||
src: url('font/BebasNeue-Regular.ttf'); |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'freesans'; |
||||
src: url('font/FreeSans.ttf') |
||||
} |
||||
|
||||
|
||||
:root{ |
||||
|
||||
--base-font-size: 22px; |
||||
--spec_name-font-size: 120%; |
||||
--spec_value-font-size: 250%; |
||||
|
||||
--base-color: #271601; /* tekst */ |
||||
--alt-color: #FFF5DF; /* achtergrond */ |
||||
|
||||
/* /////// GAT VOORKANT PLEK & POSITIE //////// */ |
||||
/* */ /* */ |
||||
/* */ --pos-x: 555px; /* */ |
||||
/* */ --pos-y: 120px; /* */ |
||||
/* */ --width: 420px; /* 115mm */ |
||||
/* */ --height: 1000px; /* 270mm */ |
||||
/* */ /* */ |
||||
/* //////////////////////////////////////////// */ |
||||
|
||||
} |
||||
|
||||
|
||||
html, body{ |
||||
margin: 0; |
||||
padding: 0; |
||||
border: 0; |
||||
text-decoration: none; |
||||
font-family: 'bebas'; |
||||
font-size: var(--base-font-size); |
||||
line-height: 1.1; |
||||
background: var(--alt-color); |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
#wrapper{ |
||||
|
||||
position: absolute; |
||||
left: var(--pos-x); |
||||
top: var(--pos-y); |
||||
width: var(--width); |
||||
height: var(--height); |
||||
|
||||
background: var(--alt-color); |
||||
box-sizing: border-box; |
||||
padding: 2%; |
||||
} |
||||
|
||||
|
||||
#worker_specs{ |
||||
display:grid; |
||||
grid-template-columns: 1fr ; |
||||
grid-template-rows: repeat(50, 1fr 2fr); |
||||
} |
||||
|
||||
.grid-item{ |
||||
color: var(--base-color); |
||||
} |
||||
|
||||
.spec_name{ |
||||
font-size: var(--spec_name-font-size); |
||||
font-family: 'freesans'; |
||||
} |
||||
|
||||
.spec_value{ |
||||
font-size: var(--spec_value-font-size); |
||||
padding-bottom: 2%; |
||||
} |
||||
|
||||
|
||||
.phase{ |
||||
display:none; |
||||
} |
||||
|
||||
|
||||
.phase:not(#worker_specs){ |
||||
padding-top: 100%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.narrative_phase_text{ |
||||
font-size: var(--spec_value-font-size); |
||||
} |