guest_worker/www/worker_specs/script.js

119 lines
2.3 KiB
JavaScript
Raw Normal View History

2019-11-01 17:30:50 +00:00
// DOM STUFF ///////////////////////////////////////////////////////////////////
let divs = {},
spec_names = [
'worker_id',
'ip',
'location',
'browser',
'os',
'state',
'fee',
'hit_created',
'hit_opened',
'hit_submitted',
2019-11-01 18:03:17 +00:00
'elapsed_time',
'hit_id'
2019-11-01 17:30:50 +00:00
]
divs.linkDOM = function(name){
divs[name] = document.getElementById(`${name}`)
}
spec_names.forEach(function(name){
divs.linkDOM(name)
})
let request_time = timeStamp(),
2019-11-01 17:56:00 +00:00
hit_started = false,
2019-11-01 17:30:50 +00:00
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') {
2019-11-01 17:56:00 +00:00
if(data.value != null){
hit_started = true
hit_finished = false
2019-11-01 19:23:36 +00:00
request_time = new Date()
2019-11-01 17:56:00 +00:00
divs[data.property].innerHTML = `${request_time.format('dd mmm HH:MM:ss')}`
}else{
2019-11-01 19:26:43 +00:00
divs[data.property].innerHTML = `—`
2019-11-01 17:56:00 +00:00
hit_started = false
}
2019-11-01 17:30:50 +00:00
}
else if(data.property === 'hit_submitted'){
hit_finished = true;
}
2019-11-01 17:56:00 +00:00
else if(divs[data.property]){
data.value === null ? divs[data.property].innerHTML = `—` : divs[data.property].innerHTML = `${data.value}`
}
2019-11-01 17:30:50 +00:00
})
// 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"')}`
2019-11-01 17:56:00 +00:00
if(hit_started){
divs['elapsed_time'].innerHTML = elapsed_time
}else{
divs['elapsed_time'].innerHTML = `—`
}
2019-11-01 17:30:50 +00:00
}
makeAnimation()
function timeStamp(){return window.performance && window.performance.now ? window.performance.now() : new Date().getTime()}