Notes

// drop downs
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
});

// counter for new cards
var cardNum = 0;


function AddAnnouncement(){

cardNum +=1;
var userfullname = $("#userfullname").text();
var networkID = $("#networkID").text();

var priority = $("#AddNewPriority").text();
var system = $("#AddNewSystemSelectionButton").text();
var input = $("#AddNewTextInput").val();

var formattedDate = new Date(Date.now()).toLocaleString('en-US', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit', hour12: true });

addNewCard(formattedDate, priority, userfullname,networkID+"@company.com", "Application Development", "[email protected]", system, input, cardNum, null, null );

var body=
`New Post on Bulletin Board

${system} (${priority})

${input}

${userfullname} (${networkID})
${formattedDate}`;
send(body);
return false;
}


function send(body) {
var sendTOlist = ['phonenumber','phonenumber'];
var content = body;
var networkID = $("#networkID").text();
console.log(sendTOlist);
//ajax call
$.ajax({
type: "POST",
url: "endpoint",
data: JSON.stringify({ networkID: networkID, sendTo: sendTOlist, body: body}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (htx, status, error) {
console.log(htx);
console.log(status);
console.log(error);
}
});
return false;
}

function unpin(elementID){
$("#card"+elementID).addClass("no-show");
return false;
}

function addNewCard(formattedDate ,Priority, PersonName, PersonEmail, PersonGroupName, PersonGroupEmail, system, Input, CardCountNum, NotifiedPersonsList, CommentersList) {
// Prepare the Notified Persons list
var NotifiedPersonsHTML = '';
if(NotifiedPersonsList != null){
NotifiedPersonsList.map((person, index) => {
return `<li class="list-group-item">
<div class="row">
<div class="col-4 border-right">
<div class="row">
<span class="widget-49-pro-title">${person.Name})</span>
</div>
<div class="row">
<span class="widget-49-meeting-time">${person.PositionName}</span>
</div>
</div>
<div class="col-8" style="align-self: center;">
<div class="row">
<img src="images/icons/${person.EmailFlag ? 'Tick' : 'X'}.png" height="25">
<span class="widget-49-pro-title">Email</span>
<span class="widget-49-meeting-time">${person.EmailDateTime}</span>
</div>
<div class="row">
<img src="images/icons/${person.SMSFlag ? 'Tick' : 'X'}.png" height="25">
<span class="widget-49-pro-title">SMS</span>
<span class="widget-49-meeting-time">${person.SMSDateTime}</span>
</div>
</div>
</div>
</li>`;
}).join('');
}

// Prepare the Commenters list
var CommentersHTML = '';
if(CommentersList != null){
CommentersList.map((commenter, index) => {
if (commenter.FollowUpFlag) {
return `<li class="list-group-item system-message">
<span class="widget-49-meeting-time">${commenter.DateTime}</span><br>
<span class="widget-49-meeting-time">${commenter.Name} has requested a Follow-Up on this.</span>
</li>`;
} else {
return `<li class="list-group-item">
<div class="row">
<div class="col-4 border-right">
<div class="row">
<span class="widget-49-pro-title">${commenter.Name}</span>
</div>
<div class="row">
<span class="widget-49-meeting-time">${commenter.DateTime}</span>
</div>
</div>
<div class="col-8" style="align-self: center;">${commenter.Body}</div>
</div>
</li>`;
}
}).join('');
}
// Prepare the HTML
let html = `
<div class="col-lg-4" id="card${CardCountNum}">
<div class="card card-${Priority} card-margin">
<div class="card-body ">
<div class="widget-49">
<div class="widget-49-title-wrapper">
<img src="images/systems/sowa.png" alt="Avatar" class="avatar">
<div class="widget-49-meeting-info">
<span class="widget-49-pro-title"><a href="mailto:${PersonEmail}">${PersonName}</a></span>
<span class="widget-49-meeting-time"><a href="mailto:${PersonGroupEmail}">${PersonGroupName}</a></span>
<span class="widget-49-meeting-time">${formattedDate}</span>
</div>
<div class="pointer" id="pin${CardCountNum}" onclick="return unpin('${CardCountNum}');">
<img class="card-pin" src="images/icons/pin.png" height="35">
</div>
</div>
<h4 class="card-title">${system}</h4>
<div class="row align-items-end">
<div class="col-10">
<p>${Input}</p>
</div>
<div class="col-2">
<p class="row pointer">
<img data-toggle="collapse" href="#Comment${CardCountNum}" src="images/icons/comment.png" height="25">
<img data-toggle="collapse" href="#Notif${CardCountNum}" src="images/icons/alert.png" height="25">
</p>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div id="Notif${CardCountNum}" class="panel-collapse collapse">
<h5><b>Notified</b></h5>
<ul class="list-group comments-area">
${NotifiedPersonsHTML}
</ul>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-sm btn-secondary" type="button">SMS</button>
</div>
<div class="input-group-append">
<button class="btn btn-sm btn-primary" type="button">Email</button>
</div>
</div>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div id="Comment${CardCountNum}" class="panel-collapse collapse">
<h5><b>Comments</b></h5>
<ul class="list-group comments-area">
${CommentersHTML}
</ul>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-sm btn-secondary" type="button">Follow-Up</button>
</div>
<div class="input-group-append">
<button class="btn btn-sm btn-primary" type="button">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`;

// Inject the HTML into the div with id "MainBBRow"
document.getElementById('MainBBRow').innerHTML += html;
}

function getNameAndEmail(){
var networkID = $("#networkID").text();

//ajax call
$.ajax({
type: "POST",
url: "endpoint",

data: JSON.stringify({networkID: networkID, input: vionum.value }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('#tool_result').empty();
if (data.d == null || data.d == '') {
$('#tool_result').append('Empty Response.');
$('#tool_result').removeClass();
$('#tool_result').addClass('card card-outline card-danger');
}
else {
$('#tool_result').append(data.d);
$('#tool_result').removeClass();
$('#tool_result').addClass('card card-outline card-success');
}

$('#tool_loading').addClass('no-show');
},
error: function (htx, status, error) {
$('#tool_result').empty();
alert(htx.responseText);
console.log(htx.responseText);
$('#tool_result').append('Backend connection error.');
$('#tool_loading').addClass('no-show');
$('#tool_result').removeClass();
$('#tool_result').addClass('card card-outline card-danger');
}

});
}