Notes

// Function to load announcements
function loadAnnouncements() {
$.ajax({
url: '/api/announcements',
method: 'GET',
success: function (data) {
var announcementsHtml = '';

data.forEach(function (announcement) {
const systemLogo = "JsAndcss/imgs/"+announcement.system+".png";//getSystemLogo(announcement.system);

announcementsHtml += `
<div class="col-lg-4 mb-4 announcement-card" id="announcement-${announcement.id}">
<div class="card card-important card-margin">
<div class="card-body">
<div class="widget-49">
<!-- Announcement Card -->
<div class="widget-49-title-wrapper">
<img src="${systemLogo}" alt="Avatar" class="avatar">
<div class="widget-49-meeting-info">
<!-- Network ID -->
<span class="widget-49-pro-title"><a href="mailto:${announcement.networkID}@abc.com">${announcement.networkID}</a></span>
<!-- Static Field -->
<span class="widget-49-meeting-time"><a href="mailto:[email protected]">a computer related field</a></span>
<!-- Timestamp -->
<span class="widget-49-meeting-time">${new Date(announcement.timestamp).toLocaleString()}</span>
</div>
<div class="pointer toggle-pin" data-id="${announcement.id}" data-pinned="${announcement.pinned}">
<img class="card-pin" src="JsAndcss/imgs/pin.png" height="35">
</div>
</div>
<!-- System Name -->
<h4 class="card-title">${announcement.system}</h4>
<div class="row align-items-end">
<div class="col-10">
<!-- Announcement Content -->
<ol class="widget-49-meeting-points">
<li class="widget-49-meeting-item"><span>${announcement.content}</span></li>
</ol>
</div>
<div class="col-2">
<!-- Collapsible Buttons -->
<p class="row pointer">
<img data-toggle="collapse" href="#Comment${announcement.id}" src="JsAndcss/imgs/chat.png" height="25">
<img data-toggle="collapse" href="#Notif${announcement.id}" src="JsAndcss/imgs/bell.png" height="25">
</p>
</div>
</div>
<!-- Collapsible Notifications -->
<div class="panel-group">
<div class="panel panel-default">
<div id="Notif${announcement.id}" class="panel-collapse collapse">
<h5><b>Notified</b></h5>
<ul class="list-group comments-area" id="notificationsList${announcement.id}">
<!-- Notifications will be dynamically populated here -->
</ul>
<!-- Notification Input -->
<div class="input-group">
<input id="notifyNetworkId${announcement.id}" type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-sm btn-secondary notify-sms" type="button" data-id="${announcement.id}">SMS</button>
</div>
<div class="input-group-append">
<button class="btn btn-sm btn-secondary notify-email" type="button" data-id="${announcement.id}">Email</button>
</div>
<div class="input-group-append">
<button class="btn btn-sm btn-secondary send-notification" type="button" data-id="${announcement.id}">Send</button>
</div>
</div>
<div for="notifyNetworkId${announcement.id}">
<div class="UserExist no-show">
<img src="images/icons/Tick.png" height="15">
<h5 id="fullName"></h5>
</div>
<img class="UserLoad no-show" src="images/loader.gif" height="42" width="42">
</div>
</div>
</div>
</div>
<!-- Collapsible Comments -->
<div class="panel-group">
<div class="panel panel-default">
<div id="Comment${announcement.id}" class="panel-collapse collapse">
<h5><b>Comments</b></h5>
<ul class="list-group comments-area" id="commentsList${announcement.id}">
<!-- Comments will be dynamically populated here -->
</ul>
<!-- Comment Input -->
<div class="input-group addCommentForm" data-announcement-id="${announcement.id}">
<input type="text" class="form-control commentContent" aria-label="Text input with dropdown button" required>
<div class="input-group-append">
<button class="btn btn-sm btn-secondary follow-up" data-id="${announcement.id}" type="button">Follow-Up</button>
</div>
<div class="input-group-append">
<button class="btn btn-sm btn-primary addCommentButton" type="submit">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`;

// Load comments, follow-ups, and notifications for each announcement
loadCommentsAndFollowUps(announcement.id);
loadNotifications(announcement.id);
});

// Insert the generated HTML into the #announcements container.
$('#announcements').html(announcementsHtml);
},
error: function (error) {
console.error('Error fetching announcements:', error);
// Optionally, display an error message on the page.
$('#announcements').html('<p>Failed to load announcements. Please try again later.</p>');
}
});
}