source: frontend/js/siteFlow.js

Last change on this file was df7f390, checked in by Kristijan <kristijanzafirovski26@…>, 2 days ago

Added frontend functionality for changes and refactored code

  • Property mode set to 100644
File size: 10.2 KB
Line 
1function getUserDetails() {
2 return JSON.parse(sessionStorage.getItem('user'));
3}
4
5function deleteAccount() {
6 fetch('/delete-account', {
7 method: 'POST',
8 headers: {
9 'Content-Type': 'application/json'
10 },
11 body: JSON.stringify(getUserDetails())
12 })
13 .then(response => response.json())
14 .then(data => {
15 if (data.success) {
16 sessionStorage.clear();
17 logout();
18 alert('Account deleted successfully');
19 } else {
20 alert('Failed to delete account: ' + data.message);
21 }
22 })
23 .catch(error => {
24 console.error('Error:', error);
25 alert('Failed to delete account: ' + error.message);
26 });
27}
28
29function logout() {
30 sessionStorage.clear();
31 document.cookie = "sessionId=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
32 showLoggedOutState();
33 fetch('/account/logout', {
34 method: 'POST',
35 credentials: 'include'
36 });
37}
38
39function openAccountDetails() {
40 document.getElementById('AccountDetailsOverlay').style.display = 'block';
41}
42
43function confirmDelete() {
44 document.getElementById('confDel').style.display = 'block';
45}
46
47function closeConfirmDelete() {
48 document.getElementById('confDel').style.display = 'none';
49}
50
51function openLoginPopup() {
52 document.getElementById('loginPopup').style.display = 'block';
53}
54
55function closeLoginPopup() {
56 document.getElementById('loginPopup').style.display = 'none';
57}
58
59function openRegisterPopup() {
60 document.getElementById('registerPopup').style.display = 'block';
61}
62
63function closeRegisterPopup() {
64 document.getElementById('registerPopup').style.display = 'none';
65}
66
67function showLoggedInState() {
68 document.getElementById('loginButton').style.display = 'none';
69 document.getElementById('logoutButton').style.display = 'block';
70 document.getElementById('savedTripsButton').style.display = 'block';
71 document.getElementById('accBtn').style.display = 'block';
72
73 var style = document.createElement('style');
74 style.innerHTML = '.favBtn { display: block; }';
75 document.head.appendChild(style);
76
77 if (sessionStorage.getItem('isAdmin') === 'true') {
78 document.getElementById('adminPanelButton').style.display = 'block';
79 }
80}
81
82
83function showMessage(elementId, type, message) {
84 const element = document.getElementById(elementId);
85 if (!element) {
86 console.error(`Element with id ${elementId} not found`);
87 return;
88 }
89 element.textContent = message;
90 element.className = `message ${type}`;
91}
92
93
94function showLoggedOutState() {
95 document.getElementById('loginButton').style.display = 'block';
96 document.getElementById('logoutButton').style.display = 'none';
97 document.getElementById('savedTripsButton').style.display = 'none';
98 document.getElementById('accBtn').style.display = 'none';
99 var style = document.createElement('style');
100 style.innerHTML = '.favBtn { display: none; }';
101 document.head.appendChild(style);
102 document.getElementById('loginResponse').style.display = 'none';
103 document.getElementById('adminPanelButton').style.display = 'none';
104}
105
106function goToAdminPanel() {
107 window.location.href = '/admin-panel';
108}
109function showLoginFeedback(success, message) {
110 const loginResponse = document.getElementById('loginResponse');
111 loginResponse.textContent = message;
112 loginResponse.style.color = success ? 'green' : 'red';
113 loginResponse.style.display = 'block';
114}
115
116window.onclick = function(event) {
117 const loginPopup = document.getElementById('loginPopup');
118 const registerPopup = document.getElementById('registerPopup');
119 const accountPopup = document.getElementById('AccountDetailsOverlay');
120 if (event.target === loginPopup) {
121 loginPopup.style.display = 'none';
122 }
123 if (event.target === registerPopup) {
124 registerPopup.style.display = 'none';
125 }
126 if (event.target === accountPopup) {
127 accountPopup.style.display = 'none';
128 }
129}
130
131document.addEventListener('DOMContentLoaded', function() {
132 checkSession();
133
134 document.querySelectorAll('.favBtn').forEach(button => {
135 button.addEventListener('click', function() {
136 const optionId = this.getAttribute('data-option-id');
137 saveFavoriteOption(optionId);
138 });
139 });
140
141 document.getElementById('savedTripsButton').addEventListener('click', function() {
142 document.getElementById('savedTripsOverlay').style.display = 'block';
143 fetchSavedTrips();
144 //fetchPriceChanges();
145 });
146
147 document.querySelector('.close').addEventListener('click', function() {
148 document.getElementById('savedTripsOverlay').style.display = 'none';
149 });
150});
151
152
153function saveFavoriteOption(optionId) {
154 const mail = sessionStorage.getItem('user').replace(/^"|"$/g, '');
155 fetch('/save-favorite', {
156 method: 'POST',
157 headers: {
158 'Content-Type': 'application/json'
159 },
160 body: JSON.stringify({ optionId: optionId, user: mail })
161 })
162 .then(response => {
163 if (response.ok) {
164 return response.json();
165 }
166 throw new Error('Network response was not ok.');
167 })
168 .then(data => {
169 console.log('Option saved:', data);
170 updateFavoriteButtons();
171 })
172 .catch(error => {
173 console.error('Error:', error);
174 });
175}
176
177function updateFavoriteButtons() {
178 const mail = sessionStorage.getItem('user').replace(/^"|"$/g, '');
179 fetch('/get-saved-trips', {
180 method: 'POST',
181 headers: {
182 'Content-Type': 'application/json'
183 },
184 body: JSON.stringify({ userEmail: mail })
185 })
186 .then(response => response.json())
187 .then(data => {
188 // Extract the option IDs of saved trips
189 const savedOptionIds = data.savedTrips.map(trip => trip.id);
190
191 document.querySelectorAll('.favBtn').forEach(button => {
192 const optionId = parseInt(button.getAttribute('data-option-id'), 10);
193 if (savedOptionIds.includes(optionId)) {
194 button.disabled = true;
195 button.textContent = 'Зачувано';
196 } else {
197 button.disabled = false;
198 button.textContent = 'Додадете во омилени';
199 }
200 });
201 })
202 .catch(error => {
203 console.error('Error fetching saved options:', error);
204 });
205}
206
207function fetchSavedTrips() {
208 const userEmail = sessionStorage.getItem('user').replace(/^"|"$/g, '');
209 fetch('/get-saved-trips', {
210 method: 'POST',
211 headers: {
212 'Content-Type': 'application/json'
213 },
214 body: JSON.stringify({ userEmail: userEmail })
215 })
216 .then(response => response.json())
217 .then(data => {
218
219 const savedTripsList = document.getElementById('savedTripsList');
220 savedTripsList.innerHTML = '';
221 data.savedTrips.forEach(trip => {
222 const tripDiv = document.createElement('div');
223 tripDiv.classList.add('option');
224
225 const closeButton = document.createElement('button');
226 closeButton.classList.add('remove-option');
227 closeButton.textContent = '×';
228 closeButton.onclick = function() {
229 removeFromSaved(trip.id);
230 };
231 tripDiv.appendChild(closeButton);
232
233 const hotelName = document.createElement('p');
234 hotelName.textContent = trip.hotelName;
235 const country = document.createElement('p');
236 country.textContent = trip.country;
237 const price = document.createElement('p');
238 price.textContent = trip.price + "€";
239
240 tripDiv.appendChild(hotelName);
241 tripDiv.appendChild(country);
242 tripDiv.appendChild(price);
243
244 // Add change indicator
245 if(trip.changes && trip.changes.length > 0) {
246 const changeDiv = document.createElement('div');
247 changeDiv.classList.add('changes');
248 trip.changes.forEach(change => {
249 const changeParagraph = document.createElement('p');
250 changeParagraph.textContent = `${change.attribute} се смени од ${change.oldValue} во ${change.newValue}`;
251 changeDiv.appendChild(changeParagraph);
252 });
253 tripDiv.appendChild(changeDiv);
254 }
255
256 savedTripsList.appendChild(tripDiv);
257 });
258
259 const priceChangesList = document.getElementById('priceChangesList');
260 priceChangesList.innerHTML = '';
261 const priceChanges = data.savedTrips.filter(trip => trip.priceChanged);
262 if (priceChanges.length > 0) {
263 priceChanges.forEach(change => {
264 const changeDiv = document.createElement('div');
265 changeDiv.classList.add('price-change');
266 changeDiv.textContent = `Цената на ${change.hotelName} има промена од ${change.price}€ во ${change.newPrice}€`;
267 priceChangesList.appendChild(changeDiv);
268 });
269 } else {
270 priceChangesList.textContent = "нема промена во зачуваните патувања.";
271 }
272 })
273 .catch(error => {
274 console.error('Error fetching saved trips:', error);
275 });
276}
277
278function removeFromSaved(optionId) {
279 const userEmail = sessionStorage.getItem('user').replace(/^"|"$/g, '');
280 fetch('/remove-from-saved', {
281 method: 'POST',
282 headers: {
283 'Content-Type': 'application/json'
284 },
285 body: JSON.stringify({ optionId: optionId, userEmail: userEmail })
286 })
287 .then(response => {
288 if (response.ok) {
289 return response.json();
290 }
291 throw new Error('Network response was not ok.');
292 })
293 .then(data => {
294 if (data.success) {
295 fetchSavedTrips();
296 }
297 })
298 .catch(error => {
299 console.error('Error:', error);
300 });
301}
Note: See TracBrowser for help on using the repository browser.