diff options
Diffstat (limited to 'public')
-rw-r--r-- | public/css/style.css | 32 | ||||
-rw-r--r-- | public/index.html | 7 | ||||
-rw-r--r-- | public/js/mv/load.js | 129 |
3 files changed, 121 insertions, 47 deletions
diff --git a/public/css/style.css b/public/css/style.css index 2272814..738449e 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -257,3 +257,35 @@ a:hover { color: #005580; text-decoration: underline; } + +.button { + border-top: 1px solid #96d1f8; + background: #65a9d7; + background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); + background: -webkit-linear-gradient(top, #3e779d, #65a9d7); + background: -moz-linear-gradient(top, #3e779d, #65a9d7); + background: -ms-linear-gradient(top, #3e779d, #65a9d7); + background: -o-linear-gradient(top, #3e779d, #65a9d7); + padding: 6px 12px; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; + -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; + -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; + box-shadow: rgba(0,0,0,1) 0 1px 0; + text-shadow: rgba(0,0,0,.4) 0 1px 0; + color: white; + font-size: 13px; + font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; + text-decoration: none; + vertical-align: middle; +} +.button:hover { + border-top-color: #28597a; + background: #28597a; + color: #ccc; +} +.button:active { + border-top-color: #1b435e; + background: #1b435e; +} diff --git a/public/index.html b/public/index.html index 67e83a4..e3ad3c3 100644 --- a/public/index.html +++ b/public/index.html @@ -75,8 +75,11 @@ <p>Both raw server logs (.log) and scrubbed datasets (.scrubbed) will work fine. If using the latter, make sure it has .scrubbed in the file name!</p> <p>You can load any number of files at once.</p> <p>Please note that this is very js intensive. The tab may briefly lock up as it loads everything.</p> - <input type="file" id="input" name="records[]" multiple /> - <output id="list"></output> + <div> + <input type="file" id="input" name="records[]" multiple /> + <output id="list"></output> + or <a href="javascript:mv.loader.use(['/logs/map.scrubbed.latest.zip']);" class="button">Use the most recent dataset</a> + </div> <div id="filesbar" class="progressbar fader"> <div class="percent">0%</div> </div> diff --git a/public/js/mv/load.js b/public/js/mv/load.js index 56edf76..765707f 100644 --- a/public/js/mv/load.js +++ b/public/js/mv/load.js @@ -2,9 +2,9 @@ var mv = function(mv) { mv.loader = { /* Callbacks */ - onbulkstart: onbulkstart, - onloadstart: onloadstart, - onprogress: onprogress, + onbulkstart: nullFunc, + onloadstart: nullFunc, + onprogress: nullFunc, onabort: onabort, onerror: onerror, /* File state accessors */ @@ -13,6 +13,8 @@ var mv = function(mv) { curfile: function() { return curfile; }, /* Callback */ setname: function(n) {}, + /* Use an array of URLs for loading, via d3.xhr */ + use: use, /* Initialise the loader module */ init: init, } @@ -20,10 +22,16 @@ var mv = function(mv) { var numfiles = 0; var filenames = []; var curfile = 0; - var files; - function onbulkstart(fevt) {} - function onloadstart(evt) {} - function onprogress(evt) {} + /* Function to handle the loading of the next file - should invoke loadBlobable */ + var nextFile; + /* Function to be called after all loading */ + var postLoadAll; + /* The reader used to handle files once the request is complete */ + var reader; + /* Dummy function */ + function nullFunc() {}; + /* Basic error functions - you probably want to override these */ + /* TODO: Make the defaults a little more sensible */ function onabort(evt) { alert('File load aborted!'); } @@ -41,50 +49,81 @@ var mv = function(mv) { alert('An error occurred reading this file.'); }; } + function use(urllist) { + /* Load files using d3's xhr requests */ + numfiles = urllist.length + filenames = urllist; + nextFile = function() { + mv.loader.setname(urllist[curfile] + "'; 'Downloading"); + var req = d3.xhr(urllist[curfile]) + .on('progress', function(d, i) { reader.onprogress(d3.event); }) + .on('load', function(d) { + console.log(typeof(d), typeof(d) == "object" ? d : d.length); + loadBlobable(d.response, urllist[curfile]); + }) + .responseType("blob") + .get() + ; + }; + startLoading(); + } function init(input, each, after) { + reader = new FileReader(); + postLoadAll = after; input.on('change', function() { - files = d3.event.target.files; + /* Load files using the file selector */ + var files = d3.event.target.files; numfiles = files.length; filenames = Array.prototype.map.call(files, function(d) { return d.name; }); - curfile = 0; - var reader = new FileReader(); - mv.loader.onbulkstart(); - reader.onerror = function() { mv.loader.onerror.apply(null, arguments) }; - reader.onprogress = function(evt) { if (evt.lengthComputable) { mv.loader.onprogress(evt.loaded, evt.total) } }; - reader.onabort = function() { mv.loader.onabort.apply(null, arguments) }; - reader.onloadstart = function() { mv.loader.onloadstart.apply(null, arguments) }; - reader.onload = function(evt) { - each(reader.result, filenames[curfile], function() { - ++curfile; - if (curfile == numfiles) { - after(); - } else { - nextFile(); - } - }); - }; - function nextFile() { - var file = files[curfile]; - mv.loader.onloadstart(); - if (file.name.indexOf(".zip", name.length - 4) != -1) { - zip.createReader(new zip.BlobReader(file), function(zipReader) { - zipReader.getEntries(function(entries) { - entries.forEach(function(d, i) { - mv.loader.setname(file.name + "'; unzipping '" + d.filename + " (" + (i + 1) + "/" + entries.length + ")"); - d.getData(new zip.BlobWriter(), function(blob) { - mv.loader.setname(d.filename); - reader.readAsBinaryString(blob); - }, mv.loader.onprogress); - }); - }, mv.loader.onerror); - }, mv.loader.onerror); - } else { - mv.loader.setname(file); - reader.readAsBinaryString(file); - } + nextFile = function() { + loadBlobable(files[curfile], files[curfile].name); } - nextFile(); + startLoading(); }, false); + /* General callbacks */ + reader.onerror = function() { mv.loader.onerror.apply(null, arguments) }; + reader.onprogress = function(evt) { if (evt.lengthComputable) { mv.loader.onprogress(evt.loaded, evt.total) } }; + reader.onabort = function() { mv.loader.onabort.apply(null, arguments) }; + reader.onloadstart = function() { mv.loader.onloadstart.apply(null, arguments) }; + /* Logic for finishing or moving on once a file has finished loading */ + reader.onload = function(evt) { + each(reader.result, filenames[curfile], function() { + ++curfile; + if (curfile >= numfiles) { + /* We're done */ + postLoadAll(); + } else { + /* Go to the next file, as determined by the current nextFile function */ + nextFile(); + } + }); + }; }; + function startLoading() { + curfile = 0; + mv.loader.onbulkstart(); + nextFile(); + } + function loadBlobable(blobable, name) { + mv.loader.onloadstart(); + console.log(name); + if (name.indexOf(".zip", name.length - 4) != -1) { + zip.createReader(new zip.BlobReader(blobable), function(zipReader) { + zipReader.getEntries(function(entries) { + console.log(entries); + entries.forEach(function(d, i) { + mv.loader.setname(name + "'; 'Unzipping " + d.filename + " (" + (i + 1) + "/" + entries.length + ")"); + d.getData(new zip.BlobWriter(), function(blob) { + mv.loader.setname(d.filename); + reader.readAsBinaryString(blob); + }, mv.loader.onprogress); + }); + }, mv.loader.onerror); + }, mv.loader.onerror); + } else { + mv.loader.setname(name); + reader.readAsBinaryString(blobable); + } + } return mv; }(mv || {}); |