Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit bf7d199

Browse files
birdofpreyrubirdofpreyru
committedSep 13, 2017
F2F: Topcoder - Dashboard header update
Submission #518728 by ronakkaria to the challenge http://www.topcoder.com/challenge-details/30059314/?type=develop
1 parent eeac4c5 commit bf7d199

File tree

6 files changed

+771
-742
lines changed

6 files changed

+771
-742
lines changed
 

‎app/directives/page-state-header/page-state-header.directive.js

Lines changed: 54 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ import _ from 'lodash'
1616
hideMoney: '=',
1717
defaultState: '@'
1818
},
19-
controller: ['CONSTANTS', '$rootScope', '$scope', 'ProfileService', 'logger', '$state', pageStateHeader],
19+
controller: ['CONSTANTS', '$rootScope', '$scope', 'ProfileService', 'logger', '$state', 'ChallengeService', '$q', 'UserService', 'BadgeService', pageStateHeader],
2020
controllerAs: 'vm'
2121
}
2222
})
2323

24-
function pageStateHeader(CONSTANTS, $rootScope, $scope, ProfileService, logger, $state) {
24+
function pageStateHeader(CONSTANTS, $rootScope, $scope, ProfileService, logger, $state, ChallengeService, $q, UserService, BadgeService) {
2525
var vm = this
2626
vm.backHandler = backHandler
2727

@@ -35,13 +35,10 @@ import _ from 'lodash'
3535
function activate() {
3636
vm.handle = $scope.handle
3737
vm.profile = null
38-
vm.handleColor = null
3938
$scope.hideMoney = _.get($scope, 'hideMoney', true)
4039
vm.previousStateName = null
4140
vm.previousStateLabel = null
4241
vm.previousState = null
43-
vm.showBackLink = _.get($scope, 'showBackLink', false)
44-
vm.loading = true
4542

4643
// identifies the previous state
4744
if ($scope.$root.previousState && $scope.$root.previousState.name.length > 0) {
@@ -65,14 +62,33 @@ import _ from 'lodash'
6562
// gets member's profile
6663
ProfileService.getUserProfile(vm.handle).then(function(profile) {
6764
vm.profile = profile
68-
vm.handleColor = ProfileService.getUserHandleColor(vm.profile)
6965

70-
if (!$scope.hideMoney) {
71-
displayMoneyEarned(vm.handle)
72-
} else {
73-
vm.loading = false
74-
}
66+
// get members dashboard badge
67+
UserService.getV2UserProfile(vm.handle).then(function(resp) {
68+
// Calling the mock to return a badge
69+
// In actuality filtering should be done by whether the achievement contains a field 'forDashboard' or not.
70+
var dashboardAchievement = _filterDashboardAchievement(resp.Achievements || [])[0]
71+
72+
if (dashboardAchievement) {
73+
vm.dashboardBadge = BadgeService.getAchievementVm(dashboardAchievement)
74+
}
75+
})
76+
77+
})
78+
79+
// get member's challenges to display number of active challenges
80+
$q.all([
81+
ChallengeService.getUserMarathonMatches(vm.handle, { filter: 'status=active' }),
82+
ChallengeService.getUserChallenges(vm.handle, { filter: 'status=active' })
83+
]).then(function(challenges){
84+
var marathonMatches = challenges[0]
85+
var devDesignChallenges = challenges[1]
86+
87+
vm.activeChallenges = marathonMatches.length + devDesignChallenges.length
7588
})
89+
90+
displayMoneyEarned(vm.handle)
91+
7692
}
7793

7894
function backHandler() {
@@ -100,15 +116,39 @@ import _ from 'lodash'
100116
if (!vm.moneyEarned) {
101117
$scope.hideMoney = true
102118
}
103-
104-
vm.loading = false
105119
})
106120
.catch(function(err) {
107121
$scope.hideMoney = true
108-
vm.loading = false
109122

110123
logger.error('Could not get user financial information', err)
111124
})
112125
}
126+
127+
// Temporary function to simulate dashboard achievement
128+
function _filterDashboardAchievement(achievements) {
129+
// If forceBadge is true, it displays the achievement in _mock, whether the user has that achievement or not
130+
var _forceBadge = false
131+
132+
// temoprary config object that maps usernames to badge name
133+
var _mock = {
134+
ronakkaria: 'First Win',
135+
birdofpreyru: 'Predix Community'
136+
}
137+
138+
var dashboardBadgeName = _mock[vm.handle]
139+
if (!dashboardBadgeName) { return [] }
140+
141+
if (_forceBadge) {
142+
return [{
143+
date: new Date(),
144+
description: _mock[vm.handle]
145+
}]
146+
}
147+
148+
return achievements.filter(function(achievement) {
149+
return (achievement.description === dashboardBadgeName)
150+
})
151+
}
152+
113153
}
114154
})()

‎app/directives/page-state-header/page-state-header.jade

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,15 @@
66
div(ng-transclude)
77

