1 2class NotificationState { 3 constructor() { 4 this.email = ""; 5 this.fullName = ""; 6 this.companyName = ""; 7 this.notificationsChannel = ""; 8 this.notificationService = null; 9 } 10 11 setNotificationService(notificationService) { 12 this.notificationService = notificationService; 13 } 14 15 setEmail(email) { 16 this.email = email; 17 } 18 19 setFullName(name) { 20 this.fullName = name; 21 } 22 23 setCompanyName(name) { 24 this.companyName = name; 25 } 26 27 setNotificationsChannel(channel) { 28 this.notificationsChannel = channel; 29 } 30 31 publishNotification(type, title, text) { 32 console.log("Sending notification..."); 33 this.notificationService.sendGroupNotification({title, text}); 34 } 35 36 publishDirectNotification(channelId, message) { 37 console.log("Sending direct notification..."); 38 this.notificationService.sendDirectNotification(channelId, message); 39 } 40 41 fetchNotifications() { 42 console.log("Fetching all notifications..."); 43 return this.notificationService.fetchNotifications(this.notificationsChannel); 44 } 45} 46 47function formatTimestamp(timetoken) { 48 const timestampInSeconds = Math.floor(timetoken / 10000000); 49 const date = new Date(timestampInSeconds * 1000); 50 const options = { 51 month: 'long', 52 day: 'numeric', 53 year: 'numeric', 54 hour: 'numeric', 55 minute: 'numeric', 56 hour12: true 57 }; 58 const formattedDate = date.toLocaleDateString('en-US', options); 59 return formattedDate; 60} 61 62// Notification Components 63function returnAvatar(type) { 64 if (type == 'addCargo') { 65 return ( 66 ` 67 <div class="avatar-xs me-3"> 68 <span class="avatar-title bg-primary rounded-circle font-size-16"> 69 <i class="mdi mdi-cart-outline"></i> 70 </span> 71 </div> 72 ` 73 ) 74 } 75 76 else if (type == 'cargoApproval') { 77 return ( 78 ` 79 <div class="avatar-xs me-3"> 80 <span class="avatar-title bg-success rounded-circle font-size-16"> 81 <i class="mdi mdi-check-bold"></i> 82 </span> 83 </div> 84 ` 85 ) 86 } 87 88 else if (type == 'cargoRejection') { 89 return ( 90 ` 91 <div class="avatar-xs me-3"> 92 <span class="avatar-title bg-danger rounded-circle font-size-16"> 93 <i class="mdi mdi-cancel"></i> 94 </span> 95 </div> 96 ` 97 ) 98 } 99 100 else { 101 return ( 102 ` 103 <div class="avatar-xs me-3"> 104 <span class="avatar-title bg-danger rounded-circle font-size-16"> 105 <i class="mdi mdi-email-open-outline"></i> 106 </span> 107 </div> 108 ` 109 ) 110 } 111} 112 113function notificationComponent(notification) { 114 const template = document.createElement('template') 115 template.innerHTML = ( 116 ` 117 <a href="#" class="text-reset notification-item"> 118 <div class="d-flex align-items-start"> 119 <div class="avatar-xs me-3"> 120 <span class="avatar-title bg-primary rounded-circle font-size-16"> 121 <i class="mdi mdi-bell-outline"></i> 122 </span> 123 </div> 124 <div class="flex-1"> 125 <h6 class="mb-1 font-size-15">${notification.title}</h6> 126 <div class="text-muted"> 127 <p class="mb-1 font-size-12">${notification.text}</p> 128 </div> 129 </div> 130 </div> 131 </a> 132 ` 133 ).trim() 134 135 return template.content.firstChild; 136} 137 138function notificationCardComponent(notification, timetoken) { 139 return ( 140 ` 141 <div class="card"> 142 <div class="card-body notification"> 143 <span class="filled-icon primary me-4"> 144 <i class="mdi mdi-bell"></i> 145 </span> 146 <div> 147 <h4><span class="me-1 fs-4">${notification.title}</span> | <span class="fs-4 ms-1">${formatTimestamp(timetoken)}</span></h4> 148 <hr> 149 <p>${notification.text}</p> 150 </div> 151 </div> 152 </div> 153 ` 154 ) 155} 156
157const notificationState = new NotificationState(); 158 159const notificationsContainer = document.querySelector("#notifications-container") 160const notificationEl = document.querySelector("#notification-count-el") 161const notificationBell = new Audio("assets/audio/notification-sound-7062.mp3") 162 163// Get user's profile information (e.g email) 164getData({ 165 appType: appTypes.GET_PROFILE 166}) 167 .then(res => { 168 const data = res.companyData; 169 const userEmail = data.email; 170 const companyName = data.company_name; 171 const profilePic = data.profile_pic; 172 const userName = `${data.first_name} ${data.last_name}`; 173 notificationState.setEmail(userEmail); 174 notificationState.setCompanyName(companyName); 175 notificationState.setFullName(userName); 176 const notifications_channel = `${data.parentEmail}${notificationChannelSuffix}`; 177 178 const notificationService = new NotificationService({ 179 projectId: "651ab6c3-fa4a-40ee-967a-c4a459ca3d03", 180 projectKey: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2NTFhYjZjMy1mYTRhLTQwZWUtOTY3YS1jNGE0NTljYTNkMDMiLCJpYXQiOjE3NjY5NjEyMDh9.Fotdsq8i6Jq7ibbb3Twn3tu-YuEC5__pEKRm98tJTH8", 181 userId: `${data.parentEmail}${notificationChannelSuffix}`, 182 channelId: `${data.parentEmail}${notificationChannelSuffix}`, 183 userAuth: { 184 endpoint: "/client", 185 params: { 186 appType: "verifyNotificationServiceUserId" 187 }, 188 credentials: "include", 189 } 190 }); 191 192 notificationState.setNotificationService(notificationService); 193 194 notificationService.connect(); 195 196 notificationService.subscribe([notifications_channel, appNotificationsChannel]); 197 198 notificationService.addNotificationListener((data) => { 199 if (data.senderUserId == notifications_channel) { 200 return; 201 } 202 console.log("Notification Received: ", data); 203 notificationsContainer.insertBefore(notificationComponent(data.message), notificationsContainer.firstChild) 204 205 notificationBell.play(); 206 207 notificationEl.classList.remove("d-none") 208 }); 209 210 // notificationService.sendGroupNotification({title: `${companyName} Connected`, text: `${userName} of ${companyName} is online`}); 211 })
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.