182 lines
5.5 KiB
HTML
182 lines
5.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Reviews
|
||
|
|
</title>
|
||
|
|
<!-- Latest compiled and minified CSS -->
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
|
||
|
|
<!-- Latest compiled JavaScript -->
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
|
||
|
|
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
|
||
|
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="frontend.css">
|
||
|
|
|
||
|
|
<link rel="shortcut icon" href="images/Logo.png" type="image/x-icon">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#backButton {
|
||
|
|
background-color: rgb(209, 213, 219);
|
||
|
|
border-radius: 10px;
|
||
|
|
font-size: large;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
|
||
|
|
<div id="navitem">
|
||
|
|
<a class="navbar-brand" href="#">
|
||
|
|
<img src="images/Logo.png" alt="Avatar Logo" class="rounded-pill">
|
||
|
|
</a>
|
||
|
|
<div id="head">
|
||
|
|
<h1 style="color: white;">Customer Reviews </h1>
|
||
|
|
</div>
|
||
|
|
<div id="back-button">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div id="product-details">
|
||
|
|
<label for="product-id">Product Id: </label>
|
||
|
|
<input type="text" name="product-id" id="product-id" placeholder="Product Id:" disabled>
|
||
|
|
|
||
|
|
<label for="product-name">Product Name: </label>
|
||
|
|
<input type="text" name="product-name" id="product-name" placeholder="Product Name" disabled>
|
||
|
|
</div>
|
||
|
|
<hr class="container">
|
||
|
|
|
||
|
|
<div id="reviews" class="container">
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.onload = () => {
|
||
|
|
|
||
|
|
const url = window.location.href;
|
||
|
|
const params = new URLSearchParams(window.location.search);
|
||
|
|
let storeId = params.get('storeId');
|
||
|
|
let productName = params.get('productName');
|
||
|
|
let productId = params.get('productId');
|
||
|
|
let backDiv=document.getElementById('back-button');
|
||
|
|
backDiv.innerHTML=`<button id="backButton" type="button" value="${storeId}" onclick="goBackToInventory()">Go Back</button>`;
|
||
|
|
document.getElementById('product-id').value = productId;
|
||
|
|
document.getElementById('product-name').value = productName;
|
||
|
|
setTimeout(() => {
|
||
|
|
getReviews(storeId, productId);
|
||
|
|
}, 500);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function getReviews(storeId, productId) {
|
||
|
|
url = `URL/reviews/${storeId}/${productId}`;
|
||
|
|
fetch(url, {
|
||
|
|
method: "GET",
|
||
|
|
headers: { "content-type": "application/json" }
|
||
|
|
})
|
||
|
|
.then(response => {
|
||
|
|
return response.json();
|
||
|
|
})
|
||
|
|
.then(data => {
|
||
|
|
createReview(data.reviews)
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
alert(error);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function createReview(reviews) {
|
||
|
|
try {
|
||
|
|
|
||
|
|
|
||
|
|
let allColumns = document.querySelectorAll('.col');
|
||
|
|
let count = 0;
|
||
|
|
|
||
|
|
for (review of reviews) {
|
||
|
|
|
||
|
|
reviewcard = document.createElement('div');
|
||
|
|
reviewcard.classList.add('review-card');
|
||
|
|
customerName = document.createElement('div');
|
||
|
|
customerName.classList.add("customer-name");
|
||
|
|
customerSpan = document.createElement('span')
|
||
|
|
customerSpan.textContent = review.customerName;
|
||
|
|
customerName.appendChild(customerSpan);
|
||
|
|
|
||
|
|
reviewDiv = document.createElement('div');
|
||
|
|
reviewDiv.classList.add('review');
|
||
|
|
|
||
|
|
rating = document.createElement('div');
|
||
|
|
rating.classList.add('rating');
|
||
|
|
|
||
|
|
let i = 0
|
||
|
|
let listStar = "";
|
||
|
|
|
||
|
|
for (; i < review.rating; i++) {
|
||
|
|
listStar = listStar + "" + `<i class="fa-solid fa-star golden"></i>`;
|
||
|
|
}
|
||
|
|
for (; i < 5; i++) {
|
||
|
|
listStar = listStar + "" + `<i class="fa-solid fa-star"></i>`;
|
||
|
|
}
|
||
|
|
rating.innerHTML = listStar;
|
||
|
|
|
||
|
|
reviewDiv.appendChild(rating);
|
||
|
|
|
||
|
|
customerReview = document.createElement('div');
|
||
|
|
customerReview.classList.add('customer-review')
|
||
|
|
customerReview.textContent = review.review;
|
||
|
|
reviewDiv.appendChild(customerReview);
|
||
|
|
reviewcard.appendChild(customerName);
|
||
|
|
reviewcard.appendChild(reviewDiv);
|
||
|
|
|
||
|
|
allColumns[`${count % 3}`].appendChild(reviewcard);
|
||
|
|
count++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (error) {
|
||
|
|
console.log(error);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function goBackToInventory() {
|
||
|
|
|
||
|
|
button=document.getElementById('backButton');
|
||
|
|
storeId=button.value;
|
||
|
|
location.href = `index.html?id=navBar3&storeid=${storeId}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|