Ada-C10 · lauracodecreations · Nov 21, 2018 · Nov 21, 2018 · Nov 21, 2018 · Nov 21, 2018
diff --git a/index.css b/index.css
@@ -0,0 +1,58 @@
+.current-trips  {
+  font-family: sans-serif;
+}
+
+#info {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1fr 1fr;
+  /* grid-auto-rows: minmax(100px, auto); */ 
+  /* grid-template-rows: 50px 1fr 30px; */
+  /* grid-template-columns: 150px 1fr; */
+  grid-template-areas:
+    "header header"
+    "list details"
+    "list reservation"
+}
+
+#info-trip {
+  grid-area: details;
+}
+
+#reserve-trip {
+  grid-area: reservation;
+}
+
+.current-trips {
+  grid-area: list
+}
+
+header {
+  background-color: aquamarine;
+  padding-top: 5px;
+  border-top-width: 50px;
+  padding-bottom: 44px;
+  padding-top: 44px;
+  font-size: 60px;
+  text-align: center;
+}
+
+ul div section:first-child {
+  grid-area: reservation;
+    text-align: center;
+  }
+
+
+main section:first-child h1 {
+  grid-area: header;
+
+}
+
+
+ul {
+  list-style-type:none;
+}
+
+section button {
+  grid-area: list
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Trips</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="index.js"></script>
+  <link rel="stylesheet" href="index.css">
+
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
+</head>
+<body>
+  <header>Trek</header>
+  <section id="status-message"></section>
+
+  <main>
+    <div id = "info">
+    <section class="current-trips">
+      <button id="load">See all trips!</button>
+      <ul id="trip-list"></ul>
+    </section>
+    <section id="info-trip">
+    </section>
+    <section id="reserve-trip">
+    </section>
+    </div>
+  </main>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,154 @@
+const URL = 'https://trektravel.herokuapp.com/trips';
+
+//
+// Status Management
+//
+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); // print that content using reportStatus
+};
+
+const loadTrips = () => {
+  reportStatus('Loading trips...');
+
+  const tripList = $('#trip-list');
+  tripList.empty();
+
+  axios.get(URL)
+  .then((response) => {
+    reportStatus(`Successfully loaded ${response.data.length} trips`);
+    response.data.forEach((trip) => {
+      const div = $(`<div class="trip-${trip.id}"><button >${trip.name}</button></div>`)
+      tripList.append(div);
+      $('button', div).click(() => { // to only activate on button inside the div
+        loadTrip(`.trip-${trip.id}`);
+        createForm(`.trip-${trip.id}`);
+        $(`.trip-${trip.id}`).on('submit', '#trip-form', createReservation);
+      })
+    });
+
+  })
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trip: ${error.message}`);
+    console.log(error);
+  });
+};
+
+const loadTrip = (tripinfo) => {
+  let num = tripinfo.match(/\d/);
+  num = num.join("");
+  // const trip = $(`${tripinfo}`);
+  const section = $('#info-trip');
+  section.empty();
+  axios.get(URL + "/" + num)
+  .then((response) => {
+    let data = {}
+    data["Id"] = response.data.id
+    data["Name"] = response.data.name
+    data["Continent"] = response.data.continent
+    data["Details"] = response.data.about
+    data["Category"] = response.data.category
+    data["Weeks"] = response.data.weeks
+    data["Cost"] = '$' + response.data.cost
+    const list = $('<ul></ul>')
+    Object.keys(data).forEach(function(key) {
+      list.append(`<li><strong>${key}</strong> : ${data[key]}</li`);
+    });
+    //const section = $('<section></section>');
+    section.append('<h2> Trip details </h2>')
+    section.append(list)
+    //trip.append(section)
+  })
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trip: ${error.message}`);
+  });
+
+};
+
+const createForm = (tripinfo) => {
+  event.preventDefault();
+  // get id number
+  let num = tripinfo.match(/\d/);
+  num = num.join("");
+  console.log(tripinfo)
+
+  //generate form
+  // Create a section element (not in the DOM)
+  const section = $('#reserve-trip');
+  section.append('<h2>Reserve Trip</h2>');
+
+  const form = $('<form id = "trip-form"></form>')
+  const divName = $('<div></div>')
+  divName.append('<label for="name">Name</label>');
+  divName.append('<input type="text" name="name" />');
+
+
+  const divEmail = $('<div></div>')
+  divEmail.append('<label for="email">Email</label>');
+  divEmail.append('<input type="text" name="email" />') // for and name in a form should have the same name
+
+  form.append(divName)
+  form.append(divEmail)
+
+  form.append(`<input type="hidden" id="tripId" name="triptId" value=${num}>`)
+  form.append('<input type="submit" name="add-pet" value="Reserve" class="btn btn-info" />')
+
+  section.append(form)
+}
+
+const readFormData = () => {
+  const parsedFormData = {};
+
+  const inputs = ["name","email"]
+
+  inputs.forEach((curInput) => {
+    const curData = $(`#trip-form input[name="${curInput}"]`).val();
+    parsedFormData[curInput] = curData ? curData : undefined;
+  });
+  let id = document.getElementById("tripId").value
+  parsedFormData["id"] = id
+  return parsedFormData;
+};
+
+const createReservation = (event) => {
+  event.preventDefault();
+
+  const tripData = readFormData();
+  console.log(tripData)
+
+  reportStatus('Sending trip data...');
+  let num = tripData["id"]
+  console.log(num)
+  //POST https://trektravel.herokuapp.com/trips/1/reservations
+  let URL_R = URL + "/" + num + "/reservations"
+  axios.post(URL_R, tripData)
+  .then((response) => {
+    reportStatus(`Successfully added a trip with ID ${response.data.id}!`);
+  })
+  .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}`);
+    }
+  });
+};
+
+// this is the homepage! the trip will not be avaiable
+$(document).ready(() => {
+  $('#load').click(loadTrips);
+});