Skip to content

Ana Lisa Sutheland: Octos C9: Trek #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
The-Beez-Kneez wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Ana Lisa Sutheland: Octos C9: Trek #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f0687cc
Base page set up. Also Wave 1 functionality for displaying all trips …
The-Beez-Kneez May 22, 2018
4fbf883
Successfully displaying report statuses. For loading, num of trips lo…
The-Beez-Kneez May 23, 2018
2ca0ed3
Trip is now able to be displayed, by a click on the trip list
The-Beez-Kneez May 23, 2018
abe65eb
Successfully added in form to base page, still need to link to a spec…
The-Beez-Kneez May 23, 2018
63817bd
Form that reserves a spot with test data successfully. Will next move…
The-Beez-Kneez May 23, 2018
54b0252
displaying errors successfully
The-Beez-Kneez May 23, 2018
9b9c869
Can now successfully read form and create a reservation. Wave 3 compl…
The-Beez-Kneez May 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions trip_index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Treking: Lets Boldly Go!</title>
<!-- jQuery external library script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- axios external library script -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- link the JS file with the HTML file -->
<script type="text/javascript" src="trip_index.js"></script>
</head>
<body>
<header>
<div id="buttons">
<button type='all-button'>View All Trips</button>
</div>
</header>
<main>
<section id="all-trips">
<h2>Available Trips</h2>
<section id="status-messages"></section>
<ul id="trips-table">
<!-- Loading info via jQuery -->
</ul>
</section>

<section id="single-trip">
<!-- displays single trip info -->
<h2>Trip Details:</h2>
<ul id="trip-deets">
<!-- Loading trip deets via jQuery -->
</ul>
</section>
<!-- FIXME: Need to render the form once the trip display has activated a trip display -->
<!-- form to reserve a spot -->
<section id="spot-save">
<h2>Reserve A Spot!</h2>
Copy link

@droberts-sea droberts-sea May 31, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You might want to look into the CSS display: none for this.

<form id="spot-form">
<!-- field for name -->
<div>
<label for="name">Name</label>
<input type="text" name="name" />
</div>
<div>
<label for="age">Age</label>
<input type="age" name="age" />
</div>
<!-- field for email -->
<div>
<label for="email">Email</label>
<input type="email" name="email" />
</div>

<input id="tripID" name="tripID" type="hidden" value="">

<!-- submit button with text -->
<input type="submit" name="hold-spot" value="Hold Spot!" />
</form>
</section>

</main>


</body>
</html>
158 changes: 158 additions & 0 deletions trip_index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
let numTrips = 0;
const URL = "https://ada-backtrek-api.herokuapp.com/trips"

// Show me all of the trips Available
const loadTrips = () => {
reportStatus('Loading trip...');

// Setting up trip table that will correspond to the table with the given id in HTML and it empties out at the beginning
const tripsList = $('#trips-table');
tripsList.empty();

// GET request time
axios.get(URL)
// if the request is successful do the below bit
// this should build in our table body and headers
.then((response) => {
// tracking the number of trips loaded and reporting loading
numTrips += response.data.length;
reportStatus(`Successfully loaded ${numTrips} trips.`);
// from the response, I want the data. From Data I want trip name
response.data.forEach((trip) => {
tripsList.append(`<li class="${trip.id}">${trip.id}: ${trip.name}</li>`);
});
})
// do this if the response is not successful
.catch((error) => {
console.log(error.response);
if (error.response && error.response.data.errors) {
reportError(
`Encountered an error: ${error.message}`,
error.response.data.errors
);
} else {
reportStatus(`Encountered an error: ${error.message}. You know what you did....`);
}
});
};

const tripURL = 'https://ada-backtrek-api.herokuapp.com/trips/';

// Show me one trip's details
const displayTrip = (event) => {
// console.log(event);
// retrieving the id based on the id assigned in the all trips list, parsing data till I got the value I wanted after viewing in the above console.log()
const id = event.target.className;
// making sure we clear out all trip deets
const tripDetails = $('#trip-deets');
tripDetails.empty();

// GET request, need to include the id of the
axios.get(tripURL + id)
.then((response) => {
reportStatus('Successfully loaded trip details');
// FIXME: Want to display the detail name before it by accessing the name of the keys
for (let detail1 in response.data) {
tripDetails.append(`<li> ${response.data[detail1]} </li>`);
}
// need to set the hidden value on the form with the corresponding trip ID
$('#tripID').val(id)
})
.catch((error) => {
console.log(error.response);
if (error.response && error.response.data.errors) {
reportError(
`Encountered an error: ${error.message}`,
error.response.data.errors
);
} else {
reportStatus(`Encountered an error: ${error.message}.You know what you did....`);
}
});
};


// read traveler's info from a form
// $('#spot-form').serializeArray()
const FORM_FIELDS = ['name', 'age', 'email'];
const inputField = name => $(`#spot-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;
};

// clear out a form to restock with new user info
const clearForm = () => {
FORM_FIELDS.forEach((field) => {
inputField(field).val('');
});
}


//reserve a spot on a trip
const holdSpot = (event) => {
event.preventDefault();
let spotId = $(`#tripID`).val();
const holdURL = `${tripURL}` + `${spotId}` + `/reservations`
// just for now, making sure that a spot hold can be created
// will replace with form input
const spotData = readFormData();
console.log(spotData);

reportStatus('Making sure we hold your spot...');

// POST request processing
axios.post(holdURL, spotData)

.then((response) => {
reportStatus(`Successfully reserved spot, enjoy your trip!`);
clearForm();
})
.catch((error) => {
console.log(error.response);
if (error.response && error.response.data.errors) {
reportError(
`Encountered an error: ${error.message}`,
error.response.data.errors
);
} else {
reportStatus(`Encountered an error: ${error.message}. You know what you did....`);
}
});
};

const reportStatus = (message) => {
$('#status-messages').html(message);
};

const reportError = (message, errors) => {
let content = `<p>${message}</p>`
content += '<ul';
for (const field in errors) {
for (const problem in errors[field]) {
content += `<li>${field}: ${problem}</li>`
Copy link

@droberts-sea droberts-sea May 31, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since errors[field] is an array, you probably want for (const problem of errors[field]). As is you get the indexes, not the strings.

}
}
content += '</ul>';
reportStatus(content);
};

$(document).ready(() => {
// on button click display all trips
// TODO: eventually will put in a portion that will select for different buttons "View by Continent" etc........
// let buttonClicked = this.innerHTML;
// console.log(buttonClicked);
$('button').click(loadTrips);
// event for clicking on a trip in trips list gets us a trips id. Had to use event delegation cause <li>'s I wanted had not been made yet
$('#trips-table').on('click', 'li', displayTrip)
$('#spot-form').submit(holdSpot);
});