Skip to content

Commit

Permalink
ability to fetch offer details added; details page basic functionalit…
Browse files Browse the repository at this point in the history 
…y complete
  • Loading branch information
@sammdu
sammdu committed Dec 9, 2021
1 parent 02078f2 commit 2fb52ba
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 80 deletions.
2 changes: 1 addition & 1 deletion css/details.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ div.loan-offer-details ul {
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
column-gap: 1rem;
column-gap: 2rem;
row-gap: 1rem;
}

Expand Down
109 changes: 56 additions & 53 deletions details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,59 +53,7 @@ <h2>Your loan offer details</h2>
<ul class="loan-offers" id="loanOffersContainer">
</ul>
</aside>
<section class="region-dark">
<div class="loan-offer-details">
<div class="car-hero">
<img src="./assets/img/car-1.jpg" alt="Car Hero Image">
</div>
<ul class="car-info">
<li class="car-info-pair">
<h4>Make:</h4>
<span>{{make}}</span>
</li>
<li class="car-info-pair">
<h4>Model:</h4>
<span>{{model}}</span>
</li>
<li class="car-info-pair">
<h4>Year:</h4>
<span>{{year}}</span>
</li>
<li class="car-info-pair">
<h4>Usage:</h4>
<span>{{kms}} km</span>
</li>
<li class="car-info-pair">
<h4>Retail price:</h4>
<span>&#36;{{price}}</span>
</li>
</ul>
<form id="form-update-principal" onsubmit="submitNewPrincipal(); return false;">
<label for="loan-principal"><h4>Loan principal:</h4></label>
<input class="round-empty-pill" type="number" name="loan-principal">
<button type="submit" name="updatePrincipal" class="btn-green">
Update
</button>
</form>
<ul class="loan-info">
<li class="car-info-pair">
<h4>Interest rate:</h4>
<span>{{apr}}&#37;</span>
</li>
<li class="car-info-pair">
<h4>You pay:</h4>
<span>&#36;{{payment_mo}}/mo</span>
</li>
<li class="car-info-pair">
<h4>Loan term:</h4>
<span>{{loan_term}} years</span>
</li>
<li class="car-info-pair">
<h4>Total cost:</h4>
<span>&#36;{{total_sum}}</span>
</li>
</ul>
</div>
<section class="region-dark" id="offerDetailsContainer">
</section>
</div>
</main>
Expand Down Expand Up @@ -163,5 +111,60 @@ <h3>Powered by:</h3>
</a>
</li>
</script>

<script type="text/html" id="tmpl_LoanDetails">
<div class="loan-offer-details">
<div class="car-hero">
<img src="./assets/img/car-1.jpg" alt="Car Hero Image">
</div>
<ul class="car-info">
<li class="car-info-pair">
<h4>Make:</h4>
<span>{{make}}</span>
</li>
<li class="car-info-pair">
<h4>Model:</h4>
<span>{{model}}</span>
</li>
<li class="car-info-pair">
<h4>Year:</h4>
<span>{{year}}</span>
</li>
<li class="car-info-pair">
<h4>Usage:</h4>
<span>{{kms}} km</span>
</li>
<li class="car-info-pair">
<h4>Retail price:</h4>
<span>&#36;{{price}}</span>
</li>
</ul>
<form id="form-update-principal" onsubmit="submitNewPrincipal(); return false;">
<label for="loan-principal"><h4>Loan principal:</h4></label>
<input class="round-empty-pill" type="number" name="loan-principal" value="{{principal}}">
<button type="submit" name="updatePrincipal" class="btn-green">
Update
</button>
</form>
<ul class="loan-info">
<li class="car-info-pair">
<h4>Interest rate:</h4>
<span>{{apr}}&#37;</span>
</li>
<li class="car-info-pair">
<h4>You pay:</h4>
<span>&#36;{{payment_mo}}/mo</span>
</li>
<li class="car-info-pair">
<h4>Loan term:</h4>
<span>{{loan_term}} months</span>
</li>
<li class="car-info-pair">
<h4>Total cost:</h4>
<span>&#36;{{total_sum}}</span>
</li>
</ul>
</div>
</script>
</body>
</html>
18 changes: 18 additions & 0 deletions js/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,24 @@ var api = {
// retrieve the returned cars/offers
const results = await response.json();

if (response.status == 200) {
return results;
}
else {
console.log(response);
throw "HTTP status: " + response.status;
}
},

