Ada-C11 · kaseea · May 31, 2019 · Jun 1, 2019 · Jun 1, 2019 · Jun 3, 2019
diff --git a/index.css b/index.css
@@ -0,0 +1,4 @@
+body {
+    background-color: lavender;
+    color: slateblue
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>TREEEEEEK</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <section id="status-message"></section>
+  <main>
+    <section class="current-trips">
+      <h1>List-o-Trips (not copy-pasta'd)</h1>
+
+
+      <button type="button" id="load" class="btn btn-info">trips</button>
+      <ul id="trip-list"></ul>
+    </section>
+
+  </main>
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script type="text/javascript" src="index.js"></script>
+</body>
+</html>
+
+
+<!-- attribute Ada Pets -->
diff --git a/index.js b/index.js
@@ -0,0 +1,143 @@
+const url = 'https://trektravel.herokuapp.com/'
+
+const reportStatus = (message) => {
+    $('#status-message').html(message);
+};
+
+
+const makeFormInputBox = function makeFormInputBox(name) {
+  let inputField = 
+  `<div class="input-group input-group-sm mb-3">
+    <div class="input-group-prepend">
+      <span class="input-group-text" id="inputGroup-sizing-sm">${name}</span>
+    </div>
+    <input type="text" class="form-control" aria-label="${name}" aria-describedby="inputGroup-sizing-sm">
+  </div>`;
+  return inputField;
+}
+
+const registerHTML = function registerHTML(input1, input2) {
+  let inputField = 
+  `<div class="trip-registration">
+    <h4>register for trip</h4>
+      <form id="trip-form">` + 
+      makeFormInputBox(input1) +
+      makeFormInputBox(input2) +
+      `<input class="btn btn-info btn-sm" type="submit" value="Add Your Registration"></input>
+    </form>
+  </div></li>`;
+  return inputField;
+}
+
+
+const reportApiError = (error) => {
+console.log("encountered error when posting", error);
+
+let errorHtml = `<p>${error.message}</p><ul>`;
+const fieldProblems = error.response.data.errors;
+
+// JavaScript is weird about looping through a hash
+// All Dan + Dee's from Ports Pets, thank you
+Object.keys(fieldProblems).forEach(field => {
+    const problems = fieldProblems[field];
+    problems.forEach(problem => {
+    errorHtml += `<li><strong>${field}:</strong> ${problem}</li>`;
+    });
+});
+
+errorHtml += '</ul>';
+reportStatus(errorHtml);
+}
+const readRegForm = () => {
+  let name = $("#trip-form input[name=name]").val();
+  let email = $("#trip-form input[name=email]").val();
+  console.log(name);
+  console.log(email);
+  // is there a way to do the thing below running the jQuery in the K/V pairing?
+  return {
+    'name': name,
+    'email': email
+  };
+}
+
+const addRegistration = (id) => {
+  let postUrl = url + id + '/reservations';
+  console.log(postUrl)
+  const tripData = readRegForm();
+
+  reportStatus("About to post registration data...");
+  console.log("lets check to be sure we're doing this right", tripData);
+
+  axios.post(postUrl, tripData)
+    .then((response) => {
+      console.log("successfully posted registration data", response);
+
+      const regId = response.data.id;
+      reportStatus(`Successfully created a new registration with ID ${regId}`);
+    })
+    .catch((error) => {
+      reportApiError(error);
+    })
+};
+
+const loadTrips = () => {
+    reportStatus('Loading trips...');
+
+    const tripList = $('#trip-list');
+    tripList.empty();
+
+    let getTrips = url + 'trips';
+    axios.get(getTrips)
+      .then((response) => {
+        reportStatus(`Successfully loaded ${response.data.length} trips`);
+
+        response.data.forEach((trip) => {
+          let holderName = `<li><h4>${trip.name}</h4>`;
+          let id = `load_info_${trip.id}`;
+          holderName += 
+          `<div class="${id}">
+          </div><button type="button" id="${id}" class="btn btn-info btn-sm">more info</button>`;
+          tripList.append(holderName);
+
+          $(`#` + id).click(() => {
+            // really should probably do a second api call
+            const deets = `
+            <h4>trip id: ${trip.id}</h4>
+            <h5>trip name: ${trip.name}</h5>
+            <h5>continent: ${trip.continent}</h5>
+            <h5>duration: ${trip.weeks}</h5>
+            <h5>cost: ${trip.cost}</h5>` + 
+            registerHTML("name", "email");
+            $(`.` + id).html(deets);
+            $(`#` + id).remove();
+            $('#trip-form').submit((event) => {
+              event.preventDefault();
+              addRegistration(trip.id);
+            });
+          })
+        });
+      })
+      .catch((error) => {
+        reportStatus(`Encountered an error while loading trips: ${error.message}`);
+        console.log(error);
+      });
+  };
+
+
+  $(document).ready(() => {
+    $('#load').click(loadTrips);
+
+
+
+
+    console.log(makeFormInputBox("name"));
+  });
+
+//   lots of credit goes to Dan's Aweosme live coding
+
+
+//    Notes from stuff that I got stuck on
+// this just runs alert non stop CAUSE I CALLED ALERT
+// $(`#` + id).click(alert(id));
+// when you have something in parans, the things in parens RUNS RIGHT AWAY
+// CALLED A CONTINUATION OR A THUNK