source: src/main/resources/static/ReviewPage.html@ 8ae59d6

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

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