Author: garandel Date: 2014-04-25 11:34:07 +0200 (Fri, 25 Apr 2014) New Revision: 3876 Url: http://forge.chorem.org/projects/pollen/repository/revisions/3876 Log: update create and vote page Removed: trunk/pollen-ui-angular/src/main/webapp/css/bootstrap-datetimepicker.min.css trunk/pollen-ui-angular/src/main/webapp/js/libs/jquery.scrollto.js Modified: trunk/pollen-ui-angular/src/main/webapp/css/style.css trunk/pollen-ui-angular/src/main/webapp/index.html trunk/pollen-ui-angular/src/main/webapp/js/app.js trunk/pollen-ui-angular/src/main/webapp/js/controllers.js trunk/pollen-ui-angular/src/main/webapp/partials/poll-create.html trunk/pollen-ui-angular/src/main/webapp/partials/poll-vote.html Deleted: trunk/pollen-ui-angular/src/main/webapp/css/bootstrap-datetimepicker.min.css =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/css/bootstrap-datetimepicker.min.css 2014-04-22 16:13:03 UTC (rev 3875) +++ trunk/pollen-ui-angular/src/main/webapp/css/bootstrap-datetimepicker.min.css 2014-04-25 09:34:07 UTC (rev 3876) @@ -1,8 +0,0 @@ -/*! - * Datepicker for Bootstrap - * - * Copyright 2012 Stefan Petre - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - */.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-datetimepicker-widget{top:0;left:0;width:250px;padding:4px;margin-top:1px;z-index:3000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.bootstrap-datetimepicker-widget:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,0.2);position:absolute;top:-7px;left:6px}.bootstrap-datetimepicker-widget:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:7px}.bootstrap-datetimepicker-widget.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget>ul{list-style-type:none;margin:0}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:100%;font-weight:bold;font-size:1.2em}.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator{width:4px;padding:0;margin:0}.bootstrap-datetimepicker-widget .datepicker>div{display:none}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget td,.bootstrap-datetimepicker-widget th{text-align:center;width:20px;height:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.bootstrap-datetimepicker-widget td.day:hover,.bootstrap-datetimepicker-widget td.hour:hover,.bootstrap-datetimepicker-widget td.minute:hover,.bootstrap-datetimepicker-widget td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget td.old,.bootstrap-datetimepicker-widget td.new{color:#999}.bootstrap-datetimepicker-widget td.active,.bootstrap-datetimepicker-widget td.active:hover{color:#fff;background-color:#006dcc;background-image:-moz-linear-gradient(top,#08c,#04c);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));background-image:-webkit-linear-gradient(top,#08c,#04c);background-image:-o-linear-gradient(top,#08c,#04c);background-image:linear-gradient(to bottom,#08c,#04c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);border-color:#04c #04c #002a80;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#04c;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.bootstrap-datetimepicker-widget td.active:hover,.bootstrap-datetimepicker-widget td.active:hover:hover,.bootstrap-datetimepicker-widget td.active:active,.bootstrap-datetimepicker-widget td.active:hover:active,.bootstrap-datetimepicker-widget td.active.active,.bootstrap-datetimepicker-widget td.active:hover.active,.bootstrap-datetimepicker-widget td.active.disabled,.bootstrap-datetimepicker-widget td.active:hover.disabled,.bootstrap-datetimepicker-widget td.active[disabled],.bootstrap-datetimepicker-widget td.active:hover[disabled]{color:#fff;background-color:#04c;*background-color:#003bb3}.bootstrap-datetimepicker-widget td.active:active,.bootstrap-datetimepicker-widget td.active:hover:active,.bootstrap-datetimepicker-widget td.active.active,.bootstrap-datetimepicker-widget td.active:hover.active{background-color:#039 \9}.bootstrap-datetimepicker-widget td.disabled,.bootstrap-datetimepicker-widget td.disabled:hover{background:0;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget td span{display:block;width:47px;height:54px;line-height:54px;float:left;margin:2px;cursor:pointer;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.bootstrap-datetimepicker-widget td span:hover{background:#eee}.bootstrap-datetimepicker-widget td span.active{color:#fff;background-color:#006dcc;background-image:-moz-linear-gradient(top,#08c,#04c);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));background-image:-webkit-linear-gradient(top,#08c,#04c);background-image:-o-linear-gradient(top,#08c,#04c);background-image:linear-gradient(to bottom,#08c,#04c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);border-color:#04c #04c #002a80;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#04c;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.bootstrap-datetimepicker-widget td span.active:hover,.bootstrap-datetimepicker-widget td span.active:active,.bootstrap-datetimepicker-widget td span.active.active,.bootstrap-datetimepicker-widget td span.active.disabled,.bootstrap-datetimepicker-widget td span.active[disabled]{color:#fff;background-color:#04c;*background-color:#003bb3}.bootstrap-datetimepicker-widget td span.active:active,.bootstrap-datetimepicker-widget td span.active.active{background-color:#039 \9}.bootstrap-datetimepicker-widget td span.old{color:#999}.bootstrap-datetimepicker-widget td span.disabled,.bootstrap-datetimepicker-widget td span.disabled:hover{background:0;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget th.switch{width:145px}.bootstrap-datetimepicker-widget th.next,.bootstrap-datetimepicker-widget th.prev{font-size:21px}.bootstrap-datetimepicker-widget th.disabled,.bootstrap-datetimepicker-widget th.disabled:hover{background:0;color:#999;cursor:not-allowed}.bootstrap-datetimepicker-widget thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget thead tr:first-child th:hover{background:#eee}.input-append.date .add-on i,.input-prepend.date .add-on i{display:block;cursor:pointer;width:16px;height:16px}.bootstrap-datetimepicker-widget.left-oriented:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.left-oriented:after{left:auto;right:7px} \ No newline at end of file Modified: trunk/pollen-ui-angular/src/main/webapp/css/style.css =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/css/style.css 2014-04-22 16:13:03 UTC (rev 3875) +++ trunk/pollen-ui-angular/src/main/webapp/css/style.css 2014-04-25 09:34:07 UTC (rev 3876) @@ -111,11 +111,11 @@ padding-left:5px; margin-bottom:30px; } -.pollTitle, .pollDesc, .pollChoice { +.pollAnim { background-color:#F8F8F8; transition-duration:0.8s; } -.pollTitle:hover, .pollDesc:hover, .pollChoice:hover { +.pollAnim:hover { background:#CCD8DD; transition-duration: 0.8s; } @@ -126,19 +126,6 @@ font-size:20px; } -.popEditor { - width:80%; - height:300px; - background-color:white; - box-shadow:0px 0px 15px 15px rgba(0,0,0,0.8); - border-radius:30px; - float:left; - padding:30px; - position:fixed; - top:80px; - left:10%; -} - #poll { text-align:center; } @@ -148,26 +135,33 @@ } #poll tr, #poll tr td { border-collapse: collapse; - border: 1px dashed #AAAAAA; - text-align:center; - padding-left:5px; - padding-right:5px; } -#poll tr td { +.pollChoice { height:60px; min-width:150px; padding-left:5px; padding-right:5px; padding-top:10px; padding-bottom:5px; + border: 1px dashed #AAAAAA; + text-align:center; + padding-left:5px; + padding-right:5px; } -#poll input[type=text]{ +.pollChoice input[type=text]{ height:25px; width:140px; } -#poll input[type=checkbox]{ +.pollChoice input[type=checkbox]{ width:25px; height:25px; - } \ No newline at end of file + } + +.right-inner-addon .glyphicon-input { + position: absolute; + right: 30px; + top:10px; + pointer-events: none; +} \ No newline at end of file Modified: trunk/pollen-ui-angular/src/main/webapp/index.html =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/index.html 2014-04-22 16:13:03 UTC (rev 3875) +++ trunk/pollen-ui-angular/src/main/webapp/index.html 2014-04-25 09:34:07 UTC (rev 3876) @@ -8,12 +8,12 @@ it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. - + This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. - + You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. #L% @@ -21,121 +21,38 @@ <html lang="en" ng-app="pollen"> <head> <title>Pollen</title> - <link rel="stylesheet" href="pollen-ui-angular.css" /> - <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" /> - <link rel="stylesheet" href="css/style.css" /> + <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> + <link rel="stylesheet" href="css/style.css"/> - <script src="pollen-ui-angular.js"></script> - <script src="js/libs/ckeditor/ckeditor.js"></script> - <script src="js/libs/ckeditor/adapters/jquery.js"></script> - <script src="js/libs/jquery.scrollto.js"></script> - <script src="js/libs/bootstrap-datetimepicker.min.js"></script> - <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-resource.min.js"></script> + <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script> + <script src="js/libs/ckeditor/ckeditor.js"></script> + <script src="js/libs/ckeditor/adapters/jquery.js"></script> + <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/services.js"></script> </head> <body> - <div class="navbar navbar-inverse navbar-static-top"> - - <div class="navbar-inner"> - <a class="brand" href="#">Pollen</a> - - <ul class="nav"> - <li><a href="#">Home</a></li> - - <li class="dropdown"> - <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> - Create <strong class="caret"></strong> - </a> - - <ul class="dropdown-menu" role="menu"> - <li role="presentation"> - <a href="#/poll/create" role="menuitem" tabIndex="-1">WYSIWYG</a> - </li> - - <li role="presentation"> - <a href="#/polls/form" role="menuitem" tabIndex="-1">form</a> - </li> - - <li class="divider" role="presentation" ng-show="currentUser.login"></li> - - <li role="presentation" ng-show="currentUser.login"> - <a href="#/polls/" role="menuitem" tabIndex="-1">pollen.menu.polls.list</a> - </li> - - </ul> - </li> - <li> <a href="#/poll/vote"> Voter </a></li> +<nav class="navbar navbar-inverse navbar-static-top"> + <div class="container-fluid"> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Pollen</a> + </div> + <div class="collapse navbar-collapse"> + <ul class="nav navbar-nav"> + <li><a href="#/poll/create">Creer</a></li> + <li><a href="#/poll/vote">Voter</a></li> </ul> - - <ul class="nav pull-right"> - <li ng-show="!currentUser.login"> - <a href="#/user/register/">pollen.menu.register</a> - </li> - - <li class="divider-vertical" ng-show="!currentUser.login"></li> - - <li class="dropdown" ng-show="!currentUser.login"> - <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> - pollen.menu.login.label <strong class="caret"></strong> - </a> - - <div class="dropdown-menu form" role="menu"> - <form id='loginForm'> - - <div class="control-group"> - <label class="control-label">pollen.menu.login.form.login.label</label> - <input type="text" name='login' placeholder="pollen.menu.login.form.login.placeholder"/> - <span class="help-block hide"></span> - </div> - - <div class="control-group"> - <label class="control-label" >pollen.menu.login.form.password.label</label> - <input type="password" name='password' placeholder="pollen.menu.login.form.password.placeholder"/> - <span class="help-block hide"></span> - </div> - - <div class="control-group"> - <label class="control-label checkbox" > - <input type="checkbox" name='rememberMe'> pollen.menu.login.form.rememberMe.label - </label> - </div> - - <div class="form-actions"> - <button type="submit" class="btn btn-primary">pollen.menu.login.form.button</button> - </div> - - </form> - </div> - </li> - - <li class="dropdown" ng-show="currentUser.login"> - <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> - {{ currentUser.name }} <strong class="caret"></strong> - </a> - - <ul class="dropdown-menu" role="menu"> - <li role="presentation"> - <a href="#/user/edit/{{currentUser.id}}">pollen.menu.user.profile</a> - </li> - - <li class="divider" role="presentation"></li> - <li role="presentation"> - <a id='menuItemLogout'>pollen.menu.logout</a> - </li> - - </ul> - </li> - </ul> </div> </div> +</nav> - <div ng-view class='container' id="content"></div> +<div ng-view class='container' id="content"></div> </body> -</html> \ No newline at end of file +</html> + Modified: trunk/pollen-ui-angular/src/main/webapp/js/app.js =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/js/app.js 2014-04-22 16:13:03 UTC (rev 3875) +++ trunk/pollen-ui-angular/src/main/webapp/js/app.js 2014-04-25 09:34:07 UTC (rev 3876) @@ -8,32 +8,31 @@ * it under the terms of the GNU Affero General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. - * + * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. - * + * * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see <http://www.gnu.org/licenses/>. * #L% */ -angular.module('pollen', ["ngRoute", "pollenControllers", "pollenServices"]) +angular.module('pollen', ["ngRoute", "pollenControllers", "pollenServices", 'ui.bootstrap']) .config(['$routeProvider', function($routeProvider) { + $routeProvider.when('/', {templateUrl: 'partials/home.html', controller: "HomeCtrl"}) + .when('/poll/create', {templateUrl: 'partials/poll-create.html', controller: "PollCreateCtrl"}) + .when('/poll/vote', {templateUrl: 'partials/poll-vote.html', controller :"PollVoteCtrl"}) + .when('/polls', {templateUrl: 'partials/poll-list.html', controller: "PollListCtrl"}) + .when('/polls/form', {templateUrl: 'partials/poll-form.html', controller: "PollFormCtrl"}) + .when('/polls/:pollId', {templateUrl: 'partials/poll-detail.html', controller: "PollDetailCtrl"}) + .otherwise({redirectTo: '/'}); - $routeProvider.when('/', {templateUrl: 'partials/home.html', controller: "HomeCtrl"}) - .when('/poll/create', {templateUrl: 'partials/poll-create.html', controller: "PollCreateCtrl"}) - .when('/poll/vote', {templateUrl: 'partials/poll-vote.html', controller :"PollVoteCtrl"}) - .when('/polls', {templateUrl: 'partials/poll-list.html', controller: "PollListCtrl"}) - .when('/polls/form', {templateUrl: 'partials/poll-form.html', controller: "PollFormCtrl"}) - .when('/polls/:pollId', {templateUrl: 'partials/poll-detail.html', controller: "PollDetailCtrl"}) - .otherwise({redirectTo: '/'}); - }]).config(['$httpProvider', function($httpProvider) { - $httpProvider.defaults.useXDomain = true; - delete $httpProvider.defaults.headers.common['X-Requested-With']; + $httpProvider.defaults.useXDomain = true; + delete $httpProvider.defaults.headers.common['X-Requested-With']; }]) .directive('focusMe', function($timeout) { return { @@ -49,38 +48,58 @@ } }; }) + .directive('ckEditor', function () { - return { - require: '?ngModel', - link: function ($scope, elm, attr, ngModel) { + return { + require: '?ngModel', + link: function ($scope, elm, attr, ngModel) { + var ck = CKEDITOR.replace(elm[0]); - var ck = CKEDITOR.replace(elm[0]); + ck.on('pasteState', function () { + $scope.$apply(function () { + ngModel.$setViewValue(ck.getData()); + }); + }); - ck.on('pasteState', function () { - $scope.$apply(function () { - ngModel.$setViewValue(ck.getData()); - }); - }); + ngModel.$render = function (value) { + ck.setData(ngModel.$modelValue); + }; + } + }; +}) - ngModel.$render = function (value) { - ck.setData(ngModel.$modelValue); - }; - } - }; +.directive('ngExit', function ($timeout) { + return function (scope, element, attrs) { + element.bind("keydown keypress", function (event) { + if(event.which === 13 || event.which === 27) { + scope.$apply(function (){ + scope.$eval(attrs.ngExit); + }); + + event.preventDefault(); + } + }); + element.bind('blur', function () { + $timeout (function () { + scope.$apply(attrs.ngExit); + }, 150); + event.preventDefault(); + }); + }; }) + .factory('pollStorage', function () { - var storageId='poll-storage'; - return { - get: function () { - return JSON.parse(localStorage.getItem(storageId) || '{}'); - }, - put: function (data) { - localStorage.setItem(storageId, JSON.stringify(data)); - }, - remove: function () { - localStorage.setItem(storageId, '{}'); - } - } + var storageId='poll-storage'; + return { + get: function () { + return JSON.parse(localStorage.getItem(storageId) || '{}'); + }, + put: function (data) { + localStorage.setItem(storageId, JSON.stringify(data)); + }, + remove: function () { + localStorage.setItem(storageId, '{}'); + } + } +}); -}) -; \ No newline at end of file Modified: trunk/pollen-ui-angular/src/main/webapp/js/controllers.js =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/js/controllers.js 2014-04-22 16:13:03 UTC (rev 3875) +++ trunk/pollen-ui-angular/src/main/webapp/js/controllers.js 2014-04-25 09:34:07 UTC (rev 3876) @@ -8,12 +8,12 @@ * it under the terms of the GNU Affero General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. - * + * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. - * + * * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see <http://www.gnu.org/licenses/>. * #L% @@ -21,42 +21,108 @@ angular.module('pollenControllers', []).controller('HomeCtrl', ['$scope', '$http', function ($scope, $http) { }]) -.controller('PollCreateCtrl', function ($scope, $http, $sce, pollStorage) { +.controller('PollCreateCtrl', ['$scope', '$http', '$sce', '$modal', '$filter', 'pollStorage', function ($scope, $http, $sce, $modal, $filter, pollStorage) { + function initPoll() { + return { + title :'Click Me for Editing', + description : '', + choices : [] + }; + } + + function initChoice() { + return { + name: '', + type: 'text' + }; + } + $scope.gvar = {}; $scope.poll = pollStorage.get(); if (JSON.stringify($scope.poll) == "{}") { - $http.get('http://localhost:8080/pollen/v1/polls/new?choiceType=TEXT').success(function(data) { - data.choices = [{name:"Choix 1"}, {name:"Choix 2"}]; - data.title = "Titre"; - $scope.poll = data; + $scope.poll = initPoll(); + } + + $scope.addChoice = function () { + var index = $scope.poll.choices.push(initChoice()); + var choice = $scope.poll.choices[index-1]; + var modalInstance = $modal.open({ + templateUrl : 'popupChoice.html', + controller : PollPopChoiceCtrl, + resolve : { + title : function () { return 'Add Choice';}, + choice : function () { return choice; } + } }); + modalInstance.result.then(function (ch) { + deleteChoice(ch); + }); + } - $scope.addChoice = function() { - var index = $scope.poll.choices.push({}); - console.log('index=',index); - $scope.poll.choices[index-1].name = "Choix "+index; + $scope.editChoice = function (choice) { + var modalInstance = $modal.open({ + templateUrl : 'popupChoice.html', + controller : PollPopChoiceCtrl, + resolve : { + title : function () { return 'Edit Choice';}, + choice : function () { return choice; } + } + }); + + modalInstance.result.then(function (ch) { + deleteChoice(ch); + }); } - $scope.save = function () { + var deleteChoice = function (ch) { + var index = $scope.poll.choices.indexOf(ch); + if (index > -1) { + $scope.poll.choices.splice(index,1); + } + } + + $scope.save = function () { pollStorage.put($scope.poll); $scope.gvar.saved = true; } + $scope.reset = function () { - $scope.poll = {}; + $scope.poll = initPoll(); pollStorage.put({}); } + $scope.toHTML = function (data) { return $sce.trustAsHtml(data); } -}) -.controller('PollVoteCtrl', function ($scope, $sce, pollStorage) { + + var PollPopChoiceCtrl = function ($scope, $filter, $modalInstance, title, choice) { + $scope.title = title; + $scope.choice = choice; + + $scope.saveChoice = function () { + $modalInstance.close(); + } + + $scope.deleteChoice = function (ch) { + $modalInstance.close(ch); + } + + } +}]) + +.controller('PollVoteCtrl', ['$scope', '$filter', '$sce', 'pollStorage', function ($scope, $filter, $sce, pollStorage) { $scope.gvar = {saved:false}; $scope.poll = pollStorage.get(); $scope.voteName = "Name"; $scope.voteChoices = []; for (var i = 0; i < $scope.poll.choices.length; ++i) { - $scope.voteChoices.push({name:$scope.poll.choices[i].name, value:false}); + if ($scope.poll.choices[i].type == 'text') { + $scope.voteChoices.push({name:$scope.poll.choices[i].name, value:false}); + } + else if ($scope.poll.choices[i].type == 'date') { + $scope.voteChoices.push({name: $filter('date')($scope.poll.choices[i].date,'dd/MM/yyyy') , value:false}); + } } $scope.vote = function () { @@ -74,7 +140,7 @@ $scope.toHTML = function (data) { return $sce.trustAsHtml(data); } -}) +}]) .controller('PollFormCtrl', ['$scope', '$http', function ($scope, $http) { $http.get('http://localhost:8080/pollen/v1/polls/new?choiceType=TEXT').success(function(data) { data.choices = [{}, {}]; @@ -134,4 +200,5 @@ this.text = ""; } -}]); \ No newline at end of file +}]); + Deleted: trunk/pollen-ui-angular/src/main/webapp/js/libs/jquery.scrollto.js =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/js/libs/jquery.scrollto.js 2014-04-22 16:13:03 UTC (rev 3875) +++ trunk/pollen-ui-angular/src/main/webapp/js/libs/jquery.scrollto.js 2014-04-25 09:34:07 UTC (rev 3876) @@ -1,54 +0,0 @@ -/* - * #%L - * Pollen :: UI (JS) - * $Id$ - * $HeadURL$ - * %% - * Copyright (C) 2009 - 2013 CodeLutin - * %% - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * #L% - */ -/*! - * jquery.scrollto.js 0.0.1 - https://github.com/yckart/jquery.scrollto.js - * Scroll smooth to any element in your DOM. - * - * Copyright (c) 2012 Yannick Albert (http://yckart.com) - * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php). - * 2013/02/17 - **/ -$.scrollTo = $.fn.scrollTo = function(x, y, options){ - if (!(this instanceof $)) return $.fn.scrollTo.apply($('html, body'), arguments); - - options = $.extend({}, { - gap: { - x: 0, - y: 0 - }, - animation: { - easing: 'swing', - duration: 600, - complete: $.noop, - step: $.noop - } - }, options); - - return this.each(function(){ - var elem = $(this); - elem.stop().animate({ - scrollLeft: !isNaN(Number(x)) ? x : $(y).offset().left + options.gap.x, - scrollTop: !isNaN(Number(y)) ? y : $(y).offset().top + options.gap.y - }, options.animation); - }); -}; Modified: trunk/pollen-ui-angular/src/main/webapp/partials/poll-create.html =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/partials/poll-create.html 2014-04-22 16:13:03 UTC (rev 3875) +++ trunk/pollen-ui-angular/src/main/webapp/partials/poll-create.html 2014-04-25 09:34:07 UTC (rev 3876) @@ -20,42 +20,110 @@ ~ #L% ~ --> +<form> + <alert type="'success'" ng-if="gvar.saved"> Sondage sauvegardé..</alert> - <div class="alert alert-success" ng-show="gvar.saved"> Sondage sauvegardé.. </div> + <div class="pollTitle pollAnim" ng-click="showEditTitle = true; gvar.saved = false;"> + <h1 ng-hide="showEditTitle"> {{poll.title}} </h1> - <div class="pollTitle" ng-click="showEditTitle = true; gvar.saved = false;"> - <h1 ng-hide="showEditTitle"> {{poll.title}} </h1> - <h1 ng-show="showEditTitle" ><input type="text" focus-me="showEditTitle" ng-blur="showEditTitle = false" ng-model="poll.title" /></h1> + <h1 ng-show="showEditTitle"><input type="text" focus-me="showEditTitle" ng-model="poll.title" ng-exit="showEditTitle = false"/></h1> + </div> + + <div ng-hide="showEditDesc" class="pollDesc pollAnim" ng-click="showEditDesc = true; gvar.saved = false;"> + <div> Description (Facultatif):</div> + <div ng-bind-html="toHTML(poll.description)"></div> + </div> + <div ng-show="showEditDesc" class="pollDesc " ng-exit="showEditDesc = false;"> + <textarea id="descEditor" data-ck-editor ng-model="poll.description"></textarea> + + <input type="button" value="Return" class="btn btn-primary" ng-click="showEditDesc = false;"/> + </div> + + <div id="poll"> + <table> + <tr> + <td class="pollChoice"> Votant</td> + <td ng-repeat="choice in poll.choices" class="pollChoice pollAnim" + ng-click="showEdit = true; gvar.saved = false;"> + <div ng-show="choice.type == 'text'"> + <div ng-hide="showEdit" title="{{choice.description}}">{{choice.name}}</div> + <div ng-show="showEdit"> + <input type="text" ng-model="choice.name" focus-me="showEdit" ng-exit="showEdit = false"/> + <input type="button" class="btn" data-toggle="modal" data-target="#popupAddChoice" ng-click="editChoice(choice)" value="..."/> + </div> + </div> + <div ng-show="choice.type == 'date'"> + <div ng-hide="showEdit" title="{{choice.description}}">{{choice.date | date:'dd/MM/yyyy'}}</div> + <div ng-show="showEdit"> + <input type="text" ng-model="choice.date" focus-me="showEdit" datepicker-popup="dd/MM/yyyy" ng-exit="showEdit = false"/> + <input type="button" class="btn" data-toggle="modal" data-target="#popupAddChoice" ng-click="editChoice(choice)" value="..."/> + </div> + </div> + </td> + <td><input type="button" class="btn btn-default" value="+" ng-click="addChoice()"/></td> + </tr> + <tr> + <td class="pollChoice"> Name</td> + <td ng-repeat="choice in poll.choices" class="pollChoice"> + <input type="checkbox" name="{{choice.name}}" ng-model="value"/> + </td> + <td></td> + </tr> + </table> + <input class="btn btn-primary" type="button" value="Save" ng-click="save()"/> + + <br/><br/><br/> + <input type="button" value="reset" ng-click="reset();"/> + </div> +</form> + +<script type="text/ng-template" id="popupChoice.html"> + <form class="form-horizontal"> + <div class="modal-header"> + <h4 class="modal-title">{{title}}</h4> </div> + <div class="modal-body"> - <div class="pollDesc" ng-click="showEditDesc = true; gvar.saved = false;"> - <div> Description (Facultatif): </div> - <div ng-bind-html="toHTML(poll.description)"> </div> - </div> - <div ng-show="showEditDesc" class="popEditor"> - <textarea id="descEditor" data-ck-editor ng-model="poll.description"></textarea> + <div class="form-group"> + <label class="col-sm-4 control-label">Type de choix :</label> - <input type="button" value="Return" class="btn btn-primary" ng-click="showEditDesc = false;"/> - </div> + <div class="col-sm-8 btn-group"> + <button type="button" class="btn btn-default" ng-model="choice.type" btn-radio="'text'">Text</button> + <button type="button" class="btn btn-default" ng-model="choice.type" btn-radio="'date'">Date</button> + <button type="button" class="btn btn-default" ng-model="choice.type" btn-radio="'picture'" disabled>Image</button> + </div> + </div> - <div id="poll" > - <table> - <tr> - <td> Votant </td> - <td ng-repeat="choice in poll.choices" class="pollChoice" ng-click="showEdit = true; gvar.saved = false;"> - <div ng-hide="showEdit">{{choice.name}}</div> - <div ng-show="showEdit"> <input type="text" ng-model="choice.name" focus-me="showEdit" ng-blur="showEdit = false" /> </div> - </td> - <td class="pollChoice"><input type="button" class="btn" ng-click="addChoice()" value="+" /></td> - </tr> - <tr> - <td> Name </td> - <td ng-repeat="choice in poll.choices" class="pollChoice"> <input type="checkbox" name="{{choice.name}}" /></td> - <td class="pollChoice"></td> - </tr> - </table> - <input class="btn btn-primary" type="button" value="Save" ng-click="save()" /> + <div class="form-group" ng-if="choice.type == 'text'"> + <label for="popNameChoiceCheck" class="col-sm-4 control-label">Nom du Choix : </label> - <br/><br/><br/> - <input type="button" value="reset" ng-click="reset();" /> - </div> + <div class="col-sm-6"> + <input id="popNameChoiceCheck" type="text" ng-model="choice.name" class="form-control"/> + </div> + </div> + + <div class="form-group" ng-if="choice.type == 'date'"> + <label for="popNameChoiceDate" class="col-sm-4 control-label">Date : </label> + + <div class="col-sm-6"> + <div class="right-inner-addon "> + <i class="glyphicon glyphicon-calendar glyphicon-input"></i> + <input id="popNameChoiceDate" class="form-control" datepicker-popup="dd/MM/yyyy" type="text" ng-model="choice.date" is-open="opened"/> + </div> + </div> + </div> + <div class="form-group"> + <label for="popDescChoice" class="col-sm-4 control-label">Description : </label> + + <div class="col-sm-6"> + <textarea id="popDescChoice" type="text" ng-model="choice.description" class="form-control"></textarea> + </div> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="deleteChoice(choice)">delete</button> + <button type="button" class="btn btn-primary" ng-click="saveChoice()">Save</button> + </div> + </form> +</script> + Modified: trunk/pollen-ui-angular/src/main/webapp/partials/poll-vote.html =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/partials/poll-vote.html 2014-04-22 16:13:03 UTC (rev 3875) +++ trunk/pollen-ui-angular/src/main/webapp/partials/poll-vote.html 2014-04-25 09:34:07 UTC (rev 3876) @@ -1,29 +1,38 @@ <div class="alert alert-success" ng-show="gvar.saved"> Vote effectué.. </div> +<div class="pollTitle"> + <h1> {{poll.title}} </h1> +</div> +<div class="pollDesc" ng-hide="poll.description == ''" > + <div ng-bind-html="toHTML(poll.description)"> </div> +</div> +<div id="poll" > + <table> + <tr> + <td class="pollChoice"> Votant </td> + <td ng-repeat="choice in poll.choices" class="pollChoice"> + <div ng-if="choice.type == 'text'"> + <div title="{{choice.description}}">{{choice.name}}</div> + </div> + <div ng-if="choice.type == 'date'"> + <div title="{{choice.description}}">{{choice.date | date:'dd/MM/yyyy'}}</div> + </div> + </td> + </tr> + <tr ng-repeat="vote in poll.votants track by $index" class="pollAnim"> + <td class="pollChoice"> {{vote.name}}</td> + <td ng-repeat="choice in vote.choices" class="pollChoice"> + <input type="checkbox" ng-model="choice.value" disabled/> + </td> + </tr> + <tr ng-hide="gvar.saved"> + <td class="pollChoice pollAnim"> <input type="text" ng-model="voteName" /> </td> + <td ng-repeat="choice in voteChoices" class="pollChoice pollAnim" > + <input type="checkbox" name="{{choice.name}}" ng-model="choice.value" /> + </td> + </tr> + </table> + <input class="btn btn-primary" type="button" value="Vote" ng-click="vote()" ng-hide="gvar.saved"/> - <h1 class="pollTitle"> {{poll.title}} </h1> +</div> - <div class="pollDesc"> - <div> Description (Facultatif): </div> - <div ng-bind-html="toHTML(poll.description)"> </div> - </div> -<div id="poll" > - <table> - <tr> - <td> Votant </td> - <td ng-repeat="choice in poll.choices"> - {{choice.name}} - </td> - </tr> - <tr ng-repeat="vote in poll.votants"> - <td> {{vote.name}}</td> - <td ng-repeat="choice in vote.choices"> <input type="checkbox" ng-model="choice.value" disabled/></td> - </tr> - <tr ng-hide="gvar.saved"> - <td class="pollChoice"> <input type="text" ng-model="voteName" /> </td> - <td ng-repeat="choice in voteChoices" class="pollChoice" > <input type="checkbox" name="{{choice.name}}" ng-model="choice.value"/></td> - </tr> - </table> - <input class="btn btn-primary" type="button" value="Vote" ng-click="vote()" ng-hide="gvar.saved"/> - -</div> \ No newline at end of file