archive-gh-me/offline-editor-js
1
0
Fork 0
mirror of https://github.com/Esri/offline-editor-js.git synced 2025-12-15 15:20:05 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #32 from jabadia/jabadia-better-feedback

Browse Source 
better feedback
This commit is contained in:
Andy 2013-12-31 07:57:54 -08:00
commit 16f5616d81
5 changed files with 99 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
vendor/offlinejs_demo.html → samples/offlinejs_demo.html
View File

@ -22,7 +22,7 @@
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="offline/offline.min.js"></script> <script src="../vendor/offline/offline.min.js"></script>
</head> </head>
<body> <body>

8
tiles/index.html
View File

@ -51,6 +51,14 @@
</div> </div>
<div class="container"> <div class="container">
<div class="row">
<div class="col-xs-12" id="error-div">
<div class="alert alert-danger">
<a class="close" data-dismiss="alert">&times;</a>
<i class="fa fa-info-circle"></i><strong></strong> <span id="error-msg">Change a few things up and try submitting again..</span>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
</div> </div>

76
tiles/main.js
View File

@ -3,7 +3,7 @@
var map; var map;
var basemapLayer; var basemapLayer;
var graphics; var graphics;
var cancelRequested, startTime; var cancelRequested, startTime, errorList;
var showTiles = false; var showTiles = false;
require(["esri/map", require(["esri/map",
@ -76,8 +76,8 @@ require(["esri/map",
} }
},function(error){ },function(error){
alert("Sorry, couldn't load webmap! " + dojo.toJson(error)); showAlert('alert-danger',"Sorry, couldn't load webmap: " + error.message);
console.log("Error loading webmap: ", dojo.toJson(error)); console.log("Error loading webmap:",error);
}); });
} }
@ -142,7 +142,8 @@ require(["esri/map",
dojo.byId('update-offline-usage').disabled = true; dojo.byId('update-offline-usage').disabled = true;
dojo.byId('show-stored-tiles').disabled = true; dojo.byId('show-stored-tiles').disabled = true;
esri.hide(dojo.byId('downloading-ui')); esri.hide(dojo.byId('downloading-ui'));
/* JAMI: TODO add message telling that something failed while initing the indexedDB */
showAlert("alert-danger","Failed initializing storage, probably your browser doesn't support <a href='http://caniuse.com/#feat=indexeddb'>IndexedDB</a> nor <a href='http://caniuse.com/#feat=sql-storage'>WebSQL</a>");
} }
}); });
@ -233,9 +234,9 @@ require(["esri/map",
console.log("deleteAllTiles():", success,err); console.log("deleteAllTiles():", success,err);
if( success ) if( success )
alert("All tiles deleted"); showAlert("alert-success", "All tiles deleted");
else else
alert("Can't delete tiles: " + err); showAlert("alert-danger", "Can't delete tiles: " + err);
setTimeout(updateOfflineUsage,0); // request execution in the next turn of the event loop setTimeout(updateOfflineUsage,0); // request execution in the next turn of the event loop
}); });
@ -245,7 +246,12 @@ require(["esri/map",
{ {
/* put UI in downloading mode */ /* put UI in downloading mode */
cancelRequested = false; cancelRequested = false;
reportProgress(0,1); errorList = [];
query('#download-progress [role=progressbar]')
.removeClass('progress-bar-warning')
.addClass('progress-bar-success');
hideAlert();
reportProgress({countNow:0,countMax:1});
esri.hide(dojo.byId('ready-to-download-ui')); esri.hide(dojo.byId('ready-to-download-ui'));
esri.show(dojo.byId('downloading-ui')); esri.show(dojo.byId('downloading-ui'));
startTime = new Date(); startTime = new Date();
@ -261,17 +267,28 @@ require(["esri/map",
cancelRequested = true; cancelRequested = true;
} }
function reportProgress(countNow,countMax) function reportProgress(progress)
{ {
var pbar = query('#download-progress [role=progressbar]')[0]; var pbar = query('#download-progress [role=progressbar]')[0];
var percent = countMax? (countNow / countMax * 100) : 0; var percent = progress.countMax? (progress.countNow / progress.countMax * 100) : 0;
pbar.style.width = percent+"%"; pbar.style.width = percent+"%";
if( countNow > 5 ) if( progress.error )
{
query('#download-progress [role=progressbar]')
.removeClass('progress-bar-success')
.addClass('progress-bar-warning');
errorList.push(progress.error.msg);
showAlert('alert-warning', progress.error.msg);
}
if( progress.countNow > 5 )
{ {
var currentTime = new Date(); var currentTime = new Date();
var elapsedTime = currentTime - startTime; var elapsedTime = currentTime - startTime;
var remainingTime = (elapsedTime / countNow) * (countMax - countNow); var remainingTime = (elapsedTime / progress.countNow) * (progress.countMax - progress.countNow);
var sec = 1 + Math.floor(remainingTime / 1000); var sec = 1 + Math.floor(remainingTime / 1000);
var min = Math.floor(sec / 60); var min = Math.floor(sec / 60);
sec -= (min * 60); sec -= (min * 60);
@ -282,6 +299,13 @@ require(["esri/map",
function finishedDownloading(cancelled) function finishedDownloading(cancelled)
{ {
if( cancelled )
showAlert('alert-warning', 'Cancelled');
else if (errorList.length == 0)
showAlert('alert-success', 'All tiles downloaded and stored');
else
showAlert('alert-warning', "Finished downloading tiles, " + errorList.length + " tiles couldn't be downloaded");
setTimeout(function() setTimeout(function()
{ {
esri.show(dojo.byId('ready-to-download-ui')); esri.show(dojo.byId('ready-to-download-ui'));
@ -318,4 +342,34 @@ require(["esri/map",
}.bind(this)); }.bind(this));
} }
} }
function showAlert(type, msg)
{
var icon = "";
switch(type)
{
case 'alert-success': icon = "fa-check"; break;
case 'alert-info': icon = "fa-info-circle"; break;
case 'alert-warning': icon = "fa-warning"; break;
case 'alert-danger': icon = "fa-ban"; break;
}
dojo.byId('error-msg').innerHTML = msg;
dojo.query('#error-div .close').onclick(hideAlert);
dojo.query('#error-div .alert')
.removeClass('alert-success')
.removeClass('alert-info')
.removeClass('alert-warning')
.removeClass('alert-danger')
.addClass(type);
dojo.query('#error-div .fa')
.removeClass('fa-info-circle')
.addClass(icon);
esri.show(dojo.byId('error-div'));
window.scrollTo(0,0);
}
function hideAlert()
{
esri.hide(dojo.byId('error-div'));
}
}); });

10
tiles/style.css
View File

@ -17,10 +17,6 @@ table {
margin-bottom: 20px; margin-bottom: 20px;
} }
#mapTitle {
margin-left: 15px;
}
#mapDiv_layers>:first-child .layerTile { #mapDiv_layers>:first-child .layerTile {
/*border: 1px solid red !important;*/ /*border: 1px solid red !important;*/
/* /*
@ -42,3 +38,9 @@ table {
#download-progress #download-progress
{ {
} }
#error-div
{
margin-top: 10px;
display: none;
}

22
tiles/tiles/offlineEnabler.js
View File

@ -139,25 +139,23 @@ define([
layer.downloadTile = function(i,cells, reportProgress, finishedDownloading) layer.downloadTile = function(i,cells, reportProgress, finishedDownloading)
{ {
var cell = cells[i]; var cell = cells[i];
var cancelRequested = reportProgress(i, cells.length); var cancelRequested = reportProgress({countNow:i, countMax:cells.length});
this.storeTile(cell.level,cell.row,cell.col, function(success, msg) this.storeTile(cell.level,cell.row,cell.col, function(success, error)
{ {
/* JAMI: TODO, continue looking for other tiles even if one fails */ if(!success)
if(success)
{ {
console.log("error storing tile", cell, error);
reportProgress({countNow:i, countMax:cells.length, error: { cell:cell, msg:error}});
}
if( cancelRequested ) if( cancelRequested )
finishedDownloading(true); finishedDownloading(true);
else if( i==cells.length-1 ) else if( i==cells.length-1 )
finishedDownloading(false); finishedDownloading(false);
else else
this.downloadTile(i+1, cells, reportProgress, finishedDownloading); this.downloadTile(i+1, cells, reportProgress, finishedDownloading);
}
else
{
console.log("error storing tile", cell, msg);
finishedDownloading(true);
}
}.bind(this)) }.bind(this))
} }
@ -186,7 +184,7 @@ define([
req.onload = function() req.onload = function()
{ {
if( req.status == 200 ) if( req.status == 200 && req.responseText != "")
{ {
var img = Base64Utils.wordToBase64(Base64Utils.stringToWord(this.responseText)); var img = Base64Utils.wordToBase64(Base64Utils.stringToWord(this.responseText));
@ -200,7 +198,7 @@ define([
else else
{ {
console.log("xhr failed for", imgurl); console.log("xhr failed for", imgurl);
callback(false,req.status); callback(false, req.status + " " + req.statusText + ": " + req.response + " when downloading " + imgurl);
} }
} }
req.onerror = function(e) req.onerror = function(e)