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