<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="/loadjquery.js"></script>
<script>
console.log("HELLO");
//Get DATA for the appropriate table
</script>
<script type="text/javascript" src="/calcTableSum.js"></script>
<script src="/dashboard.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="col-md-3 dashboard">You can change the numbers in grey</div>
<div>
<table id="AdvStaffing" border="1" width="100%" height="300px">
<tr class="tblHeader">
<td colspan="5">Advisor Staffing</td>
</tr>
<tr class="subHeader">
<td>Region</td>
<td>Pilot</td>
<td>Name</td>
<td>Trainer</td>
</tr>
</table>
</div>
.tblHeader{
color:#fff;
background-color:#000066;
font-weight:bold;
}
.subHeader{
background-color:#CFECEC;
font-weight:bold;
}
.eastern{
color:#4B0082 !important;
font-size: 12px !important;
font-weight:bold !important;
}
.regionCell{
font-size: 12px !important;
font-weight:bold !important;
}
.southern{
color:#3cb371 !important;
font-size: 12px !important;
font-weight:bold !important;
}
.central{
color:#FFA500 !important;
font-size: 12px !important;
font-weight:bold !important;
}
.western{
color:#1E90FF !important;
font-size: 12px !important;
font-weight:bold !important;
}
.europe{
color:#800000 !important;
font-size: 12px !important;
font-weight:bold !important;
}
.asia{
color:#FF0000 !important;
font-size: 12px !important;
font-weight:bold !important;
}
.app{
/*display:flex;
flex-wrap: wrap;
justify-content:space-evenly;
margin: auto;*/
padding: 10px;
text-align: center;
}
div.dashboard{
margin:5px;
display:inline-block;
/*background-color:#eee;*/
}
a.dashLink{
color:#ffff00;
}
input{
border: 0px solid #fff !important;
width: 80px !important;
text-align:center !important;
background-color: #eee !important;
}
#workForceUtiliazation input{
width: 95px !important;
}
input[class$="column0"]{
width:63px !important;
background-color: #fff !important;
}
.dashboard table {
height: 290px;
width: 300px;
}
#h4title{
color:red;
margin-left:15px;
}
/*.row {
width: 850px;
}*/
#dashSupportDocument{
font-size:14px;
font-weight:bold;
}
function getColumnSum(tbl) {
var colSum = 0;
tbl.rows.forEach(function(row) {
colSum = colSum + row.cells[1].children[0].value;
});
return colSum;
}
function getClass(region) {
if (region === "Eastern") {
return "eastern";
}
if (region === "Southern") {
return "southern";
}
if (region === "Central") {
return "central";
}
if (region === "Western") {
return "western";
}
if (region === "Europe") {
return "europe";
}
if (region === "Asia") {
return "asia";
}
}
function createInput(value, { size, className, readonly = false }) {
var attrs = [];
attrs.push("value='" + value + "'");
if (size) {
attrs.push("size='" + size + "'");
}
if (className) {
attrs.push("class='" + className + "'");
}
if (readonly) {
attrs.push("readonly");
}
return "<input " + attrs.join(" ") + "'>";
}
function buildTable(data, tblIDName) {
var tblRef = document.querySelector(tblIDName);
data.forEach(function(item) {
var newRow = tblRef.insertRow(-1);
if (tblIDName === "#AdvStaffing") {
var cell = newRow.insertCell(0);
cell.innerHTML =
"<input type='text' size='7' class='" +
getClass(item.Region) +
"' readonly value='" +
item.Region +
"'>";
var cell2 = newRow.insertCell(1);
cell2.innerHTML =
"<input type='text' size='5' style='text-align:center' class='" +
getClass(item.Region) +
"' data-id='" +
item.ID +
"' data-columnName='Current' style='width:65px' value='" +
item.Pilot +
"'>";
var cell3 = newRow.insertCell(2);
cell3.innerHTML =
"<input type='text' size='5' style='text-align:center' class='" +
getClass(item.Region) +
" column2' data-id='" +
item.ID +
"' data-columnName='Deployed' style='width:55px' value='" +
item.Name +
"'>";
var cell4 = newRow.insertCell(3);
cell4.innerHTML =
"<input type='text' size='5' style='text-align:center' class='" +
getClass(item.Region) +
"' data-id='" +
item.ID +
"' data-columnName='Vacant' style='width:55px' value='" +
item.Trainer +
"'>";
}
});
}
function getData(listName) {
var root = "https://my-json-server.typicode.com/isogunro/dashboard/posts";
$.ajax({
url: root,
method: "GET"
}).then(function showData(data) {
if (listName === "Advisor Staffing") {
buildTable(data, "#AdvStaffing");
$("#AdvStaffing").triggerHandler("change");
}
});
}
function sum(deployed, vacant) {
var total = parseInt(deployed) + parseInt(vacant);
return total;
}
function getColSum(cInputs) {
var colSum = 0;
Array.from(cInputs).forEach(function(input) {
colSum += parseInt(input.value);
});
return colSum;
}
function calculate(tableNode) {
var inputs = [
tableNode.querySelectorAll("tr:not(:last-child) td:nth-child(2) input"),
tableNode.querySelectorAll("tr:not(:last-child) td:nth-child(3) input"),
tableNode.querySelectorAll("tr:not(:last-child) td:nth-child(4) input")
];
inputs.forEach(function(input, index) {
var colSum = getColSum(input);
var totalRow = tableNode.querySelector("tr:last-child");
totalRow.cells[index + 1].innerHTML = colSum;
});
}
function tableChangeHandler(e) {
calculate(
$(e.target)
.closest("table")
.get(0)
);
}
getData("Advisor Staffing");
$(function() {
$("#AdvStaffing").on("change", tableChangeHandler);
});