Ada-C11 · laneia · Jun 10, 2019 · Jun 10, 2019 · Jun 10, 2019 · Jun 10, 2019
diff --git a/index.css b/index.css
@@ -0,0 +1,89 @@
+body {
+    background-image: url(https://lh3.googleusercontent.com/zVZsevuYFlx20AXw0wv0Z8C0xg1PXZhRAhqZnfimGSZ9JuLOZkS-lHM7rE12pPfYE7xtPZ2OdV1m28cBkNpWxRp52MhWRMoIG6lCFubpK6dCfOjIImdbt60e6m_N_lKBLDBLWgvFdw=w2400);
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-attachment: fixed;
+    color: white;
+    font-family: 'Archivo', sans-serif;
+}
+
+h1, h2 {
+    text-align: center;
+    background-color: rgba(39, 124, 57, 0.8);
+    border-style: solid;
+    border-width: medium;
+    border-color: white;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-left: 33%;
+    margin-right: 33%;
+    font-family: 'Carter One', cursive;
+}
+
+h3 {
+    font-family: 'Carter One', cursive;
+}
+
+.hide {
+    display: none;
+}
+
+li {
+    list-style-type: none;
+    padding: 1px;
+}
+
+#load {
+    margin-top: 10px;
+}
+
+main {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+#status-message {
+    text-align: center;
+    background-color: rgba(39, 124, 57, 0.8);
+    padding: 20px;
+    padding-left: 40px;
+    border-radius: 15px;
+    margin: 20px;
+}
+
+#trip-details {
+    background-color: rgba(39, 124, 57, 0.8);
+    padding: 10px;
+    border-radius: 15px;
+    margin: 20px;
+}
+
+#trip-list {
+    background-color: rgba(39, 124, 57, 0.8);
+    padding: 20px;
+    padding-left: 40px;
+    border-radius: 15px;
+    margin: 20px;
+}
+
+#trip-list li {
+    padding: 5px;
+}
+
+#trip-list li:hover {
+    color: rgb(21, 72, 32);
+}
+
+#reservation-form {
+    background-color: rgba(39, 124, 57, 0.8);
+    padding: 5px;
+    border-radius: 15px;
+    margin: 20px;
+}
+
+.form-text {
+    padding: 2px;
+    margin: 3px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Trek</title>
+    <link rel="stylesheet" href="index.css">
+    <link href="https://fonts.googleapis.com/css?family=Archivo|Carter+One&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <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>
+
+
+    <h1>Trek</h1>
+    <h2 id="load">Trip List</h2>
+
+    <section id="status-message" class="hide"></section>
+    <main>
+        <section>
+            <ul id="trip-list" class="hide"></ul>
+        </section>
+        <section class="hide">
+            <div id="trip-details" ></div>
+            <div id="reservation">
+                <form id="reservation-form">
+                <p><strong>Reserve this trip!</strong></p>
+                <div class="form-text">
+                    <label for="name">Name</label>
+                    <input type="text" name="name" />
+                </div>
+                <div class="form-text">
+                    <label for="email">Email</label>
+                    <input type="text" name="email" />
+                </div>
+                <input id="submit-button" type="submit" name="add-reservation" value="Add Reservation" class="form-text"/>
+                </form>
+            </div>
+        </section>
+    </main>
+  </body>
+</html
diff --git a/index.js b/index.js
@@ -0,0 +1,111 @@
+const TRIPS = 'https://trektravel.herokuapp.com/trips/';
+
+const reportStatus = (message) => {
+    $('#status-message').html(message).removeClass("hide");
+};
+
+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 all trips...');
+
+    const tripList = $('#trip-list').removeClass("hide");
+        tripList.empty();
+
+        axios.get(TRIPS)
+            .then((response) => {
+            reportStatus(`Loaded ${response.data.length} trips.`);
+            response.data.forEach((trip) => {
+                let item = $(`<li>${trip.name}</li>`);
+                item.click(function() {
+                  $("section").removeClass("hide")
+                  getTripData(trip);
+                  $('#submit-button').off('click');
+                  $('#submit-button').click(function(event) {
+                    createRes(event, trip.id);
+                  });
+                });
+                tripList.append(item);
+              });
+            })
+        .catch((error) => {
+            reportStatus(`Error while loading: ${error.message}`);
+            console.log(error);
+        });
+};
+
+const getTripData = (trip) => {
+    const tripDetails = $(`#trip-details`).removeClass("hide");
+    tripDetails.empty();
+
+    axios.get(TRIPS + trip.id)
+    .then((response) => {
+      console.log(response);
+      reportStatus(`Loaded details for trip: ${response.data.name}`);
+      tripDetails.append(
+        `<h3>Trip Details</h3>
+        <li><u><strong>Trip Name: ${response.data.name}</strong></u></li>
+        <li>ID: ${response.data.id}</li>
+        <li>Type: ${response.data.category}</li>
+        <li>Destination: ${response.data.continent}</li>
+        <li>Cost: $${response.data.cost}</li>
+        <li>Travel Time: ${response.data.weeks} weeks </li>
+        <li>Description: ${response.data.about}</li>`);
+      })
+    .catch((error) => {
+        reportStatus(`Error while loading: ${error.message}`);
+        console.log(error);
+    });
+}
+
+const FORM = ['name', 'email'];
+const inputField = name => $(`#reservation-form input[name="${name}"]`);
+
+const readFormData = () => {
+    const getInput = name => {
+        const input = inputField(name).val();
+        return input ? input : undefined;
+      };
+    const formData = {};
+      FORM.forEach((field) => {
+        formData[field] = getInput(field);
+      });
+
+    return formData;
+};
+
+const clearForm = () => {
+      FORM.forEach((field) => {
+        inputField(field).val('');
+      });
+}
+
+const createRes = (event, trip) => {
+    reportStatus('Sending reservation data...');
+
+    event.preventDefault();
+
+    const resData = readFormData();
+
+    axios.post(TRIPS + trip + "/reservations", resData)
+    .then((response) => {
+        reportStatus(`Added a new reservation for ${response.data.name}.`);
+        clearForm();
+    })
+    .catch((error) => {
+        reportStatus(`Error: ${error.message}`);
+    })
+};
+
+$(document).ready(() => {
+    $('#load').click(loadTrips);
+  });