Ada-C10 · madaleines · Nov 27, 2018 · Nov 27, 2018 · Nov 27, 2018 · Nov 27, 2018
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>TREK</title>
+		<link rel="stylesheet" href="style.css">
+	</head>
+
+	<body>
+
+
+		<main class="container">
+			<section class="nav">
+				<span><button id="load-trips-button">Get All Trips</button></span>
+				<section id="status-message"></section>
+			</section>
+
+			<section id="list" class="all-trips hidden-at-start">
+				<h3 class="trip-list-header">Trips List</h3>
+				<ul id="trips-list" ></ul>
+			</section>
+
+			<section id="right-side-info" class="hidden-at-start side-info">
+
+			</section>
+
+		</main>
+		<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>
+	</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,103 @@
+const FORM_FIELDS = ['name', 'email'];
+
+const INFO_FIELD = ['about','continent', 'category', 'weeks', 'cost'];
+
+const URL = 'https://trektravel.herokuapp.com/trips';
+const getTripURL = (tripId) => { return `${URL}/${tripId}` };
+const getReservationURL = (tripId) => { return `${getTripURL(tripId)}/reservations` };
+
+const getInfo = (info) => {
+  let requestedInfo = `<section id='trip-info'><h3>${info['name']}</h3>`;
+  INFO_FIELD.forEach((infoField) => {
+    requestedInfo +=
+    `<p><strong>${infoField}: </strong><span class='info-field'>${info[`${infoField}`]}</span></p>`;
+  });
+  requestedInfo += `</section>`;
+  return requestedInfo;
+};
+
+const getFieldName = (field) => {
+  return `<label for=${field}>${field}</label><input type='string' name=${field} id=${field} />`;
+};
+
+const inputField = name => $(`#reservation-form input[name='${name}']`);
+const getInput = name => { return inputField(name).val() || undefined };
+
+const reservationFormData = () => {
+  const formData = {};
+  FORM_FIELDS.forEach((field) => { formData[field] = getInput(field) });
+  return formData;
+};
+
+const loadForm = () => {
+  let formData = `<section id='book'><h4>Reserve Trip</h4><form id='reservation-form'>`;
+  FORM_FIELDS.forEach((field) => { formData += getFieldName(field) });
+  formData +=
+  `<br /><input type='submit' name='add-reservation' value='Add Reservation' /></form></section>`;
+  return formData;
+};
+
+const clearForm = () => { FORM_FIELDS.forEach((field) => { inputField(field).val(''); }) };
+
+const reportStatus = (message) => { $('#status-message').html(message); };
+
+const loadTrips = () => {
+  const tripsList = $('#trips-list');
+  tripsList.empty();
+
+  axios.get(URL)
+  .then((response) => {
+    response.data.forEach((trip) => {
+      tripsList.append(`<li class='trip ${trip.id}'>${trip.name}</li>`)
+    });
+  })
+  .catch((error) => {
+    console.log(error);
+    reportStatus(`Error: ${error.message}`);
+  });
+};
+
+const getTrip = (tripID) => {
+  const tripInfo = $('#right-side-info');
+  tripInfo.empty();
+  axios.get(getTripURL(tripID))
+  .then((response) => {
+    tripInfo.append(getInfo(response.data))
+    .append(loadForm());
+    $('#reservation-form').submit(function(event) { createReservation(event, tripID); });
+  })
+  .catch((error) => {
+    console.log(error);
+    reportStatus(`Error: ${error.message}`);
+  });
+};
+
+const createReservation = (event, tripID) => {
+  event.preventDefault();
+  axios.post(getReservationURL(tripID), reservationFormData())
+  .then((response) => {
+    reportStatus(`Successfully added a reservation with ID ${response.data.trip_id}!`);
+  })
+  .catch((error) => {
+    console.log(error.response);
+    reportStatus(`Encountered an error while creating a reservation: ${error.message}`);
+  });
+  clearForm();
+};
+
+$(document).ready(() => {
+  $('.hidden-at-start').hide();
+
+  $('#load-trips-button').on('click', function() {
+    $('#list').slideDown('slow');
+    loadTrips(null);
+  });
+
+  $('#trips-list').on('click', function(event) {
+    $('.side-info').slideUp('slow')
+    .promise().done(function() {
+      getTrip(event.target.classList[1]);
+      $('.side-info').slideDown('slow');
+    });
+  });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,90 @@
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+html {
+  background: url("https://images.unsplash.com/photo-1537522306408-8435f315b2e3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7524eb105d6f756457a2747a3a49a501&auto=format&fit=crop&w=1950&q=80") no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+body::after {
+  filter: blur(13px);
+}
+
+body {
+  margin-left: 15%;
+  margin-right: 15%;
+  background: none;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-areas:
+          "nav nav"
+          "list right-side-info";
+}
+
+#whole-right-subside {
+  height: 100%;
+  border-bottom-right-radius: 15px;
+  border-bottom: 6px solid red;
+}
+
+.nav {
+  height: 75px;
+  background-color: white;
+  grid-area: nav;
+}
+
+#list {
+  height: 45rem;
+  border-bottom-left-radius: 15px;
+  grid-area: list;
+  border-bottom: 6px solid red;
+ }
+
+#right-side-info {
+  height: 50rem;
+  grid-area: right-side-info;
+  border-bottom-right-radius: 15px;
+  display: grid;
+  grid-template-rows: 30rem 15rem;
+  grid-template-areas:
+          "trip-info"
+          "book";
+}
+
+#trip-info {
+  overflow: scroll;
+  grid-area: trip-info;
+}
+
+#book {
+  height: 100%;
+  grid-area: book;
+  border-bottom-right-radius: 15px;
+  border-bottom: 6px solid red;
+}
+
+#trips-list {
+  overflow: scroll;
+  max-height: 38rem;
+}
+
+#book, #trip-info, #list, #trips-list, #whole-right-subside {
+  background-color: white;
+  padding: 5px;
+}
+
+.info-field {
+  text-align: justify;
+}
+
+.green {
+  background-color: green;
+}