✨🐞 Improve/rethink/fix Live Preview (#450)

app.js

@@ -214,6 +214,15 @@ angular.module('voting-booth').config(
           isPreview: true
         }
       })
+      .state('election.booth-uuid-preview', {
+        url: '/:id/uuid-preview-vote',
+        templateUrl: 'avBooth/booth.html',
+        controller: "BoothController",
+        params: {
+          isPreview: true,
+          isUuidPreview: true
+        }
+      })
       .state('election.public.show.home.simple', {
         template: '<div ave-simple-question></div>'
       })

avBooth/booth-directive/booth-directive.js

@@ -24,6 +24,7 @@ angular.module('avBooth')
     $rootScope,
     $timeout,
     $window,
+    $location,
     Authmethod,
     ConfigService,
     HmacService,
@@ -44,6 +45,7 @@ angular.module('avBooth')
       // demo booth
       scope.isDemo = (attrs.isDemo === "true");
       scope.isPreview = (attrs.isPreview === "true");
+      scope.isUuidPreview = (attrs.isUuidPreview === "true");
       scope.documentation = ConfigService.documentation;
       scope.hasSeenStartScreenInThisSession = false;
 
@@ -888,21 +890,34 @@ angular.module('avBooth')
         var futureResult = $q.defer();
         try {
           if (scope.isPreview) {
-            var previewElection = JSON.parse(scope.previewElection || sessionStorage.getItem(parseInt(attrs.electionId)));
-            var foundElection = previewElection.find(
-              function (element) {return element.id === parseInt(electionId);
-            });
-
-            if (foundElection) {
-              var ballotBoxData = ElectionCreation.generateBallotBoxResponse(foundElection);
-              futureResult.resolve({
-                data: {
-                  payload: ballotBoxData
-                }
-              });
+            var previewResult = $q.defer();
+            if (scope.isUuidPreview) {
+              var uuid = $location.search().uuid;
+              Authmethod.getLivePreview(uuid)
+                .then(function (res) {
+                    previewResult.resolve(res.data);
+                }, previewResult.reject);
             } else {
-              futureResult.reject("election not found");
+              previewResult.resolve(JSON.parse(scope.previewElection || sessionStorage.getItem(parseInt(attrs.electionId))));
             }
+
+            previewResult.promise
+              .then(function onSuccess(previewElection) {
+                var foundElection = previewElection.find(
+                  function (element) {return element.id === parseInt(electionId);
+                });
+
+                if (foundElection) {
+                  var ballotBoxData = ElectionCreation.generateBallotBoxResponse(foundElection);
+                  futureResult.resolve({
+                    data: {
+                      payload: ballotBoxData
+                    }
+                  });
+                } else {
+                  futureResult.reject("election not found");
+                }
+              }, futureResult.reject);
           } else {
             var electionPromise = $http.get(
               scope.baseUrl + "election/" + electionId,
@@ -941,7 +956,7 @@ angular.module('avBooth')
 
         function execIfAllRetrieved(callback)
         {
-          if (!sequentElectionsRetrieved || !iamRetrieved) {
+          if (!sequentElectionsRetrieved || !iamRetrieved) {
             return;
           }
           callback();
@@ -955,24 +970,9 @@ angular.module('avBooth')
 
           var ballotBoxData;
           var authapiData;
-          if (scope.isPreview) {
-            var previewElection = JSON.parse(scope.previewElection || sessionStorage.getItem(parseInt(attrs.electionId)));
-            var foundElection;
-            if (electionId === undefined) { 
-              electionId = parseInt(attrs.electionId);
-            }
-
-            if (previewElection.length === 1) {
-              foundElection = previewElection[0];
-              foundElection.id = foundElection.id || (electionId && parseInt(electionId));
-            } else {
-              foundElection = previewElection.find(function (element) { return element.id === parseInt(electionId); });
-            }
-            authapiData = ElectionCreation.generateAuthapiResponse(foundElection);
-            ballotBoxData = ElectionCreation.generateBallotBoxResponse(foundElection);
-          }
-
-          var electionPromise;
+          var authapiDataFuture = $q.defer();
+          var electionFuture = $q.defer();
+          var electionPromise = electionFuture.promise;
           if (!scope.isPreview) {
             electionPromise = $http.get(
               scope.baseUrl + "election/" + scope.electionId,
@@ -981,15 +981,40 @@ angular.module('avBooth')
               }
             );
           } else {
-            var deferredElection = $q.defer();
+            var previewResult = $q.defer();
+            if (scope.isUuidPreview) {
+              var uuid = $location.search().uuid;
+              Authmethod.getLivePreview(uuid)
+                .then(function (res) {
+                  previewResult.resolve(res.data);
+              }, previewResult.reject);
+            } else {
+              previewResult.resolve(JSON.parse(scope.previewElection || sessionStorage.getItem(parseInt(attrs.electionId))));
+            }
 
-            deferredElection.resolve({
-              data: {
-                payload: ballotBoxData
-              }
-            });
+            previewResult.promise
+              .then(function onSuccess(previewElection) {
+                var foundElection;
+                if (electionId === undefined) {
+                  electionId = parseInt(attrs.electionId);
+                }
+
+                if (previewElection.length === 1) {
+                  foundElection = previewElection[0];
+                  foundElection.id = foundElection.id || (electionId && parseInt(electionId));
+                } else {
+                  foundElection = previewElection.find(function (element) { return element.id === parseInt(electionId); });
+                }
+                authapiData = ElectionCreation.generateAuthapiResponse(foundElection);
+                ballotBoxData = ElectionCreation.generateBallotBoxResponse(foundElection);
+                authapiDataFuture.resolve(authapiData);
 
-            electionPromise = deferredElection.promise;
+                electionFuture.resolve({
+                  data: {
+                    payload: ballotBoxData
+                  }
+                });
+              });
           }
 
           electionPromise
@@ -1171,11 +1196,13 @@ angular.module('avBooth')
           } else {
             var deferredAuthEvent = $q.defer();
 
-            deferredAuthEvent.resolve({
-              data: {
-                status: "ok",
-                events: authapiData
-              }
+            authapiDataFuture.promise.then(function (data) {
+              deferredAuthEvent.resolve({
+                data: {
+                  status: "ok",
+                  events: data
+                }
+              });
             });
 
             authEventPromise = deferredAuthEvent.promise;

avBooth/booth.html

@@ -4,6 +4,7 @@
   config="{{config}}"
   is-demo="{{isDemo}}"
   is-preview="{{isPreview}}"
+  is-uuid-preview="{{isUuidPreview}}"
   preview-election="{{previewElection}}"
   >
 </div>

avBooth/booth.js

@@ -48,6 +48,7 @@ angular
       var previewElectionParam = ($location.search())['preview-election'];
       $scope.previewElection = previewElectionParam && decodeURIComponent(previewElectionParam);
       $scope.isPreview = $stateParams.isPreview || false;
+      $scope.isUuidPreview = $stateParams.isUuidPreview || false;
       $scope.electionId = $stateParams.id;
       $scope.baseUrl = ConfigService.baseUrl;
       $scope.config = $filter('json')(ConfigService);