diff --git a/src/css/dialogs-browse-backups.css b/src/css/dialogs-browse-backups.css index f617065eb..4d6f3a167 100644 --- a/src/css/dialogs-browse-backups.css +++ b/src/css/dialogs-browse-backups.css @@ -56,8 +56,7 @@ height: 90px; } -.browse-backups .session-list-empty, -.browse-backups .snapshot-list-empty { +.browse-backups .centered-message { position: absolute; left: 50%; width: 200px; @@ -68,9 +67,18 @@ font-size: 16px; text-align: center; border: 1px solid; +} + +.browse-backups .session-list-empty, +.browse-backups .snapshot-list-empty { color: #bbb; } +.browse-backups .session-list-error, +.browse-backups .snapshot-list-error { + color: white; +} + .browse-backups .session-item { /* Transition duration should be kept in sync with SelectSession.DELETE_TRANSITION_DURATION */ transition: all 500ms; diff --git a/src/js/controller/dialogs/backups/steps/SelectSession.js b/src/js/controller/dialogs/backups/steps/SelectSession.js index 0c1b5b972..c7e568530 100644 --- a/src/js/controller/dialogs/backups/steps/SelectSession.js +++ b/src/js/controller/dialogs/backups/steps/SelectSession.js @@ -39,31 +39,36 @@ ns.SelectSession.prototype.update = function () { pskl.app.backupService.list().then(function (sessions) { - var html = ''; - if (sessions.length === 0) { - html = pskl.utils.Template.get('session-list-empty'); - } else { - var sessionItemTemplate = pskl.utils.Template.get('session-list-item'); - var html = ''; - sessions.forEach(function (session) { - if (session.id === pskl.app.sessionId) { - // Do not show backups for the current session. - return; - } - var view = { - id: session.id, - name: session.name, - description: session.description ? '- ' + session.description : '', - date: pskl.utils.DateUtils.format(session.endDate, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'), - count: session.count === 1 ? '1 snapshot' : session.count + ' snapshots' - }; - html += pskl.utils.Template.replace(sessionItemTemplate, view); - }); - } + var html = this.getMarkupForSessions_(sessions); + this.container.querySelector('.session-list').innerHTML = html; + }.bind(this)).catch(function () { + var html = pskl.utils.Template.get('session-list-error'); this.container.querySelector('.session-list').innerHTML = html; }.bind(this)); }; + ns.SelectSession.prototype.getMarkupForSessions_ = function (sessions) { + if (sessions.length === 0) { + return pskl.utils.Template.get('session-list-empty'); + } + + var sessionItemTemplate = pskl.utils.Template.get('session-list-item'); + return sessions.reduce(function (previous, session) { + if (session.id === pskl.app.sessionId) { + // Do not show backups for the current session. + return previous; + } + var view = { + id: session.id, + name: session.name, + description: session.description ? '- ' + session.description : '', + date: pskl.utils.DateUtils.format(session.endDate, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'), + count: session.count === 1 ? '1 snapshot' : session.count + ' snapshots' + }; + return previous + pskl.utils.Template.replace(sessionItemTemplate, view); + }, ''); + }; + ns.SelectSession.prototype.destroy = function () { pskl.utils.Event.removeAllEventListeners(this); }; diff --git a/src/js/controller/dialogs/backups/steps/SessionDetails.js b/src/js/controller/dialogs/backups/steps/SessionDetails.js index 8fff179e6..2a74d9430 100644 --- a/src/js/controller/dialogs/backups/steps/SessionDetails.js +++ b/src/js/controller/dialogs/backups/steps/SessionDetails.js @@ -27,33 +27,42 @@ ns.SessionDetails.prototype.onShow = function () { var sessionId = this.backupsController.backupsData.selectedSession; pskl.app.backupService.getSnapshotsBySessionId(sessionId).then(function (snapshots) { - var html = ''; - if (snapshots.length === 0) { - // This should normally never happen, all sessions have at least one snapshot and snapshots - // can not be individually deleted. - console.warn('Could not retrieve snapshots for a session'); - html = pskl.utils.Template.get('snapshot-list-empty'); - } else { - var sessionItemTemplate = pskl.utils.Template.get('snapshot-list-item'); - var html = ''; - snapshots.forEach(function (snapshot) { - var view = { - id: snapshot.id, - name: snapshot.name, - description: snapshot.description ? '- ' + snapshot.description : '', - date: pskl.utils.DateUtils.format(snapshot.date, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'), - frames: snapshot.frames === 1 ? '1 frame' : snapshot.frames + ' frames', - resolution: pskl.utils.StringUtils.formatSize(snapshot.width, snapshot.height), - fps: snapshot.fps - }; - html += pskl.utils.Template.replace(sessionItemTemplate, view); - this.updateSnapshotPreview_(snapshot); - }.bind(this)); - } + var html = this.getMarkupForSnapshots_(snapshots); + this.container.querySelector('.snapshot-list').innerHTML = html; + + // Load the image of the first frame for each sprite and update the list. + snapshots.forEach(function (snapshot) { + this.updateSnapshotPreview_(snapshot); + }.bind(this)); + }.bind(this)).catch(function () { + var html = pskl.utils.Template.get('snapshot-list-error'); this.container.querySelector('.snapshot-list').innerHTML = html; }.bind(this)); }; + ns.SessionDetails.prototype.getMarkupForSnapshots_ = function (snapshots) { + if (snapshots.length === 0) { + // This should normally never happen, all sessions have at least one snapshot and snapshots + // can not be individually deleted. + console.warn('Could not retrieve snapshots for a session'); + return pskl.utils.Template.get('snapshot-list-empty'); + } + + var sessionItemTemplate = pskl.utils.Template.get('snapshot-list-item'); + return snapshots.reduce(function (previous, snapshot) { + var view = { + id: snapshot.id, + name: snapshot.name, + description: snapshot.description ? '- ' + snapshot.description : '', + date: pskl.utils.DateUtils.format(snapshot.date, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'), + frames: snapshot.frames === 1 ? '1 frame' : snapshot.frames + ' frames', + resolution: pskl.utils.StringUtils.formatSize(snapshot.width, snapshot.height), + fps: snapshot.fps + }; + return previous + pskl.utils.Template.replace(sessionItemTemplate, view); + }, ''); + }; + ns.SessionDetails.prototype.updateSnapshotPreview_ = function (snapshot) { pskl.utils.serialization.Deserializer.deserialize( JSON.parse(snapshot.serialized), diff --git a/src/js/database/PiskelDatabase.js b/src/js/database/PiskelDatabase.js index e6f8e277e..9aab78ab8 100644 --- a/src/js/database/PiskelDatabase.js +++ b/src/js/database/PiskelDatabase.js @@ -29,9 +29,7 @@ return _requestPromise(request).then(function (event) { this.db = event.target.result; return this.db; - }.bind(this)).catch(function (e) { - console.log('Failed to initialize IndexedDB, local browser saves will be unavailable.'); - }); + }.bind(this)); }; ns.PiskelDatabase.prototype.onUpgradeNeeded_ = function (event) { diff --git a/src/js/service/storage/IndexedDbStorageService.js b/src/js/service/storage/IndexedDbStorageService.js index b4d51226b..bad5efc49 100644 --- a/src/js/service/storage/IndexedDbStorageService.js +++ b/src/js/service/storage/IndexedDbStorageService.js @@ -7,7 +7,9 @@ }; ns.IndexedDbStorageService.prototype.init = function () { - this.piskelDatabase.init(); + this.piskelDatabase.init().catch(function (e) { + console.log('Failed to initialize PiskelDatabase, local browser saves will be unavailable.'); + }); }; ns.IndexedDbStorageService.prototype.save = function (piskel) { @@ -30,7 +32,7 @@ }; ns.IndexedDbStorageService.prototype.load = function (name) { - this.piskelDatabase.get(name).then(function (piskelData) { + return this.piskelDatabase.get(name).then(function (piskelData) { if (typeof piskelData !== 'undefined') { var serialized = piskelData.serialized; pskl.utils.serialization.Deserializer.deserialize( @@ -46,7 +48,7 @@ }; ns.IndexedDbStorageService.prototype.remove = function (name) { - this.piskelDatabase.delete(name); + return this.piskelDatabase.delete(name); }; ns.IndexedDbStorageService.prototype.getKeys = function () { diff --git a/src/templates/dialogs/browse-backups.html b/src/templates/dialogs/browse-backups.html index 4181097bc..1b991b6ef 100644 --- a/src/templates/dialogs/browse-backups.html +++ b/src/templates/dialogs/browse-backups.html @@ -28,7 +28,11 @@

+ + + +