diff --git a/index.css b/index.css new file mode 100644 index 00000000..61311160 --- /dev/null +++ b/index.css @@ -0,0 +1,68 @@ +body { + font-family: 'Roboto', sans-serif; + font-weight: 100; +} + +button, .button { + margin: 0.5em; + background: linear-gradient(#F0F0F0, #7C7B7B); + color: #FFFFFF; + border-radius: 5px; + font-size: 0.85em; + padding: 0.8em; + cursor: pointer; +} + +.container { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.hidden { + display: none; +} + +.trip-detail h3 { + text-align: center; +} + +.trip-detail-section { + margin-bottom: 0.5em; +} + +.trip-detail-section, .reserve-trip{ + border: .5px solid black; + padding: 0 1em 1em 1em; +} + +.trips, span { + cursor: pointer; + margin-bottom: 1em; +} + +.trips li { + padding: 0.5em; + padding-left: 0; + list-style-type: none; +} + +#trip-form > div { + margin-bottom: 0.5em; +} + +#reserve-trip-button { + margin-top: 1em; +} + +.more { + background-color: lightgrey; +} + +@media screen and (max-width: 630px) { + .container { + display: flex; + flex-direction: column-reverse; + } + + .trips, .trip-detail-section { + } diff --git a/index.html b/index.html new file mode 100644 index 00000000..43d460e2 --- /dev/null +++ b/index.html @@ -0,0 +1,56 @@ + + + + + + Trek + + + +
+

Trek

+
+

Welcome To Trek

+

Your destination for planning a fabulous trip to... another destination.

+
+
+
+ + + + + + + + +
+
+
+ +
+ +
+
+ + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..259ddd53 --- /dev/null +++ b/index.js @@ -0,0 +1,219 @@ +const URL = 'https://ada-backtrek-api.herokuapp.com/trips/'; + +// Report helpers +const reportStatus = (message) => { + $('#status-message').html(message); +} + +const reportError = (message, errors) => { + let content = `

${message}

"; + reportStatus(content); +}; + +//LOAD all/specific trips based on url params +const getTrips = (url) => { + const tripList = $('#trip-list'); + tripList.show(); + tripList.empty(); + + reportStatus('Loading trips, please wait...'); + + axios.get(url) + .then((response) => { + let header = $(`

All Trips

`) + tripList.append(header); + + response.data.forEach((trip) => { + let item = $(`
  • ${trip.name}
    • `).attr('id', `${trip.id}`); + tripList.append(item); + }); + + reportStatus(`Successfully loaded ${response.data.length} trips`) + }) + .catch((error) => { + console.log(error); + reportStatus(`Error: ${error.message}`); + }); +}; + +// GET ALL TRIPS +const loadTrips = () => { + getTrips(URL) +} +// GET ASIA +const asiaTrips = () => { + let url = (URL + '/continent?query=Asia') + getTrips(url) +} +// GET AFRICA +const africaTrips = () => { + let url = (URL + '/continent?query=Africa') + getTrips(url) +} +// GET Antartica +const antarticaTrips = () => { + let url = (URL + '/continent?query=Antartica') + getTrips(url) +} +// GET Australasia +const australasiaTrips = () => { + let url = (URL + '/continent?query=Australasia') + getTrips(url) +} +// GET EUROPE +const europeTrips = () => { + let url = (URL + '/continent?query=Europe') + getTrips(url) +} +// GET North America +const nAmericaTrips = () => { + let url = (URL + '/continent?query=North%20America') + getTrips(url) +} +// GET South America +const sAmericaTrips = () => { + let url = (URL + '/continent?query=South%20America') + getTrips(url) +} + +// GET details for single trip +const getTripDetails = function getTripDetails(id) { + + let tripDetail = $('#trip-detail-section'); + tripDetail.empty(); + + axios.get(URL + id) + .then((response) => { + let data = response.data; + let name = $(`

    Name: ${data.name}

    `).addClass(`${id}`); + let about = $(`Description: ${data.about.slice(0, 150)}`).addClass("teaser"); + let aboutFullText = $(`${data.about.slice(150)}`).addClass("moreinfo hidden").attr('id', 'info1'); + let more = $(`...Read more`).addClass("more").attr('target', 1); + let continent = $(`

    Continent: ${data.continent}

    `); + let category = $(`

    Category: ${data.category}

    `); + let weeks = $(`

    Weeks: ${data.weeks}

    `); + let cost = $(`

    Cost: $${data.cost}

    `); + + tripDetail.append(name, about, aboutFullText, more, continent, category, weeks, cost); + + reportStatus(`Successfully loaded details for ${response.data.name} trip`) + }) + .catch((error) => { + console.log(error); + reportStatus(`Error: ${error.message}`); + }); +} + +// Form helpers +const FORM_FIELDS = ['name', 'email']; +const inputField = name => $(`#trip-form input[name="${name}"]`); + +const readFormData = () => { + const getInput = name => { + const input = inputField(name).val(); + return input ? input : undefined; + }; + + const formData = {}; + FORM_FIELDS.forEach((field) => { + formData[field] = getInput(field); + }); + + return formData; +}; + +const clearForm = () => { + FORM_FIELDS.forEach((field) => { + inputField(field).val(''); + }); +} + +// Reserve spot on trip +const reserveTrip = (event) => { + event.preventDefault(); + // let id = Number($('#trip-detail-section h4')[0].classList[0]); + let id = $('.trip-detail-section h4').attr("class"); + + const tripData = readFormData(); + + reportStatus('Sending trip reservation data...'); + + axios.post((`${URL}${id}/reservations`), tripData) + .then((response) => { + clearForm(); + reportStatus(`Successfully created trip reservation with ID ${response.data.trip_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}`); + } + }); +} + +$(document).ready(() => { + $('#load').click(loadTrips); + $('#asia').click(asiaTrips); + $('#africa').click(africaTrips); + $('#antartica').click(antarticaTrips); + $('#australasia').click(australasiaTrips); + $('#europe').click(europeTrips); + $('#north-amer').click(nAmericaTrips); + $('#south-amer').click(sAmericaTrips); + + $('#trip-list').on('click', 'li', function(event) { + let id = Number(event.target.id); + $("section").removeClass("hidden"); + getTripDetails(id); + }); + + $('#trip-form').submit(reserveTrip); + + $(".trip-detail-section").on('click', '.more', function(event) { + $(".moreinfo").removeClass("hidden"); + $(".more").addClass("hidden"); + }); + +//Failed attempts at reading input from a drop-down form to select specific continent... + // $('load-by-continent-form').submit(function() { + // console.log($("#load-by-continent-form").val()); + // }); + + // $('#submit').on('click', function() { + // let continent = $( "#load-by-continent" ).val(); + // loadTripsByContinent(continent); + // }); + + // $('#load-by-continent').submit(function() { + // let continent = $( "#load-by-continent" ).val(); + // loadTripsByContinent(continent); + // }); + +//More failed attempts at making a toggle read more/less function + // $('.moreinfo').hide(); + // $('.more').click(function (ev) { + // $(".more-info").removeClass("hidden"); + // console.log(ev); + // let t = ev.target + // $('#info' + $(this).attr('target')).toggle(500, function(){ + // $(t).html($(this).is(':visible')? 'I\'m done reading more' : 'Read more') + // }); + // return false; + // }); + // $(".more").toggle(function(){ + // $(this).text("less..").siblings(".complete").show(); + // }, function(){ + // $(this).text("more..").siblings(".complete").hide(); + // }); +});