Show error message if BackupDatabase promise rejected

src/js/controller/dialogs/backups/steps/SelectSession.js

@@ -39,16 +39,24 @@
 
   ns.SelectSession.prototype.update = function () {
     pskl.app.backupService.list().then(function (sessions) {
-      var html = '';
+      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) {
-        html = pskl.utils.Template.get('session-list-empty');
+      return pskl.utils.Template.get('session-list-empty');
-      } else {
+    }
+
     var sessionItemTemplate = pskl.utils.Template.get('session-list-item');
-        var html = '';
+    return sessions.reduce(function (previous, session) {
-        sessions.forEach(function (session) {
       if (session.id === pskl.app.sessionId) {
         // Do not show backups for the current session.
-            return;
+        return previous;
       }
       var view = {
         id: session.id,
@@ -57,11 +65,8 @@
         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);
+      return previous + pskl.utils.Template.replace(sessionItemTemplate, view);
-        });
+    }, '');
-      }
-      this.container.querySelector('.session-list').innerHTML = html;
-    }.bind(this));
   };
 
   ns.SelectSession.prototype.destroy = function () {

src/js/controller/dialogs/backups/steps/SessionDetails.js

@@ -27,16 +27,29 @@
   ns.SessionDetails.prototype.onShow = function () {
     var sessionId = this.backupsController.backupsData.selectedSession;
     pskl.app.backupService.getSnapshotsBySessionId(sessionId).then(function (snapshots) {
-      var html = '';
+      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');
-        html = pskl.utils.Template.get('snapshot-list-empty');
+      return pskl.utils.Template.get('snapshot-list-empty');
-      } else {
+    }
+
     var sessionItemTemplate = pskl.utils.Template.get('snapshot-list-item');
-        var html = '';
+    return snapshots.reduce(function (previous, snapshot) {
-        snapshots.forEach(function (snapshot) {
       var view = {
         id: snapshot.id,
         name: snapshot.name,
@@ -46,12 +59,8 @@
         resolution: pskl.utils.StringUtils.formatSize(snapshot.width, snapshot.height),
         fps: snapshot.fps
       };
-          html += pskl.utils.Template.replace(sessionItemTemplate, view);
+      return previous + pskl.utils.Template.replace(sessionItemTemplate, view);
-          this.updateSnapshotPreview_(snapshot);
+    }, '');
-        }.bind(this));
-      }
-      this.container.querySelector('.snapshot-list').innerHTML = html;
-    }.bind(this));
   };
 
   ns.SessionDetails.prototype.updateSnapshotPreview_ = function (snapshot) {