Changeset 62bba0c for src/main/resources/static/Wishlist.html

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.

File:

• src/main/resources/static/Wishlist.html (modified) (4 diffs)

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>