From b410b94d023e6e8b23d257483fa39d4fb261dc70 Mon Sep 17 00:00:00 2001 From: Maryam Shitu Date: Wed, 21 Nov 2018 18:24:18 -0800 Subject: [PATCH 1/2] reservation feature added --- index.css | 24 +++++++++ index.html | 33 ++++++++++++ index.js | 56 ++++++++++++++++++++ test_index.js | 138 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 251 insertions(+) create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js create mode 100644 test_index.js diff --git a/index.css b/index.css new file mode 100644 index 00000000..067dd4e0 --- /dev/null +++ b/index.css @@ -0,0 +1,24 @@ +body { + font-family: sans-serif; + padding: 15px; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-template-areas: 'list trip' + 'list reservation'; +} + +.all-trips { + grid-area: list; +} + +.trip-info { + grid-area: trip; +} + +.reservation { + grid-area: reservation; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..82604b9a --- /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..923d0b9b --- /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.get(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..679618bc --- /dev/null +++ b/test_index.js @@ -0,0 +1,138 @@ +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 Name : ${trip.name}

    +

    Continent : ${trip.continent}

    +

    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); + }); From 85220030934eef3b8246f9735081ff7785d2c397 Mon Sep 17 00:00:00 2001 From: Maryam Shitu Date: Mon, 26 Nov 2018 17:49:05 -0800 Subject: [PATCH 2/2] some styling added --- index.css | 24 +++++++++++++++++++++++- index.html | 4 ++-- index.js | 2 +- test_index.js | 2 ++ 4 files changed, 28 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index 067dd4e0..e437e848 100644 --- a/index.css +++ b/index.css @@ -1,6 +1,11 @@ +@import url('https://fonts.googleapis.com/css?family=Allerta+Stencil|Monoton|Noto+Sans+SC'); + body { - font-family: sans-serif; + /* font-family: sans-serif; */ + font-family: 'Noto Sans SC', sans-serif; padding: 15px; + background-color: grey; + color: white; } main { @@ -11,14 +16,31 @@ main { '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 index 82604b9a..7d24ffbe 100644 --- a/index.html +++ b/index.html @@ -13,12 +13,12 @@
    -

    Trek

    +

    Trek

    - +
      diff --git a/index.js b/index.js index 923d0b9b..18c76974 100644 --- a/index.js +++ b/index.js @@ -34,7 +34,7 @@ const loadTrip = (id) => { const tripDetails = $('#trip-details'); tripDetails.empty(); - axios.get(URL + `/${id}`).then((response) => { + axios.post(URL + `/${id}`).then((response) => { reportStatus(`Loading trip ....`); let trip = response.data diff --git a/test_index.js b/test_index.js index 679618bc..909b068c 100644 --- a/test_index.js +++ b/test_index.js @@ -41,8 +41,10 @@ const showTrip = (id) => { $('.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}