Added Booking detail view

pmuir · Feb 20, 2012 · e0cd449 · e0cd449
1 parent bcff639
commit e0cd449
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 12 deletions.
diff --git a/src/main/webapp/resources/templates/templates.tmpl b/src/main/webapp/resources/templates/templates.tmpl
@@ -44,6 +44,35 @@
     </table>
 </script>
 
+
+<script id="event-detail" type="text/template">
+
+    <table>
+        <tr>
+            <td colspan="2"><h1><%=name%></h1></td>
+        </tr>
+        <tr>
+            <td width='350px' rowspan="4"><img width='350px' src='rest/media/<%=picture.id%>'/></td>
+            <td><label for='venueSelector'>Location: </label><select id='venueSelector'/></td>
+        </tr>
+        <tr>
+            <td>
+                <div style='font-size:0.7em' type='text' id="dayPicker"/>
+            </td>
+            <td>
+                <label for="performanceTimes">Choose a time:</label><select id="performanceTimes"/>
+            </td>
+        </tr>
+        <tr>
+            <td><%=description%></td>
+        </tr>
+        <tr>
+            <td><input name="bookButton" type="button" value="Book"></td>
+        </tr>
+    </table>
+</script>
+
+
 <script id="booking-row" type="text/template">
     <tr>
         <td><%=id%></td>
@@ -126,4 +155,31 @@
        <% }) %>
 </script>
 
+<script id="booking-details" type="text/template">
+<table>
+<thead>
+<tr><td colspan="5">Booking <%=id%></td><tr>
+<tr>
+<td>Ticket #</td>
+<td>Category</td>
+<td>Section</td>
+<td>Row</td>
+<td>Seat</td>
+</tr>
+</thead>
+<tbody>
+                    <% $.each(_.sortBy(tickets, function(ticket) {return ticket.id}), function (i, ticket) { %>
+                        <tr>
+                        <td><%= ticket.id %></td>
+                        <td><%=ticket.ticketCategory.description%></td>
+                        <td><%=ticket.seat.row.section.name%></td>
+                        <td><%=ticket.seat.row.name%></td>
+                        <td><%=ticket.seat.number%></td>
+                        </tr>
+                    <% }) %>
+                    <tr><td colspan="5"/><a href="#bookings">Show all</a><td></tr>
+
+</tbody>
+</script>
+
 
diff --git a/src/main/webapp/tm-index.html b/src/main/webapp/tm-index.html
@@ -203,19 +203,25 @@
     id:'id'
 })
 
-TicketMonster.BookingView = Backbone.View.extend({
+TicketMonster.BookingRowView = Backbone.View.extend({
     events:{
-        "click input[name='delete']":"delete"
+        "click input[name='delete']":"delete",
+        "click ":"showDetails"
     },
     render:function () {
         applyTemplate($(this.el), $("#booking-row"), this.model.attributes)
         return this;
     },
-    delete:function () {
+    delete:function (event) {
         if (confirm("Are you sure you want to delete booking " + this.model.get('id'))) {
             var self = this
             this.model.destroy()
         }
+        event.stopPropagation()
+        event.stopImmediatePropagation()
+    },
+    showDetails: function() {
+        tmRouter.navigate("#bookings/"+this.model.get('id'), true)
     }
 })
 
@@ -229,7 +235,7 @@
     render:function (bookings) {
         $(this.el).empty().append("<table id='bookingDetails'/>");
         _.each(bookings, function (booking) {
-            var bookingView = new TicketMonster.BookingView({model:booking})
+            var bookingView = new TicketMonster.BookingRowView({model:booking})
             $("#bookingDetails").append(bookingView.render().el)
         })
     }
@@ -365,6 +371,7 @@
     },
     save:function (event) {
         var bookingRequest = {ticketRequests:[]};
+        var self = this;
         _.each(this.model.bookingRequest.tickets, function(collection){
             _.each(collection.models, function(model) {
                if (model.attributes.quantity != undefined) {
@@ -381,18 +388,12 @@
             dataType:"json",
             contentType:"application/json",
                 success:function (booking) {
-                    $("#content").empty()
-
-                    $("#content").append("Created booking " + booking.id + " with tickets as follows: ")
-                    $.each(_.sortBy(booking.tickets, function(ticket) {return ticket.id}), function (i, ticket) {
-                        $("#content").append("<p/> Ticket " + ticket.id + "(" + ticket.ticketCategory.description + "): in section " + ticket.seat.row.section.name + " Row " + ticket.seat.row.name + " seat" + ticket.seat.number)
-
-                    })
+                    applyTemplate($(self.el), $("#booking-details"), booking)
 
                 }}).error(function (error) {
                     alert(error)
                 })
-        this.model.clear()
+        this.model = {}
     },
     addQuantities:function (event) {
         this.model.bookingRequest.tickets.push(this.ticketCategoriesView.model)
@@ -405,6 +406,12 @@
     }
 });
 
+TicketMonster.BookingDetailView = Backbone.View.extend ({
+    render: function() {
+        applyTemplate($(this.el), $("#booking-details"), this.model.attributes)
+        return this
+    }
+})
 
 TicketMonster.AboutView = Backbone.View.extend({
     render:function () {
@@ -420,6 +427,7 @@
         "about":"about",
         "book/:showId/:performanceId":"bookTickets",
         "bookings":"listBookings",
+        "bookings/:id":"bookingDetail",
         "ignore":"ignore",
         "*actions":"defaultHandler"
     },
@@ -459,6 +467,14 @@
             TicketMonster.views.eventDetailView.render(this)
         })
         model.fetch()
+    },
+    bookingDetail:function (id) {
+        var model = new TicketMonster.Booking({id:id});
+        var attachedView = new TicketMonster.BookingDetailView({model:model, el:$("#content")})
+        model.bind("change", function () {
+            attachedView.render()
+        }).fetch()
+
     }
 });