diff --git a/index.css b/index.css new file mode 100644 index 00000000..e437e848 --- /dev/null +++ b/index.css @@ -0,0 +1,46 @@ +@import url('https://fonts.googleapis.com/css?family=Allerta+Stencil|Monoton|Noto+Sans+SC'); + +body { + /* font-family: sans-serif; */ + font-family: 'Noto Sans SC', sans-serif; + padding: 15px; + background-color: grey; + color: white; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-template-areas: 'list trip' + 'list reservation'; +} + +#hero { + font-family: 'Allerta Stencil', sans-serif; + color: white; + font-size: 3em; + +} + +.all-trips { + grid-area: list; + /* background-color: white; */ + padding: 10px; +} + +.trip-info { + grid-area: trip; + +} + +.reservation { + grid-area: reservation; +} + +btn { + padding-left: 15px; +} +ul { + list-style: none; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..7d24ffbe --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + Seven Wonders + + + + + + + +
+
+

Trek

+
+ +
+
+ + +
+ +
+
+ +
+
+ + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..18c76974 --- /dev/null +++ b/index.js @@ -0,0 +1,56 @@ +const URL = "https://trektravel.herokuapp.com/trips"; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const loadTrips = () => { + const tripList = $('#trips-list'); + tripList.empty(); + + axios.get(URL).then((response) => { + reportStatus(`Loading trips ....`); + response.data.forEach((trip) => { + + reportStatus(`Successfully loaded ${response.data.length} trips`); + tripObject = $(`
  • ${trip.name}
    • `) + tripList.append(tripObject); + + + $(tripObject).click(() => { + loadTrip(trip.id); + }); + }); + + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + + +const loadTrip = (id) => { + const tripDetails = $('#trip-details'); + tripDetails.empty(); + + axios.post(URL + `/${id}`).then((response) => { + reportStatus(`Loading trip ....`); + let trip = response.data + + $('body').append(` +
    +

    Trip Name : ${trip.name}

    +

    Continent : ${trip.continent}

    +

    Cost : $${trip.cost}

    +

    Weeks : ${trip.weeks}

    +

    About :

    ${trip.about}

    +
    `) + + }); + }; + + +$(document).ready(() => { + $('#load').click(loadTrips); +}); diff --git a/test_index.js b/test_index.js new file mode 100644 index 00000000..909b068c --- /dev/null +++ b/test_index.js @@ -0,0 +1,140 @@ +const URL = "https://trektravel.herokuapp.com/trips"; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const loadTrips = () => { + const tripList = $('#trips-list'); + tripList.empty(); + + axios.get(URL).then((response) => { + reportStatus(`Loading trips ....`); + response.data.forEach((trip) => { + + reportStatus(`Successfully loaded ${response.data.length} trips`); + tripObject = $(`
  • ${trip.name}
    • `) + tripList.append(tripObject); + + + $(tripObject).click(() => { + showTrip(trip.id); + }); + }); + + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + + +const showTrip = (id) => { + const tripInfo = $('.trip-info') + tripInfo.empty(); + + + axios.get(URL + `/` + id).then((response) => { + + let trip = response.data + $('.trip').append(` +
    +

    Trip Details

    +

    Trip ID : ${trip.id}

    +

    Trip Name : ${trip.name}

    +

    Continent : ${trip.continent}

    +

    Category : ${trip.category}

    +

    Cost : $${trip.cost}

    +

    Weeks : ${trip.weeks}

    +

    About :

    ${trip.about}

    +
    `) + + const reservationForm = $('.reservation') + reservationForm.empty(); + + $('.reservation').append(` +

    Reserve Trip

    +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + +
    + + +
    + `) + + $('#trip-form').on( "submit", function(event) { + event.preventDefault(); + reserveTrip(trip); + }) + }); + + }; + + const reportError = (message, errors) => { + let content = `

    ${message}

    ` + content += ""; + reportStatus(content); + }; + + + const readFormData = () => { + const parsedData = $('#trip-form').serialize(); + return parsedData; + }; + + const clearForm = () => { + $('#trip-form')[0].reset(); + } + + const reserveTrip = (trip) => { + + const tripData = readFormData(); + // console.log(trip.id) + + console.log(tripData) + + axios.post(URL + `/` + trip.id + `/reservations`, tripData) + .then((response) => { + console.log(response); + reportStatus('Reservation Successful!'); + clearForm(); + }) + .catch((error) => { + console.log(error.response); + if (error.response.data && error.response.data.console.errors) { + reportError( + `Encountered an error: ${error.message}`, + error.response.data.errors + ); + } else { + reportStatus(`Encountered an error: ${error.message}`); + } + }); + }; + + $(document).ready(() => { + $('#load').click(loadTrips); + });