Changeset 62bba0c for src/main/resources

Timestamp:

02/23/25 20:37:56 (3 months ago)

Author:

ste08 <sjovanoska@…>

Branches:

master

Children:

fda671c

Parents:

de83113

git-author:

ste08 <sjovanoska@…> (02/23/25 20:37:23)

git-committer:

ste08 <sjovanoska@…> (02/23/25 20:37:56)

Message:

Report working, Wishlist partly working.

Location:

src/main/resources

Files:

• static/FlightSearch.html (modified) (6 diffs)
• static/TopMonthlyReport.html (deleted)
• static/ViewReport.html (added)
• static/Wishlist.html (modified) (4 diffs)
• templates/WishlistPage.html (deleted)

src/main/resources/static/FlightSearch.html

@@ -113 +113 @@
             padding: 10px;
             color:white;
-            font-family: Cambria;
+            font-family: Cambria,sans-serif;
         }
         .search {
@@ -170 +170 @@
             align-items: center;
             justify-content: center;
+            z-index: 1000;
+            overflow:hidden;
+        }
+
+        .popup textarea{
+            width: 100%;
+            padding: 10px;
+            margin-top: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            resize: vertical;
+            box-sizing: border-box;
         }
 
@@ -209 +221 @@
         <button @click="showReportPopup">Report Issue</button>
         <button @click="goToWishlistPage">🤍</button>
+        <button @click="goToReports">Monthly Report</button>
         <button @click="home">Log Out</button>
     </header>
@@ -296 +309 @@
             showPopup: false,
             issueDescription: '',
-            userId:''
+            userId:'',
+            wishlisted:false
         },
         computed: {
@@ -363 +377 @@
                 window.location.href = '/';
             },
+            goToReports(){
+                window.location.href = '/views'
+            },
             async toggleWishlist(flight) {
                 flight.wishlisted = !flight.wishlisted;
+                this.$set(this.flights, this.flights.indexOf(flight), flight);
                 const wishlistData = {
-                    targetId: flight.flightId,
-                    wishlisted: flight.wishlisted
+                    userId: parseInt(this.userId),
+                    targetId: flight.flightID
                 };
-                try {
-                    await axios.post('/api/wishlists', wishlistData);
-                } catch (error) {
-                    console.error("Error updating wishlist:", error);
+                console.log(wishlistData);
+                if (!flight.wishlisted) {
+                    try {
+                        await axios.delete('/api/wishlists', { params: wishlistData });
+                        console.log("Removed from wishlist");
+                    } catch (error) {
+                        console.error("Error removing from wishlist:", error);
+                    }
+                } else {
+                    try {
+                        await axios.post('/api/wishlists/add', wishlistData);
+                        console.log("Added to wishlist");
+                    } catch (error) {
+                        console.error("Error adding to wishlist:", error);
+                    }
                 }
             },
-            goToWishlistPage() {
-                window.location.href = '/api/wishlists';
+            async goToWishlistPage() {
+                window.location.href = `/api/wishlists?userId=${encodeURIComponent(this.userId)}`;
+
             },
             showReportPopup() {
@@ -387 +417 @@
                 if (this.issueDescription.trim()) {
                     const reviewData = {
-                        userID: this.userId,
+                        userId: this.userId,
                         subject: "Issue Report",
                         description: this.issueDescription

src/main/resources/static/Wishlist.html

@@ -4 +4 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SkyChase-mk</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css'>
+
+    <title>SkyChase - Wishlist</title>
     <style>
         body {
@@ -24 +29 @@
             display: flex;
             align-items: center;
-            background-color:rebeccapurple;
+            background-color: rebeccapurple;
             padding: 10px;
             width: 100%;
@@ -73 +78 @@
             background-color: #0056b3;
         }
+
         .adminlogin {
-            top:0;
+            top: 0;
             right: 0;
             background-color: rebeccapurple;
-            border:0;
-            color:white;
+            border: 0;
+            color: white;
             padding: 0 1200px;
+        }
+
+        .wishlist-content {
+            margin-top: 60px;
+            color: white;
+        }
+
+        ul {
+            list-style-type: none;
+        }
+
+        li {
+            margin: 10px 0;
+            font-size: 18px;
         }
     </style>
@@ -90 +110 @@
 </div>
 
-<div class="buttons">
-    <h1>Test</h1>
+<div class="wishlist-content">
+    <h1>Your Wishlist</h1>
+    <ul>
+        <li v-if="wishlist.length === 0">Your wishlist is empty!</li>
+        <li v-else v-for="item in wishlist" :key="item.wishlistID">{{ item.targetId }} || {{item.userId}}</li>
+    </ul>
 </div>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+
+<script>
+    new Vue({
+        el: '#app',
+        data: {
+            userId: ''
+        },
+        mounted() {
+            const params = new URLSearchParams(window.location.search);
+            this.userId = params.get("userId");
+            this.fetchWishlist();
+        },
+        async fetchWishlist() {
+            try {
+                const response = await fetch(`/api/wishlists/${this.userId}`);
+                const wishlist = await response.json();
+
+                const wishlistElement = document.getElementById('wishlist');
+                const emptyMessage = document.getElementById('empty-message');
+
+                if (wishlist.length === 0) {
+                    emptyMessage.style.display = 'block';
+                } else {
+                    emptyMessage.style.display = 'none';
+                    wishlistElement.innerHTML = wishlist.map(item => `<li>${item.name}</li>`).join('');
+                }
+            } catch (error) {
+                console.error('Error fetching wishlist:', error);
+            }
+        }
+    })
+    //window.onload = fetchWishlist;
+</script>
 </body>
 </html>