From 89fe502a9945568157b6bac33392d93f29780ec7 Mon Sep 17 00:00:00 2001 From: amb54 Date: Wed, 24 May 2017 10:09:20 -0700 Subject: [PATCH 01/16] Created the files index.html and index.js. Initial setup of index.html with src scripts placed in head for jquery, ajax/underscore and the index.js file. Inindex.js created the functions successCallbackList, failureCallback, clickHandlerList. In index.js created the variable urlBasic and also the .ready() block. --- index.html | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.js | 38 +++++++++++++++++++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 index.html create mode 100644 index.js diff --git a/index.html b/index.html new file mode 100644 index 00000000..71a400a1 --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + ambTREK + + + + + + +
+ +
+ +
+ + + + + + +
+ +
+ + + + + + + + + + + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..e8917aa2 --- /dev/null +++ b/index.js @@ -0,0 +1,38 @@ +var urlBasic = "https://trektravel.herokuapp.com/trips"; + +var successCallbackList = function(response) { + console.log("Success!"); + console.log(response); + $('#list_head_of_trips').empty(); + $('#list_of_trips').empty(); + + var listHeadTemplate = _.template($('#list_head_template').html()); + $('#list_head_of_trips').html(listHeadTemplate); + + var listTemplate = _.template($('#list_template').html()); + + for (var ind = 0; ind < response.length; ind++) { + var generatedHtml = listTemplate({ + data: response[ind] + }); + $('#list_of_trips').append($(generatedHtml)); + // $('#getTrip').click(clickHandlerList); + } +}; + + +var failureCallback = function() { + console.log("Didn't work :("); + $("#errors").html("

AJAX request failed!

"); +}; + + +var clickHandlerList = function(event) { + $.get(urlBasic, successCallbackList).fail(failureCallback); +}; + + +$(document).ready(function() { + $('#load_list').click(clickHandlerList); + +}); From 66a649a1edea48e1f551ec4c00d0ccce97fc7a13 Mon Sep 17 00:00:00 2001 From: amb54 Date: Wed, 24 May 2017 15:39:46 -0700 Subject: [PATCH 02/16] Added script for trip template. Added section with id = trip in the static part. Updated the table in the static part with id = view list. Updated the script#list_template button with the attribute data-tripid. --- index.html | 38 ++++++++++++++++++++++++++++++++------ 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 71a400a1..0d3d54a0 100644 --- a/index.html +++ b/index.html @@ -15,13 +15,16 @@
- +
+
+
+
@@ -31,9 +34,7 @@ - - - + - + + + From 8ab9206d787c09099600f5fc2fb6c76652cd9666 Mon Sep 17 00:00:00 2001 From: amb54 Date: Wed, 24 May 2017 15:45:36 -0700 Subject: [PATCH 03/16] Updated the .ready block with an event for clicking the button#getTrip button. Subsequently created the functions clickHandlerTrip and successCallbackTrip. Created a function showPage to handle what parts to show at an event. Subsequently updated the functions successCallbackList and successCallbackTrip. --- index.js | 47 +++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 41 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index e8917aa2..f73fbc8c 100644 --- a/index.js +++ b/index.js @@ -1,26 +1,54 @@ var urlBasic = "https://trektravel.herokuapp.com/trips"; + +var showPage = function(page){ + $('#list_head_of_trips').empty(); + $('#list_of_trips').empty(); + var list = document.getElementById("view_list"); + var trip = document.getElementById("trip"); + if (page === 'view_list'){ + list.style.display = "block"; + trip.style.display = "none"; + } + if (page === 'trip'){ + list.style.display = "none"; + trip.style.display = "block"; + } +} + + var successCallbackList = function(response) { console.log("Success!"); console.log(response); - $('#list_head_of_trips').empty(); - $('#list_of_trips').empty(); + showPage('view_list'); var listHeadTemplate = _.template($('#list_head_template').html()); $('#list_head_of_trips').html(listHeadTemplate); var listTemplate = _.template($('#list_template').html()); - for (var ind = 0; ind < response.length; ind++) { + var tripResponse = response[ind] var generatedHtml = listTemplate({ - data: response[ind] + data: tripResponse }); $('#list_of_trips').append($(generatedHtml)); - // $('#getTrip').click(clickHandlerList); } }; +var successCallbackTrip= function(response){ + console.log("Success! for the trip"); + console.log(response); + showPage('trip'); + + var tripTemplate = _.template($('#trip_template').html()); + var generatedHtml = tripTemplate({ + data: response + }); + $('#trip').html($(generatedHtml)); +}; + + var failureCallback = function() { console.log("Didn't work :("); $("#errors").html("

AJAX request failed!

"); @@ -32,7 +60,14 @@ var clickHandlerList = function(event) { }; +var clickHandlerTrip = function(event) { + var id = $(this).attr('data-tripid'); + var url = urlBasic + '/' + id; + $.get(url, successCallbackTrip).fail(failureCallback); +} + + $(document).ready(function() { $('#load_list').click(clickHandlerList); - + $('#list_of_trips').on('click', 'button#getTrip' ,clickHandlerTrip); }); From 9678ce9f2a7ae7ec8b7a397461c01c584131c29f Mon Sep 17 00:00:00 2001 From: amb54 Date: Wed, 24 May 2017 16:27:24 -0700 Subject: [PATCH 04/16] Created index.css file. Added link to this file as well as to foundation. In the index.html file updated the buttons with class = button. Added rule for .button in the index.css file. --- index.css | 6 ++++++ index.html | 8 ++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 index.css diff --git a/index.css b/index.css new file mode 100644 index 00000000..443e0ceb --- /dev/null +++ b/index.css @@ -0,0 +1,6 @@ + +.button { + border-radius: 0.25rem; + margin: 0; + padding: 0.5em 1em; +} diff --git a/index.html b/index.html index 0d3d54a0..22a28288 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,14 @@ + + +
- +
@@ -52,7 +55,7 @@ <%- data.continent%> <%- data.weeks %> - + @@ -72,6 +75,7 @@

<%- data.id%>: <%- data.name%>

$<%- data.cost%>

+
From 57644f0d89b374e032ed19cb36cd39c513fc08a0 Mon Sep 17 00:00:00 2001 From: amb54 Date: Wed, 24 May 2017 17:23:00 -0700 Subject: [PATCH 05/16] Added a form to the trip_templet --- index.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/index.html b/index.html index 22a28288..fde52255 100644 --- a/index.html +++ b/index.html @@ -75,6 +75,25 @@

<%- data.id%>: <%- data.name%>

$<%- data.cost%>

+
+
method="post"> +
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
From 52d518faf44ec5e0720cd18233a022a1053ea8cd Mon Sep 17 00:00:00 2001 From: amb54 Date: Wed, 24 May 2017 17:27:29 -0700 Subject: [PATCH 06/16] Updated .ready block with the form submit. Updated the successCallbackTrip with url for the submit form. --- index.js | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index f73fbc8c..edf7622c 100644 --- a/index.js +++ b/index.js @@ -41,9 +41,12 @@ var successCallbackTrip= function(response){ console.log(response); showPage('trip'); + var url = urlBasic + '/' + response.id + '/' + 'reserve' + var tripTemplate = _.template($('#trip_template').html()); var generatedHtml = tripTemplate({ - data: response + data: response, + url: url }); $('#trip').html($(generatedHtml)); }; @@ -70,4 +73,24 @@ var clickHandlerTrip = function(event) { $(document).ready(function() { $('#load_list').click(clickHandlerList); $('#list_of_trips').on('click', 'button#getTrip' ,clickHandlerTrip); + // $('#trip').click(); + + $('form').submit(function(e) { + // By default, the form will attempt to do it's own local POST so we want to prevent that default behavior + e.preventDefault(); /// VERY IMPORTANT TO INCLUDE + var url = $(this).attr("action"); // Retrieve the action from the form + var formData = $(this).serialize(); + console.log(formData); + + $.post(url, formData, function(response){ + $('#message').html('

Pet added!

'); + // What do we get in the response? + console.log(response); + }).fail(function(){ + $('#message').html('

Adding Pet Failed

'); + }); + }); + + + }); From 19c3e780fadfe708319529d9706b9e28fdd8fbde Mon Sep 17 00:00:00 2001 From: amb54 Date: Thu, 25 May 2017 10:20:52 -0700 Subject: [PATCH 07/16] Added code for foundation. Changed some of the layout for the trip view. --- index.html | 45 +++++++++++++++++++++++++++------------------ 1 file changed, 27 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index fde52255..693474dc 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
- +
@@ -41,10 +41,10 @@ @@ -55,27 +55,36 @@ <%- data.continent%> <%- data.weeks %> - + From 69a1661ddb26a412c7083095287653969389c100 Mon Sep 17 00:00:00 2001 From: amb54 Date: Thu, 25 May 2017 10:24:12 -0700 Subject: [PATCH 08/16] Added the function makeReservation for the submit event. Corrected the submit event in the .ready block. --- index.js | 38 +++++++++++++++++--------------------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/index.js b/index.js index edf7622c..85df3fc5 100644 --- a/index.js +++ b/index.js @@ -67,30 +67,26 @@ var clickHandlerTrip = function(event) { var id = $(this).attr('data-tripid'); var url = urlBasic + '/' + id; $.get(url, successCallbackTrip).fail(failureCallback); -} +}; -$(document).ready(function() { - $('#load_list').click(clickHandlerList); - $('#list_of_trips').on('click', 'button#getTrip' ,clickHandlerTrip); - // $('#trip').click(); - - $('form').submit(function(e) { - // By default, the form will attempt to do it's own local POST so we want to prevent that default behavior - e.preventDefault(); /// VERY IMPORTANT TO INCLUDE - var url = $(this).attr("action"); // Retrieve the action from the form - var formData = $(this).serialize(); - console.log(formData); - - $.post(url, formData, function(response){ - $('#message').html('

Pet added!

'); - // What do we get in the response? - console.log(response); - }).fail(function(){ - $('#message').html('

Adding Pet Failed

'); - }); +var makeReservation = function(event) { + event.preventDefault(); /// VERY IMPORTANT TO INCLUDE // By default, the form will attempt to do it's own local POST so we want to prevent that default behavior + var url = $(this).attr("action"); // Retrieve the action from the form + var formData = $(this).serialize(); + console.log(formData); + $.post(url, formData, function(response){ + $('#message').html('

You have a reservation!

'); + document.getElementById("form1").style.display = "none"; + console.log(response); + }).fail(function(){ + $('#message').html('

Reservation Failed

'); }); +}; // END of "var makeReservation" - +$(document).ready(function() { + $('#load_list').click(clickHandlerList); + $('#list_of_trips').on('click', 'button#getTrip' ,clickHandlerTrip); + $('#trip').on('submit', 'form' ,makeReservation); }); From 16cf50ad5ee096b423bc56b6d302167acb7badb1 Mon Sep 17 00:00:00 2001 From: amb54 Date: Thu, 25 May 2017 10:25:42 -0700 Subject: [PATCH 09/16] Added rules for the header, main #form1 and .trip --- index.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/index.css b/index.css index 443e0ceb..885e4162 100644 --- a/index.css +++ b/index.css @@ -1,6 +1,18 @@ +header, main { + padding: 0.5rem 1rem 0.5rem 1rem; +} + +#form1 { + padding-top: 2rem; +} + .button { border-radius: 0.25rem; margin: 0; padding: 0.5em 1em; } + +.button, .trip { + width: 90px +} From a51bcaf996de9a1774d8c4fc527a29d9fb46d443 Mon Sep 17 00:00:00 2001 From: amb54 Date: Sat, 27 May 2017 13:32:19 -0700 Subject: [PATCH 10/16] Added headline in the header. Added toggle buttons in the list_head_template. Added link to continent in the list_template as well as in the trip_tamplete. Some minor cosmetic changes. --- index.html | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 693474dc..c5f1d607 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,8 @@
- +

GO FOR IT!

+
@@ -41,10 +42,10 @@ @@ -52,10 +53,10 @@ <%- data.id%> <%- data.name%> - <%- data.continent%> + <%- data.continent%> <%- data.weeks %> - + @@ -64,8 +65,9 @@ + + + +