source: src/main/resources/static/Wishlist.html

Last change on this file was 07fe0be, checked in by ste08 <sjovanoska@…>, 3 months ago

Wishlist fully working, can book and pay for the booking.
  • Property mode set to 100644
File size: 7.2 KB
RevLine 
[9868304]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">
[fda671c]6 <title>SkyChase - Wishlist</title>
[62bba0c]7 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
8 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
10 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css'>
[fda671c]11 <link rel="stylesheet" href="/css/main.css">
[9868304]12 <style>
13 body {
[fda671c]14 background: url('images/sky.jpg') no-repeat center center fixed;
[9868304]15 background-size: cover;
16 display: flex;
17 flex-direction: column;
18 align-items: center;
19 justify-content: center;
20 height: 100vh;
21 margin: 0;
22 font-family: Arial, sans-serif;
23 }
24
25 .header {
26 position: absolute;
27 top: 0;
28 left: 0;
29 display: flex;
30 align-items: center;
[62bba0c]31 background-color: rebeccapurple;
[9868304]32 padding: 10px;
33 width: 100%;
34 }
35
36 .header img {
37 width: 40px;
38 height: 40px;
39 margin-right: 10px;
40 }
41
42 .header h1 {
43 color: white;
44 margin: 0;
45 font-size: 15px;
46 padding-right: 50px;
47 }
[fda671c]48 .header button{
49 background-color:rebeccapurple;
[9868304]50 }
[fda671c]51 select {
52 -webkit-appearance: none;
53 -moz-appearance: none;
54 appearance: none;
55 border: 0;
56 outline: 0;
57 font: inherit;
58 width: 20em;
59 height: 3em;
60 padding: 0 4em 0 1em;
61 background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
[9868304]62 color: white;
[fda671c]63 border-radius: 0.25em;
64 box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
65 cursor: pointer;
[9868304]66 }
[fda671c]67 select option {
68 color: inherit;
69 background-color: #320a28;
[9868304]70 }
[fda671c]71 select:focus {
72 outline: none;
[9868304]73 }
[fda671c]74 select::-ms-expand {
75 display: none;
[9868304]76 }
[62bba0c]77 .wishlist-content {
78 margin-top: 60px;
79 color: white;
80 }
[fda671c]81 #app {
82 text-align: center;
[62bba0c]83
[fda671c]84 }
[62bba0c]85 ul {
86 list-style-type: none;
[fda671c]87 border: 2px solid rebeccapurple;
88 width: 80%; /* Adjust the width as needed */
89 background-color: rebeccapurple;
90 position: relative;
91 display: flex;
92 flex-direction: column; /* Stack items vertically */
93 align-items: center; /* Center horizontally */
94 justify-content: center; /* Center vertically */
95 padding: 20px;
96 border-radius: 15px;
97 margin: 0 auto; /* Center the ul itself */
98 text-align: center; /* Center text inside the ul */
[62bba0c]99 }
100
101 li {
[fda671c]102 font-size: 14px;
103 display: block; /* Make each item block-level */
104 padding: 10px;
105 width: 100%; /* Make li take full width inside ul */
[62bba0c]106 }
[fda671c]107
108
109 .book {
110 background-color: white;
111 color: rebeccapurple;
112 width: 5em;
113 height: 3em;
114 align-content: center;
115 font-size: 14px;
116 }
117
[9868304]118 </style>
119</head>
120<body>
121<div class="header">
[07fe0be]122 <img src="/images/home.png" alt="Home Icon" @click="home">
[9868304]123 <h1>SkyChase</h1>
[fda671c]124 <button @click="home">Log Out</button>
[9868304]125</div>
126
[fda671c]127<div id="app" class="wishlist-content">
[62bba0c]128 <h1>Your Wishlist</h1>
129 <ul>
130 <li v-if="wishlist.length === 0">Your wishlist is empty!</li>
[fda671c]131 <li v-else v-for="item in wishlist" :key="item.wishlistID">
132 Wishlist ID: {{ item.wishlistID }} | Added on: {{ item.date_added }}
133 <br>
134 <br>
[07fe0be]135 <button @click="bookFlights(item.wishlistID)" class="book">
[fda671c]136 Book
137 </button>
138 </li>
[62bba0c]139 </ul>
[9868304]140</div>
[62bba0c]141
142<script>
143 new Vue({
144 el: '#app',
145 data: {
[fda671c]146 userId: '',
[07fe0be]147 wishlist: [],
148 wishlistId:''
[62bba0c]149 },
150 mounted() {
151 const params = new URLSearchParams(window.location.search);
152 this.userId = params.get("userId");
153 this.fetchWishlist();
154 },
[fda671c]155 methods: {
156 async fetchWishlist() {
157 try {
158 const response = await fetch(`/api/wishlists/${this.userId}`);
[07fe0be]159 this.wishlist = await response.json();
[fda671c]160 } catch (error) {
161 console.error('Error fetching wishlist:', error);
[62bba0c]162 }
[fda671c]163 },
[07fe0be]164 bookFlights(wishlistID) {
165 console.log(wishlistID);
[fda671c]166
[07fe0be]167 axios.get(`/api/wishlists/flight/${encodeURIComponent(wishlistID)}`)
[fda671c]168 .then(response => {
[07fe0be]169 const flightId = response.data;
170 console.log(flightId);
171 axios.get(`/api/flights/${encodeURIComponent(flightId)}`)
172 .then(response => {
173 const flightData = response.data;
174 console.log(flightId);
175 const bookingData = {
176 flightId: flightData.flightID,
177 bookingDate: new Date().toISOString().split('T')[0],
178 status: 'PENDING',
179 totalCost: flightData.price,
180 userId:this.userId
181 };
182 axios.post('/api/bookings', bookingData)
183 .then(response => {
184 const bookingID = response.data.bookingId;
185 alert("Booked successfully!");
186 window.location.href = `/transaction?amount=${encodeURIComponent(flightData.price)}&bookingId=${encodeURIComponent(bookingID)}&flightId=${encodeURIComponent(flightData.flightID)}&userId=${encodeURIComponent(this.userId)}`;
187 })
188 .catch(error => {
189 console.error("Error booking flight", error);
190 alert("There was an error creating your booking. Please try again.");
191 });
192 })
193 .catch(error =>{
194 console.error(error)
195 }
196 )
[fda671c]197 })
198 .catch(error => {
[07fe0be]199 console.error("Error fetching flight", error);
[fda671c]200 });
[07fe0be]201
202 },
203 home() {
204 window.location.href = '/';
[62bba0c]205 }
206 }
[fda671c]207 });
[62bba0c]208</script>
[9868304]209</body>
210</html>
Note: See TracBrowser for help on using the repository browser.