diff --git a/common/locales/en/tasks.json b/common/locales/en/tasks.json
index 885eb9dddc..770fbf8cfb 100644
--- a/common/locales/en/tasks.json
+++ b/common/locales/en/tasks.json
@@ -60,6 +60,7 @@
"clearTags": "Clear",
"hideTags": "Hide",
"showTags": "Show",
+ "startDate": "Start Date",
"streakName": "Streak Achievements",
"streakText": "Has performed <%= streaks %> 21-day streaks on Dailies",
"streakSingular": "Streaker",
diff --git a/website/public/css/tasks.styl b/website/public/css/tasks.styl
index 59cd9271c4..aca785619c 100644
--- a/website/public/css/tasks.styl
+++ b/website/public/css/tasks.styl
@@ -12,7 +12,7 @@ for $stage in $stages
.color-{$stage[0]}:not(.completed)
background-color: $stage[1]
border: 1px solid shade($stage[1],10%)
- .priority-multiplier, .task-attributes, .repeat-days
+ .priority-multiplier, .task-attributes, .repeat-days, .repeat-frequency
li
hrpg-button-color-mixin($stage[1])
button
@@ -63,7 +63,7 @@ for $stage in $stages
color: darken($completed,30%)
background-color: $completed
border: 1px solid shade($completed,10%)
- .priority-multiplier, .task-attributes, .repeat-days
+ .priority-multiplier, .task-attributes, .repeat-days, .repeat-frequency
li
hrpg-button-color-mixin($completed)
button
@@ -507,7 +507,7 @@ form
form
padding-bottom: 1em
- .priority-multiplier, .task-attributes, .repeat-days
+ .priority-multiplier, .task-attributes, .repeat-days, .repeat-frequency
text-align: center
li
@extend $hrpg-button
@@ -517,6 +517,7 @@ form
&:last-of-type
margin-right: 0
.repeat-days
+ padding-bottom: 1em
li
button
min-width: 2.5em
@@ -524,6 +525,11 @@ form
text-align: center
@extend $hrpg-button
+// Dailies
+.dailies
+ .repeat-weekly
+ padding-bottom: 1em
+
// Habits – task button styles (+ -)
.habits
.task-actions
diff --git a/website/public/js/controllers/tasksCtrl.js b/website/public/js/controllers/tasksCtrl.js
index 41ec17655a..70c180ef36 100644
--- a/website/public/js/controllers/tasksCtrl.js
+++ b/website/public/js/controllers/tasksCtrl.js
@@ -4,10 +4,6 @@ habitrpg.controller("TasksCtrl", ['$scope', '$rootScope', '$location', 'User','N
function($scope, $rootScope, $location, User, Notification, $http, ApiUrl, $timeout, Shared, Guide) {
$scope.obj = User.user; // used for task-lists
$scope.user = User.user;
- // HACK: flagDict is for storing whether the datePicker popup is open or not. This should just be a boolean flag,
- // but apparently due to angular bug need to put the bool in intermediate dict...
- $scope.flagDict = {};
-
$scope.score = function(task, direction) {
switch (task.type) {
case 'reward':
@@ -136,15 +132,18 @@ habitrpg.controller("TasksCtrl", ['$scope', '$rootScope', '$location', 'User','N
------------------------
*/
$scope.updateTaskStartDate = function(task) {
- // TODO: Weirdness here...startDate should be a Date and _dateString
- // should be a string, but the datePicker input fields sets _dateString
- // to a Date even though input type="text"...
- task.startDate = task._dateString;
+ /*
+ Keep startDate and _tempDateForPicker in sync. The reason for having both instead
+ of having startDate be the ngmodel for datePicker is that datePicker initializes with
+ an incorrect format when given a Date for an ngmodel; instead we initialize _tempDate
+ to be a string that datePicker then converts to a Date, which lets us control the format.
+ */
+ task.startDate = task._tempDateForPicker;
};
- $scope.open = function($event) {
+ $scope.openDatePicker = function($event, task) {
$event.stopPropagation();
- $scope.flagDict['opened'] = !$scope.flagDict['opened'];
+ task._isDatePickerOpen = !task._isDatePickerOpen;
}
diff --git a/website/public/js/directives/directives.js b/website/public/js/directives/directives.js
index 92a596af70..b9eccde098 100644
--- a/website/public/js/directives/directives.js
+++ b/website/public/js/directives/directives.js
@@ -45,7 +45,7 @@ habitrpg
task._editing = !task._editing;
task._tags = User.user.preferences.tagsCollapsed;
task._advanced = User.user.preferences.advancedCollapsed;
- task._dateString = moment(task.startDate).format('YYYY-MM-DD');
+ task._tempDateForPicker = moment(task.startDate).format('YYYY-MM-DD');
if($rootScope.charts[task.id]) $rootScope.charts[task.id] = false;
};
}],
diff --git a/website/views/shared/tasks/task.jade b/website/views/shared/tasks/task.jade
index 2afe1608a0..f15e090d10 100644
--- a/website/views/shared/tasks/task.jade
+++ b/website/views/shared/tasks/task.jade
@@ -164,57 +164,56 @@ li(bindonce='list', id='task-{{::task.id}}', ng-repeat='task in obj[list.type+"s
label(for='{{obj._id}}_{{task.id}}-option-minus')
// if Daily, calendar
- fieldset(ng-if='::task.type=="daily"', class="option-group")
- legend.option-title=env.t('repeat')
+ fieldset.option-group.calendar(ng-if='::task.type=="daily"', class="option-group")
+ .dailies
+ legend.option-title=env.t('repeat')
- // Choose the frequency
- ul.priority-multiplier
- li
- button(ng-class='{active: task.frequency=="daily"}', type='button', ng-click='task.frequency="daily"')='Daily'
- li
- button(ng-class='{active: task.frequency=="weekly"}', type='button', ng-click='task.frequency="weekly"')='Weekly'
+ // Choose the frequency
+ ul.repeat-frequency
+ li
+ button(ng-class='{active: task.frequency=="daily"}', type='button', ng-click='task.frequency="daily"')='Daily'
+ li
+ button(ng-class='{active: task.frequency=="weekly"}', type='button', ng-click='task.frequency="weekly"')='Weekly'
- // If frequency is daily
- fieldset(ng-show='task.frequency=="daily"')
- | Once every
- select(ng-model='task.everyX')
- option(ng-repeat='x in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]') {{x}}
- | days
- | Start date:
+ // If frequency is daily
+ div.repeat-frequency(ng-show='task.frequency=="daily"')
+ div.repeat-daily
+ | Once every
+ select(ng-model='task.everyX')
+ option(ng-repeat='x in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]') {{x}}
+ | days
+
+ // If frequency is weekly
+ div.repeat-frequency(ng-show='task.frequency=="weekly"')
+ div.repeat-weekly
+ | Once every
+ select(ng-model='task.everyX')
+ option(ng-repeat='x in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]') {{x}}
+ | weeks on these days:
+
+ ul.repeat-days(bindonce)
+ // note, does not use data-toggle="buttons-checkbox" - it would interfere with our own click binding
+ li
+ button(ng-class='{active: task.repeat.su}', type='button', ng-click='task.challenge.id || (task.repeat.su = !task.repeat.su)') {{::moment.weekdaysMin(0)}}
+ li
+ button(ng-class='{active: task.repeat.m}', type='button', ng-click='task.challenge.id || (task.repeat.m = !task.repeat.m)') {{::moment.weekdaysMin(1)}}
+ li
+ button(ng-class='{active: task.repeat.t}', type='button', ng-click='task.challenge.id || (task.repeat.t = !task.repeat.t)') {{::moment.weekdaysMin(2)}}
+ li
+ button(ng-class='{active: task.repeat.w}', type='button', ng-click='task.challenge.id || (task.repeat.w = !task.repeat.w)') {{::moment.weekdaysMin(3)}}
+ li
+ button(ng-class='{active: task.repeat.th}', type='button', ng-click='task.challenge.id || (task.repeat.th = !task.repeat.th)') {{::moment.weekdaysMin(4)}}
+ li
+ button(ng-class='{active: task.repeat.f}', type='button', ng-click='task.challenge.id || (task.repeat.f= !task.repeat.f)') {{::moment.weekdaysMin(5)}}
+ li
+ button(ng-class='{active: task.repeat.s}', type='button', ng-click='task.challenge.id || (task.repeat.s = !task.repeat.s)') {{::moment.weekdaysMin(6)}}
+
+ label.option-title=env.t('startDate')
p(class='input-group')
- input(type='text' class='form-control' datepicker-popup ng-model='task._dateString' ng-change='updateTaskStartDate(task)' is-open='flagDict.opened')
+ input(type='text' class='form-control' datepicker-popup ng-model='task._tempDateForPicker' ng-change='updateTaskStartDate(task)' is-open='task._isDatePickerOpen')
span(class='input-group-btn')
- button(type="button" ng-click="open($event)")
+ button(type="button" ng-click="openDatePicker($event, task)")
span.input-group-addon.glyphicon.glyphicon-calendar
- // If frequency is weekly
- fieldset(ng-show='task.frequency=="weekly"')
- | Once every
- select(ng-model='task.everyX')
- option(ng-repeat='x in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]') {{x}}
- | weeks on these days:
- ul.repeat-days(bindonce)
- // note, does not use data-toggle="buttons-checkbox" - it would interfere with our own click binding
- li
- button(ng-class='{active: task.repeat.su}', type='button', ng-click='task.challenge.id || (task.repeat.su = !task.repeat.su)') {{::moment.weekdaysMin(0)}}
- li
- button(ng-class='{active: task.repeat.m}', type='button', ng-click='task.challenge.id || (task.repeat.m = !task.repeat.m)') {{::moment.weekdaysMin(1)}}
- li
- button(ng-class='{active: task.repeat.t}', type='button', ng-click='task.challenge.id || (task.repeat.t = !task.repeat.t)') {{::moment.weekdaysMin(2)}}
- li
- button(ng-class='{active: task.repeat.w}', type='button', ng-click='task.challenge.id || (task.repeat.w = !task.repeat.w)') {{::moment.weekdaysMin(3)}}
- li
- button(ng-class='{active: task.repeat.th}', type='button', ng-click='task.challenge.id || (task.repeat.th = !task.repeat.th)') {{::moment.weekdaysMin(4)}}
- li
- button(ng-class='{active: task.repeat.f}', type='button', ng-click='task.challenge.id || (task.repeat.f= !task.repeat.f)') {{::moment.weekdaysMin(5)}}
- li
- button(ng-class='{active: task.repeat.s}', type='button', ng-click='task.challenge.id || (task.repeat.s = !task.repeat.s)') {{::moment.weekdaysMin(6)}}
- |
- | Start date:
- p(class='input-group')
- input(type='text' class='form-control' datepicker-popup ng-model='task._dateString' ng-change='updateTaskStartDate(task)' is-open='flagDict.opened')
- span(class='input-group-btn')
- button(type="button" ng-click="open($event)")
- span.input-group-addon.glyphicon.glyphicon-calendar
// if Reward, pricing