From 54556d4684d6125f610312e05e159812b02f0290 Mon Sep 17 00:00:00 2001 From: alberto Date: Thu, 30 May 2013 17:30:43 +0200 Subject: [PATCH] [UI] Booking UI prototype - Add tabs switching - Add tabs content with mustache templates --- webroot/functunit-ui-booking.html | 519 +++++++++++++++++++++++++----- webroot/images/people.png | Bin 0 -> 715 bytes 2 files changed, 437 insertions(+), 82 deletions(-) create mode 100644 webroot/images/people.png diff --git a/webroot/functunit-ui-booking.html b/webroot/functunit-ui-booking.html index c0ff0c53..5cf11582 100644 --- a/webroot/functunit-ui-booking.html +++ b/webroot/functunit-ui-booking.html @@ -1,6 +1,5 @@ - @@ -36,7 +35,7 @@ // Set up event listeners. The change backbone event // is raised when a property changes (like the checked field) - this.indexTemplate = $("#bookingPreview-view-template"); + this.indexTemplate = $("#sectionGuests"); //this.listenTo(this.model, 'change', this.render); this.render(); }, @@ -62,7 +61,7 @@ var App = Backbone.View.extend({ // Base the view on an existing element - el: $('#main'), + el: $('.main-container'), initialize: function(){ /* @@ -104,11 +103,15 @@ this.total.text('$'+total); */ var view = new BookingView({}); - this.el.append(view.el); + this.el.empty().append(view.el); /*********** BOOTSTRAP APPLICATION *************/ // Init upload modal - $('#myModal').modal({ + $('#modalGuest').modal({ + show: false + }); + + $('#modalDelete').modal({ show: false }); @@ -223,10 +226,58 @@ } $('.btn').button(); $('.dropdown-toggle').dropdown(); + $('.box-edit, .table-condensed tbody tr').hover( function (e) { + $(e.currentTarget).find('.btn-group').fadeIn(); + }, + function (e) { + $(e.currentTarget).find('.btn-group').hide(); + }) - /************ END BOOTSTRAP APPLICATION **********/ - + var baseURL = '/rest/'; + //load content for first tab and initialize + $('.nav-stacked').tab(); //initialize tabs + + $('.nav-stacked > li > a').click(function(e) { + var pattern=/#.+/gi //use regex to get anchor(==selector) + if( $(e.currentTarget).attr("href").match(pattern) ){ + var contentID = $(e.currentTarget).attr("href").match(pattern)[0]; //get anchor + + //load content for selected tab + if(contentID != null){ + $("li").removeClass("active"); + $(this).parent("li").addClass("active"); + $('.main-container').html($("#section" + contentID.replace('#','')).html()); + //$('.nav-stacked').tab(); + + /* + $('.main-container').load(baseURL+contentID.replace('#',''), function(){ + $('.nav-stacked').tab(); //reinitialize tabs + });*/ + } + } + + + }); + + $('.delGuest').bind('click', function(e) { + $('#modalDelete').modal('show'); + }); + + $('#addBooker, #addGroupLeader').bind('click', function(e) { + /* $('#modalGuest').modal({ + show: false + }); */ + $('#modalGuest > .modal-body').load("goUpdateGuestsFromPlanner.action?sect=guests&callback=setbooker&housed=false").parent('#modalGuest').modal('show'); + }); + $("#numGuests").bind('change',function(e){ + var value = $(this).val(); + $("#numGuestsIcon").fadeOut(1000).attr('class', '').fadeIn(1000).addClass("people-" + value); + + }); + + /************ END BOOTSTRAP APPLICATION **********/ + return this; } }); @@ -242,55 +293,58 @@ Locanda Test Booking UI -
- - + + + + - - - \ No newline at end of file diff --git a/webroot/images/people.png b/webroot/images/people.png new file mode 100644 index 0000000000000000000000000000000000000000..8c2d1a26139cf9ad06a6b640ffcc5434b2c0545f GIT binary patch literal 715 zcmeAS@N?(olHy`uVBq!ia0vp^3P9}7!3-q#vYC4VsT%=4A+A80kurd60+0;{xJ(5q zfJ@<543~vy!9@a1Lski4H@h5A0J1zvg8YIR_U+!GZ*=g;wt1UlUcY-g=eV_@anXF! z=ohCfE=Aunhzecs@zsZ0FV^ZN>uMT@-;CUt@p*du_mtn${@$MU#VyGD>7Ae$F)cMA zpO%d`fsT*zba4!+h`V~}YTjW7f!2qdl1c3|UmclHG-097`~PlRugueaf3teMiPYa) zJO4a+U;3smBmVWSrS=7CeJ}3!e%l_VDb_tz%6`M_X{n~UbrViMFZ%eQImd2xZ@YZT zI-{8tE&F#RN|avQ)08=j^{wOAZL4fEzAU+ZL3RtfQO0Y&U&@kSe||szx8Rq7?7dnq zEBOOS!5eOf=$Ns0pFId=vUd9(Ofm+Gf|)=CGCJ+Q`M*gQT<-fOAbTNe%kt~OQN3k< zx48*#IiI0=>*<=?Z_iD8p>iujkmaC~llsM7$=7??=ek78O+Wo{!Q>3@{-r@S8LYP| zCEAL&aIJm*dtZCl!mnYIrvj-`y`sVkT3cqX%`wjqy>&P4n{|oM+smha{wTEBU%ycG zZ^lIt-C2uVi??L-iTPe!q#0%6+Py5}A`eI~cuPhXRM5S9T739LkN6!C|NnsE(9_k= JWt~$(69BK$?JfWS literal 0 HcmV?d00001