diff --git a/index.css b/index.css new file mode 100644 index 00000000..3bf5e774 --- /dev/null +++ b/index.css @@ -0,0 +1,89 @@ +body { + background-image: url(https://lh3.googleusercontent.com/zVZsevuYFlx20AXw0wv0Z8C0xg1PXZhRAhqZnfimGSZ9JuLOZkS-lHM7rE12pPfYE7xtPZ2OdV1m28cBkNpWxRp52MhWRMoIG6lCFubpK6dCfOjIImdbt60e6m_N_lKBLDBLWgvFdw=w2400); + background-repeat: no-repeat; + background-position: top center; + background-attachment: fixed; + color: white; + font-family: 'Archivo', sans-serif; +} + +h1, h2 { + text-align: center; + background-color: rgba(39, 124, 57, 0.8); + border-style: solid; + border-width: medium; + border-color: white; + padding-top: 20px; + padding-bottom: 20px; + padding-left: 10px; + padding-right: 10px; + margin-left: 33%; + margin-right: 33%; + font-family: 'Carter One', cursive; +} + +h3 { + font-family: 'Carter One', cursive; +} + +.hide { + display: none; +} + +li { + list-style-type: none; + padding: 1px; +} + +#load { + margin-top: 10px; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr; +} + +#status-message { + text-align: center; + background-color: rgba(39, 124, 57, 0.8); + padding: 20px; + padding-left: 40px; + border-radius: 15px; + margin: 20px; +} + +#trip-details { + background-color: rgba(39, 124, 57, 0.8); + padding: 10px; + border-radius: 15px; + margin: 20px; +} + +#trip-list { + background-color: rgba(39, 124, 57, 0.8); + padding: 20px; + padding-left: 40px; + border-radius: 15px; + margin: 20px; +} + +#trip-list li { + padding: 5px; +} + +#trip-list li:hover { + color: rgb(21, 72, 32); +} + +#reservation-form { + background-color: rgba(39, 124, 57, 0.8); + padding: 5px; + border-radius: 15px; + margin: 20px; +} + +.form-text { + padding: 2px; + margin: 3px; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..bd89c384 --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + Trek + + + + + + + + + +

Trek

+

Trip List

+ +
+
+
+ +
+
+
+
+
+

Reserve this trip!

+
+ + +
+
+ + +
+ +
+
+
+
+ + { + $('#status-message').html(message).removeClass("hide"); +}; + +const reportError = (message, errors) => { + let content = `

${message}

"; + reportStatus(content); +}; + +const loadTrips = () => { + reportStatus('Loading all trips...'); + + const tripList = $('#trip-list').removeClass("hide"); + tripList.empty(); + + axios.get(TRIPS) + .then((response) => { + reportStatus(`Loaded ${response.data.length} trips.`); + response.data.forEach((trip) => { + let item = $(`
  • ${trip.name}
    • `); + item.click(function() { + $("section").removeClass("hide") + getTripData(trip); + $('#submit-button').off('click'); + $('#submit-button').click(function(event) { + createRes(event, trip.id); + }); + }); + tripList.append(item); + }); + }) + .catch((error) => { + reportStatus(`Error while loading: ${error.message}`); + console.log(error); + }); +}; + +const getTripData = (trip) => { + const tripDetails = $(`#trip-details`).removeClass("hide"); + tripDetails.empty(); + + axios.get(TRIPS + trip.id) + .then((response) => { + console.log(response); + reportStatus(`Loaded details for trip: ${response.data.name}`); + tripDetails.append( + `

    Trip Details

    +
  • Trip Name: ${response.data.name}
    • +
  • ID: ${response.data.id}
    • +
  • Type: ${response.data.category}
    • +
  • Destination: ${response.data.continent}
    • +
  • Cost: $${response.data.cost}
    • +
  • Travel Time: ${response.data.weeks} weeks
    • +
  • Description: ${response.data.about}
    • `); + }) + .catch((error) => { + reportStatus(`Error while loading: ${error.message}`); + console.log(error); + }); +} + +const FORM = ['name', 'email']; +const inputField = name => $(`#reservation-form input[name="${name}"]`); + +const readFormData = () => { + const getInput = name => { + const input = inputField(name).val(); + return input ? input : undefined; + }; + const formData = {}; + FORM.forEach((field) => { + formData[field] = getInput(field); + }); + + return formData; +}; + +const clearForm = () => { + FORM.forEach((field) => { + inputField(field).val(''); + }); +} + +const createRes = (event, trip) => { + reportStatus('Sending reservation data...'); + + event.preventDefault(); + + const resData = readFormData(); + + axios.post(TRIPS + trip + "/reservations", resData) + .then((response) => { + reportStatus(`Added a new reservation for ${response.data.name}.`); + clearForm(); + }) + .catch((error) => { + reportStatus(`Error: ${error.message}`); + }) +}; + +$(document).ready(() => { + $('#load').click(loadTrips); + }); \ No newline at end of file