issue #1 - add dynamic ticket categories

alfio-event · Sep 18, 2014 · 6f33dec · 6f33dec
1 parent 760e0bf
commit 6f33dec
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 16 deletions.
diff --git a/src/main/webapp/resources/angularTemplates/admin/partials/event/edit-event.html b/src/main/webapp/resources/angularTemplates/admin/partials/event/edit-event.html
@@ -86,39 +86,41 @@ <h3>Categories</h3>
                 </progress>
             </div>
         </div>
-        <div class="row">
-            <div class="col-sm-4" data-ng-repeat="ticketCategory in event.ticketCategories" ng-class-even="'list-even'">
+        <div class="row category" data-ng-repeat="ticketCategory in event.ticketCategories" data-ng-class="'bg-' + evaluateBarType($index)">
+            <div class="col-sm-12">
                 <div class="row">
-                    <div class="col-sm-12">
+                    <div class="col-sm-12 col-md-4">
                         <label for="{{$index}}-seats">Name</label>
                         <input type="text" data-ng-model="ticketCategory.name" name="{{$index}}-name" id="{{$index}}-name" class="form-control" required />
                     </div>
-                </div>
-                <div class="row">
-                    <div class="col-sm-12">
+                    <div class="col-sm-12 col-md-4">
                         <label for="{{$index}}-description">Description</label>
                         <textarea data-ng-model="ticketCategory.description" name="{{$index}}-description" id="{{$index}}-description" class="form-control" placeholder="Description of {{ticketCategory.name}} category"></textarea>
                     </div>
-                </div>
-                <div class="row">
-                    <div class="col-sm-12">
+                    <div class="col-sm-12 col-md-4">
                         <label for="{{$index}}-seats">Available seats</label>
                         <input type="number" data-ng-model="ticketCategory.seats" name="{{$index}}-seats" id="{{$index}}-seats" class="form-control" required />
                     </div>
                 </div>
-
-                <date-time data-id-prefix="{{$index}}-inception" data-prefix="Inception" data-model-object="ticketCategory.inception" data-row-class="row" data-date-cell-class="col-sm-6 col-md-7" data-time-cell-class="col-sm-6 col-md-5"></date-time>
-                <date-time data-id-prefix="{{$index}}-expiration" data-prefix="Expiration" data-model-object="ticketCategory.expiration" data-row-class="row" data-date-cell-class="col-sm-6 col-md-7" data-time-cell-class="col-sm-6 col-md-5"></date-time>
-
                 <div class="row">
-                    <div class="col-sm-12">
+                    <div class="col-sm-12 col-md-4">
+                        <date-time data-id-prefix="{{$index}}-inception" data-prefix="Inception" data-model-object="ticketCategory.inception" data-row-class="row" data-date-cell-class="col-sm-6 col-md-7" data-time-cell-class="col-sm-6 col-md-5"></date-time>
+                    </div>
+                    <div class="col-sm-12 col-md-4">
+                        <date-time data-id-prefix="{{$index}}-expiration" data-prefix="Expiration" data-model-object="ticketCategory.expiration" data-row-class="row" data-date-cell-class="col-sm-6 col-md-7" data-time-cell-class="col-sm-6 col-md-5"></date-time>
+                    </div>
+
+                    <div class="col-sm-12 col-md-4">
                         <label for="{{$index}}-discount">Applied Discount ({{ticketCategory.discount}}%)</label>
                         <input type="range" data-ng-model="ticketCategory.discount" name="{{$index}}-discount" id="{{$index}}-discount" class="form-control" required min="0" max="100" />
                     </div>
                 </div>
-
             </div>
         </div>
+        <div class="row category">
+            <div class="col-sm-11"><span class="text-right" data-ng-if="event.ticketCategories.length == 0">No ticket categories have been defined. Please add a new one by clicking here</span></div>
+            <div class="col-sm-1"><button type="button" class="btn btn-success" data-ng-click="addCategory()"><i class="fa fa-plus"></i></button></div>
+        </div>
         <br class="clearfix"/>
         <control-buttons data-form-obj="editEvent"></control-buttons>
     </form>

diff --git a/src/main/webapp/resources/css/admin.css b/src/main/webapp/resources/css/admin.css
@@ -4,6 +4,13 @@ body {
 
 div.list-even {
     background: #f5f5f5;
+    border-top: 1px solid #c0c0c0;
+    border-bottom: 1px solid #c0c0c0;
+}
+
+div.category {
+    margin-bottom: 5px;
+    padding-top: 5px;
 }
 
 input.ng-invalid.ng-touched, select.ng-invalid.ng-touched, textarea.ng-invalid.ng-touched {

diff --git a/src/main/webapp/resources/js/admin/ng-app/admin-application.js b/src/main/webapp/resources/js/admin/ng-app/admin-application.js
@@ -129,7 +129,11 @@
             return Math.floor((categorySeats / eventSeats + 0.00001) * 10000) / 100;
         };
 
-        $scope.event.ticketCategories = [{name: 'super-early'}, {name: 'early'}, {name: 'normal'}];
+        $scope.event.ticketCategories = [];
+
+        $scope.addCategory = function() {
+            $scope.event.ticketCategories.push({});
+        };
 
         $scope.save = function(form, event) {
             validationPerformer($q, EventService.checkEvent, event, form).then(function() {
@@ -139,6 +143,8 @@
             }, angular.noop);
         };
 
+
+
         $scope.cancel = function() {
             $state.go("index");
         };