JSFiddle - React, Tailwind, and code Playground

by SimoneGianni

HTML

<script src="https://cdn.firebase.com/js/client/2.2.6/firebase.js"></script>
<div id="buttons">
    <button id="start">Start/stop updating</button>
    <button id="on">Do on</button>
    <button id="off">Do off</button>
    <button id="clean">Clean log</button>
    <hr/>
</div>
<div id="log"></div>

CSS

#log span {
    display: inline-block;
    margin: 2px;
}

#log span.timer {
    display: inline-block;
    width: 80px;
    text-align: right;
    border-top: 1px dashed red;    
}


#log {
    margin-top: 40px;  
}


#buttons {
    position: fixed;
    top:0px;
    width: 100%;
    background: white;
}

#pleaseReload {
     display: none;
}
}

JavaScript

var start = 0;
var pretime = -1;
function timerStart() {
    start = performance.now();
    pretime = -1;
}

function log() {
    var now = Math.floor(performance.now() - start);
    $('#log').append('<span class="timer">' + now + '</span>');
    if (pretime == -1) pretime = now;
    $('#log').append('<span class="timer">+ ' + (now - pretime) + '</span>');
    pretime = now;
    
    var txt = '';
    for (var i = 0; i < arguments.length; i++) {
        txt += JSON.stringify(arguments[i]);
        txt += ' ';
    }
    $('#log').append('<span>' + txt + '</span><br/>');    
}

function askReload() {
    $('#buttons button').remove();
    $('#pleaseReload').show();
}

var baseUrl = "https://onoff-test-simone-gianni.firebaseio-demo.com";
var fbRef = new Firebase(baseUrl + '/upd');
var rows = 100;

$('#clean').click(function() { $('#log *').remove(); });

var upth;
var upcnt = 0;
$('#start').click(function() {
    if (upth) {
        log("Stop updating");
        clearInterval(upth);
        upth = 0;
        return;
    }
    timerStart();
    log("Start updating");
    upth = setInterval(function() {
        var val = upcnt++;
        log("Updating to " + val);
        fbRef.set(val);
    }, 1000);
});

var onfn = null;
var ctx = {};
$('#on').click(function() {
    onfn = fbRef.on('value',function(ds) {
        log("Received", ds.val());
    }, ctx);
});

$('#off').click(function() {
    if (onfn) {
        fbRef.off('value',onfn, ctx);
        onfn = null;
    }
});