Changeset df7f390 for frontend

Timestamp:

01/13/25 14:18:51 (2 days ago)

Author:

Kristijan <kristijanzafirovski26@…>

Branches:

master

Parents:

0a7426e

Message:

Added frontend functionality for changes and refactored code

Location:

frontend

Files:

• index.html (modified) (2 diffs)
• js/formHandler.js (modified) (4 diffs)
• js/siteFlow.js (modified) (4 diffs)

frontend/index.html

@@ -54 +54 @@
         <span class="close">&times;</span>
         <div class="saved-trips-container">
-            <h2>Saved Trips</h2>
+            <h2>Зачувани патувања</h2>
             <div id="savedTripsList"></div>
         </div>
         <div class="price-changes-container">
-            <h2>Price Changes</h2>
+            <h2>Промени во понудата</h2>
             <div id="priceChangesList"></div>
         </div>
@@ -107 +107 @@
     <div class="loading-content">
         <div class="spinner"></div>
-        <p>Loading, please wait...</p>
+        <p>Пребарувам. ве молиме почекајте...</p>
     </div>
 </div>
 <div id="AccountDetailsOverlay" class="popup accDetails">
     <div class="popup-content">
-        <h1>My account</h1>
+        <h1>Мој профил</h1>
         <div class="popup-content" style="display: none" id="confDel">
             <div class="delete" >
-                <h1>Are you sure you want to delete your account?</h1>
-                <button onclick="deleteAccount()" class="button" id="confirmDelete" style="background-color: red">Yes</button>
-                <button id="cancel" class="button" onclick="closeConfirmDelete()">No</button>
+                <h1>Дали сте сигурни дека сакате да го избришете профилот?</h1>
+                <button onclick="deleteAccount()" class="button" id="confirmDelete" style="background-color: red">Да</button>
+                <button id="cancel" class="button" onclick="closeConfirmDelete()">Не</button>
             </div>
         </div>
-        <button class="button" id="pswdChange">Change password</button>
-        <button class="button" style="background-color: red" id="deleteAcc" onclick="confirmDelete()">Delete Account</button>
+        <button class="button" style="background-color: red" id="deleteAcc" onclick="confirmDelete()">Избриши профил</button>
     </div>
 </div>

frontend/js/formHandler.js

@@ -51 +51 @@
                 const dataList = document.getElementById('givenOptions');
                 dataList.innerHTML = '';
+
                 if (data.length === 0) {
                     const wrapper = document.createElement('div');
@@ -66 +67 @@
                         img.src = item.imgSrc || '';
                         optionDiv.appendChild(img);
-                        const WrapperDiv = document.createElement('div');
-                        optionDiv.appendChild(WrapperDiv);
+                        const wrapperDiv = document.createElement('div');
+                        optionDiv.appendChild(wrapperDiv);
 
                         const nameParagraph = document.createElement('p');
                         nameParagraph.id = 'name';
                         nameParagraph.textContent = item.hotelName || 'N/A';
-                        WrapperDiv.appendChild(nameParagraph);
+                        wrapperDiv.appendChild(nameParagraph);
 
                         const countryParagraph = document.createElement('p');
@@ -78 +79 @@
                         countryParagraph.style.fontSize = '20px';
                         countryParagraph.textContent = item.country || 'N/A';
-                        WrapperDiv.appendChild(countryParagraph);
+                        wrapperDiv.appendChild(countryParagraph);
 
                         const dateParagraph = document.createElement('h2');
                         dateParagraph.id = 'date';
                         dateParagraph.textContent = item.dateRange || 'N/A';
-                        WrapperDiv.appendChild(dateParagraph);
+                        wrapperDiv.appendChild(dateParagraph);
 
                         const peopleParagraph = document.createElement('p');
                         peopleParagraph.id = 'numPeople';
                         peopleParagraph.textContent = item.numPeople === 1 ? item.numPeople + " лице" : item.numPeople + " лица";
-                        WrapperDiv.appendChild(peopleParagraph);
+                        wrapperDiv.appendChild(peopleParagraph);
 
                         const priceHeading = document.createElement('h1');
                         priceHeading.textContent = 'Цена:';
-                        WrapperDiv.appendChild(priceHeading);
+                        wrapperDiv.appendChild(priceHeading);
                         const priceParagraph = document.createElement('h2');
                         priceParagraph.id = 'price';
                         priceParagraph.textContent = (item.price || 0) + " EUR";
-                        WrapperDiv.appendChild(priceParagraph);
+                        wrapperDiv.appendChild(priceParagraph);
 
                         const infoDiv = document.createElement('div');
@@ -110 +111 @@
                         infoDiv.appendChild(amenities);
                         optionDiv.appendChild(infoDiv);
+
+                        const changesDiv = document.createElement('div');
+                        item.changes.forEach(change => {
+                            const changeParagraph = document.createElement('p');
+                            changeParagraph.textContent = change.attribute + " changed from " + change.oldValue + " to " + change.newValue;
+                            changesDiv.appendChild(changeParagraph);
+                        });
+                        optionDiv.appendChild(changesDiv);
 
                         const link = document.createElement('a');

frontend/js/siteFlow.js

@@ -168 +168 @@
         .then(data => {
             console.log('Option saved:', data);
-            // Update the UI to reflect that the option was saved
             updateFavoriteButtons();
         })
@@ -243 +242 @@
                 tripDiv.appendChild(price);
 
+                // Add change indicator
+                if(trip.changes && trip.changes.length > 0) {
+                    const changeDiv = document.createElement('div');
+                    changeDiv.classList.add('changes');
+                    trip.changes.forEach(change => {
+                        const changeParagraph = document.createElement('p');
+                        changeParagraph.textContent = `${change.attribute} се смени од ${change.oldValue} во ${change.newValue}`;
+                        changeDiv.appendChild(changeParagraph);
+                    });
+                    tripDiv.appendChild(changeDiv);
+                }
+
                 savedTripsList.appendChild(tripDiv);
             });
-
 
             const priceChangesList = document.getElementById('priceChangesList');
@@ -258 +268 @@
                 });
             } else {
-                priceChangesList.textContent = "нема промена на цената.";
+                priceChangesList.textContent = "нема промена во зачуваните патувања.";
             }
         })
@@ -265 +275 @@
         });
 }
+
 function removeFromSaved(optionId) {
     const userEmail = sessionStorage.getItem('user').replace(/^"|"$/g, '');