completed wave1 and wave2 setup

Ada-C6 · Nov 23, 2016 · e5099da · e5099da
1 parent c7c8e57
commit e5099da
Show file tree

Hide file tree

Showing 5 changed files with 4,387 additions and 0 deletions.
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,36 @@
+<!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" name="button">Check Out Trips!</button>
+
+    <section class="trip-details">
+    </section>
+
+    <table class='continent-trips'>
+      <tr class='continent-trips-header'>
+      </tr>
+      <tbody class='continent-trips-body'>
+      </tbody>
+    </table>
+
+    <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>
+  </body>
+</html>
diff --git a/scripts/ajax-index.js b/scripts/ajax-index.js
@@ -0,0 +1,94 @@
+var createHeaders = function(responseKeys) {
+  var headers = $('.trips-header');
+  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);
+  $('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');
+
+  body.empty(); // Clear this out to start with to ensure we are populating fresh
+
+  createHeaders(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>');
+    // 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);
+  });
+
+  toggleTableView(true);
+};
+
+//FOR TBODY ON INITIAL VIEW OF INDEX PAGE TO CREATE SHOW VIEW
+var showSuccess = function(trip) {
+  var section = $('.trip-details');
+  var name = $('<strong>Name</strong><div>' + trip.name + '</div>');
+  var continent = $('<strong>Location</strong><div>' + trip.continent + '</div>');
+  var about = $('<strong>Trip Description</strong><div>' + trip.about + '</div>');
+  var category = $('<strong>Trip Category</strong><div>' + trip.category + '</div>');
+  var weeks = $('<strong>Weeks Long</strong><div>' + trip.weeks + '</div>');
+  var cost = $('<strong>Cost</strong><div>' + '$ ' + trip.cost + '</div>');
+
+  section.empty(); // Reset the HTML in case there is data from before
+  section.append(name, continent, about, category, weeks, cost);
+
+  toggleTableView(false);
+};
+
+var showFailure = function(xhr) {
+  var section = $('.trip-details');
+  section.html('<strong>Error has occurred</strong>');
+
+  toggleTableView(false);
+};
+
+
+$(document).ready(function() {
+  // Which URL do we want to 'get'?
+  var url = 'https://trektravel.herokuapp.com/trips';
+  var Continenturl = 'https://trektravel.herokuapp.com/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);
+  });
+});
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>