88
.info
9-
.pic
10-
a(ui-sref="profile.about({userHandle: vm.profile.handle})")
11-
img.profile-circle(ng-if="vm.profile.photoURL", ng-src="{{vm.profile.photoURL}}")
12-
13-
img.profile-circle(ng-if="!vm.profile.photoURL", src=require("../../../assets/images/ico-user-default.svg"))
14-
15-
.user-metrics(id="metrics", ng-hide="vm.loading")
16-
a.handle(style="color:{{vm.handleColor}};", ui-sref="profile.about({userHandle: vm.profile.handle})") {{vm.profile.handle}}
17-
18-
.money-earned(ng-hide="hideMoney")
9+
.item
10+
.value
11+
p(ng-bind="vm.activeChallenges")
12+
.title
13+
p Active Challenges
14+
.item(ng-if="!hideMoney")
15+
.value
1916
p.number(ng-bind="vm.moneyEarned | currency:'$':0")
20-
21-
p Earned
22-
23-
.back-link(ng-if="showBackLink && vm.previousStateLabel")
24-
a(ng-click="vm.backHandler()") Back to {{vm.previousStateLabel}}
25-
17+
.title
18+
p Won in Prizes
19+
.item(ng-if="vm.dashboardBadge")
20+
.badge(ng-class="(vm.dashboardBadge.specificClass || vm.dashboardBadge.groupClass) + ' ' + (vm.dashboardBadge.type) + 'Badge'")

‎app/profile/badges/badges.controller.js

Lines changed: 6 additions & 655 deletions
Large diffs are not rendered by default.

‎app/services/badge.service.js

Lines changed: 658 additions & 0 deletions
Large diffs are not rendered by default.

‎assets/css/directives/page-state-header.directive.scss

Lines changed: 38 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
.page-state-header {
44
background-color: $gray-lightest;
55
padding: 15px;
6-
border-bottom: 1px solid $gray-light;
6+
border-bottom: 1px solid #D1D3D4;
7+
border-top: 1px solid #D1D3D4;
78

89
header {
910
display: flex;
@@ -22,85 +23,68 @@
2223
.info {
2324
display: flex;
2425
flex-direction: row;
25-
.pic {
26-
img.profile-circle {
27-
border-radius: 50%;
28-
display: inline;
29-
width: 60px;
30-
height: 60px;
31-
}
32-
}
33-
}
3426

35-
.user-metrics {
36-
display: flex;
37-
flex-direction: column;
38-
align-items: flex-start;
39-
justify-content: center;
40-
margin-bottom: 12px;
41-
margin-left: 15px;
42-
@media only screen and (min-width: 600px) {
43-
margin-bottom: 0;
44-
}
27+
.item {
28+
display: flex;
29+
flex-direction: column;
30+
justify-content: space-between;
31+
align-items: flex-end;
4532

46-
.handle {
47-
@include sofia-pro-medium;
48-
font-size: 24px;
49-
line-height: 29px;
50-
}
33+
position: relative;
34+
margin-left: 40px;
35+
margin-right: 20px;
5136

52-
.money-earned {
53-
display: flex;
54-
flex-direction: row;
55-
align-items: center;
37+
font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
38+
font-weight: 400;
5639

57-
.number {
58-
@include sofia-pro-bold;
59-
font-size: 18px;
60-
line-height: 23px;
61-
color: $gray-darkest;
40+
&:not(:first-child):before {
41+
content: '';
42+
display: block;
43+
position: absolute;
44+
top: -5px;
45+
left: -30px;
46+
width: 1px;
47+
height: 60px;
48+
-ms-transform: translateX(0) translateY(2px) rotate(30deg);
49+
-webkit-transform: translateX(0) translateY(2px) rotate(30deg);
50+
transform: translateX(0) translateY(2px) rotate(30deg);
51+
background-color: #D1D3D4;
6252
}
6353

64-
p:not(.number) {
65-
@include sofia-pro-regular;
66-
font-size: 10px;
67-
line-height: 13px;
68-
text-transform: lowercase;
69-
margin-left: 5px;
70-
color: $accent-gray;
71-
@media only screen and (min-width: 600px) {
72-
font-size: 12px;
73-
line-height: 14px;
74-
}
54+
.value {
55+
font-size: 24px;
56+
margin-bottom: 15px;
7557
}
76-
}
7758

78-
.back-link {
79-
@include sofia-pro-medium;
80-
font-size: 12px;
81-
line-height: 14px;
82-
a {
83-
color: $accent-gray;
59+
.title {
60+
color: #A3A3AE;
61+
font-size: 12px;
62+
text-transform: uppercase;
8463
}
64+
8565
}
66+
8667
}
8768
}
8869
}
8970

9071

9172
@media (min-width: 768px) {
9273
.page-state-header {
93-
padding: 30px 60px;
74+
padding: 30px 30px;
9475

9576
header {
9677
flex-direction: row;
9778
align-items: center;
9879
justify-content: space-between;
80+
max-width: 1300px;
81+
margin: auto;
9982

10083
.page-info {
101-
order: 2;
84+
order: 1;
10285
display: flex;
10386
flex-direction: row;
87+
margin-left: 20px;
10488
h1 {
10589
font-size: 36px;
10690
line-height: 43px;

‎assets/css/my-dashboard/header-dashboard.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
.header-dashboard {
44
// TODO: Use styleguide class
5-
max-width: 1242px;
6-
margin-left: auto;
7-
margin-right: auto;
5+
margin-left: -10px;
6+
margin-right: -10px;
7+
margin-top: -10px;
8+
margin-bottom: 10px;
89
}

0 commit comments

Comments
 (0)
This repository has been archived.