Ada-C11 · sophearychiv · Jun 3, 2019 · Jun 3, 2019 · Jun 3, 2019 · Jun 8, 2019
diff --git a/css/home.css b/css/home.css
@@ -0,0 +1,110 @@
+.display-flex {
+    display: flex;
+    flex-direction: row;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 3rem;
+    border: 1px solid black;
+}
+
+h1 {
+    margin-left: 10px;
+}
+
+section.title {
+    font-weight: bold;
+    font-size: 20px;
+    padding: 10px;
+    border-bottom: solid thin black;
+}
+
+button#load-trips {
+    margin-top: 10px;
+    margin-left: 10px;
+}
+
+#trip-list {
+    width: 450px;
+    padding-top: 10px;
+    margin-left: 10px;
+}
+
+#trip-details {
+    width: 650px;
+    padding-top: 10px;
+    margin-left: 10px;
+}
+
+#trip-list > h4, #trip-details > h4, #reserve-trip > h4 {
+    text-align: center;
+    border: solid thin black;
+    margin: 0px;
+    border-bottom: 0px;
+    padding: 10px 0px;
+}
+
+#reserve-trip > h4 {
+    border-bottom: solid thin black;
+}
+
+#trip-list > div {
+    border: solid thin black;
+    border-bottom: 0;
+    text-align: center;
+    padding: 10px 0px;
+    cursor: pointer;
+}
+
+#trip-details > div {
+    border: solid thin black;
+    border-bottom: 0;
+    text-align: left;
+    padding: 10px 10px;
+}
+
+#reserve-trip > div {
+    border-left: solid thin black;
+    border-right: solid thin black;
+    border-bottom: 0;
+    text-align: left;
+    padding: 10px 10px;
+}
+
+#trip-list > div:last-child, 
+#trip-details > div:last-child, 
+#reserve-trip > div:last-child {
+    border-bottom: solid thin black;
+}
+
+
+label {
+    font-weight: bold;
+}
+
+.display-flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+#reserve-trip {
+    width: 650px;
+    padding-top: 10px;
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+
+div.display-flex > div:first-child {
+    width: 100px;
+}
+
+div.display-flex input {
+    border-radius: 3px;
+    border: solid thin black;
+    font-size: 18px;
+}
+
+#reserve-trip > div:last-child {
+    text-align: right;
+}
diff --git a/home.html b/home.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
+    <title>Trek</title>
+  </head> 
+    <body>
+        <h1>Trek</h1>
+        <section id="status"></section>
+        <button class="btn btn-secondary btn-lg" id="load-trips">Load Trips</button>
+        <section class="display-flex">
+            <section>
+                <section id="trip-list"></section>
+            </section>
+            <section class="display-flex-column">
+                    <section id="trip-details">
+                    </section>
+                    <section id="reserve-trip">
+                        <h4 id="reserve-title"></h4>
+                        <div class="display-flex"><div>Name</div><div><input type="text" id='txtName' /></div></div>
+                        <div class="display-flex"><div>Email</div><input type="text" id='txtEmail' /></div>
+                        <div><button id="reserve-trip-button">Reserve</button></div>
+                    </section>
+            </section>
+        </section>
+
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
+        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+        <script src='js/script.js'></script>
+        <link rel="stylesheet" type="text/css" href="css/home.css">
+    </body>
+</html> 
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,100 @@
+let selectedTrip = null;
+
+const displayStatus = (message) => {
+    $('#status').html(message);
+  }
+
+const handleApiError = (error) => {
+    displayStatus(error);
+}
+
+const loadTrips = () => {
+displayStatus("loading trips...");
+(async () => {
+    const response = await axios.get('https://trektravel.herokuapp.com/trips');
+    $("#trip-list")[0].innerHTML = getAlltrips(response.data);
+    displayStatus("");
+
+    // using closure here
+    const showTripDetails = (trip) => {
+        const tripName = trip.currentTarget.textContent;
+        selectedTrip = response.data.filter(o => o.name === tripName);
+        const tripId = selectedTrip[0].id;
+            (async () => {
+                const tripResponse = await axios.get('https://trektravel.herokuapp.com/trips/' + tripId);
+                $("#trip-details")[0].innerHTML = getTripDetails(tripResponse.data);
+                displayStatus("");
+                $("#reserve-title").html(`Reserve a spot on ${selectedTrip[0].name} trip`);
+                $("#reserve-trip").show();
+            })()
+            .catch(function(error) {
+                handleApiError("There is an issue while pulling the trips' information");
+            });
+    }
+    $('#trip-list div').bind("click", showTripDetails);
+    })()
+
+    .catch(function(error) {
+        handleApiError("There is an issue while pulling the trips' information");
+    });
+}
+
+const reserveTrip = () => {
+
+    if (selectedTrip && selectedTrip.length > 0) {
+        const name = $("#txtName");
+        const email = $("#txtEmail");
+        const tripId = selectedTrip[0].id;
+        if (validateData(name.val()) && validateData(email.val())) {
+            const newReservedData = {
+                name: name.val(),
+                email: email.val()
+              }
+            displayStatus("loading...");
+            (async () => {
+                await axios.post('https://trektravel.herokuapp.com/trips/'+ tripId +'/reservations', newReservedData);
+                displayStatus("The trip is reserved");
+                name.val('');
+                email.val('');
+                })()
+
+                .catch(function (error) {
+                    handleApiError('There is an issue while creating a new reservation');
+                });
+        }
+    }
+}
+
+const validateData = (data) => {
+    if (!data || data === '') {
+        handleApiError("Name or email is not correct");
+        return false;
+    }
+    return true;
+}
+
+$(document).ready(() => {
+    $('#load-trips').click(loadTrips);
+    $('#reserve-trip-button').click(reserveTrip);
+    $('#reserve-trip').hide();
+});
+
+const getAlltrips = (data) => {
+    let output = '<h4>All Trips</h4>';
+    data.forEach((trip)=> {
+        output += '<div id="trip-name">' + trip.name + '</div>';
+    });
+    return output;
+}
+
+const getTripDetails = (data) => {
+    let output = '<h4>Trip Details</h4>' +
+                '<div><label>Name: </label>' + data.name +'</div>' +
+                '<div><label>Continent: </label>' + data.continent +'</div>' + 
+                '<div><label>Category: </label>' + data.category +'</div>' + 
+                '<div><label>Weeks: </label>' + data.weeks +'</div>' + 
+                '<div><label>Cost: </label>' + data.cost +'</div>' + 
+                '<div><label>About: </label><br>' + data.about + '</br></div>';
+
+    return output;
+}