diff --git a/index.css b/index.css new file mode 100644 index 00000000..f9c163de --- /dev/null +++ b/index.css @@ -0,0 +1,6 @@ +.trip-body { + text-align: center; +} +.title{ + text-align: center; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..8e469633 --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + Trek Website + + +

Welcome to Trek!

+ +
+ +
+
+
+
+ Personal Info + +
+
+
+
+ + + +
+ + + + + diff --git a/trek.js b/trek.js new file mode 100644 index 00000000..f0517978 --- /dev/null +++ b/trek.js @@ -0,0 +1,88 @@ +$(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) { + var body = $('.trip-body'); + body.empty(); + var hrow = $(''); + var name = $('Destination'); + hrow.append(name); + body.append(hrow); + + $.each(response, function(index, trip){ + if (trip.name != 'Person') { + var row = $(''); + var name = $('' + trip.name + ''); + 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); + $('#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 + '
'); + + 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) + .fail(showFailure); + }); +});