source: src/main/resources/static/ReviewPage.html@ 7deb3e2

Last change on this file since 7deb3e2 was 7deb3e2, checked in by ste08 <sjovanoska@…>, 8 weeks ago

notification status + review page fixed
  • Property mode set to 100644
File size: 6.8 KB
Line 
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>Flight Reviews</title>
7 <link rel="stylesheet" href="/css/main.css">
8 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
9 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
11 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css'>
12 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
13<style>
14 .review-container {
15 max-width: 800px;
16 margin: 0 auto;
17 padding: 20px;
18 }
19
20 .review-list {
21 display: flex;
22 flex-direction: column;
23 gap: 20px;
24 margin-top: 20px;
25 }
26
27 .review-item {
28 background-color: #fff;
29 border: 1px solid #ccc;
30 border-radius: 12px;
31 padding: 15px 20px;
32 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
33 transition: box-shadow 0.3s ease;
34 }
35
36 .review-item:hover {
37 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
38 }
39
40 .review-item p {
41 margin: 5px 0;
42 }
43
44 .review-item span {
45 font-weight: bold;
46 color: #673ab7;
47 }
48
49 .popup-overlay {
50 position: fixed;
51 top: 0;
52 left: 0;
53 width: 100%;
54 height: 100%;
55 background: rgba(0, 0, 0, 0.7);
56 display: flex;
57 align-items: center;
58 justify-content: center;
59 z-index: 1000;
60 overflow:hidden;
61 }
62
63 .popup textarea{
64 width: 100%;
65 padding: 10px;
66 margin-top: 10px;
67 border: 1px solid #ccc;
68 border-radius: 4px;
69 resize: vertical;
70 box-sizing: border-box;
71 }
72
73 .popup {
74 background-color: white;
75 padding: 20px;
76 width: 300px;
77 border-radius: 10px;
78 }
79
80 .popup button {
81 margin-top: 10px;
82 background-color: rebeccapurple;
83 color: white;
84 border: none;
85 padding: 5px;
86 cursor: pointer;
87 }
88
89 .popup button:hover {
90 background-color: mediumpurple;
91 }
92
93 .popup select {
94 width: 100%;
95 padding: 8px;
96 margin: 10px 0;
97 border-radius: 4px;
98 border: 1px solid #ccc;
99 }
100
101 .popup select:focus {
102 outline: none;
103 border-color: #007bff;
104 }
105
106</style>
107</head>
108<body>
109
110<div id="app" class="review-page">
111 <header class="app-header">
112 <button class="logout-btn" @click="logout">Log Out</button>
113 <button class="show-popup" @click="leaveReview">Leave a review</button>
114 </header>
115
116 <div class="main-content">
117 <div class="review-container">
118 <h1>Flight Reviews</h1>
119
120 <div class="review-list">
121 <div v-for="review in reviews" :key="review.reviewid" class="review-item">
122 <p><strong>Flight Number:</strong> {{ review.flightNumber }}</p>
123 <h3>{{ review.date }}</h3>
124 <p>{{ review.reviewComment }}</p>
125 <span><i class="fas fa-star" style="color:gold;"></i> {{ review.rating }}</span>
126 </div>
127 </div>
128 </div>
129 </div>
130 <div v-if="showPopup" class="popup-overlay">
131 <div class="popup">
132 <h3>Leave a review</h3>
133
134 <select v-model="selectedFlightId" id="flightNumbers">
135 <option value="" disabled selected>Select a flight</option>
136 <option v-for="flight in flights" :key="flight.flightId" :value="flight.flightId">
137 {{ flight.flightNumber }}
138 </option>
139 </select>
140
141
142
143 <textarea v-model="reviewComment" placeholder="Leave a comment here..." rows="5"></textarea>
144
145 <textarea v-model="rating" placeholder="Rate 1-5" rows="1"></textarea>
146
147 <div class="popup-actions">
148 <button @click="submitReview" class="submit-btn">Submit</button>
149 <button @click="closePopup" class="cancel-btn">Cancel</button>
150 </div>
151 </div>
152 </div>
153</div>
154
155
156<script>
157 new Vue({
158 el: '#app',
159 data: {
160 userId: '',
161 reviews: [],
162 showPopup: false,
163 reviewComment: '',
164 rating: '',
165 flights: [],
166 selectedFlightId: '',
167 flightNumbers:''
168 },
169 methods: {
170 logout() {
171 window.location.href = '/';
172 },
173 async fetchReviews() {
174 try {
175 const response = await axios.get("api/reviews");
176 this.reviews = response.data;
177 console.log(response.data);
178 } catch (error) {
179 console.error(error);
180 }
181 },
182 leaveReview() {
183 this.showPopup = true;
184 this.selectedFlightNumber = '';
185 },
186 closePopup() {
187 this.showPopup = false;
188 },
189 submitReview() {
190 if (this.reviewComment.trim() && this.selectedFlightId) {
191 const reviewData = {
192 userID: this.userId,
193 targetID: this.selectedFlightId,
194 reviewComment: this.reviewComment,
195 rating: this.rating
196 };
197 console.log(reviewData);
198
199 axios.post('/api/reviews', reviewData)
200 .then(response => {
201 alert("Review added successfully!");
202 this.closePopup();
203 })
204 .catch(error => {
205 console.error("Error submitting review:", error);
206 alert("There was an error submitting your review. Please try again.");
207 });
208 }
209 },
210 async fetchFlights() {
211 try {
212 const response = await axios.get('/api/flights');
213 this.flights = response.data.map(flight => ({
214 flightId: flight.flightID,
215 flightNumber: flight.flightNumber
216 }));
217 console.log(this.flights);
218 } catch (error) {
219 console.error('Error fetching flights:', error);
220 }
221 }
222 },
223 mounted() {
224 const params = new URLSearchParams(window.location.search);
225 this.userId = params.get("userId");
226 this.fetchReviews();
227 this.fetchFlights();
228 this.showPopup = false;
229 }
230 });
231</script>
232
233</body>
234</html>
Note: See TracBrowser for help on using the repository browser.