topcoder-archive · tladendo · Oct 27, 2015 · Oct 26, 2015
diff --git a/app/directives/challenge-tile/challenge-tile.directive.js b/app/directives/challenge-tile/challenge-tile.directive.js
@@ -23,6 +23,11 @@
           if ($scope.challenge.status.trim().toUpperCase() === 'PAST' && $scope.challenge.subTrack === 'MARATHON_MATCH') {
             ChallengeService.processPastMarathonMatch($scope.challenge);
           }
+
+          if ($scope.challenge.status.trim().toUpperCase() === 'COMPLETED' && $scope.challenge.track === 'DESIGN') {
+            ChallengeService.formatPastDesignChallenge($scope.challenge);
+            console.log($scope.challenge.plain());
+          }
         }
 
         function openLightbox() {

diff --git a/app/directives/challenge-user-place/challenge-user-place.directive.js b/app/directives/challenge-user-place/challenge-user-place.directive.js
@@ -33,15 +33,21 @@
         challenge: '=',
         view: '='
       },
-      controller: ['$scope', 'CONSTANTS', '$attrs', 'ChallengeService',
-       function($scope, CONSTANTS, $attrs, ChallengeService) {
+      controller: ['$scope', 'CONSTANTS', '$attrs', 'ChallengeService', 'ngDialog',
+       function($scope, CONSTANTS, $attrs, ChallengeService, ngDialog) {
         $scope.DOMAIN = CONSTANTS.domain;
+        $scope.openLightbox = openLightbox;
+        $scope.updateSelected = updateSelected;
+        $scope.incrementIndex = incrementIndex;
 
         activate();
 
         function activate() {
-          if ($scope.challenge.userDetails.submissions && $scope.challenge.userDetails.submissions.length > 0) {
+          if (!$scope.challenge.isPrivate && $scope.challenge.userDetails.submissions && $scope.challenge.userDetails.submissions.length > 0) {
+            $scope.selectedIndex = 0;
             $scope.challenge.thumbnailId = $scope.challenge.userDetails.submissions[0].id;
+            $scope.imageURL = $scope.challenge.userDetails.submissions[0].fullImage;
+            $scope.selectedImage = $scope.imageURL;
 
             $scope.challenge.highestPlacement = _.max($scope.challenge.userDetails.submissions, 'placement').placement;
 
@@ -50,6 +56,27 @@
             }
           }
         }
+
+        function updateSelected(newImage, index) {
+          $scope.selectedImage = newImage;
+          $scope.selectedIndex = index;
+        }
+
+        function incrementIndex(x) {
+          $scope.selectedIndex += x;
+          if ($scope.selectedIndex < 0) $scope.selectedIndex = $scope.challenge.userDetails.submissions.length - 1;
+          if ($scope.selectedIndex == $scope.challenge.userDetails.submissions.length) $scope.selectedIndex = 0;
+          $scope.selectedImage = $scope.challenge.userDetails.submissions[$scope.selectedIndex].fullImage;
+        }
+
+        function openLightbox() {
+          ngDialog.open({
+            template: 'directives/challenge-user-place/design-lightbox/design-lightbox.html',
+            className: 'design-lightbox',
+            scope: $scope
+          });
+        }
+
       }]
     };
   }

diff --git a/app/directives/challenge-user-place/design-challenge-user-place.directive.jade b/app/directives/challenge-user-place/design-challenge-user-place.directive.jade
@@ -4,9 +4,9 @@
   p.place(ng-show="challenge.userStatus === 'PASSED_SCREENING'") Passed Screening
 
   .thumbnail(ng-click="openLightbox()", ng-class="{hidden: challenge.userStatus !== 'PASSED_REVIEW'}")
-    img(ng-src="http://studio.{{DOMAIN}}/studio.jpg?module=DownloadSubmission&sbmid={{challenge.thumbnailId}}&sbt=full", fallback-src="/images/ico-picture.svg")
+    img(ng-src="{{imageURL}}", fallback-src="/images/ico-picture.svg")
 
