diff --git a/index.css b/index.css new file mode 100644 index 00000000..002ce85f --- /dev/null +++ b/index.css @@ -0,0 +1,58 @@ +.current-trips { + font-family: sans-serif; +} + +#info { + display: grid; + width: 100%; + grid-template-columns: 1fr 1fr; + /* grid-auto-rows: minmax(100px, auto); */ + /* grid-template-rows: 50px 1fr 30px; */ + /* grid-template-columns: 150px 1fr; */ + grid-template-areas: + "header header" + "list details" + "list reservation" +} + +#info-trip { + grid-area: details; +} + +#reserve-trip { + grid-area: reservation; +} + +.current-trips { + grid-area: list +} + +header { + background-color: aquamarine; + padding-top: 5px; + border-top-width: 50px; + padding-bottom: 44px; + padding-top: 44px; + font-size: 60px; + text-align: center; +} + +ul div section:first-child { + grid-area: reservation; + text-align: center; + } + + +main section:first-child h1 { + grid-area: header; + +} + + +ul { + list-style-type:none; +} + +section button { + grid-area: list +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..211464f1 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + Trips + + + + + + + + + +
Trek
+
+ +
+
+
+ +
    +
    +
    +
    +
    +
    +
    +
    + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..0088a79a --- /dev/null +++ b/index.js @@ -0,0 +1,154 @@ +const URL = 'https://trektravel.herokuapp.com/trips'; + +// +// Status Management +// +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const reportError = (message, errors) => { + let content = `

    ${message}

    "; + reportStatus(content); // print that content using reportStatus +}; + +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 div = $(`
    `) + tripList.append(div); + $('button', div).click(() => { // to only activate on button inside the div + loadTrip(`.trip-${trip.id}`); + createForm(`.trip-${trip.id}`); + $(`.trip-${trip.id}`).on('submit', '#trip-form', createReservation); + }) + }); + + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + console.log(error); + }); +}; + +const loadTrip = (tripinfo) => { + let num = tripinfo.match(/\d/); + num = num.join(""); + // const trip = $(`${tripinfo}`); + const section = $('#info-trip'); + section.empty(); + axios.get(URL + "/" + num) + .then((response) => { + let data = {} + data["Id"] = response.data.id + data["Name"] = response.data.name + data["Continent"] = response.data.continent + data["Details"] = response.data.about + data["Category"] = response.data.category + data["Weeks"] = response.data.weeks + data["Cost"] = '$' + response.data.cost + const list = $('') + Object.keys(data).forEach(function(key) { + list.append(`
  • ${key} : ${data[key]}'); + section.append('

    Trip details

    ') + section.append(list) + //trip.append(section) + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + }); + +}; + +const createForm = (tripinfo) => { + event.preventDefault(); + // get id number + let num = tripinfo.match(/\d/); + num = num.join(""); + console.log(tripinfo) + + //generate form + // Create a section element (not in the DOM) + const section = $('#reserve-trip'); + section.append('

    Reserve Trip

    '); + + const form = $('
    ') + const divName = $('
    ') + divName.append(''); + divName.append(''); + + + const divEmail = $('
    ') + divEmail.append(''); + divEmail.append('') // for and name in a form should have the same name + + form.append(divName) + form.append(divEmail) + + form.append(``) + form.append('') + + section.append(form) +} + +const readFormData = () => { + const parsedFormData = {}; + + const inputs = ["name","email"] + + inputs.forEach((curInput) => { + const curData = $(`#trip-form input[name="${curInput}"]`).val(); + parsedFormData[curInput] = curData ? curData : undefined; + }); + let id = document.getElementById("tripId").value + parsedFormData["id"] = id + return parsedFormData; +}; + +const createReservation = (event) => { + event.preventDefault(); + + const tripData = readFormData(); + console.log(tripData) + + reportStatus('Sending trip data...'); + let num = tripData["id"] + console.log(num) + //POST https://trektravel.herokuapp.com/trips/1/reservations + let URL_R = URL + "/" + num + "/reservations" + axios.post(URL_R, tripData) + .then((response) => { + reportStatus(`Successfully added a trip with ID ${response.data.id}!`); + }) + .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}`); + } + }); +}; + +// this is the homepage! the trip will not be avaiable +$(document).ready(() => { + $('#load').click(loadTrips); +});