Ada-C6 · LaurenSky · Nov 23, 2016 · Nov 23, 2016 · Nov 23, 2016 · Nov 28, 2016
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+scripts/extra.js
+scripts/extra2.js
diff --git a/images/url.html b/images/url.html
@@ -0,0 +1,2 @@
+<script>window.googleJavaScriptRedirect=1</script><META name="referrer" content="origin"><script>var n={navigateTo:function(b,a,d){if(b!=a&&b.google){if(b.google.r){b.google.r=0;b.location.href=d;a.location.replace("about:blank");}}else{a.location.replace(d);}}};n.navigateTo(window.parent,window,"http://www.freefavicon.com/freefavicons/objects/iconinfo/airplane-152-237853.html");
+</script><noscript><META http-equiv="refresh" content="0;URL='http://www.freefavicon.com/freefavicons/objects/iconinfo/airplane-152-237853.html'"></noscript>
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Sky Treks</title>
+    <link rel="stylesheet" href="styles/foundation.css" type="text/css">
+    <link rel="stylesheet" href="styles/trek.css" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
+  </head>
+  <body>
+    <h1 class='add-margin-lf'>Sky Treks!</h1>
+
+    <button type="button" class="button add-margin-lf round-edges" id="all-trips-button" name="button">Check Out Trips!</button>
+
+    <div class="row">
+      <table class='small-12 medium-3 columns continent-trips'>
+        <tr class='continent-trips-header'>
+        </tr>
+        <tbody class='continent-trips-body'>
+        </tbody>
+      </table>
+
+      <section id="trip-details" class="small-12 medium-5 columns">
+      </section>
+
+      <form id="add-reservation-form" class="small-12 medium-3 columns">
+        <label for="name">Name:</label>
+        <input type="text" name="name" class="round-edges">
+
+        <label for="age">Age:</label>
+        <input type="text" name="age" class="round-edges">
+
+        <label for="email">Email:</label>
+        <input type="text" name="email" class="round-edges">
+
+        <input type="hidden" name="trip-id" class="trip-id">
+
+        <button type="submit" class="button round-edges">Book Reservation Now</button>
+      </form>
+    </div>
+
+    <table class='all-trips add-margin'>
+      <tr class='trips-header'>
+      </tr>
+      <tbody class='trips-body'>
+      </tbody>
+    </table>
+
+
+    <script src="https://code.jquery.com/jquery-3.1.1.js"type="text/javascript"></script>
+    <script src="scripts/ajax-index.js" type="text/javascript"></script>
+    <!-- <script src="scripts/extra2.js" type="text/javascript"></script> -->
+  </body>
+</html>
diff --git a/scripts/ajax-index.js b/scripts/ajax-index.js
@@ -0,0 +1,158 @@
+var createHeaders = function(headerId, responseKeys) {
+  var headers = headerId;
+  headers.empty();
+
+  var headerName = $('<th>' + responseKeys[1] + '</th>');
+  var headerContinent = $('<th>' + responseKeys[2] + '</th>');
+  var headerWeeks = $('<th>' + responseKeys[3] + '</th>');
+
+  headers.append(headerName, headerContinent, headerWeeks);
+};
+
+var toggleTableView = function(onIndicator) {
+  $('.trip-details').toggle(!onIndicator);
+  $('#all-trips-button').toggle(!onIndicator);
+  $('.continent-trips').toggle(!onIndicator);
+  $('table.all-trips').toggle(onIndicator);
+};
+
+
+//FOR .BUTTON ON INITIAL VIEW OF INDEX PAGE
+var failCallback = function(xhr) {
+  console.log('failure');
+  console.log(xhr);
+};
+
+// What do we want to happen when we get our response?
+var successCallback = function (response) {
+  console.log('success!');
+
+  var body = $('.trips-body');
+  var headerId = $('.trips-header');
+
+  body.empty(); // Clear this out to start with to ensure we are populating fresh
+
+  createHeaders(headerId, Object.keys(response[0]));
+
+  $.each(response, function(index, trip){
+    var row = $('<tr></tr>');
+    var name = $('<td><a href="#" class="name-link" id=' + trip.id + '>' + trip.name + '</a></td>'); //data attribute
+    // var name = $('<td>' + trip.name + '</td>');
+    var continent = $('<td>' + trip.continent + '</td>');
+    var weeks = $('<td>' + trip.weeks + '</td>');
+
+    row.append(name, continent, weeks);
+    body.append(row);
+  });
+
+  $('#trip-details').css('display','none');
+  $('#add-reservation-form').css('display','none');
+  toggleTableView(true);
+};
+
+//FOR TBODY ON INITIAL VIEW OF INDEX PAGE TO CREATE SHOW VIEW
+var showSuccess = function(trip) {
+  var section = $('#trip-details');
+  // var title = $('<strong>Trip Details:</strong><div class="add-padding-bot"></div>');
+
+  var id = $('<strong>Trip Id</strong><div class="add-padding-bot">' + trip.id + '</div>');
+  var name = $('<strong>Name</strong><div class="add-padding-bot">' + trip.name + '</div>');
+  var continent = $('<strong>Location</strong><div class="add-padding-bot" id="continent">' + trip.continent + '</div>');
+  var about = $('<strong>Trip Description</strong><div class="add-padding-bot">' + trip.about + '</div>');
+  var category = $('<strong>Trip Category</strong><div class="add-padding-bot">' + trip.category + '</div>');
+  var weeks = $('<strong>Weeks Long</strong><div class="add-padding-bot">' + trip.weeks + '</div>');
+  var cost = $('<strong>Cost</strong><div class="add-padding-bot">' + '$ ' + trip.cost + '</div>');
+
+  section.empty(); // Reset the HTML in case there is data from before
+  // section.append(title);
+  section.append(name, continent, weeks, category, about, cost, id);
+  section.css('display','inline-block');
+  $('#add-reservation-form').css('display','inline-block');
+
+  //assigns the hiddden field in the form to the trip id when the form populates
+  $('.trip-id').val(trip.id);
+
+  toggleTableView(false);
+};
+
+var showFailure = function(xhr) {
+  var section = $('.trip-details');
+  section.html('<strong>Error has occurred</strong>');
+
+  toggleTableView(false);
+};
+
+var showContinent = function(response) {
+  // console.log("in showContinent");
+  var body = $('.continent-trips-body');
+  var headerId = $('.continent-trips-body');
+
+  body.empty(); // Clear this out to start with to ensure we are populating fresh
+
+  createHeaders(headerId, Object.keys(response[0]));
+
+  $.each(response, function(index, trip){
+    var row = $('<tr></tr>');
+    var name = $('<td><a href="#" class="name-link" id=' + trip.id + ' continent=' + trip.continent + '>' + trip.name + '</a></td>');
+     // var name = $('<td>' + trip.name + '</td>');
+    var continent = $('<td>' + trip.continent + '</td>');
+    var weeks = $('<td>' + trip.weeks + '</td>');
+
+    console.log(name);
+
+    row.append(name, continent, weeks);
+    body.append(row);
+  });
+
+  toggleTableView(false);
+};
+
+
+//DOCUMENT LOAD
+$(document).ready(function() {
+  // Which URL do we want to 'get'?
+  var url = 'https://trektravel.herokuapp.com/trips';
+
+  $('#all-trips-button').click(function() {
+    $.get(url, successCallback)
+      .fail(failCallback);
+  });
+
+  //>>>>>>>>>>>>>>>>>>>>>>>
+  $('tbody').on('click', 'a', function(event) {
+    event.preventDefault();
+
+    var id = $(this).attr('id');
+    var showUrl = url + '/' + id;
+    $.get(showUrl, showSuccess)
+      .fail(showFailure)
+      .done(function(){
+        console.log($('#continent').text());
+        var continentName = $('#continent').text();
+        var continentUrl = 'https://trektravel.herokuapp.com/trips/' + 'continent?query=' + continentName ;
+        $.get(continentUrl, showContinent);
+      });
+  });
+
+  $('#add-reservation-form').submit(addReservationCallback);
+
+});
+
+//POST:
+var postCallback = function () {
+  alert("Your Trip is Booked!");
+};
+
+var addReservationCallback = function(event) {
+  event.preventDefault();
+  var tripId = $('.trip-id').val();
+
+  console.log("Booking Your trip!");
+  var reservationUrl = 'https://trektravel.herokuapp.com/trips/' + tripId + '/reserve';
+  var reservationData = $(this).serialize();
+  console.log("Reservation data is " + reservationData);
+
+  $.post(reservationUrl, reservationData, postCallback);
+
+  toggleTableView(false);
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<script>window.googleJavaScriptRedirect=1</script><META name="referrer" content="origin"><script>var n={navigateTo:function(b,a,d){if(b!=a&&b.google){if(b.google.r){b.google.r=0;b.location.href=d;a.location.replace("about:blank");}}else{a.location.replace(d);}}};n.navigateTo(window.parent,window,"http://www.freefavicon.com/freefavicons/objects/iconinfo/airplane-152-237853.html");
		</script><noscript><META http-equiv="refresh" content="0;URL='http://www.freefavicon.com/freefavicons/objects/iconinfo/airplane-152-237853.html'"></noscript>