diff --git a/images/trek-bg.jpg b/images/trek-bg.jpg new file mode 100644 index 00000000..4571c187 Binary files /dev/null and b/images/trek-bg.jpg differ diff --git a/index.css b/index.css new file mode 100644 index 00000000..c56d0675 --- /dev/null +++ b/index.css @@ -0,0 +1,173 @@ +body { + margin: 0; +} + +#bg-img-box { + position: fixed; + left: 0; + right: 0; + z-index: -1; + display: block; + background-image: url("images/trek-bg.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + width: 100%; + height: 100%; + opacity: 0.2; + filter: alpha(opacity=20) +} + +main { + position: fixed; + left: 0; + right: 0; + z-index: 0; + margin: 0 20px; + font-family: 'Quicksand', sans-serif; + color: #1d1145; +} + +.bg-blur { + filter: blur(5px); + -webkit-filter: blur(5px); +} + +header { + display: flex; + font-family: 'Do Hyeon', sans-serif; + color: #1d1145; +} + +h1 { + font-size: 30px; +} + +#app-title:hover { + opacity: 0.2; + filter: alpha(opacity=20) +} + +nav { + margin: 10px 0; +} + +#status-msg { + margin-left: auto; + align-self: flex-start; +} + +.table-border { + border-collapse: collapse; + text-align: center; + background-color: white; +} + +th, td { + border-bottom: 1px solid #1d1145; +} + +#all-trips, #trip-details, #reserve-trip { + overflow-y: auto; +} + +#all-trips { + height: 510px; +} + +#all-trips table { + width: 300px; +} + +#trip-details, #reserve-trip { + height: 250px; +} + +#trip-details table, #reserve-trip table { + width: 600px; + height: 250px; +} + +td { + padding: 15px; +} + +li { + list-style-type: none; +} + +p { + margin: 0; + display: inline; +} + +li p { + font-weight: bolder; +} + +ul { + text-align: left +} + +.trip-name { + font-weight: 100; + color: #0db4b9; +} + +#reserve-trip-card h2 { + display: inline; +} + +p::after, #to-which-trip::before { + content: " "; + white-space: pre; +} + +#trip-console { + display: grid; + grid-template-columns: 1fr 3fr; + grid-gap: 10px; +} + +#all-trips { + grid-column: 1 / 2; +} + +#trip-pane { + grid-column: 2 / 3; + display: flex; + flex-direction: column; + justify-content: start; +} + +#reserve-trip { + margin-top: 10px; +} + +.submit-btn { + margin-top: 10px; +} + +button, .submit-btn { + background-color: #f2a1a1; + border: none; + color: white; + padding: 15px 25px; + text-align: center; + font-size: 16px; + cursor: pointer; +} + +button:hover, .submit-btn:hover { + background-color: #e76d89; +} + +#trip-table tr:not(:first-child):hover { + background-color: #f2a1a1; + color: white; +} + +#trip-table tr:not(:first-child):active { + background-color: #e76d89; + color: white; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..d3ad15f0 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + SJ Trek! + + + + + + + + +
+
+
+

Star Trek!

+
+
+ +
+
+
+
+
+
+
+
+ + diff --git a/index.js b/index.js new file mode 100644 index 00000000..ee584fa1 --- /dev/null +++ b/index.js @@ -0,0 +1,156 @@ +const URL = 'https://trektravel.herokuapp.com/trips'; + +const reportStatus = (message) => { + $('#status-msg').html(message); +}; + +const reportError = (message, errors) => { + let content = `

${message}

` + content += ""; + reportStatus(content); +}; + +const loadAllTrips = () => { + $('#bg-img-box').addClass('bg-blur') + const allTrips = $('#all-trips'); + allTrips.empty(); + reportStatus('Loading trips...'); + allTrips.append('
') + const tripTable = $('#trip-table'); + axios.get(URL) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips!`); + tripTable.append('

All Trips

'); + response.data.forEach((trip) => { + tripTable.append(`${trip.name}`); + // build a click handler for each element id + $("#trip-table").on("click", `#trip-${trip.id}`, function() { + loadTripDetails(trip.id); + }); + }); + $("table").addClass("table-border"); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + +const loadTripDetails = (tripId) => { + const tripDetails = $('#trip-details'); + tripDetails.empty(); + reportStatus('Loading trip details...'); + tripDetails.append('
') + const tripCard = $('#trip-card'); + axios.get(`${URL}/${tripId}`) + .then((response) => { + reportStatus(`Successfully loaded trip ${tripId}!`); + tripCard.append('

Trip Details

'); + const trip = response.data; + console.log(trip); + tripCard.append( + ` + + + + `); + loadReserveTripForm(trip); + $("table").addClass("table-border"); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + +const reserveTripForm = + ` + + +

Reserve A Trip

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
`; + +const loadReserveTripForm = (trip) => { + const reserveTrip = $('#reserve-trip'); + reserveTrip.html(reserveTripForm); + $("table").addClass("table-border"); + $('#reservation-form-header').append(` To ${trip.name}`); + $('#reserve-trip').on("submit", "#trip-form", function(event) { + event.preventDefault(); + $(window).scrollTop(0); + reportStatus('Sending form data...'); + createReservation(trip.id); + }); +}; + +const readFormData = () => { + let tripForm = document.getElementById("trip-form"); + const tripData = new FormData(tripForm); + return tripData; +}; + +const clearForm = () => { + $("#trip-form")[0].reset(); +}; + +const createReservation = (tripId) => { + postUrl = `${URL}/${tripId}/reservations` + axios.post(postUrl, readFormData()) + .then((response) => { + console.log(response); + reportStatus(`Success! You're on your way! + (RESERVATION ID: ${response.data.id} - + TRIP ID: ${response.data.trip_id})` + ); + clearForm(); + }) + .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}`); + } + }); +}; + +$(document).ready(() => { + $('#load-trips').click(loadAllTrips); + $('#app-title').click(function() { + location.reload(true); + }) +});