115 lines
2.9 KiB
JavaScript
115 lines
2.9 KiB
JavaScript
|
|
let spec = {
|
|
worker_id: '-',
|
|
ip_address: '-',
|
|
country: '-',
|
|
start_time: '-',
|
|
time: '-',
|
|
assign_status: '-',
|
|
approval_status: '-'
|
|
}
|
|
|
|
let worker_specs = Object.create(spec),
|
|
prev_specs = Object.create(spec)
|
|
|
|
let divs = {
|
|
worker_id: document.getElementById('worker_id'),
|
|
ip_address: document.getElementById('ip_address'),
|
|
country: document.getElementById('country'),
|
|
time: document.getElementById('time'),
|
|
assign_status: document.getElementById('assign_status'),
|
|
approval_status: document.getElementById('approval_status')
|
|
}
|
|
|
|
let socket = io.connect('/')
|
|
|
|
socket.on('connection', function(){
|
|
console.log('connected to node server')
|
|
})
|
|
|
|
let opacity = 0.1
|
|
|
|
socket.on('workerSpecs', function(data){
|
|
Object.assign(prev_specs, worker_specs)
|
|
worker_specs = data
|
|
opacity = 0
|
|
})
|
|
|
|
|
|
|
|
let display_specs = function(){
|
|
Object.keys(worker_specs).forEach(function(key){
|
|
if(divs[key]){
|
|
divs[key].innerText = worker_specs[key]
|
|
divs[key].style = `opacity: ${opacity}`
|
|
}
|
|
})
|
|
opacity == 1 ? opacity = 0 : opacity += 0.1
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ANIMATION ///////////////////////////////////////////////////////////////////
|
|
|
|
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)
|
|
}
|
|
// render(delta)
|
|
last = now
|
|
requestAnimationFrame(frame)
|
|
}
|
|
requestAnimationFrame(frame)
|
|
}
|
|
|
|
//// update state according to framerate
|
|
function update(step){
|
|
|
|
display_specs()
|
|
|
|
|
|
}
|
|
|
|
//// render as fast as possible
|
|
// function render(delta){
|
|
// }
|
|
|
|
|
|
|
|
|
|
//
|
|
// let time = (new Date().getTime() - worker_specs.start_time) / 1000
|
|
// worker_specs.time = time.toString()
|
|
// Object.keys(worker_specs).forEach( function(key){
|
|
// if(divs[key]) while(divs[key].firstChild){divs[key].removeChild(divs[key].firstChild)}
|
|
// for(let i = 0; i < worker_specs[key].length; i++){
|
|
// let span = document.createElement('span')
|
|
// worker_specs[key][i] == prev_specs[key][i] ? span.className = 'char_normal' : span.className = 'char_big'
|
|
// span.innerText = worker_specs[key][i]
|
|
// if(divs[key]) divs[key].append(span)
|
|
// }
|
|
// })
|
|
// Object.assign(prev_specs, worker_specs)
|
|
|
|
|
|
|
|
|
|
makeAnimation()
|
|
|
|
|
|
function timeStamp(){return window.performance && window.performance.now ? window.performance.now() : new Date().getTime()}
|