Ada-C11 · RPerry · May 31, 2019 · May 31, 2019 · May 31, 2019 · May 31, 2019
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Trek</title>
+    <!-- <link href="index.css" media="screen" rel="stylesheet" type="text/css"/> -->
+
+</head>
+<body>
+    <h1>Trek</h1>
+    <section class="all-trips">
+    <button id="trip-list-button">See All Trips</button>
+    <section id="trip-list">
+
+    </section>
+    </section> 
+
+    <section class="trip-details">
+
+    </section>
+
+    <section class="trip-reservation-form">
+
+    </section>
+</body>
+    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script type="text/javascript" src="index.js"></script>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,128 @@
+
+const tripAPI = "https://trektravel.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 displayTripList = () => {
+    const target = $('#trip-list');
+    target.empty();
+    axios.get(tripAPI)
+        .then((response) => {
+            response.data.forEach((trip) => {
+                target.append(`<button id="trip-${trip.id}">${trip.name}</button>`);
+                $(`#trip-${trip.id}`).click(showTripDetails(trip.id));
+            });
+        })
+        .catch((error) => {
+            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}`);
+            }
+        })
+}
+
+const showTripDetails = (tripID) => {
+    const loadOneTrip = () =>
+        axios.get(`${tripAPI}` + `/` + `${tripID}`)
+            .then((response) => {
+                const trip = response.data;
+                const target = $('.trip-details');
+                const otherTarget = $('.trip-reservation-form')
+                target.empty();
+                target.html(`<section id="trip-name">Name: ${trip.name}</section> <section id="trip-continent">Continent: ${trip.continent}</section> <section id="trip-category">Category: ${trip.category}</section> <section id="trip-weeks">Weeks: ${trip.weeks}</section><section id="trip-category">Cost: $${trip.cost}</section>`);
+                otherTarget.empty();
+                otherTarget.html(`<h3>Reserve a Spot on ${trip.name}</h3> <form id="reservation-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>
+
+                <input type="submit" name="add-reservation" value="Reserve"/>
+                </form>`)
+
+                const reserve = createReservation(tripID);
+                $('#trip-reservation-form').submit(reserve);
+            })
+            .catch((error) => {
+                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}`);
+                }
+            })
+    return loadOneTrip;
+}
+
+
+
+const readFormData = () => {
+    const parsedFormData = {};
+
+    const nameFromForm = $(`#reservation-form input[name="name"]`).val();
+    parsedFormData['name'] = nameFromForm ? nameFromForm : undefined;
+
+    const emailFromForm = $(`#reservation-form input[name="email"]`).val();
+    parsedFormData['email'] = emailFromForm ? emailFromForm : undefined;
+
+    return parsedFormData;
+};
+
+const clearForm = () => {
+    $(`#name-form input[name="name"]`).val('');
+    $(`#email-form input[name="email"]`).val('');
+}
+
+const createReservation = (tripID) => {
+    const reserveTrip = (event) => {
+        event.preventDefault();
+
+        const reservationData = readFormData();
+        reportStatus('Sending reservation data...');
+        axios.post(tripAPI + tripID + "/reservations", reservationData)
+            .then((response) => {
+                reportStatus(`Successfully added a reservation with ID ${response.data.id}!`);
+                clearForm();
+            })
+            .catch((error) => {
+                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}`);
+                }
+            });
+    };
+    return reserveTrip;
+};
+
+
+$(document).ready(() => {
+    $('#trip-list-button').on('click', displayTripList);
+});