[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 Search</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 | </head>
|
---|
| 11 | <body>
|
---|
| 12 |
|
---|
| 13 | <div id="app" class="flight-search">
|
---|
| 14 | <header class="app-header">
|
---|
| 15 | <button class="report-issue-btn" @click="showReportPopup">Report Issue</button>
|
---|
| 16 | <button class="report-issue-btn" @click="goToWishlistPage">🤍</button>
|
---|
| 17 | <button class="logout-btn" @click="logout">Log Out</button>
|
---|
| 18 | </header>
|
---|
| 19 |
|
---|
| 20 | <div class="main-content">
|
---|
| 21 | <!-- Left side: Flight Search Form -->
|
---|
| 22 | <div class="search-form-container">
|
---|
| 23 | <h1>Flight Search</h1>
|
---|
| 24 |
|
---|
| 25 | <div class="search-form">
|
---|
| 26 | <label for="departure-city">Departure From</label>
|
---|
| 27 | <select v-model="departureCity" id="departure-city">
|
---|
| 28 | <option value="" disabled selected>Select a departure city</option>
|
---|
| 29 | <option v-for="city in cities" :key="city" :value="city">{{ city }}</option>
|
---|
| 30 | </select>
|
---|
| 31 |
|
---|
| 32 | <label for="destination">Destination</label>
|
---|
| 33 | <select v-model="destination" id="destination">
|
---|
| 34 | <option value="" disabled selected>Select a destination</option>
|
---|
| 35 | <option v-for="place in places" :key="place" :value="place">{{ place }}</option>
|
---|
| 36 | </select>
|
---|
| 37 |
|
---|
| 38 | <label for="departure-date">Departure Date</label>
|
---|
| 39 | <input type="date" v-model="departureDate" id="departureDate" />
|
---|
| 40 |
|
---|
| 41 | <div class="toggle-wrapper">
|
---|
| 42 | <label for="return-date-toggle">Include Return Date</label>
|
---|
| 43 | <input type="checkbox" v-model="showReturnDate" id="return-date-toggle" />
|
---|
| 44 | </div>
|
---|
| 45 |
|
---|
| 46 | <div v-if="showReturnDate">
|
---|
| 47 | <label for="return-date">Return Date</label>
|
---|
| 48 | <input type="date" v-model="returnDate" id="returnDate" />
|
---|
| 49 | </div>
|
---|
| 50 |
|
---|
| 51 | <button @click="searchFlights">Search Flights</button>
|
---|
| 52 | </div>
|
---|
| 53 | </div>
|
---|
| 54 |
|
---|
| 55 | <!-- Right side: Available Flights List -->
|
---|
| 56 | <div class="flights-list-container" v-if="flights.length">
|
---|
| 57 | <h2>Available Flights</h2>
|
---|
| 58 | <div class="flights-list">
|
---|
| 59 | <div class="flight-item" v-for="flight in flights" :key="flight.flightId">
|
---|
| 60 | <input type="checkbox" v-model="flight.selected" />
|
---|
| 61 | <span>{{flight.departureTime}} | {{flight.arrivalTime}} | ${{ flight.price }} | {{flight.availableSeats}}</span>
|
---|
| 62 |
|
---|
| 63 | <!-- Heart icon for Wishlist -->
|
---|
| 64 | <span class="wishlist-heart" @click="toggleWishlist(flight)">
|
---|
| 65 | {{ flight.wishlisted ? '❤️' : '🤍' }}
|
---|
| 66 | </span>
|
---|
| 67 | </div>
|
---|
| 68 | </div>
|
---|
| 69 |
|
---|
| 70 | <!-- Book Button (Only appears if at least one flight is selected) -->
|
---|
| 71 | <button v-if="selectedFlights.length" @click="bookFlights" class="book-btn">
|
---|
| 72 | Book
|
---|
| 73 | </button>
|
---|
| 74 |
|
---|
| 75 | </div>
|
---|
| 76 | </div>
|
---|
| 77 |
|
---|
| 78 | <!-- Popup Modal for Reporting an Issue -->
|
---|
| 79 | <div v-if="showPopup" class="popup-overlay">
|
---|
| 80 | <div class="popup">
|
---|
| 81 | <h3>Report an Issue</h3>
|
---|
| 82 | <textarea v-model="issueDescription" placeholder="Describe the issue here..." rows="5"></textarea>
|
---|
| 83 | <div class="popup-actions">
|
---|
| 84 | <button @click="submitIssue" class="submit-btn">Submit</button>
|
---|
| 85 | <button @click="closePopup" class="cancel-btn">Cancel</button>
|
---|
| 86 | </div>
|
---|
| 87 | </div>
|
---|
| 88 | </div>
|
---|
| 89 | </div>
|
---|
| 90 |
|
---|
| 91 | <script>
|
---|
| 92 | new Vue({
|
---|
| 93 | el: '#app',
|
---|
| 94 | data: {
|
---|
| 95 | departureCity: '',
|
---|
| 96 | destination: '',
|
---|
| 97 | departureDate: '',
|
---|
| 98 | returnDate: '',
|
---|
| 99 | flights: [],
|
---|
| 100 | cities: [],
|
---|
| 101 | places: [],
|
---|
| 102 | bookings: [],
|
---|
| 103 | showReturnDate: false,
|
---|
| 104 | showPopup: false,
|
---|
| 105 | issueDescription: ""
|
---|
| 106 | },
|
---|
| 107 | computed: {
|
---|
| 108 | selectedFlights() {
|
---|
| 109 | return this.flights.filter(flight => flight.selected);
|
---|
| 110 | }
|
---|
| 111 | },
|
---|
| 112 | methods: {
|
---|
| 113 | async searchFlights() {
|
---|
| 114 | console.log("button clicked");
|
---|
| 115 |
|
---|
| 116 | if (this.departureCity && this.destination && this.departureDate) {
|
---|
| 117 | console.log("Search parameters are valid.");
|
---|
| 118 |
|
---|
| 119 | try {
|
---|
| 120 | // Log the params being sent
|
---|
| 121 | console.log("Params being sent:", {
|
---|
| 122 | departureCity: this.departureCity,
|
---|
| 123 | destination: this.destination,
|
---|
| 124 | departureDate: this.departureDate,
|
---|
| 125 | returnDate: this.showReturnDate ? this.returnDate : null
|
---|
| 126 | });
|
---|
| 127 |
|
---|
| 128 | const response = await axios.get('/api/flights/flight-search', {
|
---|
| 129 | params: {
|
---|
| 130 | departureCity: this.departureCity,
|
---|
| 131 | destination: this.destination,
|
---|
| 132 | departureDate: this.departureDate,
|
---|
| 133 | returnDate: this.showReturnDate ? this.returnDate : null
|
---|
| 134 | }
|
---|
| 135 | });
|
---|
| 136 |
|
---|
| 137 | console.log("Response received:", response.data);
|
---|
| 138 |
|
---|
| 139 | // Handle no results
|
---|
| 140 | if (response.data && response.data.length > 0) {
|
---|
| 141 | this.flights = response.data;
|
---|
| 142 | console.log("Flights found:", this.flights);
|
---|
| 143 | } else {
|
---|
| 144 | this.flights = [];
|
---|
| 145 | alert("No flights found for the given criteria.");
|
---|
| 146 | }
|
---|
| 147 |
|
---|
| 148 | } catch (error) {
|
---|
| 149 | console.error("Error fetching flights", error);
|
---|
| 150 | }
|
---|
| 151 | } else {
|
---|
| 152 | alert("Please select departure city, destination, and date");
|
---|
| 153 | this.flights = [];
|
---|
| 154 | }
|
---|
| 155 | }
|
---|
| 156 | ,
|
---|
| 157 | bookFlights() {
|
---|
| 158 | if (!this.selectedFlights.length) {
|
---|
| 159 | alert("Please select at least one flight.");
|
---|
| 160 | return;
|
---|
| 161 | }
|
---|
| 162 | const flight = this.selectedFlights[0];
|
---|
| 163 | console.log(this.selectedFlights[0]);
|
---|
| 164 | const totalCost = flight.price;
|
---|
| 165 | const bookingDate = new Date().toISOString().split('T')[0];
|
---|
| 166 |
|
---|
[3d60932] | 167 |
|
---|
[57e58a3] | 168 | const bookingData = {
|
---|
[3d60932] | 169 | flightId: flight.flightID,
|
---|
[57e58a3] | 170 | bookingDate: bookingDate,
|
---|
| 171 | status: 'PENDING',
|
---|
| 172 | totalCost: totalCost
|
---|
| 173 | };
|
---|
| 174 | console.log("Booking Data",bookingData);
|
---|
| 175 | axios.post('/api/bookings', bookingData)
|
---|
| 176 | .then(response => {
|
---|
[3d60932] | 177 | const bookingID = response.data.bookingID;
|
---|
[57e58a3] | 178 | alert("Booked successfully!");
|
---|
[3d60932] | 179 | window.location.href = `/transaction?amount=${encodeURIComponent(totalCost)}&bookingId=${encodeURIComponent(bookingID)}&flightId=${encodeURIComponent(flight.flightID)}`;
|
---|
[57e58a3] | 180 | })
|
---|
| 181 | .catch(error => {
|
---|
| 182 | console.error("Error booking flight", error);
|
---|
| 183 | alert("There was an error creating your booking. Please try again.");
|
---|
| 184 | });
|
---|
| 185 | },
|
---|
| 186 | logout() {
|
---|
| 187 | window.location.href = '/login';
|
---|
| 188 | },
|
---|
| 189 | async toggleWishlist(flight) {
|
---|
| 190 | flight.wishlisted = !flight.wishlisted;
|
---|
| 191 |
|
---|
| 192 | const wishlistData = {
|
---|
[3d60932] | 193 | targetId: flight.flightID,
|
---|
[57e58a3] | 194 | wishlisted: flight.wishlisted
|
---|
| 195 | };
|
---|
| 196 | try {
|
---|
| 197 | const response = await axios.post('/api/wishlists', wishlistData);
|
---|
| 198 | console.log("Wishlist updated");
|
---|
| 199 | } catch (error) {
|
---|
| 200 | console.error("Error updating wishlist:", error.response ? error.response.data : error.message);
|
---|
| 201 | }
|
---|
| 202 | },
|
---|
| 203 | goToWishlistPage() {
|
---|
| 204 | window.location.href = '/wishlist';
|
---|
| 205 | },
|
---|
| 206 | showReportPopup() {
|
---|
| 207 | this.showPopup = true;
|
---|
| 208 | },
|
---|
| 209 | closePopup() {
|
---|
| 210 | this.showPopup = false;
|
---|
| 211 | },
|
---|
| 212 | submitIssue() {
|
---|
| 213 | const flight = this.selectedFlights[0];
|
---|
| 214 | if (this.issueDescription.trim()) {
|
---|
| 215 | const reviewData = {
|
---|
| 216 | userID: 1,
|
---|
| 217 | subject: this.subject,
|
---|
| 218 | description: this.issueDescription
|
---|
| 219 | };
|
---|
| 220 |
|
---|
| 221 | axios.post('/api/support-tickets', reviewData)
|
---|
| 222 | .then(response => {
|
---|
| 223 | alert("Issue reported successfully!");
|
---|
| 224 | this.closePopup();
|
---|
| 225 | })
|
---|
| 226 | .catch(error => {
|
---|
| 227 | console.error("Error submitting issue:", error.response ? error.response.data : error.message);
|
---|
| 228 | alert("There was an error submitting your issue. Please try again.");
|
---|
| 229 | });
|
---|
| 230 | } else {
|
---|
| 231 | alert("Please enter a description for the issue.");
|
---|
| 232 | }
|
---|
| 233 | },
|
---|
| 234 | leaveReview() {
|
---|
| 235 | const flight = this.selectedFlights[0];
|
---|
| 236 | if (this.issueDescription.trim()) {
|
---|
| 237 | const reviewData = {
|
---|
| 238 | userID: 1,
|
---|
| 239 | targetID: flight.flightId,
|
---|
| 240 | reviewComment: this.issueDescription,
|
---|
| 241 | rating: 5,
|
---|
| 242 | date: new Date().toISOString().split('T')[0]
|
---|
| 243 | };
|
---|
| 244 |
|
---|
| 245 | axios.post('/api/support-tickets', reviewData)
|
---|
| 246 | .then(response => {
|
---|
| 247 | alert("Issue reported successfully!");
|
---|
| 248 | this.closePopup();
|
---|
| 249 | })
|
---|
| 250 | .catch(error => {
|
---|
| 251 | console.error("Error submitting issue:", error.response ? error.response.data : error.message);
|
---|
| 252 | alert("There was an error submitting your issue. Please try again.");
|
---|
| 253 | });
|
---|
| 254 | } else {
|
---|
| 255 | alert("Please enter a description for the issue.");
|
---|
| 256 | }
|
---|
| 257 | },
|
---|
| 258 | async fetchFlights() {
|
---|
| 259 | try {
|
---|
| 260 | const response = await axios.get('/api/destinations');
|
---|
| 261 |
|
---|
| 262 | this.cities = response.data.map(departureCity => departureCity.name);
|
---|
| 263 | this.places = response.data.map(destination => destination.name);
|
---|
| 264 | } catch (error) {
|
---|
| 265 | console.error("Error fetching Destinations", error);
|
---|
| 266 | }
|
---|
| 267 | }
|
---|
| 268 | },
|
---|
| 269 | mounted() {
|
---|
| 270 | this.fetchFlights();
|
---|
| 271 | axios.get('api/flights')
|
---|
| 272 | .then(response => {
|
---|
| 273 | this.flights = response.data;
|
---|
| 274 | })
|
---|
| 275 | .catch(error => {
|
---|
| 276 | console.error("Error fetching flights", error);
|
---|
| 277 | });
|
---|
[3d60932] | 278 | axios.get('api/bookings/getAll/${flight.flightId}')
|
---|
[57e58a3] | 279 | .then(response => {
|
---|
| 280 | console.log(response.data);
|
---|
| 281 | this.bookings = response.data;
|
---|
| 282 | })
|
---|
| 283 | .catch(error => {
|
---|
| 284 | console.error("Error fetching flights", error);
|
---|
| 285 | })
|
---|
| 286 | }
|
---|
| 287 | });
|
---|
| 288 | </script>
|
---|
| 289 |
|
---|
| 290 | </body>
|
---|
| 291 | </html>
|
---|