source: src/main/resources/static/ReviewPage.html@ 3a74959

Last change on this file since 3a74959 was 3a74959, checked in by ste08 <sjovanoska@…>, 2 months ago

Review page added
  • Property mode set to 100644
File size: 5.6 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</head>
14<style>
15 .popup-overlay {
16 position: fixed;
17 top: 0;
18 left: 0;
19 width: 100%;
20 height: 100%;
21 background: rgba(0, 0, 0, 0.7);
22 display: flex;
23 align-items: center;
24 justify-content: center;
25 z-index: 1000;
26 overflow:hidden;
27 }
28
29 .popup textarea{
30 width: 100%;
31 padding: 10px;
32 margin-top: 10px;
33 border: 1px solid #ccc;
34 border-radius: 4px;
35 resize: vertical;
36 box-sizing: border-box;
37 }
38
39 .popup {
40 background-color: white;
41 padding: 20px;
42 width: 300px;
43 border-radius: 10px;
44 }
45
46 .popup button {
47 margin-top: 10px;
48 background-color: rebeccapurple;
49 color: white;
50 border: none;
51 padding: 5px;
52 cursor: pointer;
53 }
54
55 .popup button:hover {
56 background-color: mediumpurple;
57 }
58
59 .popup select {
60 width: 100%;
61 padding: 8px;
62 margin: 10px 0;
63 border-radius: 4px;
64 border: 1px solid #ccc;
65 }
66
67 .popup select:focus {
68 outline: none;
69 border-color: #007bff;
70 }
71
72</style>
73<body>
74
75<div id="app" class="review-page">
76 <header class="app-header">
77 <button class="logout-btn" @click="logout">Log Out</button>
78 <button class="logout-btn" @click="leaveReview">Leave a review</button>
79 </header>
80
81 <div class="main-content">
82 <div class="review-container">
83 <h1>Flight Reviews</h1>
84
85 <div class="review-list">
86 <div v-for="review in reviews" :key="review.reviewid" class="review-item">
87 <h3>{{ review.date }}</h3>
88 <p>{{ review.reviewComment }}</p>
89 <span>{{ review.rating }}</span>
90 </div>
91 </div>
92 </div>
93 </div>
94</div>
95
96<div v-if="showPopup" class="popup-overlay">
97 <div class="popup">
98 <h3>Leave a review</h3>
99
100 <select v-model="selectedFlightNumber" id="flights">
101 <option value="" disabled selected>Select a flight</option>
102 <option v-for="flight in flights" :key="flight.flightNumber" :value="flight.flightNumber">
103 {{ flight.flightNumber }}
104 </option>
105 </select>
106
107 <textarea v-model="reviewComment" placeholder="Leave a comment here..." rows="5"></textarea>
108
109 <textarea v-model="rating" placeholder="Rate 1-5" rows="1"></textarea>
110
111 <div class="popup-actions">
112 <button @click="submitReview" class="submit-btn">Submit</button>
113 <button @click="closePopup" class="cancel-btn">Cancel</button>
114 </div>
115 </div>
116</div>
117
118<script>
119 new Vue({
120 el: '#app',
121 data: {
122 userId: '',
123 reviews: [],
124 showPopup: false,
125 reviewComment: '',
126 rating: '',
127 flights: [],
128 selectedFlightNumber: ''
129 },
130 methods: {
131 logout() {
132 window.location.href = '/';
133 },
134 async fetchReviews() {
135 try {
136 const response = await axios.get("api/reviews");
137 this.reviews = response.data;
138 } catch (error) {
139 console.error(error);
140 }
141 },
142 leaveReview() {
143 this.showPopup = true;
144 },
145 closePopup() {
146 this.showPopup = false;
147 },
148 submitReview() {
149 if (this.reviewComment.trim() && this.selectedFlightNumber) {
150 const reviewData = {
151 userId: this.userId,
152 flightNumber: this.selectedFlightNumber,
153 reviewComment: this.reviewComment,
154 rating: this.rating
155 };
156
157 axios.post('/api/reviews', reviewData)
158 .then(response => {
159 alert("Review added successfully!");
160 this.closePopup();
161 })
162 .catch(error => {
163 console.error("Error submitting review:", error);
164 alert("There was an error submitting your review. Please try again.");
165 });
166 }
167 },
168 async fetchFlights() {
169 try {
170 const response = await axios.get('/api/flights');
171 this.flights = response.data;
172 console.log(this.flights);
173 } catch (error) {
174 console.error('Error fetching flights:', error);
175 }
176 }
177 },
178 mounted() {
179 const params = new URLSearchParams(window.location.search);
180 this.userId = params.get("userId");
181 this.fetchReviews();
182 this.fetchFlights();
183 }
184 });
185</script>
186
187</body>
188</html>
Note: See TracBrowser for help on using the repository browser.