Ada-C10 · halcyon-and-on · 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" type="text/css" href="styles/style.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+    <script src="src/scriptkiddy.js"></script>
+  </head>
+  <body>
+    <header>
+      <h1>trek</h1>
+      <button id="loadtrips">load trips</button>
+    </header>
+    <section id="status-message">
+    </section>
+
+
+    <div id="tripscontainer">
+      <ul id="triplist">
+      </ul>
+      <section id="singletripcontainer">
+        <section id="tripdetails">
+        </section>
+
+        <section id="booktrip">
+        </section>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/src/scriptkiddy.js b/src/scriptkiddy.js
@@ -0,0 +1,120 @@
+const BASE = 'https://trektravel.herokuapp.com/'
+
+const loadTrips = () => {
+  axios.get(BASE + 'trips')
+    .then((response) => {
+      $('#triplist').css('height', 'max-content');
+      $('#triplist').css('border', '4px solid black');
+      response.data.forEach((trip) => {
+        $('#triplist').append(`<li data-id="${trip.id}">${trip.name}</li>`);
+      })
+    })
+    .catch((error) => {
+      reportStatus(`Encountered an error while loading trips: ${error.message}`);
+      console.log(error);
+    });
+};
+
+const getDetails = (id) => {
+  axios.get(BASE + 'trips/' + id)
+    .then((response) => {
+      console.log(response.data);
+      $('#tripdetails').css('border', '4px solid orangered');
+      $('#tripdetails').css('borderRadius', '10px');
+      $('#tripdetails').css('boxShadow', '5px 5px 20px red');
+      clearBorder();
+
+      $('#tripdetails').html(`<ul><li id="title">${response.data.name}</li><li id="about">${response.data.about}<li><li class="rightalign">${response.data.cost}</li><li class="rightalign">${response.data.weeks} weeks</li><li class="rightalign" id="bookit" data-id="${response.data.id}">book it!</li></ul>`);
+
+      $('#bookit').on('click', function() {
+        bookTrip($(this).attr('data-id'));
+      });
+    })
+    .catch((error) => {
+      reportStatus(`Encountered an error while loading trip: ${error.message}`);
+      console.log(error);
+    });
+};
+
+const bookTrip = (id) => {
+  $('#booktrip').css('border', '3px solid dodgerblue');
+  $('#booktrip').css('boxShadow', '5px 5px 20px skyblue');
+
+  $('#booktrip').html(
+    `<form data-id="${id}">
+      <label>name</label>
+      <input type="text" name="name" />
+      <label>email</label>
+      <input type="text" name="email" />
+      <input type="submit" id="submit"/>
+    </form>`);
+
+    $('form').submit(submitForm);
+};
+
+const submitForm = (e) => {
+  e.preventDefault();
+
+  const data = {};
+  data['name'] = $('form input[name="name"]').val();
+  data['email'] = $('form input[name="email"]').val();
+  console.log(data);
+
+  reportStatus('Sending ur deets...');
+
+  const url = BASE + `trips/${$('form').attr('data-id')}/reservations`
+  axios.post(url, data)
+    .then((response) => {
+      reportStatus(`Successfully did a reserve for ${response.data.name}!`);
+      $('form input[name="name"]').val('');
+      $('form input[name="email"]').val('');
+    })
+    .catch((error) => {
+      console.log(error.response);
+      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 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 clearStatus = () => {
+  $('#status-message').html('');
+};
+
+const clearBorder = () => {
+  $('#booktrip').css('border', '');
+};
+
+
+$(document).ready(() => {
+  $('#loadtrips').on('click', () => {
+    clearStatus();
+    loadTrips();
+  });
+
+  $('ul').on('click', 'li', function() {
+    clearStatus();
+    $('#booktrip').html('');
+    getDetails($(this).attr('data-id'));
+  });
+})
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,135 @@
+body {
+  font-family: Helvetica, sans-serif;
+}
+
+header {
+  display: flex;
+  align-items: flex-end;
+  margin-left: 2vw;
+}
+
+h1 {
+  font-size: 6em;
+  margin: 0;
+}
+
+#loadtrips {
+  max-height: 1.8vw;
+  margin-left: 2vw;
+  margin-bottom: 1vw;
+}
+
+#tripscontainer {
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+}
+
+#tripdetails {
+  width: 40vw;
+}
+
+#triplist {
+  width: 40vw;
+  height: 0;
+  border: 2px solid black;
+  border-radius: 10px;
+  margin-top: 0;
+  box-shadow: 5px 5px 20px darkslategray;
+}
+
+#triplist li {
+  margin-top: 1vw;
+  margin-left: .5vw;
+  font-weight: bold;
+  padding: 0;
+}
+
+#triplist li:hover {
+  color: red;
+  cursor: crosshair;
+}
+
+#triplist li:first-of-type {
+  margin-top: 3vw;
+}
+
+#triplist li:last-of-type {
+  margin-bottom: 2.9vw;
+}
+
+#about {
+  overflow-y: scroll;
+  max-height: 35vh;
+}
+
+#singletripcontainer {
+  display: flex;
+  flex-direction: column;
+  font-weight: bold;
+  max-height: 30vw;
+}
+
+#tripdetails ul {
+  padding: 0 2.5vw 0 2.5vw;
+}
+
+#tripdetails li {
+  margin: 1.5vw 0 1.5vw 0;
+}
+
+#title {
+  font-size: 2em;
+}
+
+#about {
+  font-weight: normal;
+  border: 4px solid dodgerblue;
+  border-radius: 10px;
+  padding: 1vw;
+}
+
+.rightalign {
+  text-align: right;
+}
+
+#bookit {
+  text-decoration: underline;
+  font-size: 1.2em;
+}
+
+#bookit:hover {
+  color: orangered;
+  cursor: pointer;
+}
+
+#booktrip {
+  margin-top: 2vw;
+  border-radius: 10px;
+  padding: 2vw;
+}
+
+ul {
+  list-style: none;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  margin-left: 1vw;
+}
+
+input {
+  width: 30vw;
+  height: 2.5vw;
+  margin: .5vw;
+}
+
+label {
+  margin-bottom: .6vw;
+  margin-top: .3vw;
+}
+
+#submit {
+  width: 6vw;
+}