guest_worker/www/worker_specs/script.js

// 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.propery].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()}