CreateReadUpdateDelete QueryMonitor demo

Keep an eye on executed queries with Object.observe

by SchizoDuckie

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://schizoduckie.github.io/CreateReadUpdateDelete.js/src/CRUD.js"></script>
<script src="https://schizoduckie.github.io/CreateReadUpdateDelete.js/src/CRUD.SqliteAdapter.js"></script>
<script src="https://schizoduckie.github.io/CreateReadUpdateDelete.js/demo/Serie.js"></script>
<div class="well"><h1>CreateReadUpdateDelete.js CRUD.stats Demo</h1>
<p>CRUD.stats monitoring via Object.observe</div>
<p>

CreateReadUpdateDelete.js automatically monitors how many insert queries it still has outstanding. With this, you can observe changes to this object and show a progress indicator of all outstanding write operations.
    </p>
    <div><strong>Writes Queued:</strong> <span id="writesQueued">0</span></div>
    <div><strong>Writes Executed:</strong> <span id="writesExecuted">0</span></div>
    <div><strong>Progress:</strong> <span id="progress">0</span>%</div>
 
    <div><strong>Total series in database:</strong> <span id="total">0</span> </div>

    <button class="btn btn-success" id="insert">Insert 1000 records more (press multiple times to queue up more)</button>
    <button class="btn btn-danger" id="wipe">Wipe database and refresh</button>

JavaScript

CRUD.DEBUG = true;
// checkout the console to see debug info by CRUD.SqliteAdapter.js

if(!'openDatabase' in window) {
    alert("Your inferior browser does not support WebSQL. Try Chrome(ium), Safari, Opera, or any other Webkit based browser.");
}

// define some placeholder elements that will receive the CRUD stats.
var progress = document.getElementById('progress'),
    writesQueued = document.getElementById('writesQueued'),
    writesExecuted = document.getElementById('writesExecuted'),
    total = document.getElementById('total');

// observe any changes to CRUD.stats, and write the new values to the placeholders.
Object.observe(CRUD.stats, function(newValues) {
   progress.innerHTML = Math.floor((CRUD.stats.writesExecuted / CRUD.stats.writesQueued) * 100);
   writesQueued.innerHTML = CRUD.stats.writesQueued;
   writesExecuted.innerHTML = CRUD.stats.writesExecuted; 
    if(CRUD.stats.writesQueued == CRUD.stats.writesExecuted) {
        updateCount();
    }
});

// initialize WebSQL database connection
CRUD.setAdapter(new CRUD.SQLiteAdapter('createreadupdatedelete', {
    estimatedSize: 25 * 1024 * 1024
}));

// execute find query and serialize results to screen
function updateCount() {
    CRUD.FindCount(Serie).then(function(count) {
   		total.innerHTML = count;  
	});
}

// drop tables on click and reload page 
document.getElementById('insert').onclick = function() {
    for(var i=0; i<1000; i++) {
        var s = new Serie();
        s.name = 'serie' +i;
        s.TVDB_ID = new Date().getTime()+''+i;
        s.Persist();
    }
    console.log(CRUD.stats);
};

document.getElementById('wipe').onclick = function() {
    CRUD.executeQuery('DELETE from Series where 1').then(function() {
        updateCount();
    });
}

updateCount();