getOfferDetails: async function(userID, OfferID) {
// send the search query to the backend API
const response = await fetch(
this.API_URL + '/getOfferDetails?user_id=' + userID + '&offer_id=' + OfferID
);

// retrieve the returned cars/offers
const results = await response.json();

if (response.status == 200) {
return results;
}
Expand Down
90 changes: 64 additions & 26 deletions js/details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,15 @@ limitations under the License.
Always called when the details page is loaded.
*/
async function onPageLoad() {
// DEMO
// for (let i = 0; i != 20; i++) {
// addOfferToContainer(
// "offer123", "Honda", "Civic", 2018, 250, 320, 3.2
// );
// }
fetchClaimedOffers();
// fetch the user_id from the URL
let userID = fetchQueryParamByKey('user_id');
// fetch all claimed offers for this user
await fetchClaimedOffers(userID);

// find the selected offer for this user
let offerSelected = fetchQueryParamByKey('offerSelected');
// show details for the specified offer
await getOfferDetails(userID, offerSelected);
}

/*
Expand All @@ -35,19 +37,13 @@ async function onPageLoad() {
/*
Get the list of offers for a specific user
*/
async function fetchClaimedOffers() {
// fetch the user_id from the URL
let userID = fetchQueryParamByKey('user_id');

async function fetchClaimedOffers(userID) {
try {
// call the API to get the user's claimed offers
const userClaimedOffers = await api.getClaimedOffers(userID);

// populate the sidebar with user's claimed offers
displayClaimedOffers(userClaimedOffers, userID);

// highlight the specified offer
highlightOffer(fetchQueryParamByKey('offerSelected'));
}
catch (e) {
console.log(e);
Expand All @@ -58,17 +54,11 @@ async function fetchClaimedOffers() {
/*
Display the given list of claimed offers
*/
function displayClaimedOffers(offers, userID) {
function displayClaimedOffers(offers, user_id) {
removeAllLoanOffers();
for (const offer of offers) {
// DEMO
// console.log(offer);
offer['brand'] = 'Honda';
offer['model'] = 'Civic';
offer['year'] = 2018;

addOfferToContainer(
userID, offer['offerId'], offer['brand'], offer['model'], offer['year'],
user_id, offer['offerId'], offer['brand'], offer['model'], offer['year'],
offer['interestRate'], offer['termMo'], offer['totalSum']
);
}
Expand All @@ -87,16 +77,64 @@ function highlightOffer(offer_id) {


/*
Highlight an offer and display its details
Offer details operations
*/
async function showOfferDetails() {

/*
Fetch and display an offer's details based on the given offer ID
*/
async function getOfferDetails(user_id, offer_id) {
// attempt to fetch the specified offer's details from the backend API
try {
// make the API call
let details = await api.getOfferDetails(user_id, offer_id);

// highlight the chosen offer
highlightOffer(offer_id);

// display the offer details
renderOfferDetails(
details['brand'], details['model'], details['year'], details['kms'],
details['price'], details['loanAmount'], details['interestRate'], details['termMo'],
details['totalSum']
)
}
catch (e) {
console.log(e);
console.log(window.location.search);
}
}


/*
Offer details operations
Present a given offer's details
*/
function renderOfferDetails(
make, model, year, kms, price, principal, apr, loan_term, total_sum
) {
// get render target
let offerDetailsContainer = document.getElementById('offerDetailsContainer');

// get mustache template
const tmpl_offerDetails = document.getElementById('tmpl_LoanDetails').innerHTML;

// render loan offer info
const offerDetailsData = {
make: make,
model: model,
year: year,
kms: Math.round(kms),
price: Math.round(price * 100) / 100,
principal: principal,
apr: Math.round(apr * 100) / 100,
payment_mo: Math.round((total_sum / loan_term) * 100) / 100,
loan_term: loan_term,
total_sum: total_sum
};
const offerDetailsRendered = Mustache.render(tmpl_offerDetails, offerDetailsData);

// append loan offer element to offers container
offerDetailsContainer.innerHTML = offerDetailsRendered;
}

/*
Update the loan principal given user input
Expand Down

0 comments on commit 2fb52ba

Please sign in to comment.