diff --git a/index.css b/index.css new file mode 100644 index 00000000..c6867524 --- /dev/null +++ b/index.css @@ -0,0 +1,130 @@ +header { + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; +} + +body { + color: #004C82; + font-family: sans-serif; + margin: 1em; + background-position: center; + background: url("http://wallpaperia.com/wp-content/uploads/2015/05/hawaii-desktop-background-496214.jpg") no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr; +} + +section.trip ul{ + list-style-type: none; +} + +form { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 0px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} + +input[type=text], select { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} + +input[type=submit] { + width: 100%; + background-color: #00d5ff; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 1em + +} + +button { + width: 100%; + background-color: #00d5ff; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 1em +} + +section { + border: 1px solid #ccc; + padding: 1em; + margin: 1em; + background-color: #ffffff; + border: 1px solid black; + opacity: 0.9; + filter: alpha(opacity=60); +} + +h1.title { + font-family: 'Rosario', sans-serif; + background-color: transparent; + width: inherit; + font-size: 7em; + text-decoration: none; + font-weight: bold; +} + +header h4 { + color: white; + font-size: 20px; + text-shadow: 2px 1px 1px #555; + font-style: italic; +} + +a:link { + color: white; + text-decoration: none; + text-shadow: 2px 1px 1px #555; +} + +a:visited { + color: white; + text-decoration: none; +} + +a:hover { + font-weight: bold; + color: #00ffff; +} + +a.effect-shine:hover { + -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%); + -webkit-mask-size: 200%; + animation: shine 2s infinite; +} + +@-webkit-keyframes shine { + from { + -webkit-mask-position: 150%; + } + + to { + -webkit-mask-position: -50%; + } +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..9bf8b46d --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + + + + T R E K + + + + + + + + + + +
+

T R E K

+

Oh the places you'll go...

+
+ +
+ +
+
+

Trip Log

+ + +
+ +
+ +
+
+ + +
+

Create A New Trip

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

${message}

"; + reportStatus(content); +}; + +// +// Loading Trips +// +const loadTrips = () => { + reportStatus('Loading trips...'); + + const tripList = $('#trip-list'); + tripList.empty(); + + axios.get(URL) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + response.data.forEach((trip) => { + const oneTrip = $(`
  • ${trip.name}
    • `) + tripList.append(oneTrip); + + oneTrip.on('click', () => {getOneTrip(`${trip.id}`)}); + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.messmessage}`); + console.log(error); + }); +}; + +// Single trip detail +// + +const getOneTrip = (id) => { + const tripURL = URL + '/' + id; + + axios.get(tripURL) + .then((response) => { + $('#trip-details').empty(); + const data = response.data; + $('#trip-details').append(`

    Trip Details

    `); + $('#trip-details').append(`
  • Trip ID: ${data.id}`); + $('#trip-details').append(`
  • Destination: ${data.name}`); + $('#trip-details').append(`
  • Continent: ${data.continent}`); + $('#trip-details').append(`
  • Duration: ${data.weeks}`); + $('#trip-details').append(`
  • Cost: $${data.cost}`); + $('#trip-details').append(`
  • About This Trip: ${data.about}`); + + $('#new-reservation').empty(); + $('#new-reservation').append(` +

    Create A New Reservation

    +
    + + +
    +
    + + +
    +
    + + + +
    + + + `); + }) + .catch((error) => { + reportStatus(`Encountered an error loading trip ${id}: ${error.message}`) + }); + }; + +// Reserving trip + + + +// Creating trips +// +const readFormData = () => { + const parsedFormData = {}; + + const nameFromForm = $(`#trip-form input[name="name"]`).val(); + parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; + + const continentFromForm = $(`#trip-form input[name="continent"]`).val(); + parsedFormData['continent'] = continentFromForm ? continentFromForm : undefined; + + const categoryFromForm = $(`#trip-form input[name="category"]`).val(); + parsedFormData['category'] = categoryFromForm ? categoryFromForm : undefined; + + const weeksFromForm = $(`#trip-form input[name="weeks"]`).val(); + parsedFormData['weeks'] = weeksFromForm ? weeksFromForm : undefined; + + const costFromForm = $(`#trip-form input[name="cost"]`).val(); + parsedFormData['cost'] = costFromForm ? costFromForm : undefined; + + const aboutFromForm = $(`#trip-form input[name="about"]`).val(); + parsedFormData['about'] = aboutFromForm ? aboutFromForm : undefined; +}; +const clearForm = () => { + $(`#trip-form input[name="name"]`).val(''); + $(`#trip-form input[name="continent"]`).val(''); + $(`#trip-form input[name="category"]`).val(''); + $(`#trip-form input[name="weeks"]`).val(''); + $(`#trip-form input[name="cost"]`).val(''); + $(`#trip-form input[name="about"]`).val(''); +}; + +// creating reservation +const readReservationFormData = () => { + const parsedFormData = {}; + + const reservationNameFromForm = $(`#new-reservation input[name="reservationName"]`).val(); + parsedFormData['name'] = reservationNameFromForm ? reservationNameFromForm : undefined; + + const ageFromForm = $(`#new-reservation input[name="age"]`).val(); + parsedFormData['age'] = ageFromForm ? ageFromForm : undefined; + + const emailFromForm = $(`#new-reservation input[name="email"]`).val(); + parsedFormData['email'] = emailFromForm ? emailFromForm : undefined; + + const reservationTripID = $(`#new-reservation input[name="trip-id"]`).val(); + parsedFormData['trip-id'] = reservationTripID ? reservationTripID : undefined; + + return parsedFormData; +}; + + // reservation + const clearReservationForm = () => { + + $(`#reservation-form input[name="reservationName"]`).val(''); + $(`#reservation-form input[name="age"]`).val(''); + $(`#reservation-form input[name="email"]`).val(''); + $(`#reservation-form input[name="trip-id"]`).val('') + +}; + +// create reservation + +const createReservation = (event) => { + // Note that createtrip is a handler for a `submit` + // event, which means we need to call `preventDefault` + // to avoid a pcontinent reload + event.preventDefault(); + + const tripData = readReservationFormData(); + console.log(tripData); + + reportStatus('Sending trip data...'); + const reservationURL = URL + '/' + tripData["trip-id"] + '/reservations' + + axios.post(reservationURL, tripData) + .then((response) => { + reportStatus(`Successfully added a reservation with ID ${response.data.id}!`); + clearReservationForm(); + }) + .catch((error) => { + console.log(error.response); + if (error.response.data && error.response.data.errors) { + reportError( + `Encountered an error: ${error.messmessage}`, + error.response.data.errors + ); + } else { + reportStatus(`Encountered an error: ${error.messmessage}`); + } + }); + }; + +// create trip + +const createTrip = (event) => { + // Note that createtrip is a handler for a `submit` + // event, which means we need to call `preventDefault` + // to avoid a pcontinent reload + event.preventDefault(); + + const tripData = readFormData(); + console.log(tripData); + + reportStatus('Sending trip data...'); + + axios.post(URL, tripData) + .then((response) => { + reportStatus(`Successfully added a trip with ID ${response.data.id}!`); + clearForm(); + }) + .catch((error) => { + console.log(error.response); + if (error.response.data && error.response.data.errors) { + reportError( + `Encountered an error: ${error.messmessage}`, + error.response.data.errors + ); + } else { + reportStatus(`Encountered an error: ${error.messmessage}`); + } + }); +}; + +// +// OK GO!!!!! +// +$(document).ready(() => { + $('#load').click(loadTrips); + $('#trip-form').submit(createTrip); + $('#new-reservation').submit(createReservation); +});