EnVisageOnline/Main/Source/EnVisage/Views/Shared/amCharts/_cardSummary.cshtml

623 lines
23 KiB
Plaintext

@* ROW 2 COL 2 - CARD: SUMMARY --------------------------------- *@
<div class="pv-card pv-layout-row2col2">
<div class="container no-padding-hr">
<div class="pv-title">Project Summary</div>
<div style="margin: 8px 6px 12px 6px; overflow: auto;">
<table id="pv-projsumm">
<tr>
<td class="summary-table-label-cell summary-table-label-cel-big">Total Number of Projects</td>
<td class="summary-table-value-cell summary-table-label-cel-smal" id="txtTotalNumberOfProjects">
<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
<a class="projectsSummaryItem" href="javascript:showTotalNumberOfProjects()" style="display:none;">0</a>
</td>
</tr>
<tr>
<td class="summary-table-label-cell">Project Weeks</td>
<td class="summary-table-value-cell" id="txtProjectWeeks">
<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
<a class="projectsSummaryItem" href="javascript:showProjectWeeks()" style="display:none;">0</a>
</td>
</tr>
<tr>
<td class="summary-table-label-cell pv-bold">Net Impact</td>
<td class="summary-table-value-cell pv-bold" id="txtTotalNetImpact">
<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
<a class="projectsSummaryItem" href="javascript:showNetImpact()" style="display:none;">0</a>
</td>
</tr>
<tr>
<td class="summary-table-label-cell">Total Projected Revenue</td>
<td class="summary-table-value-cell" id="txtTotalProjectedRevenue">
<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
<a class="projectsSummaryItem" href="javascript:showTotalProjectedRevenue()" style="display:none;">0</a>
</td>
</tr>
<tr>
<td class="summary-table-label-cell">Total Projected Savings</td>
<td class="summary-table-value-cell" id="txtTotalProjectedSavings">
<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
<a class="projectsSummaryItem" href="javascript:showTotalProjectedSavings()" style="display:none;">0</a>
</td>
</tr>
<tr>
<td class="summary-table-label-cell">Total Project Cost</td>
<td class="summary-table-value-cell" id="txtTotalProjectCost">
<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
<a class="projectsSummaryItem" href="javascript:showTotalProjectCost()" style="display:none;">0</a>
</td>
</tr>
<tr>
<td class="summary-table-label-cell pv-bold">Remaining Resource Availability</td>
<td class="summary-table-value-cell pv-bold" id="totalResourceAvailability">
<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
<a class="projectsSummaryItem" href="javascript:showResourceAvailability()" style="display:none;">0%</a>
</td>
</tr>
<tr>
<td class="summary-table-label-cell">Percent Over Allocation</td>
<td class="summary-table-value-cell" id="percentOverAllocation">
<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
<a class="projectsSummaryItem" href="javascript:showResourceUsageGraphs()" style="display:none;">0%</a>
</td>
</tr>
<tr style="border-bottom: none;">
<td class="summary-table-label-cell" style="padding-bottom: 0px;">Percent Under Allocation</td>
<td class="summary-table-value-cell" style="padding-bottom: 0px;" id="percentUnderAllocation">
<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
<a class="projectsSummaryItem" href="javascript:showResourceUsageGraphs()" style="display:none;">0%</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<script id="loading-template" type="text/x-custom-template">
<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />
</script>
<script>
init.push(function () {
loadProjectsSummary();
$(window).on("resize", function () {
kendo.resize($("#cardTotalNumberOfProjects"));
});
});
function showResourceUsageGraphs() {
$('#cardOpt1').optimuse('drawMagnifyGlass', ['magnify-actual-full-screen'], false);
$('#cardOpt1').optimuse('drawResourceUsageGraph', 'chart-actual-full-screen', false);
$('#cardOpt1').optimuse('drawMagnifyGlass', ['magnify-planned-full-screen'], true);
$('#cardOpt1').optimuse('drawResourceUsageGraph', 'chart-planned-full-screen', true);
pv.chart.menu.maxmizeWin('Optimuse', true);
}
function showTotalProjectCost() {
var fieldsToDisplay = [
"ProjectName",
"Name",
"BUDirectCosts",
"TDDirectCosts",
"StrategicGoals",
"ProjectStatus",
"Duration"
];
showGrid("TotalProjectCost", fieldsToDisplay, "Total Project Cost");
}
function showTotalProjectedSavings() {
var fieldsToDisplay = [
"ProjectName",
"Name",
"CostSavings",
"ProjectNetImpact",
"ROIDate",
"HardSoftSavings",
"StrategicGoals"
];
showGrid("TotalProjectedSavings", fieldsToDisplay, "Total Projected Savings");
}
function showProjectWeeks() {
var fieldsToDisplay = [
"ProjectName",
"Name",
"Duration",
"StartDate",
"EndDate",
"ProjectDeadline",
"ProjectStatus"
];
showGrid("ProjectWeeks", fieldsToDisplay, "Project Weeks");
}
function showTotalProjectedRevenue() {
var fieldsToDisplay = [
"ProjectName",
"Name",
"ProjectedRevenue",
"ExpectedGrossMargin",
"CalculatedMargin",
"UseLMMargin",
"Duration"
];
showGrid("TotalProjectedRevenue", fieldsToDisplay, "Total Projected Revenue");
}
function showTotalNumberOfProjects() {
var fieldsToDisplay = [
"ProjectName",
"Name",
"StartDate",
"EndDate",
"Duration",
"ProjectDeadline",
"ProjectType",
"StrategicGoals",
"Priority"
];
showGrid("TotalNumberOfProjects", fieldsToDisplay, "Total Number of Projects");
}
function showNetImpact() {
var fieldsToDisplay = [
"ProjectName",
"Name",
"ProjectNetImpact",
"ProjectedRevenue",
"CostSavings",
"BUDirectCosts",
"Duration"
];
showGrid("NetImpact", fieldsToDisplay, "Net Impact");
}
function showResourceAvailability() {
var fieldsToDisplay = [
//"ExpenditureCategory",
//"TeamName",
"FirstName",
"LastName",
"AvailableHours",
"AllocatedHours",
"NonProjectTimeHours",
"ResourceAvailability"
];
showGrid("ResourceAvailability", fieldsToDisplay, "Resource Availability");
}
var currentGridName;
function showGrid(gridName, fieldsToDisplay, title) {
var grid = getGrid(gridName);
grid.fieldsToDisplay = fieldsToDisplay;
currentGridName = gridName;
grid.bind("dataBound", function (e) {
var gridName = e.sender.element.attr("id");
saveGridState(gridName);
var gridWidth = $("#" + gridName + " .k-grid-content table").width();
if (gridWidth) {
$("#" + gridName + " .k-grid-footer-wrap table").width(gridWidth);
} else {
$("#" + gridName + " .k-grid-footer-wrap table").width(""); //summary row width fix
}
});
var gridState = getGridState(gridName);
if (gridState) {
try {
var columnOrder = new Array();
$.each(grid.columns, function (index, column) {
var savedColumns = gridState.columns.filter(function (colState) {
return column.field == colState.field;
});
if (savedColumns.length > 0) {
var colIndex = gridState.columns.indexOf(savedColumns[0]);
columnOrder[colIndex] = column;
if (!savedColumns[0].hidden) {
column.width = savedColumns[0].width;
grid.showColumn(column.field);
} else {
grid.hideColumn(column.field);
}
} else {
grid.hideColumn(column.field);
}
});
for (var i = 0; i < columnOrder.length; i++) {
grid.reorderColumn(i, columnOrder[i]);
}
var options = grid.options;
options.columns = grid.columns.filter(function (col, index) {
var matchedFields = fieldsToDisplay.filter(function (field) {
return true;//col.field === field;
});
return matchedFields.length > 0;
});
options.dataSource = grid.dataSource;
grid.setOptions(options);
if (gridState.sort || gridState.group) {
grid.dataSource.query({
aggregate: grid.dataSource.aggregate(),
sort: gridState.sort,
group: $.map(gridState.group, function (group) {
return {
aggregates: grid.dataSource.aggregate(),
field: group.field,
dir: group.dir
}
}),
page: grid.dataSource.page(),
pageSize: gridState.pageSize
});
} else {
grid.dataSource.read();
}
}
catch (e) {
console.log('Error loading grid settings.');
}
} else {
$.each(fieldsToDisplay, function (index, field) {
var matchedColumns = grid.columns.filter(function (col) {
return col.field == field;
});
grid.showColumn(matchedColumns[0].field);
//grid.reorderColumn(index, matchedColumns[0]);
});
$.each(grid.columns, function (index, column) {
var matchedFields = fieldsToDisplay.filter(function (field) {
return column.field == field;
});
if (!matchedFields.length) {
grid.hideColumn(column.field);
}
//column.width = null; //to allow grid to set best fit for columns
});
var gridColumns = getOrderedColumns(grid);
for (var i = 0; i < gridColumns.length; i++) {
grid.reorderColumn(i, gridColumns[i]);
}
$("#" + gridName + " .k-grid-content").height("");
$("#" + gridName + " .k-grid-footer-wrap table").width("");
$("#" + gridName + " .k-grid-content table").width("");
$("#" + gridName + " .k-grid-header-wrap table").width("");
grid.dataSource.read();
}
$("#grid-options-dropdown").html("");
var group = grid.dataSource.group() || [];
$("#grid-options-dropdown").html($("#gridGroupByTeamDropDownItemTemplate").html());
var groupedByTeam = group.filter(function (g, index) {
return g.field == "TeamName";
}).length > 0;
$("#gridGroupByTeamSwitcher").prop("checked", groupedByTeam);
if (gridName == "ResourceAvailability") {
var groupedByExpenditureCategory = group.filter(function (g, index) {
return g.field == "ExpenditureCategory";
}).length > 0;
$("#gridGroupByExpenditureCategorySwitcher input").prop("checked", groupedByExpenditureCategory);
$("#gridGroupByExpenditureCategorySwitcher").show();
$("#gridPerformanceMode").hide();
$("#gridGroupByExpenditureCategorySwitcher input").switcher();
} else {
$("#gridGroupByExpenditureCategorySwitcher").hide();
$("#gridPerformanceMode").show();
var performanceMode = (!gridState) || gridState.performanceMode;
$("#gridPerformanceMode input").prop("checked", performanceMode);
$("#gridPerformanceMode input").switcher();
setGridPerformanceMode(performanceMode);
}
$("#gridGroupByTeamSwitcher").switcher();
$("#grid-options-dropdown").append($("#gridExport").html());
var dropDownItemTemplate = kendo.template($("#gridOptionsDropDownItemTemplate").html());
var gridColumns = getOrderedColumns(grid, true);
gridColumns = gridColumns.filter(function (col) {
return col.field != "TeamId" && col.field != "PerformanceColor" && col.field != "ScenarioStatus"
});
$.each(gridColumns, function (index, column) {
var result = dropDownItemTemplate({
field: column.field,
title: column.title,
checked: column.hidden ? "" : "checked"
});
$("#grid-options-dropdown").append(result);
});
updateColumnFooters(grid);
pv.chart.menu.maxmizeWin("TotalNumberOfProjects", true, true);
$("#grid-title").text(title);
$(grid.element).show();
$("#cardTotalNumberOfProjects").on("restored", function (e) {
$(grid.element).hide();
grid.unbind("dataBound");
currentGridName = null;
$("#cardTotalNumberOfProjects").hide();
});
}
function columnResize(e) {
if (e.column.width < 50) {
e.column.width = 50;
}
$("#" + currentGridName + " colgroup col").each(function () {
if ($(this).width() < 50) {
$(this).css("width", "50px");
}
});
setTimeout(function () {
saveGridState(currentGridName);
}, 50);
}
function columnReorder(e, gridName) {
setTimeout(function () {
saveGridState(gridName);
$('#' + gridName).data('kendoGrid').refresh();
}, 50);
}
function columnShowHide(e, gridName) {
setTimeout(function () {
$('#' + gridName).data('kendoGrid').refresh();
}, 50);
}
function getOrderedColumns(grid, hideServiceFields) {
var predefinedColumns = getPredefinedColumns(grid.columns, grid.fieldsToDisplay),
additionalColumns = getAdditionalColumns(grid.columns, grid.fieldsToDisplay);
return predefinedColumns.concat(additionalColumns);
}
function getPredefinedColumns(displayableColumns, fieldsToDisplay) {
var predefinedColumns = displayableColumns.filter(function (col) {
var matchedFields = fieldsToDisplay.filter(function (field) {
return col.field == field;
});
return matchedFields.length > 0;
});
predefinedColumns = predefinedColumns.sort(function (a, b) {
if (fieldsToDisplay.indexOf(a.field) < fieldsToDisplay.indexOf(b.field)) return -1;
if (fieldsToDisplay.indexOf(a.field) > fieldsToDisplay.indexOf(b.field)) return 1;
return 0;
})
return predefinedColumns;
}
function getAdditionalColumns(gridColumns, fieldsToDisplay) {
var additionalColumns = gridColumns.filter(function (col) {
var matchedFields = fieldsToDisplay.filter(function (field) {
return col.field == field;
});
return matchedFields.length == 0;
});
additionalColumns = additionalColumns.sort(function (a, b) {
if (a.title < b.title) return -1;
if (a.title > b.title) return 1;
return 0;
})
return additionalColumns;
}
function setGroupByTeamMode(checkbox) {
var grid = getGrid(currentGridName);
var group = grid.dataSource.group().slice();
if (currentGridName == "ResourceAvailability") {
setColumnVisibleByGroup("TeamName", checkbox.checked);
}
if (checkbox.checked) {
group.push({
aggregates: grid.dataSource.options.aggregate,
field: "TeamName",
dir: "asc"
});
grid.dataSource.group(group);
} else {
group.pop();
grid.dataSource.group(group);
}
}
function setGroupByExpenditureCategoryMode(checkbox) {
var grid = getGrid(currentGridName);
var group = grid.dataSource.group().slice();
setColumnVisibleByGroup("ExpenditureCategory", checkbox.checked);
if (checkbox.checked) {
group.unshift({
aggregates: grid.dataSource.options.aggregate,
field: "ExpenditureCategory",
dir: "asc"
});
grid.dataSource.group(group);
} else {
group.shift();
grid.dataSource.group(group);
}
}
function setColumnVisibleByGroup(groupType, groupVaue) {
var expenditureCategoryColumnVisibleCheckbox = $("input[data-field='" + groupType + "']");
var expenditureCategoryColumnVisibleCheckboxValue = expenditureCategoryColumnVisibleCheckbox.is(':checked');
if (groupVaue) {
if (expenditureCategoryColumnVisibleCheckboxValue) {
expenditureCategoryColumnVisibleCheckbox.click();
}
} else {
if (!expenditureCategoryColumnVisibleCheckboxValue) {
expenditureCategoryColumnVisibleCheckbox.click();
}
}
}
function setGridPerformanceMode(enable) {
var grid = getGrid(currentGridName);
if (enable) {
grid.table.addClass("show-performance");
} else {
grid.table.removeClass("show-performance");
}
saveGridState(currentGridName);
}
function setColumnState(checkbox, field) {
if (!currentGridName) {
return;
}
var grid = getGrid(currentGridName);
if (checkbox.checked) {
var gridColumns = getOrderedColumns(grid);
var columnToShow;
for (var i = 0; i < gridColumns.length; i++) {
if (gridColumns[i].field == field) {
columnToShow = gridColumns[i];
break;
}
}
grid.reorderColumn(grid.columns.length - 1, columnToShow);
grid.showColumn(field);
var columnsToReset = grid.columns.filter(function (col, index) {
return col.resetTemplate;
});
$.each(columnsToReset, function (index, col) {
col.groupFooterTemplate = null;
col.footerTemplate = null;
col.resetTemplate = false;
});
grid.refresh();
} else {
grid.hideColumn(field);
}
$("#" + currentGridName + " .k-grid-content table").width("");
$("#" + currentGridName + " .k-grid-footer-wrap table").width("");
$("#" + currentGridName + " .k-grid-header-wrap table").width("");
saveGridState(currentGridName);
updateColumnFooters(grid);
}
function updateColumnFooters(grid) {
var firstColumn = grid.columns[0];
var firstVisibleColumn = getFirstVisibleColumn(grid);
if (firstVisibleColumn && firstVisibleColumn != firstColumn && !firstVisibleColumn.groupFooterTemplate) {
firstVisibleColumn.groupFooterTemplate = firstColumn.groupFooterTemplate;
firstVisibleColumn.footerTemplate = firstColumn.footerTemplate;
firstVisibleColumn.resetTemplate = true;
grid.refresh();
}
}
function getFirstVisibleColumn(grid) {
var columns = grid.columns;
if (columns.length > 0) {
for (var i = 0; i < columns.length; i++) {
if (!columns[i].hidden) {
return columns[i];
}
}
}
return null;
}
function exportToPdf() {
if (!currentGridName) {
return;
}
var grid = getGrid(currentGridName);
grid.saveAsPDF();
}
function exportToExcel() {
if (!currentGridName) {
return;
}
var grid = getGrid(currentGridName);
grid.saveAsExcel();
}
</script>
<script id="gridOptionsDropDownItemTemplate" type="text/x-kendo-template">
<li class="padding-xs-hr">
<div class="checkbox">
<nobr>
<label>
<input type="checkbox" #=checked# class="columnVisibilityTrigger px" data-field="#=field#" onchange="setColumnState(this, '#=field#')" />
<span class="lbl">#= title #</span>
</label>
</nobr>
</div>
</li>
</script>
<script id="gridGroupByTeamDropDownItemTemplate" type="text/x-kendo-template">
<li class="padding-xs-hr" id="gridGroupByExpenditureCategorySwitcher">
<label>
<span class="switcherLbl">Group by Expenditure Category</span>
<input type="checkbox" checked class="switcher px" onchange="setGroupByExpenditureCategoryMode(this)" />
</label>
</li>
<li class="padding-xs-hr">
<label>
<span class="switcherLbl">Group by Team</span>
<input type="checkbox" checked id="gridGroupByTeamSwitcher" class="switcher px" onchange="setGroupByTeamMode(this)" />
</label>
</li>
<li class="padding-xs-hr" id="gridPerformanceMode">
<label>
<span class="switcherLbl">Performance</span>
<input type="checkbox" checked class="switcher px" onchange="setGridPerformanceMode(this.checked)" />
</label>
</li>
<li role="separator" class="divider"></li>
<li class="padding-xs-hr">
<a href="#" onclick="exportToPdf();" class=""><i class="dropdown-icon fa fa-file-text-o"></i> Save Page as PDF</a>
</li>
<li class="padding-xs-hr">
<a style="cursor:pointer;" onclick="exportToExcel();"><i class="dropdown-icon fa fa-file-o"></i> Export to Excel</a>
</li>
<li role="separator" class="divider"></li>
</script>