source: interfejs/reviews.html@ 2d1ec46

main
Last change on this file since 2d1ec46 was 69f2a41, checked in by Klimentina Efremova <klimentina08642@…>, 7 months ago

Initial commit
  • Property mode set to 100644
File size: 7.8 KB
RevLine 
[69f2a41]1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Write a Review - Handcraft Marketplace</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10<header>
11 <div class="logo-container">
12 <img src="../images/administrative/logo.jpg" alt="Handcraft Marketplace Logo" onerror="this.style.display='none'">
13 <h1>🎨 Handcraft Marketplace</h1>
14 </div>
15 <nav>
16 <ul>
17 <li><a href="index.html">Home</a></li>
18 <li><a href="products.html">Products</a></li>
19 <li><a href="#" id="dashboard-link">Dashboard</a></li>
20 </ul>
21 </nav>
22</header>
23
24<main>
25 <div class="form-container">
26 <h2>Write a Review</h2>
27 <p class="form-subtitle">Share your experience with this product</p>
28
29 <div id="product-info" class="review-product-info">
30 <div class="loading">Loading product information...</div>
31 </div>
32
33 <form id="review-form" class="form">
34 <div class="form-group">
35 <label>Your Rating *</label>
36 <div class="rating-selector">
37 <div class="stars">
38 <span class="star" data-rating="1">★</span>
39 <span class="star" data-rating="2">★</span>
40 <span class="star" data-rating="3">★</span>
41 <span class="star" data-rating="4">★</span>
42 <span class="star" data-rating="5">★</span>
43 </div>
44 <input type="hidden" id="rating" value="0">
45 </div>
46 </div>
47
48 <div class="form-group">
49 <label for="comment">Your Review</label>
50 <textarea id="comment" rows="5" placeholder="Tell others about your experience with this product..."></textarea>
51 </div>
52
53 <div class="form-group">
54 <button type="submit" class="btn-primary btn-full">Submit Review</button>
55 </div>
56 </form>
57
58 <div class="form-footer">
59 <a href="#" onclick="history.back()">Go Back</a>
60 </div>
61 </div>
62</main>
63
64<footer>
65 <div class="footer-content">
66 <div class="footer-section">
67 <h3>Handcraft Marketplace</h3>
68 <p>Share your feedback</p>
69 </div>
70 <div class="footer-section">
71 <h3>Quick Links</h3>
72 <ul>
73 <li><a href="index.html">Home</a></li>
74 <li><a href="products.html">Products</a></li>
75 </ul>
76 </div>
77 </div>
78 <div class="footer-bottom">
79 <p>&copy; 2025 Handcraft Marketplace. All rights reserved.</p>
80 </div>
81</footer>
82
83<script src="script.js"></script>
84<script>
85 document.addEventListener('DOMContentLoaded', async () => {
86 const auth = await checkAuth();
87
88 if (!auth.success) {
89 window.location.href = 'login.html';
90 return;
91 }
92
93 if (auth.user.userType !== 'client') {
94 alert('Only clients can write reviews');
95 window.location.href = 'index.html';
96 return;
97 }
98
99 const urlParams = new URLSearchParams(window.location.search);
100 const orderNum = urlParams.get('order');
101 const productCode = urlParams.get('product');
102
103 if (!productCode && !orderNum) {
104 window.location.href = 'products.html';
105 return;
106 }
107
108 // If order number is provided, load product from order
109 if (orderNum) {
110 loadProductFromOrder(orderNum);
111 } else {
112 loadProductDetails(productCode);
113 }
114
115 // Star rating interaction
116 const stars = document.querySelectorAll('.star');
117 const ratingInput = document.getElementById('rating');
118
119 stars.forEach(star => {
120 star.addEventListener('mouseover', function() {
121 const rating = parseInt(this.dataset.rating);
122 highlightStars(rating);
123 });
124
125 star.addEventListener('mouseout', function() {
126 const currentRating = parseInt(ratingInput.value);
127 highlightStars(currentRating);
128 });
129
130 star.addEventListener('click', function() {
131 const rating = parseInt(this.dataset.rating);
132 ratingInput.value = rating;
133 highlightStars(rating);
134 });
135 });
136
137 function highlightStars(rating) {
138 stars.forEach((star, index) => {
139 if (index < rating) {
140 star.style.color = 'var(--pink)';
141 } else {
142 star.style.color = 'var(--light-gray)';
143 }
144 });
145 }
146
147 // Form submission
148 document.getElementById('review-form').addEventListener('submit', submitReview);
149 });
150
151 async function loadProductFromOrder(orderNum) {
152 try {
153 const response = await fetch('/api/user-orders');
154 const data = await response.json();
155
156 if (data.success) {
157 const order = data.orders.find(o => o.order_num === orderNum);
158 if (order && order.items && order.items.length > 0) {
159 // For simplicity, review the first product in the order
160 const product = order.items[0];
161 displayProductInfo({
162 code: product.product_code,
163 description: product.description
164 });
165 }
166 }
167 } catch (error) {
168 console.error('Error loading order:', error);
169 }
170 }
171
172 async function loadProductDetails(productCode) {
173 try {
174 const response = await fetch(`/api/product-by-code?code=${productCode}`);
175 const data = await response.json();
176
177 if (data.success) {
178 displayProductInfo(data.product);
179 }
180 } catch (error) {
181 console.error('Error loading product:', error);
182 }
183 }
184
185 function displayProductInfo(product) {
186 const infoDiv = document.getElementById('product-info');
187 infoDiv.innerHTML = `
188 <div class="product-mini-card">
189 <p><strong>Product:</strong> ${product.description}</p>
190 <p><strong>Code:</strong> ${product.code}</p>
191 <p><strong>Store:</strong> ${product.store_name || 'Unknown'}</p>
192 </div>
193 `;
194 }
195
196 async function submitReview(e) {
197 e.preventDefault();
198
199 const rating = document.getElementById('rating').value;
200 const comment = document.getElementById('comment').value;
201
202 if (rating === '0') {
203 alert('Please select a rating');
204 return;
205 }
206
207 const urlParams = new URLSearchParams(window.location.search);
208 const productCode = urlParams.get('product');
209
210 if (!productCode) {
211 alert('Product information is missing');
212 return;
213 }
214
215 const reviewData = {
216 product_code: productCode,
217 rating: parseInt(rating),
218 comment: comment
219 };
220
221 try {
222 const response = await fetch('/api/create-review', {
223 method: 'POST',
224 headers: { 'Content-Type': 'application/json' },
225 body: JSON.stringify(reviewData)
226 });
227
228 const data = await response.json();
229
230 if (data.success) {
231 alert('Thank you for your review!');
232 window.location.href = 'client-dashboard.html';
233 } else {
234 alert(data.message || 'Failed to submit review');
235 }
236 } catch (error) {
237 console.error('Error submitting review:', error);
238 alert('An error occurred');
239 }
240 }
241</script>
242</body>
243</html>
Note: See TracBrowser for help on using the repository browser.