-    .thumbnail-gallery(ng-click="challenge.showLightbox()")
+    .thumbnail-gallery(ng-click="openLightbox()")
       .gallery-icon
 
       .num-images 1 image
@@ -26,4 +26,4 @@
     .thumbnail-gallery(ng-click="challenge.showLightbox()")
       .gallery-icon
 
-      .num-images 1 image
+      .num-images 1 image
diff --git a/app/directives/challenge-user-place/design-lightbox/design-lightbox.jade b/app/directives/challenge-user-place/design-lightbox/design-lightbox.jade
@@ -0,0 +1,26 @@
+.lightbox-container
+  .left-nav
+    img(src="/images/ico-arrow-big-left.svg", ng-click="incrementIndex(-1)")
+
+  .selector
+    .title {{challenge.name}}
+
+
+    img(ng-src="{{selectedImage}}")
+
+
+    .info
+      | {{selectedIndex + 1}} of {{challenge.userDetails.submissions.length}}
+
+    .selections
+      img.selection(
+        ng-repeat="submission in challenge.userDetails.submissions",
+        ng-src="{{submission.fullImage}}",
+        ng-click="updateSelected(submission.fullImage, $index)",
+        ng-class="{'current': submission.fullImage == selectedImage}"
+      )
+
+  .right-nav
+    img(src="/images/ico-arrow-big-right.svg", ng-click="incrementIndex(1)")
+
+//  img(ng-src="http://studio.{{DOMAIN}}/studio.jpg?module=DownloadSubmission&sbmid={{challenge.thumbnailId}}&sbt=full", fallback-src="/images/ico-picture.svg")
diff --git a/app/services/challenge.service.js b/app/services/challenge.service.js
@@ -11,6 +11,7 @@
     var service = {
       getChallenges: getChallenges,
       getUserChallenges: getUserChallenges,
+      formatPastDesignChallenge: formatPastDesignChallenge,
       getUserMarathonMatches: getUserMarathonMatches,
       getReviewEndDate: getReviewEndDate,
       getChallengeDetails: getChallengeDetails,
@@ -31,6 +32,18 @@
       return api.one('members', handle.toLowerCase()).all('challenges').getList(params);
     }
 
+    function formatPastDesignChallenge(challenge) {
+      if (!challenge.isPrivate && challenge.userDetails && challenge.userDetails.submissions && challenge.userDetails.submissions.length) {
+        challenge.userDetails.submissions.forEach(function(submission) {
+          var images = submission.images.filter(function(image) {
+            return image.match('full') || image.match('thumb');
+          });
+          submission.fullImage = images[0];
+          submission.thumbnailImage = images[1];
+        });
+      }
+    }
+
     function getUserMarathonMatches(handle, params) {
       return api.one('members', handle.toLowerCase()).all('mms').getList(params);
     }

diff --git a/assets/css/directives/design-lightbox.scss b/assets/css/directives/design-lightbox.scss
@@ -1,10 +1,76 @@
 .lightbox-container {
+  font-family: 'Sofia Pro';
   display: flex;
   width: 100%;
   margin: auto;
   overflow: hidden;
+  flex-direction: row;
 
-  img {
-    margin: 0 auto;
+  .left-nav, .right-nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 80px;
+    img {
+      width: 20px;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+
+  .selector {
+
+    .title {
+      font-size: 24px;
+      margin: 30px auto;
+      text-align: center;
+    }
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+
+    img {
+      height: 550px;
+    }
+
+    .info {
+      color: #a3a3ae;
+      text-align: right;
+    }
+
+    .selections {
+      img.selection {
+        height: 60px;
+        opacity: .6;
+        &.current {
+          border: solid 2px #0096ff;
+          height: 62px;
+          opacity: 1;
+        }
+        &:hover {
+          cursor: pointer;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+
+}
+
+.design-lightbox {
+  display: flex;
+  justify-content: center;
+  z-index: 10000;
+  .ngdialog-content {
+    .ngdialog-close { display: none; }
+    opacity: .95;
+    height: 742px;
+    width: 768px;
+    align-self: center;
   }
 }