119 lines
2.3 KiB
JavaScript
119 lines
2.3 KiB
JavaScript
|
|
// 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()}
|