Ada-C9 · MississippiBrenn · May 22, 2018 · May 23, 2018 · May 23, 2018 · May 24, 2018
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/index.css b/index.css
@@ -0,0 +1,74 @@
+
+#main{
+  font-family: Arial;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  text-align: center;
+}
+
+#status-message{
+  height: 20px;
+}
+
+
+header{
+  align-self: left;
+  font-weight: bold;
+  font-size: 2em;
+  border-bottom: 5px, solid, grey;
+}
+
+h1{
+  font-weight: bold;
+  font-size: 2em;
+  border-bottom: solid 1px;
+}
+
+
+
+#trip-details{
+text-align: left;
+margin: 1em;
+}
+
+.current-trips{
+  padding: 0;
+  border:solid;
+}
+
+div{
+  margin: 1em;
+}
+
+#load{
+  align-self: left;
+  margin:1em;
+  padding:1em;
+}
+
+
+
+#trip-list li{
+  padding: 2em;
+  border: solid 1px;
+  list-style: none;
+}
+
+ul{
+  width:100%;
+  padding-left: 0px;
+}
+
+h2{
+  text-align: center;
+}
+
+article{
+  border: solid;
+  margin: .5em;
+}
+
+.hidden{
+  display: none;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Trek Trip Planning</title>
+  <script
+  src="https://code.jquery.com/jquery-3.3.1.js"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <link rel="stylesheet" href="index.css" type="text/css">
+</head>
+
+
+
+<body>
+
+  <h1>Trek</h1>
+  <section id='status-message'> </section>
+  <button type="button" name="button" id="load">Get Trips!</button>
+
+  <main id="main">
+
+  <aside class="current-trips hidden" id ="current-trips">
+    <h2>All Trips</h2>
+
+    <ul id="trip-list"></ul>
+  </aside>
+
+  <aside class="view-trip hidden" id="view-trip">
+    <article id="trip-details">
+      <h2>Trip Details</h2>
+
+      <tablebody id="tablebody">
+
+      </tablebody>
+    </article>
+    <article id="reserve-trip">
+      <h2>Reserve Trip</h2>
+      <form id="reserve-form">
+        <div>
+          <label for="name">Name</label>
+          <input type="text" name="name" />
+        </div>
+
+        <div>
+          <label for="age">Age</label>
+          <input type="number" name="age" />
+        </div>
+
+        <div>
+          <label for="email">Email</label>
+          <input type="text" name="email" />
+        </div>
+
+        <input type="submit" name="add-reservation" class="button" value="Reserve" />
+      </form>
+    </article>
+  </aside>
+    </main>
+
+</body>
+
+<script type="text/javascript" src="index.js"></script>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,150 @@
+const URL = 'https://ada-backtrek-api.herokuapp.com/trips/'
+
+
+const reportStatus = (message) => {
+  $('#status-message').html(message);
+};
+
+const reportError = (message, errors) => {
+  let content = `<p>${message}</p><ul>`;
+  for (const field in errors){
+    for (const problem of errors[field]){
+      content += `<li>${field}: ${problem}</li>;`
+    }
+  }
+
+  content += "</ul>";
+  reportStatus(content);
+};
+
+const loadTrips = () => {
+  reportStatus('Loading trips ...');
+
+
+  const tripList = $('#trip-list');
+  tripList.empty();
+  $('#current-trips').removeClass('hidden')
+
+  axios.get(URL)
+  .then((response) => {
+    console.log(response);
+    reportStatus(`Successfully loaded`);
+    response.data.forEach((trip) => {
+
+      let id = trip.id
+
+      tripList.append(`<li class="trip" id="${id}">${trip.name}</li>`);
+
+
+    });
+    //only returns one element
+
+  })
+
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+    reportError(error.message, error.response.data.errors)
+    console.log(error);
+
+  });
+
+};
+
+const clickTrip = (trip) => {
+  console.log(trip)
+
+  $('#view-trip').removeClass('hidden')
+
+  axios.get(URL+trip)
+  .then((response) => {
+    console.log(response);
+    reportStatus(`Successfully loaded`);
+
+    console.log('appending to table body');
+
+    $('#tablebody').append(`<p>Name: ${response.data.name}</p>`);
+    $('#tablebody').append(`<p>Id: ${response.data.id}</p>`); $('#tablebody').append(`<p>Continent: ${response.data.continent}</p>`);
+     $('#tablebody').append(`<p>About: ${response.data.about}</p>`);
+    $('#tablebody').append(`<p>Category: </category>${response.data.category}</p>`);
+    $('#tablebody').append(`<p>Week: ${response.data.weeks}</p>`);
+    $('#tablebody').append(`<p>Cost: ${response.data.cost}</p>`);
+
+
+
+  })
+
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+    reportError(error.message, error.response.data.errors)
+    console.log(error);
+
+  });
+
+};
+
+const FORM_FIELDS = ['name', 'age', 'email'];
+const inputField = name => $(`#reserve-form input[name="${name}"]`);
+
+const readFormData = () => {
+  const getInput = name => {
+    const input = inputField(name).val();
+    return input ? input : undefined;
+  };
+
+  const formData = {};
+  FORM_FIELDS.forEach((field) => {
+    formData[field] = getInput(field);
+    console.log('formData')
+  });
+
+  console.log(formData)
+  return formData;
+};
+
+const clearForm = () => {
+  FORM_FIELDS.forEach((field) => {
+    inputField(field).val('');
+  });
+}
+
+const createReservation = (id) => {
+
+  const tripData = readFormData();
+  console.log(tripData);
+
+  reportStatus('Sending trip data...');
+
+  let url = URL + id + '/reservations'
+
+  axios.post(url, tripData)
+  .then((response) => {
+    console.log('success')
+    reportStatus(`Successfully made a reservation for ${response.data.name}!`);
+    clearForm();
+  })
+  .catch((error) => {
+    console.log(error.response);
+    if (error.response.data && error.response.data.errors) {
+      reportError(
+        `Encountered an error: ${error.message}`,
+        error.response.data.errors
+      );
+    } else {
+      reportStatus(`Encountered an error: ${error.message}`);
+    }
+  });
+};
+
+
+
+$(document).ready(() => {
+  $('#load').click(loadTrips);
+  $('ul').on('click', 'li', function() {
+    console.log(this.id)
+    clickTrip(this.id)
+    $('#reserve-form').submit((event) => {
+      event.preventDefault();
+      createReservation(this.id);
+    })
+  });
+});