Author: garandel Date: 2014-04-30 12:05:11 +0200 (Wed, 30 Apr 2014) New Revision: 3890 Url: http://forge.chorem.org/projects/pollen/repository/revisions/3890 Log: add second interface for create and vote Added: trunk/pollen-ui-angular/src/main/webapp/partials/big-poll.html trunk/pollen-ui-angular/src/main/webapp/partials/inline-poll.html trunk/pollen-ui-angular/src/main/webapp/partials/poll.html Removed: trunk/pollen-ui-angular/src/main/webapp/partials/poll.html Modified: trunk/pollen-ui-angular/src/main/webapp/css/style.css trunk/pollen-ui-angular/src/main/webapp/js/app.js trunk/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js Modified: trunk/pollen-ui-angular/src/main/webapp/css/style.css =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/css/style.css 2014-04-29 19:10:38 UTC (rev 3889) +++ trunk/pollen-ui-angular/src/main/webapp/css/style.css 2014-04-30 10:05:11 UTC (rev 3890) @@ -85,38 +85,24 @@ color: rgb(150, 150, 150); } -#voteForm .choice { - background-position: center; - background-repeat: no-repeat; - text-align: center; -} - -#voteForm .selected { - background-color: #6f6; -} - -#voteForm .notSelected { - background-color: #f66; -} - -#voteForm .voteBeforeChoice { - background-color: #ff6; -} - .pollTitle, .pollDesc { margin-top:15px; min-height:60px; - border:1px dashed #AAAAAA; border-radius:5px; padding-left:5px; margin-bottom:30px; } + +.pollTitle input[type="text"] { + width:99%; +} + .pollAnim { - background-color:#F8F8F8; + background-color:inherit; transition-duration:0.8s; } .pollAnim:hover { - background:#CCD8DD; + background:#DDDDDD; transition-duration: 0.8s; } .pollTitle input { @@ -146,11 +132,11 @@ padding-right:5px; padding-top:10px; padding-bottom:5px; - border: 1px dashed #AAAAAA; text-align:center; + border:1px solid #DDD; } -. -pollChoice input[type=text]{ + +.pollChoice input[type=text]{ height:25px; width:140px; } @@ -170,4 +156,31 @@ .fixe-input .ng-hide { display:inline-block !important; visibility:hidden; +} + +.pollBigChoice { + border-bottom:1px solid #DDDDDD; + text-align:right; +} +.pollBigChoice h3 { + background-color:rgba(0,0,0,0.1); + padding:5px; + height:40px; +} +.pollBigChoice button { + height:30px; +} +.pollBigChoice p { + text-align:justify; +} +.pollBigChoice textarea { + width:99%; +} +.pollBigChoice h3 input[type=text] { + width:99%; + text-align:right; +} +.pollBigChoice .pollChoiceInput { + margin-top:20px; + text-align:center; } \ No newline at end of file Modified: trunk/pollen-ui-angular/src/main/webapp/js/app.js =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/js/app.js 2014-04-29 19:10:38 UTC (rev 3889) +++ trunk/pollen-ui-angular/src/main/webapp/js/app.js 2014-04-30 10:05:11 UTC (rev 3890) @@ -21,11 +21,11 @@ angular.module('pollen', ["ngRoute", "pollControllers", 'ui.bootstrap']) .config(['$routeProvider', function($routeProvider) { - $routeProvider.when('/', {templateUrl: 'partials/home.html', controller: "HomeCtrl"}) - .when('/poll/create', {templateUrl: 'partials/poll.html', controller: "PollAdminCtrl"}) - .when('/poll/edit/:pollId', {templateUrl: 'partials/poll.html', controller:"PollAdminCtrl"}) - .when('/poll/vote', {templateUrl: 'partials/poll.html', controller :"PollVoteCtrl"}) - .when('/poll/list', {templateUrl: 'partials/poll-list.html', controller :"PollListCtrl"}) + $routeProvider.when('/', {templateUrl: './partials/home.html', controller: "HomeCtrl"}) + .when('/poll/create', {templateUrl: './partials/poll.html', controller: "PollAdminCtrl"}) + .when('/poll/edit/:pollId', {templateUrl: './partials/poll.html', controller:"PollAdminCtrl"}) + .when('/poll/vote', {templateUrl: './partials/poll.html', controller :"PollVoteCtrl"}) + .when('/poll/list', {templateUrl: './partials/poll-list.html', controller :"PollListCtrl"}) .otherwise({redirectTo: '/'}); }]) Modified: trunk/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js 2014-04-29 19:10:38 UTC (rev 3889) +++ trunk/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js 2014-04-30 10:05:11 UTC (rev 3890) @@ -35,6 +35,32 @@ $scope.toHTML = function (data) { return $sce.trustAsHtml(data); } + + $scope.inlineVersion = function () { + $scope.poll.template = 'inline'; + $scope.templateURL = './partials/inline-poll.html'; + } + + $scope.bigVersion = function () { + $scope.poll.template = 'big'; + $scope.templateURL = './partials/big-poll.html'; + } + + var initTemplateURL = function () { + if (angular.isDefined($scope.poll.template)) { + if ($scope.poll.template == "big") { + $scope.bigVersion(); + } + else { + $scope.inlineVersion(); + } + } + else { + $scope.inlineVersion(); + } + } + initTemplateURL(); + }]) @@ -57,6 +83,7 @@ } $scope.globalVariables.editMode = true; + $scope.globalVariables.create = true; $scope.globalVariables.voted = angular.isDefined($scope.poll.votants); $scope.globalVariables.lastType = 'text'; @@ -154,6 +181,11 @@ $controller('PollCtrl', {$scope:$scope}); $scope.globalVariables.editMode = false; + $scope.$watch('voteName', function (newVal) { + if (newVal != '') { + $scope.globalVariables.errorForm = false; + } + }); var initVote = function () { $scope.voteName = ""; @@ -180,6 +212,7 @@ $scope.poll.votants.push(data); pollStorage.put($scope.poll); $scope.globalVariables.saved = true; + $scope.globalVariables.errorForm = false; initVote(); } else { Added: trunk/pollen-ui-angular/src/main/webapp/partials/big-poll.html =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/partials/big-poll.html (rev 0) +++ trunk/pollen-ui-angular/src/main/webapp/partials/big-poll.html 2014-04-30 10:05:11 UTC (rev 3890) @@ -0,0 +1,67 @@ +<!-- + ~ + ~ #%L + ~ Pollen :: UI (Angular) + ~ %% + ~ Copyright (C) 2009 - 2014 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% + ~ + --> + +<div ng-repeat="choice in poll.choices" class="row pollBigChoice"> + <div class="col-sm-10"> + + <div ng-click="showDesc = !showDesc" > + <div ng-if="choice.type == 'text'"> + <h3 edit-me="showEdit" ng-hide="showEdit" ng-mouseenter="showEditHover = true" ng-mouseleave="showEditHover = false"> + <button class="btn btn-default" ng-if="!globalVariables.voted && globalVariables.editMode" ng-show="showEditHover" ng-click="editChoice(choice)">...</button> + {{choice.name}} + </h3> + <h3 ng-show="showEdit"> + <input type="text" ng-model="choice.name" focus-me="showEdit" ng-exit="showEdit = false" required/> + </h3> + </div> + + <div ng-if="choice.type == 'date'"> + <h3 edit-me="showEdit" ng-hide="showEdit || isOpen" ng-mouseenter="showEditHover = true" ng-mouseleave="showEditHover = false"> + <button class="btn btn-default" ng-if="!globalVariables.voted && globalVariables.editMode" ng-show="showEditHover" ng-click="editChoice(choice)">...</button> + {{choice.date | date:'dd/MM/yyyy'}} + </h3> + <h3 ng-show="showEdit || isOpen"> + <input type="text" ng-model="choice.date" datepicker-popup="dd/MM/yyyy" is-open="isOpen" focus-me="showEdit" ng-exit="showEdit = false" required/> + </h3> + </div> + </div> + <p collapse="!globalVariables.editMode && !showDesc" edit-me="showEditDesc" ng-hide="showEditDesc">{{choice.description}}</p> + <p ng-show="globalVariables.editMode && showEditDesc"><textarea ng-model="choice.description" focus-me="showEditDesc" ng-exit="showEditDesc = false" cols="80" rows="8"></textarea></p> + </div> + <div class="col-sm-2 pollChoiceInput"> + <input type="checkbox" ng-model="choice.value"/> + </div> +</div> +<div class="row pollBigChoice" ng-if="globalVariables.editMode"> + <div class="col-sm-10"> + <button class="btn btn-info btn-large" ng-click="addChoice()">Ajouter un choix</button> + </div> + <div class="col-sm-2"> + <button ng-click="inlineVersion()" class="btn btn-default">inline version</button> + </div> +</div> + +<div style="float:right; margin-top:5px;"> + <input type="text" placeholder="Votre Nom" ng-model="voteName"/> + <button class="btn btn-primary" >Voter</button> +</div> \ No newline at end of file Copied: trunk/pollen-ui-angular/src/main/webapp/partials/inline-poll.html (from rev 3889, trunk/pollen-ui-angular/src/main/webapp/partials/poll.html) =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/partials/inline-poll.html (rev 0) +++ trunk/pollen-ui-angular/src/main/webapp/partials/inline-poll.html 2014-04-30 10:05:11 UTC (rev 3890) @@ -0,0 +1,63 @@ +<!-- + ~ + ~ #%L + ~ Pollen :: UI (Angular) + ~ %% + ~ Copyright (C) 2009 - 2014 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% + ~ + --> + + <table> + <tr> + <td><button ng-if="globalVariables.editMode" ng-click="bigVersion()" class="btn btn-default" >Big version</button></td> + <td ng-repeat="choice in poll.choices" class="pollChoice pollAnim" ng-mouseenter="showEditHover = true" ng-mouseleave="showEditHover = false"> + <div ng-if="choice.type == 'text'" edit-me="showEdit" > + <div ng-hide="showEdit && !globalVariables.voted" class="fixe-input" title="{{choice.description}}">{{choice.name}} <input type="button" class="btn btn-default" ng-if="!globalVariables.voted && globalVariables.editMode" ng-show="showEditHover" ng-click="editChoice(choice)" value="..."/></div> + <div ng-show="showEdit && !globalVariables.voted"> + <input type="text" class="form-control" ng-model="choice.name" focus-me="showEdit" ng-exit="showEdit = false" required/> + <input type="button" class="btn btn-default" data-toggle="modal" data-target="#popupAddChoice" ng-click="editChoice(choice)" value="..."/> + </div> + </div> + <div ng-if="choice.type == 'date'" edit-me="showEdit" > + <div ng-hide="!globalVariables.voted && showEdit || isOpen" class="fixe-input" title="{{choice.description}}">{{choice.date | date:'dd/MM/yyyy'}} <input type="button" class="btn btn-default" ng-if="!globalVariables.voted && globalVariables.editMode" ng-show="showEditHover" ng-click="editChoice(choice)" value="..."/></div> + <div ng-show="!globalVariables.voted && showEdit || isOpen" > + <input type="text" class="form-control" ng-model="choice.date" focus-me="showEdit" datepicker-popup="dd/MM/yyyy" is-open="isOpen" ng-exit="showEdit = false" required/> + <input type="button" class="btn btn-default" data-toggle="modal" data-target="#popupAddChoice" ng-click="editChoice(choice)" value="..."/> + </div> + </div> + </td> + <td ng-if="!globalVariables.voted && globalVariables.editMode"><input type="button" class="btn btn-default btn-large" value="+" ng-click="addChoice()"/></td> + </tr> + + <tr> + <td class="pollChoice"> <input type="text" class="form-control" placeholder="votre nom" ng-model="voteName" /> </td> + <td ng-repeat="choice in voteChoices" class="pollChoice"> + <input type="checkbox" name="{{choice.name}}" ng-model="choice.value"/> + </td> + <td> + <input class="btn btn-primary btn-large" type="button" value="Vote" ng-click="vote()" /> + </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> + </table> + Deleted: trunk/pollen-ui-angular/src/main/webapp/partials/poll.html =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/partials/poll.html 2014-04-29 19:10:38 UTC (rev 3889) +++ trunk/pollen-ui-angular/src/main/webapp/partials/poll.html 2014-04-30 10:05:11 UTC (rev 3890) @@ -1,97 +0,0 @@ -<!-- - ~ - ~ #%L - ~ Pollen :: UI (Angular) - ~ %% - ~ Copyright (C) 2009 - 2014 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% - ~ - --> -<form class="form-inline" name="pollForm" novalidate> - - <alert type="'danger'" ng-if="globalVariables.errorForm"> Champ non remplie </alert> - <alert type="'success'" ng-if="globalVariables.editMode && globalVariables.saved"> Sondage sauvegardé..</alert> - <alert type="'success'" ng-if="!globalVariables.editMode && globalVariables.saved"> Vote effectué.. </alert> - - <alert type="'warning'" ng-if="globalVariables.voted"> Les votes ont commencé, certaine modification sont inaccessible.. </alert> - - <div class="pollTitle pollAnim" edit-me="showEditTitle"> - <h1 ng-hide="showEditTitle"> {{poll.title || 'Click Me for Editing'}} </h1> - - <h1 ng-show="showEditTitle"><input type="text" class="form-control" focus-me="showEditTitle" ng-model="poll.title" ng-exit="showEditTitle = false" required/></h1> - </div> - - <div ng-hide="showEditDesc" class="pollDesc pollAnim" edit-me="showEditDesc"> - <div> </div> - <div ng-bind-html="toHTML(poll.description || 'Description (Facultatif). Ce cadre disparait si aucune description n\'est mise')"></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"></td> - <td ng-repeat="choice in poll.choices" class="pollChoice pollAnim" ng-mouseenter="showEditHover = true" ng-mouseleave="showEditHover = false"> - <div ng-if="choice.type == 'text'" edit-me="showEdit" > - <div ng-hide="showEdit && !globalVariables.voted" class="fixe-input" title="{{choice.description}}">{{choice.name}} <input type="button" class="btn btn-default" ng-if="!globalVariables.voted && globalVariables.editMode" ng-show="showEditHover" ng-click="editChoice(choice)" value="..."/></div> - <div ng-show="showEdit && !globalVariables.voted"> - <input type="text" class="form-control" ng-model="choice.name" focus-me="showEdit" ng-exit="showEdit = false" required/> - <input type="button" class="btn btn-default" data-toggle="modal" data-target="#popupAddChoice" ng-click="editChoice(choice)" value="..."/> - </div> - </div> - <div ng-if="choice.type == 'date'" edit-me="showEdit" > - <div ng-hide="!globalVariables.voted && showEdit || isOpen" class="fixe-input" title="{{choice.description}}">{{choice.date | date:'dd/MM/yyyy'}} <input type="button" class="btn btn-default" ng-if="!globalVariables.voted && globalVariables.editMode" ng-show="showEditHover" ng-click="editChoice(choice)" value="..."/></div> - <div ng-show="!globalVariables.voted && showEdit || isOpen" > - <input type="text" class="form-control" ng-model="choice.date" focus-me="showEdit" datepicker-popup="dd/MM/yyyy" is-open="isOpen" ng-exit="showEdit = false" required/> - <input type="button" class="btn btn-default" data-toggle="modal" data-target="#popupAddChoice" ng-click="editChoice(choice)" value="..."/> - </div> - </div> - </td> - <td ng-if="!globalVariables.voted && globalVariables.editMode"><input type="button" class="btn btn-default btn-large" value="+" ng-click="addChoice()"/></td> - </tr> - - <tr> - <td class="pollChoice"> <input type="text" class="form-control" placeholder="votre nom" ng-model="voteName" /> </td> - <td ng-repeat="choice in voteChoices" class="pollChoice"> - <input type="checkbox" name="{{choice.name}}" ng-model="choice.value"/> - </td> - <td> - <input class="btn btn-primary btn-large" type="button" value="Vote" ng-click="vote()" /> - </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> - </table> - - <div ng-if="globalVariables.editMode"> - <button class="btn btn-primary" ng-click="save()">Save</button> - <button class="btn btn-warning" ng-click="reset();" ng-if="!globalVariables.voted">Reset</button> - <button class="btn btn-danger" ng-click="delete();">Delete</button> - </div> - - - </div> -</form> - Added: trunk/pollen-ui-angular/src/main/webapp/partials/poll.html =================================================================== --- trunk/pollen-ui-angular/src/main/webapp/partials/poll.html (rev 0) +++ trunk/pollen-ui-angular/src/main/webapp/partials/poll.html 2014-04-30 10:05:11 UTC (rev 3890) @@ -0,0 +1,38 @@ +<form class="form-inline" name="pollForm" novalidate> + + <alert type="'danger'" ng-if="globalVariables.errorForm"> Champ non remplie </alert> + <alert type="'success'" ng-if="globalVariables.editMode && globalVariables.saved"> Sondage sauvegardé..</alert> + <alert type="'success'" ng-if="!globalVariables.editMode && globalVariables.saved"> Vote effectué.. </alert> + + <alert type="'warning'" ng-if="globalVariables.voted"> Les votes ont commencé, certaine modification sont inaccessible.. </alert> + + <div class="pollTitle" edit-me="showEditTitle"> + <h1 ng-hide="showEditTitle"> {{poll.title || 'Click Me for Editing'}} </h1> + + <h1 ng-show="showEditTitle"><input type="text" class="form-control" focus-me="showEditTitle" ng-model="poll.title" ng-exit="showEditTitle = false" required/></h1> + </div> + + <div ng-hide="showEditDesc" class="pollDesc" edit-me="showEditDesc"> + <div ng-bind-html="toHTML(poll.description || 'Description (Facultatif). Ce cadre disparait si aucune description n\'est mise')"></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"> + + <div ng-include="templateURL"></div> + + </div> + + <div ng-if="globalVariables.create"> + <hr/> + <button type="button" class="btn btn-default" ng-model="globalVariables.editMode" btn-checkbox>Mode Edition</button> + <button class="btn btn-primary" ng-click="save()">Save</button> + <button class="btn btn-warning" ng-click="reset();" ng-if="!globalVariables.voted">Reset</button> + <button class="btn btn-danger" ng-click="delete();">Delete</button> + </div> + +</form> \ No newline at end of file