Ada-C9 · SelamawitA · May 22, 2018 · May 23, 2018 · May 23, 2018 · May 23, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Trek</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
+</head>
+<body>
+  <section id="status-message"></section>
+
+  <main>
+    <button class="button" id="create-trip-button">Create a trip</button>
+    <form id="create-trip">
+      <div class="large-4 columns">
+        <label for="name-create">Trip Name</label>
+        <input type="text" name="name-create"/>
+      </div>
+      <div>
+        <label for="continent">Continent</label>
+        <input type="text" name="continent"/>
+      </div>
+      <div>
+        <label for="about">About</label>
+        <input type="text" name="about" />
+      </div>
+      <div>
+        <label for="category">Category</label>
+        <input type="text" name="category"/>
+      </div>
+      <div>
+        <label for="weeks">Weeks</label>
+        <input type="number" name="weeks"/>
+      </div>
+      <div>
+        <label for="cost">Cost</label>
+        <input type="text" name="cost"/>
+      </div>
+      <input type="submit" name="create-trip" value="Submit" id="submit-trip"/>
+    </form>
+
+    <div class="grid-x grid-padding-x">
+      <div class="medium-6 small 12 cell">
+        <section class="current-pets">
+          <h1>Trek</h1>
+          <button class="button expanded" id="load">Get All Trips</button>
+          <ol id="all-trips"></ol>
+        </section>
+      </div>
+      <div class="medium-6 small 12 cell">
+        <ul id="trip-details"></ul>
+        <form id="book-trip-form">
+          <div>
+            <label for="name">Name</label>
+            <input type="text" name="name"/>
+          </div>
+          <div id="cust-email">
+            <label for="email">Email</label>
+            <input type="text" name="email" />
+          </div>
+          <div id="div-for-trips">
+          </div>
+          <input class="button" type="submit" name="add-reservation" value="Make a Reservation" id="submit-button"/>
+        </form>
+      </div>
+    </div>
+  </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,174 @@
+const URL = `https://ada-backtrek-api.herokuapp.com/trips`
+const postURL = `https://ada-backtrek-api.herokuapp.com/trips`
+
+
+let singleTripURL = function(tripID){
+  let singleURL = ``
+  return singleURL+=`https://ada-backtrek-api.herokuapp.com/trips/${tripID}`
+}
+
+let reserveAtrip = function(tripID){
+  let singleURL =``
+  return singleURL+= `https://ada-backtrek-api.herokuapp.com/trips/${tripID}/reservations`
+}
+
+
+const reportStatus = (message) =>{
+  $(`#status-message`).html(message);
+}
+
+const reportError = (message, errors) => {
+  let content = `<p>${message}</p>`
+  content += "<ul>";
+  for (const field in errors) {
+    for (const problem of errors[field]) {
+      content += `<li>${field}: ${problem}</li>`;
+    }
+  }
+  content += "</ul>";
+  reportStatus(content);
+};
+
+const loadTripdetails = (aTrip)=>{
+  const tripDetails = $(`#trip-details`);
+  const divTrips = $('#div-for-trips');
+  divTrips.empty();
+  tripDetails.empty();
+
+  reportStatus('Searching for trip details...')
+
+  axios.get(singleTripURL(aTrip.target.id))
+  .then((response) => {
+    tripDetails.append(`<li>Trip Location: ${response.data.name}</li>`)
+    tripDetails.append(`<li>Continent: ${response.data.continent}</li>`)
+    tripDetails.append(`<li>Category: ${response.data.category}</li>`)
+    tripDetails.append(`<li>Weeks: ${response.data.weeks}</li>`)
+    tripDetails.append(`<li>Cost: $${response.data.cost}</li>`)
+    tripDetails.append(`<li>Details: ${response.data.about}</li>`)
+    tripDetails.append(`<button class="button" id="make-res">Book this trip!</button>`)
+    divTrips.append(`<input type="hidden" name="location-id" value="${response.data.id}"/>`)
+    divTrips.append('<label for="trip" >Trip</label>')
+    divTrips.append(`<input type="trip" name="trip" id="trip-input" value="${response.data.name}"/>`)
+    reportStatus('Trip details found!')
+  })
+  .catch((error) =>{
+    console.log(error)
+    reportStatus(`Error: ${error.message}`)
+  })
+}
+
+const loadTrips = ()=>{
+  //create reference to all-trips element
+  let tripList = $(`#all-trips`);
+  //empty list before call to API
+  tripList.empty();
+  //display pending status to user
+  reportStatus('Loading trips....')
+  axios.get(URL)
+  .then((response) => {
+    response.data.forEach((trip) => {
+      tripList.append(`<li id="${trip.id}">${trip.name}</li>`)
+    });
+    reportStatus('Trips loaded!');
+  })
+  .catch((error) =>{
+    console.log(error)
+    reportStatus(`Error: ${error.message} `)
+  })
+}
+
+const createTrip = (event) =>{
+  event.preventDefault();
+
+  const newTripinfo = {
+    name: $(`input[name="name-create"]`).val(),
+    continent: $(`input[name="continent"]`).val(),
+    about: $(`input[name="about"]`).val(),
+    category: $(`input[name="category"]`).val(),
+    weeks: $(`input[name="weeks"]`).val(),
+    cost: $(`input[name="cost"]`).val()
+  }
+
+  reportStatus(`Attempting to create your new trip!`)
+  $(`input[name="name-create"]`).val('')
+  $(`input[name="continent"]`).val('')
+  $(`input[name="about"]`).val('')
+  $(`input[name="category"]`).val('')
+  $(`input[name="weeks"]`).val('')
+  $(`input[name="cost"]`).val('')
+
+  axios.post(URL,newTripinfo)
+  .then((response) => {
+    reportStatus('Your trip has been created')
+  })
+  .catch((error) =>{
+    reportStatus('fail')
+    if( error.message && error.response.data.errors){
+      reportError(error.message,error.response.data.errors)
+    }else
+    reportError(`encounted error: ${error.message}`)
+  })
+};
+
+
+const bookTrip = (event) =>{
+  event.preventDefault();
+
+  const tripInfo ={
+    name: $(`input[name="name"]`).val(),
+    email:$(`input[name="email"]`).val(),
+    tripID:$(`input[name="location-id"]`).val()
+  }
+
+  reportStatus(`Attempting to make your reservation`)
+  $(`input[name="name"]`).val('')
+  $(`input[name="email"]`).val('')
+  $(`input[name="location-id"]`).val('')
+
+  axios.post(reserveAtrip(tripInfo.tripID),tripInfo)
+  .then((response) => {
+    reportStatus('You trip has been booked')
+  })
+  .catch((error) => {
+    reportStatus('fail')
+    if( error.message && error.response.data.errors){
+      let v = error.response.data.errors
+      console.log(v)
+      reportError(error.message,error.response.data.errors)
+    }else
+    reportError(`encounted error: ${error.message}`)
+  })
+};
+
+
+$(document).ready(() => {
+  $(`#load`).click(loadTrips);
+  $(document).on("click","#all-trips",function(event){
+    loadTripdetails(event);
+  });
+
+  $(document).on("click","#make-res",function(){
+    $("#book-trip-form").toggle("slow");
+  });
+
+  $(`#book-trip-form`).submit(bookTrip);
+
+  $(document).on("click","#submit-button",function(event){
+    $(`#submit-button`).toggle();
+    $(`#book-trip-form`).append(`<button id="button-success" class="button success">Trip Booked!</button>`);
+  });
+
+  $(document).on("click","#create-trip-button",function(){
+    $(`#create-trip`).toggle("slow");
+  })
+
+  $(`#create-trip`).submit(createTrip);
+  $(document).on("click","#submit-trip",function(){
+    $('#create-trip').toggle("slow")
+  })
+
+  $(document).on("click","#all-trips",function(){
+    $(`#button-success`).remove();
+    $(`#submit-button`).show();
+  })
+});
diff --git a/jquery-3.3.1.min.js b/jquery-3.3.1.min.js
diff --git a/style.css b/style.css
@@ -0,0 +1,69 @@
+#all-trips li:hover{
+  font-weight: bold;
+}
+nav{
+  background-color:#ff99c2;
+}
+
+ol li{
+  margin-left: 20px;
+}
+#create-trip-button{
+  margin-left: 85%;
+  margin-top:22px;
+  margin-bottom:0px;
+}
+#status-message li{
+  font-size:25px;
+  list-style-type: none;
+}
+
+#status-message {
+  font-size:25px;
+}
+
+#book-trip-form{
+  display: none;
+}
+
+#create-trip{
+  display:none;
+}
+
+#status-message{
+  text-align: center;
+}
+
+#trip-details{
+  background-color:	#D0D0D0;
+  list-style-type: none;
+  margin-top:7px;
+}
+
+#trip-details li{
+  font-size: 12px;
+  padding: 13px;
+}
+
+#make-res{
+  margin-left:10px;
+}
+
+#submit-button{
+  margin-top:10px;
+}
+
+#button-success{
+  margin-top:10px;
+}
+
+html,main{
+  background-color: #99d6ff;
+}
+
+
+form:first-of-type{
+  margin-left: 150px;
+  margin-right: 150px;
+
+}