From d992b7f377af79646119540150d3bf249e39d8c1 Mon Sep 17 00:00:00 2001 From: Beylul Date: Wed, 23 Nov 2016 14:32:31 -0800 Subject: [PATCH 1/2] (Can see list of trips by name and details about the trip --- index.css | 19 ++++++++++++++ index.html | 20 ++++++++++++++ trek.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 116 insertions(+) create mode 100644 index.css create mode 100644 index.html create mode 100644 trek.js diff --git a/index.css b/index.css new file mode 100644 index 00000000..ad13f1f6 --- /dev/null +++ b/index.css @@ -0,0 +1,19 @@ +/*body { + background-color: purple; +}*/ +/*body { + text-align: center; +}*/ +.trip-details { + border: 5px solid #cccccc; + padding: 40px; + width: 800px; + margin-left: 200px; + empty-cells: hide; + border-radius: 10px; + +} + +/*table { + width: 600px; +}*/ diff --git a/index.html b/index.html new file mode 100644 index 00000000..9dd3f400 --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + trek website + + +

Welcome to Trek!

+ +
+ + + +
+ + + + + diff --git a/trek.js b/trek.js new file mode 100644 index 00000000..70b70423 --- /dev/null +++ b/trek.js @@ -0,0 +1,77 @@ +$(document).ready(function() { + var url = 'https://trektravel.herokuapp.com/trips'; + + var failCallback = function(xhr) { + var body = $('.trip-details'); + body.empty(); + body.append('Sorry can\'t load page!'); + }; + + var successCallback = function (response) { + var body = $('.trip-body'); + body.empty(); + var hrow = $(''); + var name = $('Destination'); + // var weeks = $('Weeks'); + // var cost = $('cost'); + hrow.append(name); + body.append(hrow); + + $.each(response, function(index, trip){ + + if (trip.name != 'Person') { + + var row = $(''); + var name = $('' + trip.name + ''); + // var weeks = $('' + trip.weeks + ''); + // var cost = $('' + trip.cost + ''); + row.append(name); + body.append(row); + } + + }); + toggleTableView(true); + }; + + $('#load-button').click(function() { + $.get(url, successCallback) + .fail(failCallback); + }); + + var toggleTableView = function(boolean) { + $('.trip-details').toggle(!boolean); + $('#load-button').toggle(!boolean); + $('table').toggle(boolean); + }; + + var showSuccess = function(trip) { + var section = $('.trip-details'); + var id = $('Id
' + trip.id + '
'); + var name = $('Name
' + trip.name + '
'); + var continent = $('Continent
' + trip.continent + '
'); + var about = $('About
' + trip.about + '
'); + var category = $('Category
' + trip.category + '
'); + var weeks = $('Weeks
' + trip.weeks + '
'); + var cost = $('Cost
' +'$' + trip.cost + '
'); + + section.empty(); + section.append(id, name, continent, about, category, weeks, cost); + + toggleTableView(false); + }; + var showFailure = function(xhr) { + var section = $('.trip-details'); + section.html('Error has occurred'); + + toggleTableView(false); + }; + + $('tbody').on('click', 'a', function(e) { + e.preventDefault(); + + var id = $(this).attr('id'); + var showUrl = url + '/' + id; + $.get(showUrl, showSuccess) + .fail(showFailure); + }); +}); From 56b9e58167dcacd2daa5bfd4c3ba8bbda2decb35 Mon Sep 17 00:00:00 2001 From: Beylul Date: Mon, 28 Nov 2016 09:07:20 -0800 Subject: [PATCH 2/2] Finished wave three, post and added some css --- index.css | 21 ++++----------------- index.html | 35 +++++++++++++++++++++++++---------- trek.js | 45 ++++++++++++++++++++++++++++----------------- 3 files changed, 57 insertions(+), 44 deletions(-) diff --git a/index.css b/index.css index ad13f1f6..f9c163de 100644 --- a/index.css +++ b/index.css @@ -1,19 +1,6 @@ -/*body { - background-color: purple; -}*/ -/*body { +.trip-body { + text-align: center; +} +.title{ text-align: center; -}*/ -.trip-details { - border: 5px solid #cccccc; - padding: 40px; - width: 800px; - margin-left: 200px; - empty-cells: hide; - border-radius: 10px; - } - -/*table { - width: 600px; -}*/ diff --git a/index.html b/index.html index 9dd3f400..8e469633 100644 --- a/index.html +++ b/index.html @@ -3,18 +3,33 @@ - trek website + Trek Website -

Welcome to Trek!

+

Welcome to Trek!

-
- - - -
- - - +
+ +
+
+
+
+ Personal Info + +
+
+
+
+ + + +
+ + + diff --git a/trek.js b/trek.js index 70b70423..f0517978 100644 --- a/trek.js +++ b/trek.js @@ -1,10 +1,12 @@ $(document).ready(function() { var url = 'https://trektravel.herokuapp.com/trips'; - + $('#add-trip-form').toggle(false); + $('#single-trip').toggle(false); var failCallback = function(xhr) { var body = $('.trip-details'); body.empty(); body.append('Sorry can\'t load page!'); + $('#add-trip-form').toggle(false); }; var successCallback = function (response) { @@ -12,23 +14,16 @@ $(document).ready(function() { body.empty(); var hrow = $(''); var name = $('Destination'); - // var weeks = $('Weeks'); - // var cost = $('cost'); hrow.append(name); body.append(hrow); $.each(response, function(index, trip){ - if (trip.name != 'Person') { - var row = $(''); var name = $('' + trip.name + ''); - // var weeks = $('' + trip.weeks + ''); - // var cost = $('' + trip.cost + ''); row.append(name); body.append(row); } - }); toggleTableView(true); }; @@ -42,33 +37,49 @@ $(document).ready(function() { $('.trip-details').toggle(!boolean); $('#load-button').toggle(!boolean); $('table').toggle(boolean); + $('#add-trip-form').toggle(!boolean); + $('#single-trip').toggle(!boolean); }; var showSuccess = function(trip) { var section = $('.trip-details'); - var id = $('Id
' + trip.id + '
'); - var name = $('Name
' + trip.name + '
'); - var continent = $('Continent
' + trip.continent + '
'); - var about = $('About
' + trip.about + '
'); - var category = $('Category
' + trip.category + '
'); - var weeks = $('Weeks
' + trip.weeks + '
'); - var cost = $('Cost
' +'$' + trip.cost + '
'); + var id = $('Id: ' + trip.id + '
'); + var name = $('Name: ' + trip.name + '
'); + var continent = $('Continent: ' + trip.continent + '

'); + var about = $('About:
' + trip.about + '

'); + var category = $('Category: ' + trip.category + '
'); + var weeks = $('Weeks: ' + trip.weeks + '
'); + var cost = $('Cost: ' +'$' + trip.cost + '
'); section.empty(); section.append(id, name, continent, about, category, weeks, cost); toggleTableView(false); + $('#single-trip').toggle(true); + + var postCallback = function() { + alert("The reservation was made!"); + $('#add-trip-form').toggle(false); + }; + + var addtripcallback = function(e) { + e.preventDefault(); + var reservationData = $(this).serialize(); + var reservationUrl = url + '/' + trip.id + '/reserve'; + $.post(reservationUrl, reservationData, postCallback) + .fail(showFailure); + }; + $('#add-trip-form').submit(addtripcallback); }; + var showFailure = function(xhr) { var section = $('.trip-details'); section.html('Error has occurred'); toggleTableView(false); }; - $('tbody').on('click', 'a', function(e) { e.preventDefault(); - var id = $(this).attr('id'); var showUrl = url + '/' + id; $.get(showUrl, showSuccess)