Ada-C11 · shubha-rajan · Jun 1, 2019 · Jun 1, 2019 · Jun 1, 2019 · Jun 1, 2019
diff --git a/.gitignore b/.gitignore
@@ -1 +1,6 @@
 .DS_Store
+node_modules
+.eslintrc.json
+package.json
+package-lock.json
+.vscode
diff --git a/images/map-background.jpg b/images/map-background.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8"/>
+        <meta name="description" content="Reserve your spot on a trip"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <title>TREK</title>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+        <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700|Yesteryear&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="trek.css"/>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js" integrity="sha256-S1J4GVHHDMiirir9qsXWc8ZWw74PHHafpsHp5PXtjTs=" crossorigin="anonymous"></script>
+        <script
+  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
+  crossorigin="anonymous"></script>
+        <script src="trek.js"></script>
+    </head>
+    <body>
+        <header>
+                <hgroup>
+                    <h1 id="page-title">Trek</h1>
+                    <h2>Plan your next escape.</h2>
+                </hgroup>
+
+        </header>
+        <main>
+            <div id="status-message" class="hidden"></div>
+            <button id="main-button" class="centered">See All Trips</button>
+            <article>
+                <aside id="trips-list" class="hidden">
+                    <h2 id="trip-list-header">Available Trips</h2>
+                    <ul id="trips-list-container"></ul>
+                </aside>
+                <section id="trip-details" class="hidden"></section>
+                <section id="reserve-trip" class="hidden">
+                    <h3 id="reserve-heading"></h3>
+                    <div id="reserve-message" class="hidden"></div>
+                    <form id="reserve-form" >
+                        <div class="field">
+                            <label for="name-field">Name: </label>
+                            <input id="name-field" type="text" name="name">
+                        </div>
+                        <div class="field">
+                            <label for="email-field">Email: </label>
+                            <input id="email-field" type="text" name="email">
+                        </div>
+                        <input type="submit" value="Reserve" id="reserve-button">
+
+                    </form>
+                </section>
+            </article>
+        </main>
+        <footer>&copy;Shubha Rajan, Ada Developers Academy 2019 | Photo by Leah Kelley from <a href="https://www.pexels.com/photo/close-up-of-pictures-185933/">Pexels</a></footer>
+    </body>
+</html>
diff --git a/trek.css b/trek.css
@@ -0,0 +1,146 @@
+body {
+    font-family:"Karla", sans-serif;
+    background-image: url('images/map-background.jpg');
+}
+
+header h1, header h2 {
+    font-family: 'Yesteryear', cursive;
+    color:darkred;
+    text-shadow: 2px 2px white;
+    display:inline-block;
+    padding: 0 1em 0 1em;
+}
+
+h1 {
+    font-size:4em;
+    border-right: 2px solid darkred;
+}
+
+h2 {
+    font-size:2em;
+}
+
+ul {
+    padding: 10px;
+    list-style-type: none;
+}
+header {
+    text-align:center;
+}
+
+
+article {
+
+    width:80%;
+    margin:3em auto;
+    display:grid;
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 2fr 2fr;
+}
+
+main {
+    text-align:center;
+}
+
+button, input[type="submit"] {
+    background-color:darkred;
+    color:white;
+    border:white 1px solid;
+    font-size:1.2em;
+    padding:10px;
+}
+
+section, aside {
+    background-color: blanchedalmond;
+    border-radius: 20px;
+    padding:20px;
+    margin:1em;
+    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+}
+
+details {
+    text-align:justify;
+    max-height:100px;
+    overflow-y:scroll;
+    margin:1em;
+}
+
+section>h3, aside>h3{
+    color:darkred;
+    font-family: 'Yesteryear', cursive;
+    font-size:2em
+}
+
+#trips-list {
+    grid-column:1/2;
+    grid-row:1/3;
+    margin-right:3em;
+}
+
+#trips-list-container {
+    height:800px;
+    overflow-y:scroll;
+    padding:0;
+    margin:0;
+    border-top:solid 4px darkred;
+    border-bottom:solid 4px darkred;
+}
+#trip-details {
+    grid-column:2/3;
+    grid-row:1/2;
+
+}
+
+#reserve-trip {
+    grid-column:2/3;
+    grid-row:2/3;
+}
+
+#reserve-trip input{
+    margin: 10px 5px;
+}
+
+#reserve-form .field{
+    display:block;
+}
+
+.hidden {
+    visibility:hidden;
+    display:none;
+}
+
+.centered {
+    display:block;
+    margin: 20% auto;
+    font-size:2em;
+}
+
+#trip-list-header {
+    margin: 0;
+    text-align: center;
+    color:darkred;
+    font-family: 'Yesteryear', cursive;
+    background-color:blanchedalmond;
+}
+
+
+#cost{
+    font-size:2em;
+    font-weight:bold;
+    color:darkred;
+}
+
+.selected {
+    color:white;
+    background-color:darkolivegreen;
+    padding:0.5em;
+}
+
+.error {
+    color:red;
+}
+
+.success {
+    color:green;
+}
+
diff --git a/trek.js b/trek.js
@@ -0,0 +1,131 @@
+const listErrors = (errors) => {
+  let errorList = '<ul>';
+  for (const field in errors) {
+    for (const problem of errors[field]) {
+      errorList += `<li>${field}: ${problem}</li>`;
+    }
+  }
+  errorList += '</ul>';
+  return errorList;
+};
+
+const showMessage = (elementID, status) => {
+  $(elementID).addClass(status);
+  $(elementID).removeClass('hidden');
+};
+
+const handleReserveTrip = (tripID, continent) => {
+  const endpoint = `https://trektravel.herokuapp.com/trips/${tripID}/reservations`;
+  const name = $('#name-field').val();
+  const email = $('#email-field').val();
+
+  axios.post(endpoint, { name, email,})
+    .then((response) => {
+      $('#reserve-form')[0].reset();
+      showMessage('#reserve-message','success');
+
+      const messageHTML = (
+        `<h4>Congrats, ${name}, you're going to ${continent}!</h4>`
+              + `<p>Your reservation ID is ${response.data.id}.</p>`
+      );
+      $('#reserve-message').html(messageHTML);
+
+    })
+    .catch((error) => {
+      showMessage('#reserve-message','error');
+      $('#reserve-message').html(`<h4> A problem occured: ${error.message} </h4>`);
+
+      if (error.response && error.response.data && error.response.data.errors) {
+        const errors = error.response.data.errors;
+        $('#reserve-message').append(listErrors(errors));
+      }
+    });
+};
+
+const changeSelected = (tripID) => {
+  $('.selected').removeClass('selected');
+  $(`#trip-${tripID}`).addClass('selected');
+};
+
+const displayTripDescription = (tripID) => {
+  axios.get(`https://trektravel.herokuapp.com/trips/${tripID}`)
+    .then((response) => {
+      $('#trip-details').append(`<details>${response.data.about}</details>`);
+    })
+    .catch((error) => {
+      $('#trip-details').append(`<p class="error">Failed to load trip details:  ${error.message}</p>`);
+    });
+};
+
+const displayReservationForm = (tripName) => {
+  $('#reserve-heading').text(`Reserve a Spot on ${tripName}`);
+  $('#reserve-message').empty();
+  $('#reserve-trip').removeClass('hidden');
+};
+
+const setReservationButtonHandler = (tripID, continent) => {
+  $('#reserve-button').off();
+  $('#reserve-button').click((event) => {
+    event.preventDefault();
+    handleReserveTrip(tripID, continent);
+  });
+};
+
+const displayTripDetails = (trip) => {
+  const tripDetails = (
+    `<h3>${trip.name}</h3>`
+          + `<p id="continent">Continent: ${trip.continent}</p>`
+          + `<p id="category">Category: ${trip.category[0].toUpperCase() + trip.category.slice(1)}</p>`
+          + `<p id="weeks">${trip.weeks} ${(trip.weeks === 1) ? 'week' : 'weeks'}</p>`
+          + `<p id="cost">$${trip.cost.toFixed(2)}</p>`
+  ); 
+  $('#trip-details').removeClass('hidden');
+  $('#trip-details').html(tripDetails);
+};
+const buildTripClickHandler = (trip) => {
+
+  const handler = () => {
+    changeSelected(trip.id);
+    displayTripDetails(trip);
+    displayTripDescription(trip.id);
+    displayReservationForm(trip.name);
+    setReservationButtonHandler(trip.id, trip.continent);
+  };
+  return handler;
+};
+
+const moveButton = ()=>{
+  $('#main-button').removeClass('centered');
+  $('#main-button').text('Reload Trips');
+};
+const loadTrips = (tripData) => { 
+  $('.selected').removeClass('selected');
+  $('#trips-list').removeClass('hidden');
+  $('#reserve-trip, #trip-details').addClass('hidden');
+  $('#trip-details, #trips-list-container').empty();
+
+  for (const trip of tripData) {
+    $('#trips-list-container').append(`<li id=trip-${trip.id}><h3>${trip.name}</h3></li>`);
+    const handleTripClick = buildTripClickHandler(trip);
+    $(`#trip-${trip.id}`).click(() => { handleTripClick(); });
+  }
+};
+
+const handleMainButtonClick = () => {
+  axios.get('https://trektravel.herokuapp.com/trips')
+    .then((response) => {
+      $('#status-message').empty();
+      $('#status-message').addClass('hidden');
+      moveButton();
+      loadTrips(response.data);
+    })
+    .catch((error) => {
+      $('#status-message').html(`Could not load trips: ${error.message}`);
+      showMessage('#status-message', error);
+    });
+};
+
+$('document').ready(() => {
+  $('#main-button').click(() => { handleMainButtonClick(); });
+  $('#reserve-button').click(() => { handleReserveTrip(); });
+});