Changeset 8a947b9 for src/main/resources/static/FlightSearch.html

Timestamp:

03/16/25 20:56:44 (3 months ago)

Author:

ste08 <sjovanoska@…>

Branches:

master

Children:

3a74959

Parents:

c064a42

Message:

Notifications + triggers!

File:

• src/main/resources/static/FlightSearch.html (modified) (7 diffs)

src/main/resources/static/FlightSearch.html

@@ -10 +10 @@
     <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'>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
     <style>
         body {
@@ -212 +213 @@
             color:white;
         }
+
+        .notification-badge {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background-color: red;
+            color: white;
+            border-radius: 50%;
+            padding: 0.3em;
+            font-size: 0.8em;
+        }
+
+        button i {
+            font-size: 24px;
+            color: #333;
+            position: relative;
+        }
+
+        .notifications-popup {
+            position: absolute;
+            top: 50px;
+            right: 0;
+            background: white;
+            border: 1px solid #ddd;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            width: 300px;
+            max-height: 400px;
+            overflow-y: auto;
+            padding: 10px;
+            z-index: 9999;
+        }
+
+        .notifications-popup ul {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        .notifications-popup li {
+            padding: 10px;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .notifications-popup button {
+            background-color: #4CAF50; /* Green */
+            color: white;
+            padding: 10px;
+            border: none;
+            cursor: pointer;
+            margin-top: 10px;
+        }
+
+        .notifications-popup button:hover {
+            background-color: #45a049;
+        }
     </style>
 </head>
@@ -223 +278 @@
         <button @click="goToReports">Monthly Report</button>
         <button @click="home">Log Out</button>
+
+        <button @click="toggleNotifications">
+            <i class="fas fa-bell"></i>
+            <span v-if="unreadNotifications > 0" class="notification-badge">{{ unreadNotifications }}</span>
+        </button>
     </header>
 
@@ -291 +351 @@
         </div>
     </div>
+
+    <div v-if="notificationsVisible" class="notifications-popup">
+        <ul>
+            <li v-for="notification in notifications" :key="notification.message">
+                {{ notification.message }}
+            </li>
+        </ul>
+        <button @click="markAllAsRead">Mark All as Read</button>
+    </div>
 </div>
 
@@ -310 +379 @@
             issueDescription: '',
             userId:'',
-            wishlisted:false
+            wishlisted:false,
+            unreadNotifications: 0,
+            notifications: [],
+            notificationsVisible: false,
         },
         computed: {
@@ -319 +391 @@
 
         methods: {
+            toggleNotifications() {
+                this.notificationsVisible = !this.notificationsVisible;
+            },
+            fetchNotifications() {
+                console.log('Fetching notifications for userId:', this.userId);
+                axios.get(`/api/notifications/${this.userId}`)
+                    .then(response => {
+                        this.notifications = response.data;
+                        this.unreadNotifications = this.notifications.filter(n => !n.read).length;
+                    })
+                    .catch(error => {
+                        console.error('Error fetching notifications:', error);
+                    });
+            },
             async searchFlights() {
                 this.isContainerVisible = !this.isContainerVisible;
@@ -455 +541 @@
                     console.error("Error fetching flights", error);
                 });
-
+            this.fetchNotifications();
         }
     });