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

Last change on this file since 7deb3e2 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
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>SkyChase - Wishlist</title>
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'>
11 <link rel="stylesheet" href="/css/main.css">
12 <style>
13 body {
14 background: url('images/sky.jpg') no-repeat center center fixed;
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;
31 background-color: rebeccapurple;
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 }
48 .header button{
49 background-color:rebeccapurple;
50 }
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);
62 color: white;
63 border-radius: 0.25em;
64 box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
65 cursor: pointer;
66 }
67 select option {
68 color: inherit;
69 background-color: #320a28;
70 }
71 select:focus {
72 outline: none;
73 }
74 select::-ms-expand {
75 display: none;
76 }
77 .wishlist-content {
78 margin-top: 60px;
79 color: white;
80 }
81 #app {
82 text-align: center;
83
84 }
85 ul {
86 list-style-type: none;
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 */
99 }
100
101 li {
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 */
106 }
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
118 </style>
119</head>
120<body>
121<div class="header">
122 <img src="/images/home.png" alt="Home Icon" @click="home">
123 <h1>SkyChase</h1>
124 <button @click="home">Log Out</button>
125</div>
126
127<div id="app" class="wishlist-content">
128 <h1>Your Wishlist</h1>
129 <ul>
130 <li v-if="wishlist.length === 0">Your wishlist is empty!</li>
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>
135 <button @click="bookFlights(item.wishlistID)" class="book">
136 Book
137 </button>
138 </li>
139 </ul>
140</div>
141
142<script>
143 new Vue({
144 el: '#app',
145 data: {
146 userId: '',
147 wishlist: [],
148 wishlistId:''
149 },
150 mounted() {
151 const params = new URLSearchParams(window.location.search);
152 this.userId = params.get("userId");
153 this.fetchWishlist();
154 },
155 methods: {
156 async fetchWishlist() {
157 try {
158 const response = await fetch(`/api/wishlists/${this.userId}`);
159 this.wishlist = await response.json();
160 } catch (error) {
161 console.error('Error fetching wishlist:', error);
162 }
163 },
164 bookFlights(wishlistID) {
165 console.log(wishlistID);
166
167 axios.get(`/api/wishlists/flight/${encodeURIComponent(wishlistID)}`)
168 .then(response => {
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 )
197 })
198 .catch(error => {
199 console.error("Error fetching flight", error);
200 });
201
202 },
203 home() {
204 window.location.href = '/';
205 }
206 }
207 });
208</script>
209</body>
210</html>
Note: See TracBrowser for help on using the repository browser.