Ada-C10 · marshi23 · Nov 22, 2018 · Nov 27, 2018
diff --git a/index.css b/index.css
@@ -0,0 +1,46 @@
+@import url('https://fonts.googleapis.com/css?family=Allerta+Stencil|Monoton|Noto+Sans+SC');
+
+body {
+  /* font-family: sans-serif; */
+  font-family: 'Noto Sans SC', sans-serif;
+  padding: 15px;
+  background-color: grey;
+  color: white;
+}
+
+main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  grid-template-areas: 'list trip'
+                       'list reservation';
+}
+
+#hero {
+  font-family: 'Allerta Stencil', sans-serif;
+  color: white;
+  font-size: 3em;
+
+}
+
+.all-trips {
+  grid-area: list;
+  /* background-color: white; */
+  padding: 10px;
+}
+
+.trip-info {
+  grid-area: trip;
+
+}
+
+.reservation {
+  grid-area: reservation;
+}
+
+btn {
+  padding-left: 15px;
+}
+ul {
+  list-style: none;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+  <head>
+    <meta charset="utf-8">
+    <title>Seven Wonders</title>
+    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script type="text/javascript" src="test_index.js"></script>
+    <link rel="stylesheet" href="index.css">
+  </head>
+
+  <body>
+    <header>
+      <section id="status-message"></section>
+      <h1 id="hero">Trek</h1>
+    </header>
+
+    <main>
+      <section class="all-trips">
+        <button class="btn" id="load">See All Trips</button>
+        <ul id="trips-list"></ul>
+      </section>
+
+      <section class="trip">
+        <ul class="trip-details"><ul>
+      </section>
+
+      <section class="reservation"></section>
+    </main>
+  </body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,56 @@
+const URL = "https://trektravel.herokuapp.com/trips";
+
+const reportStatus = (message) => {
+ $('#status-message').html(message);
+};
+
+const loadTrips = () => {
+ const tripList = $('#trips-list');
+ tripList.empty();
+
+ axios.get(URL).then((response) => {
+   reportStatus(`Loading trips ....`);
+   response.data.forEach((trip) => {
+
+     reportStatus(`Successfully loaded ${response.data.length} trips`);
+     tripObject = $(`<li class="info">${trip.name}</li>`)
+     tripList.append(tripObject);
+
+
+      $(tripObject).click(() => {
+        loadTrip(trip.id);
+      });
+   });
+
+ })
+ .catch((error) => {
+   reportStatus(`Encountered an error while loading trips: ${error.message}`);
+   console.log(error);
+ });
+};
+
+
+const loadTrip = (id) => {
+ const tripDetails = $('#trip-details');
+ tripDetails.empty();
+
+ axios.post(URL + `/${id}`).then((response) => {
+   reportStatus(`Loading trip ....`);
+   let trip = response.data
+
+   $('body').append(`
+     <div class="trip-info">
+     <p>Trip Name : ${trip.name}</p>
+     <p>Continent : ${trip.continent}</p>
+     <p>Cost : $${trip.cost}</p>
+     <p>Weeks : ${trip.weeks}</p>
+     <p>About : <p>${trip.about}</p></p>
+     </div>`)
+
+   });
+ };
+
+
+$(document).ready(() => {
+   $('#load').click(loadTrips);
+});
diff --git a/test_index.js b/test_index.js
@@ -0,0 +1,140 @@
+const URL = "https://trektravel.herokuapp.com/trips";
+
+const reportStatus = (message) => {
+  $('#status-message').html(message);
+};
+
+const loadTrips = () => {
+  const tripList = $('#trips-list');
+  tripList.empty();
+
+  axios.get(URL).then((response) => {
+    reportStatus(`Loading trips ....`);
+    response.data.forEach((trip) => {
+
+      reportStatus(`Successfully loaded ${response.data.length} trips`);
+      tripObject = $(`<li class="info">${trip.name}</li>`)
+      tripList.append(tripObject);
+
+
+      $(tripObject).click(() => {
+        showTrip(trip.id);
+      });
+    });
+
+  })
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+    console.log(error);
+  });
+};
+
+
+const showTrip = (id) => {
+  const tripInfo = $('.trip-info')
+  tripInfo.empty();
+
+
+  axios.get(URL + `/` + id).then((response) => {
+
+    let trip = response.data
+    $('.trip').append(`
+      <div class="trip-info">
+      <h1>Trip Details</h1>
+      <p>Trip ID : ${trip.id}</p>
+      <p>Trip Name : ${trip.name}</p>
+      <p>Continent : ${trip.continent}</p>
+      <p>Category : ${trip.category}</p>
+      <p>Cost : $${trip.cost}</p>
+      <p>Weeks : ${trip.weeks}</p>
+      <p>About : <p>${trip.about}</p></p>
+      </div>`)
+
+      const reservationForm = $('.reservation')
+      reservationForm.empty();
+
+      $('.reservation').append(`
+        <h1>Reserve Trip</h1>
+        <form id="trip-form">
+        <div>
+        <label for="name">Name</label>
+        <input type="text" name="name" />
+        </div>
+
+        <div>
+        <label for="email">Email</label>
+        <input type="text" name="email" />
+        </div>
+
+        <div>
+        <label for="trip">Trip Name</label>
+        <input type="text" name="trip" value="${trip.name}"/>
+        </div>
+
+        <div>
+        <input type="hidden" value=${trip.id}/>
+        </div>
+
+        <input type="submit" name="reserve-trip" value="Reserve Trip" />
+        </form>
+        `)
+
+         $('#trip-form').on( "submit", function(event) {
+           event.preventDefault();
+           reserveTrip(trip);
+         })
+      });
+
+    };
+
+    const reportError = (message, errors) => {
+      let content = `<p>${message}</p>`
+      content += "<ul>";
+      for (const field in errors) {
+        for (const problem of errors[field]) {
+          content += `<li>${field}: ${problem}</li>`;
+        }
+      }
+      content += "</ul>";
+      reportStatus(content);
+    };
+
+
+    const readFormData = () => {
+      const parsedData = $('#trip-form').serialize();
+      return parsedData;
+    };
+
+    const clearForm = () => {
+      $('#trip-form')[0].reset();
+    }
+
+    const reserveTrip = (trip) => {
+
+      const tripData = readFormData();
+      // console.log(trip.id)
+
+      console.log(tripData)
+
+      axios.post(URL + `/` + trip.id + `/reservations`, tripData)
+      .then((response) => {
+        console.log(response);
+        reportStatus('Reservation Successful!');
+        clearForm();
+      })
+      .catch((error) => {
+        console.log(error.response);
+        if (error.response.data && error.response.data.console.errors) {
+          reportError(
+            `Encountered an error: ${error.message}`,
+            error.response.data.errors
+          );
+        } else {
+          reportStatus(`Encountered an error: ${error.message}`);
+        }
+      });
+    };
+
+    $(document).ready(() => {
+       $('#load').click(loadTrips);
+    });