Skip to content

Sockets - Karla #43

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
kguadron wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Sockets - Karla #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9fbc626
Trek list and trek details working
kguadron Jun 3, 2019
feefb66
Wrote post reservation function. Not working yet.
kguadron Jun 5, 2019
b65f2cf
Edited index.js to get reservation functionality working and updated …
kguadron Jun 11, 2019
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
90 changes: 90 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
@import url("https://fonts.googleapis.com/css?family=Bangers&display=swap");
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

body {
font-family: Muli;
background-image: url("https://tinyurl.com/y4labzbu");
background-attachment: fixed;
/* background-position: center; */
background-size: cover;
background-repeat: no-repeat;
}

main {
}

#title {
font-family: Bangers;
font-weight: 500;
font-size: 5rem;
}

#grid-container {
display: grid;
grid-template: auto 5em 1em / 50% auto;
}

#status-message {
grid-column: 1 / span 2;
grid-row: 1 / span 1;
border: solid;
border-color: orangered;
background-color: white;
opacity: 0.75;
}

#title {
grid-column: 1 / span 2;
grid-row: 2 / span 2;

justify-self: center;
}

#load {
border: solid;
border-color: orangered;
justify-self: end;
font-family: Muli;
font-size: 2em;
font-style: bold;
margin-top: 20%;
opacity: 0.75;
}

.current-treks {
grid-column: 1 / span 1;
grid-row: 3 / span 1;
justify-self: center;
padding-top: 10%
}

#trek-list {
list-style: none;
line-height: 30px;
text-align: center;
}

/* ul {
opacity: 0.75;
} */

li {
background-color: white;
opacity: 0.75;
}

li:hover {
background-color: orangered;
color: white;
}

#details {
grid-column: 2 / span 1;
grid-row: 3 / span 1;
padding-top: 10%;
}

#details * {
background-color: white;
opacity: 0.75;
}
31 changes: 31 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title>TREK</title>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="index2.js"></script>

<link rel="stylesheet" href="index.css">
</head>

<body>

<main id="grid-container">
<section id="status-message"></section>
<h1 id="title">Ready to Trek?</h1>
<section class="current-treks">
<button id="load">See treks!</button>
<ul id="trek-list"></ul>
</section>

<section id="details">
</section>
</main>

</body>

</html>
99 changes: 99 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
const reportStatus = (message) => {
$('#status-message').html(message);
};

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

