This is an automated email from the git hooks/post-receive script. New commit to branch develop in repository pollen. See http://git.chorem.org/pollen.git commit d3cb162294cff9532d815c909675fc7e04c5e633 Author: Adrien Garandel <a.garandel@dralagen.fr> Date: Thu Aug 7 17:26:44 2014 +0200 add information of poll in UI --- .../src/main/webapp/js/controllers/localeCtrl.js | 2 + .../src/main/webapp/js/controllers/pollCtrl.js | 59 ++++++++++++++++++++ pollen-ui-angular/src/main/webapp/less/style.less | 65 +++++++++++++++++----- .../src/main/webapp/less/variables.less | 3 +- .../src/main/webapp/partials/poll-info.html | 26 +++++++++ .../src/main/webapp/partials/poll.html | 2 + 6 files changed, 142 insertions(+), 15 deletions(-) diff --git a/pollen-ui-angular/src/main/webapp/js/controllers/localeCtrl.js b/pollen-ui-angular/src/main/webapp/js/controllers/localeCtrl.js index 47667e8..b8d1f35 100644 --- a/pollen-ui-angular/src/main/webapp/js/controllers/localeCtrl.js +++ b/pollen-ui-angular/src/main/webapp/js/controllers/localeCtrl.js @@ -32,9 +32,11 @@ angular.module('localeControllers', []) var loadLocale = function () { if ($scope.locale == "fr" && angular.isDefined(i18n_FR)) { angular.copy(i18n_FR, $locale); + moment.locale("fr"); } else if (angular.isDefined(i18n_EN)) { angular.copy(i18n_EN, $locale); + moment.locale("en"); } } diff --git a/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js b/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js index 86182c5..125cdb7 100644 --- a/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js +++ b/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js @@ -341,6 +341,65 @@ angular.module('pollControllers', ['ngRoute', 'pollenServices', 'pascalprecht.tr }]) +.controller('PollInfoCtrl', ['$scope', '$timeout', '$interval', + function($scope, $timeout, $interval) { + + var setPollInfo = function() { + if (angular.isUndefined( $scope.data.poll)) { + return ; + } + var poll = $scope.data.poll; + var now = new Date(); + + $scope.timeToBeginVote = moment(poll.beginDate).fromNow(); + + $scope.timeToEndVote = {}; + $scope.timeToEndVote.value = (now.getTime() - poll.beginDate) / (poll.endDate - poll.beginDate) * 100; + $scope.timeToEndVote.label = moment(poll.endDate).fromNow(); + $scope.timeToEndVote.type = getType($scope.timeToEndVote.value); + + if (angular.isUndefined(poll.beginChoiceDate)) { + poll.beginChoiceDate = poll.beginDate; + } + + if (angular.isUndefined(poll.endChoiceDate)) { + poll.endChoiceDate = poll.endChoiceDate; + } + + $scope.timeToBeginAddChoice = moment(poll.beginChoiceDate).fromNow(); + + $scope.timeToAddChoice = {}; + $scope.timeToAddChoice.value = (now.getTime() - poll.beginChoiceDate) / (poll.endChoiceDate - poll.beginChoiceDate) * 100; + $scope.timeToAddChoice.label = moment(poll.endChoiceDate).fromNow(); + $scope.timeToAddChoice.type = getType($scope.timeToAddChoice.value); + + $scope.now = now; + } + + var getType = function (value) { + var type; + if (value < 25) { + type = 'success'; + } else if (value < 50) { + type = 'info'; + } else if (value < 75) { + type = 'warning'; + } else { + type = 'danger'; + } + return type; + } + + $interval(setPollInfo, 5000); + + $timeout(function() { + $scope.$watch('data.poll.beginDate', setPollInfo); + $scope.$watch('data.poll.endDate', setPollInfo); + $scope.$watch('data.poll.beginChoiceDate', setPollInfo); + $scope.$watch('data.poll.endChoiceDate', setPollInfo); + }) + +}]) ////////////////////////////////// // Admin choice controller // diff --git a/pollen-ui-angular/src/main/webapp/less/style.less b/pollen-ui-angular/src/main/webapp/less/style.less index 126a8de..713be4c 100644 --- a/pollen-ui-angular/src/main/webapp/less/style.less +++ b/pollen-ui-angular/src/main/webapp/less/style.less @@ -95,7 +95,7 @@ body { padding-top:60px; padding-left:5px; padding-right:5px; - border-right:2px solid @borderColor; + border-right:2px solid @border-color; background-color: @gray-lighter; overflow:hidden; z-index:50; @@ -180,7 +180,7 @@ body { left:0px; width:100%; height:@foot-height; - border-top:2px solid @borderColor; + border-top:2px solid @border-color; background-color:@gray-lighter; overflow:hidden; z-index:50; @@ -219,10 +219,47 @@ body { font-weight: bold; border-left: 8px solid; padding-left: 4px; - color: #555; + color: @title-setting-color; } } + .poll-info { + background-color: #eee; + border-bottom:1px solid @border-color; + padding:10px 15px 5px 10px; + color: @help-color; + + .anim { + max-height:100px; + overflow:hidden; + + @time:@long-time-transition; + + &.ng-enter { + .transition(all @time linear); + } + + &.ng-leave { + .transition(all @time linear); + } + + &.ng-leave { + max-height:0px; + } + + &.ng-enter, + &.ng-leave.ng-leave-active { + max-height:0px; + } + + &.ng-leave, + &.ng-enter.ng-enter-active { + max-height:100px; + } + } + + } + .pollTitle, .pollDesc { margin-top:15px; min-height:60px; @@ -246,7 +283,7 @@ body { } &:hover { - background:@borderColor; + background:@border-color; .transition(background @time-transition ease); .voteTrue { @@ -289,7 +326,7 @@ body { } .pollBigChoice { - border-bottom:1px solid @borderColor; + border-bottom:1px solid @border-color; text-align:right; h3 { @@ -330,7 +367,7 @@ body { padding-top:10px; padding-bottom:5px; text-align:center; - border:1px solid @borderColor; + border:1px solid @border-color; input[type=text]{ width:140px; @@ -414,12 +451,12 @@ a { .transition-duration(@time-transition); &:hover { - background:@borderColor; + background:@border-color; .transition-duration(@time-transition); } td { - border-bottom:1px solid @borderColor; + border-bottom:1px solid @border-color; padding-top:5px; padding-bottom:15px; padding-left:5px; @@ -429,7 +466,7 @@ a { &>td:first-child { width:200px; - border-right:1px solid @borderColor; + border-right:1px solid @border-color; } } } @@ -446,14 +483,14 @@ a { width:100%; margin-top:25px; margin-bottom:15px; - border:3px solid @borderColor; + border:3px solid @border-color; tr th, tr td { padding-top:8px; padding-bottom:8px; padding-left:5px; padding-right:5px; - border:1px solid @borderColor; + border:1px solid @border-color; &.weight { width: @width-input; @@ -482,12 +519,12 @@ label.label-block { tr { td, th { padding:8px; - border: 1px solid @borderColor; + border: 1px solid @border-color; } .transition-duration(@time-transition); &:hover { - background: @borderColor; + background: @border-color; .transition-duration(@time-transition); } } @@ -554,7 +591,7 @@ footer { margin-left:1.25%; margin-right:1.25%; padding:8px; - background-color:@borderColor; + background-color:@border-color; border-radius:8px; .transition(width @time-transition linear 0); diff --git a/pollen-ui-angular/src/main/webapp/less/variables.less b/pollen-ui-angular/src/main/webapp/less/variables.less index f616224..c823952 100644 --- a/pollen-ui-angular/src/main/webapp/less/variables.less +++ b/pollen-ui-angular/src/main/webapp/less/variables.less @@ -25,11 +25,12 @@ @short-time-transition : 0.2s; @long-time-transition : 1.6s; -@borderColor : #dddddd; +@border-color : #dddddd; @danger-color : @brand-danger; @danger-hover-color : darken(@danger-color, 15%); @help-color: #666; +@title-setting-color: #555; @height-pollen-menu : 50px; @height-footer: 20px; diff --git a/pollen-ui-angular/src/main/webapp/partials/poll-info.html b/pollen-ui-angular/src/main/webapp/partials/poll-info.html new file mode 100644 index 0000000..8fd6892 --- /dev/null +++ b/pollen-ui-angular/src/main/webapp/partials/poll-info.html @@ -0,0 +1,26 @@ + +<div ng-if="data.poll.beginDate >= now" class="anim"> + <h4>Début des votes : {{timeToBeginVote}} </h4> +</div> + +<div ng-if="data.poll.endDate && timeToEndVote.value < 100" class="anim"> + <h4>Fin des votes : {{timeToEndVote.label}} </h4> + <div ng-if="timeToEndVote.value >= 0" class="anim"> + <progressbar max="100" value="timeToEndVote.value" type="{{timeToEndVote.type}}"></progressbar> + </div> +</div> + +<div ng-if="!data.poll.endDate" class="anim"> + <h4> Aucune date de fin de vote fixé. </h4> +</div> + +<div ng-if="data.poll.choiceAddAllowed && data.poll.beginChoiceDate >= now" class="anim"> + <h4>Début d'ajout de choix : {{timeToBeginAddChoice}} </h4> +</div> + +<div ng-if="data.poll.choiceAddAllowed && timeToAddChoice.value < 100" class="anim"> + <h4>Fin d'ajout de choix : {{timeToAddChoice.label}} </h4> + <div ng-if="timeToAddChoice.value >= 0" class="anim"> + <progressbar max="100" value="timeToAddChoice.value" type="{{timeToAddChoice.type}}"></progressbar> + </div> +</div> \ No newline at end of file diff --git a/pollen-ui-angular/src/main/webapp/partials/poll.html b/pollen-ui-angular/src/main/webapp/partials/poll.html index ff2c9dd..cb99bc0 100644 --- a/pollen-ui-angular/src/main/webapp/partials/poll.html +++ b/pollen-ui-angular/src/main/webapp/partials/poll.html @@ -33,6 +33,8 @@ <li ng-class="{active: tab == 'participant'}" ng-show="globalVariables.create"><a href="#/poll/create/participant" ng-click="tab = 'participant'">{{ 'poll.tab.participant' | translate }}</a></li> </ul> + <div ng-include="'./partials/poll-info.html'" ng-controller="PollInfoCtrl" class="poll-info"></div> + <div ng-include="'./partials/poll-poll.html'" ng-if="tab == 'vote'" ng-controller="PollVoteCtrl" class="anim-fade"></div> <div ng-if="!globalVariables.create && (tab == 'edit' || tab == 'conf' || tab == 'participant')" ng-controller="PollEditCtrl"> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.