var app = new Vue({ el: '#wrapper', data: { hit: {} }, }) var hits = {}; var hitIds = []; // fetch ?all in database let ws = new ReconnectingWebSocket('ws://localhost:8888/status/ws?all') ws.addEventListener('open', () => { // ws.send('hi server') }) ws.addEventListener('message', (event) => { console.log('message: ') let load_hits = JSON.parse(event.data) for(let hit of load_hits) { console.log(hit); hits[hit.id] = hit; if(hit.scanned_at && hitIds.indexOf(hit.id) < 0){ // only add if indeed scanned hitIds.push(hit.id); } } }) var currentI = 0; setInterval(function(e){ if(hitIds.length < 1) { return; } currentI = (currentI + 1) % hitIds.length; let currentHitId = hitIds[currentI]; console.log(currentHitId); let hit = hits[currentHitId]; hit['visible'] = false; app.hit['visible'] = false; setTimeout(() => { app.hit = hits[currentHitId] }, 1000); setTimeout(() => { app.hit['visible'] = true; let wrapperEl = document.getElementById("collaborators"); let innerEl = document.getElementById("collab_items"); let size = 80; do { innerEl.style.fontSize = size + "%"; size --; } while(innerEl.clientHeight > wrapperEl.clientHeight && size > 27); }, 1100); }, 7000);