const loadTreks = () => {
const trekList = $('#trek-list');
trekList.empty();

let URL = 'https://trektravel.herokuapp.com/trips'
axios.get(URL)
.then((response) => {
const theTreks = response.data;

theTreks.forEach((trek) => {
trekList.append(`<li id="trek">${trek.name}</li>`);

const showTrekDetails = (trip) => {
const trekDetail = () => {
let detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}`


axios.get(detailsURL)
.then((response) => {
const trekDeets = $('.indiv-trek');
trekDeets.empty();

trekDeets.html(
`<h1>${trip.name}</h1>
<h3>Continent: ${trip.continent}</h3>
<h3>Category: ${trip.category}</h3>
<h3>Weeks: ${trip.weeks}</h3>
<h3>Cost: $${trip.cost}</h3>
<h3>About: </h3>
<p>${response.data.about}</p>`
)
// console.log(trip)
// console.log(response)
})

.catch((error) => {
reportStatus(error);
});
}
return trekDetail;
};
const clickedTrek = showTrekDetails(trek);
$("li").click(clickedTrek);
Copy link

@CheezItMan CheezItMan Jun 14, 2019

Choose a reason for hiding this comment

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

So everytime I load the list of trips you add a new event handler to listen for events on the li elements. This means, if I click on See TREKS 3 times and click on one of the trips it will call clickedTrek 3 times.

This is better to do with event delegation or use $('li').off(); to clear the event handlers before adding a new one.

});
})

.catch((error) => {
reportStatus(`Encountered an error while loading treks: ${error.message}`);
console.log(error);
});
};

$(document).ready(() => {
$('#load').click(loadTreks)
});


// const showTrekDetails = (trip) => {
// let detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}`
// const trekDeets = $('#"trek-deets"');

// axios.get(detailsURL)
// .then((response) => {
// trekDeets.append(`<h1>Trek Details</h1>`);
// trekDeets.append(`<li>${response.data[0].name}</li>`);
// console.log(response.data.name)
// })
// .catch((error) => {
// reportStatus(`Encountered an error while loading treks: ${error.message}`);
// console.log(error);
// });
// };

// .catch((error) => {
// if (error.response.data && error.response.data.errors) {
//reportError('Encountered an errro while loading oets: ${error.message},
// error.response.data.errors)
// }
// })
// reportError('Encountered an errro while loading oets: ${error.message},
// error.response.data.errors)


// https://picsum.photos/id/477/500/500
164 changes: 164 additions & 0 deletions index2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
const reportStatus = (message) => {
$('#status-message').html(message);
};

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

const loadTreks = () => {
const trekList = $('#trek-list');
trekList.empty();

let URL = 'https://trektravel.herokuapp.com/trips'
axios.get(URL)
.then((response) => {
reportStatus(`Successfully loaded ${response.data.length} trips`);
console.log('successfully loaded all trips');

const theTreks = response.data;

theTreks.forEach((trek) => {
let thisTrek = $(`<li>${trek.name}</li>`);
thisTrek.addClass(`${trek.id}`);
trekList.append(thisTrek);
})
})

.catch((error) => {
reportStatus(`Encountered an error while loading treks: ${error.message}`);
console.log(error);
})

const showTrekDetails = (event) => {
let trekId = event.target.className;
let detailsURL = `https://trektravel.herokuapp.com/trips/${trekId}`;

const detailSection = $('#details');
detailSection.empty();

axios.get(detailsURL)
.then((response) => {
reportStatus(`Successfully loaded trip ${trekId}`);
console.log('successfully loaded trip!');

detailSection.html(
`<h1>${response.data.name}</h1>
<h3>Continent: ${response.data.continent}</h3>
<h3>Category: ${response.data.category}</h3>
<h3>Weeks: ${response.data.weeks}</h3>
<h3>Cost: $${response.data.cost}</h3>
<h3>About: </h3>
<p>${response.data.about}</p>`
// <button class=${trekId}> Make reservation </button>`
)
reservationForm();
$('#reservation-form').on('submit', makeReservation);
})

.catch((error) => {
reportStatus(`Something went wrong with loading trip ${trekId}: ${error}`);
console.log(`Something went wrong with loading trip ${trekId}: ${error}`);
});

const makeReservation = (event) => {
event.preventDefault();
// const trekId = event.target.className;
console.log(`trek id: ${trekId}`)
let reservationURL = `https://trektravel.herokuapp.com/trips/${trekId}/reservations`

const trekData = readFormData();

reportStatus('Sending trek data...');

axios.post(reservationURL, trekData)
.then((response) => {
console.log(response);
reportStatus('Successfully reserved a trek!');
clearForm();
})

.catch((error) => {
console.log(error.response);
// Make sure the server actually sent us errors. If
// there's a different problem, like a typo in the URL
// or a network error, the response won't be filled in.
if (error.response.data && error.response.data.errors) {
// User our new helper method
reportError(`Encountered an error: ${error.message}`,
error.response.data.errors
);
} else {
// This is what we had before
reportStatus(`Encountered an error: ${error.message}`);
}
});
};


};

const reservationForm = () => {
const detailSection = $('#details');
detailSection.append('<h1>Make a Reservation</h1>')
detailSection.append('<form id="reservation-form">')
$('#reservation-form').append('<div>')
$('#reservation-form').append('<label for="name"> Name </label>')
$('#reservation-form').append('<input type="text" name="name" />')
// detailSection.append('</div>')
$('#reservation-form').append('<div>')
$('#reservation-form').append('<label for="email">Email</label>')
$('#reservation-form').append('<input type="text" name="email" />')
// detailSection.append('</div>')
$('#reservation-form').append('<div>')
$('#reservation-form').append('<label for="age">Age</label>')
$('#reservation-form').append('<input type="number" min="0" name="age" />')
// detailSection.append('</div>')
$('#reservation-form').append('<br>')
$('#reservation-form').append('<input type="submit" name="make-reservation" value="Reserve!!" />');
// detailSection.append('</form>')
// $('#reservation-form').submit(makeReservation);
}

$("#trek-list").on('click', 'li', showTrekDetails);
// $("#details").on('click', 'button', reservationForm);
};

const readFormData = () => {
let parsedFormData = {};

const nameFromForm = $(`#reservation-form input[name="name"]`).val();
parsedFormData['name'] = nameFromForm ? nameFromForm : undefined;

const ageFromForm = $(`#reservation-form input[name="age"]`).val();
parsedFormData['age'] = ageFromForm ? ageFromForm : undefined;

const emailFromForm = $(`#reservation-form input[name="email"]`).val();
parsedFormData['email'] = emailFromForm ? emailFromForm : undefined;

return parsedFormData;
};

const clearForm = () => {
$(`#reservation-form input[name="name"]`).val('');
$(`#reservation-form input[name="email"]`).val('');
$(`#reservation-form input[name="age"]`).val('');
}



$(document).ready(() => {
$('#load').click(loadTreks);
// $('#reservation-form').submit(makeReservation);
});

console.log('dee is here!');
Copy link

@CheezItMan CheezItMan Jun 14, 2019

Choose a reason for hiding this comment

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

Hi Dee!


// https://picsum.photos/id/477/500/500
Loading