540 lines
24 KiB
Plaintext
540 lines
24 KiB
Plaintext
@model EnVisage.Models.SingleResQtiesOrCostByTimeModel
|
|
@using EnVisage.Code;
|
|
@using EnVisage.Code.HtmlHelpers;
|
|
@using EnVisage.Models;
|
|
@using Microsoft.AspNet.Identity;
|
|
@{
|
|
ViewBag.Title = "Single Resource Quantities or Cost by Time";
|
|
var isUOMHoursChecked = "checked";
|
|
if (ViewBag.IsUOMHours != null)
|
|
{
|
|
isUOMHoursChecked = ViewBag.IsUOMHours ? "checked" : string.Empty;
|
|
}
|
|
}
|
|
|
|
@section scripts
|
|
{
|
|
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
|
|
<script>
|
|
|
|
init.push(function() {
|
|
|
|
init_form();
|
|
});
|
|
|
|
function init_form() {
|
|
$(".datepicker").datepicker()
|
|
.change(function(ev) {
|
|
updateHidden(ev.target.id, $(ev.target).val());
|
|
});
|
|
|
|
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
|
|
InitGraph(e.target.hash);
|
|
});
|
|
|
|
var options2 = {
|
|
orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto'
|
|
};
|
|
$('#bs-datepicker-range').datepicker(options2);
|
|
$('#filterStartDate').addClass('form-control');
|
|
$('#filterEndDate').addClass('form-control');
|
|
$('#filterStartDate').removeClass('text-box');
|
|
$('#filterEndDate').removeClass('text-box');
|
|
$('#filterStartDate').removeClass('single-line');
|
|
$('#filterEndDate').removeClass('single-line');
|
|
$('#uomMode').switcher({
|
|
on_state_content: '# Hours',
|
|
off_state_content: '# Resources'
|
|
});
|
|
$('#uomMode').parent().css("width", "100px");
|
|
|
|
@foreach (var expCat in Model.SelectedExpenditureItems.TrimStart('[').TrimEnd(']').Split(','))
|
|
{
|
|
@:document.getElementById("expCatCheckedId_@expCat.TrimStart('"').TrimEnd('"')").checked = true;
|
|
}
|
|
$.each($('#expendituresContainer table#uom tbody tr'), function(i, o) {
|
|
if ($(o).has('input[type=checkbox]:checked')) {
|
|
$(o).removeClass('unchecked');
|
|
} else {
|
|
$(o).addClass('unchecked');
|
|
}
|
|
});
|
|
|
|
InitGraph($("ul#tabs li.active a").attr('href'));
|
|
}
|
|
|
|
function onFailure(xhr) {
|
|
//debugger;
|
|
$('#efilter').html(xhr.responseText);
|
|
}
|
|
|
|
function onSuccess(data) {
|
|
//debugger;
|
|
$('.validation-summary-errors').html('');
|
|
$('.input-validation-error').removeClass('input-validation-error');
|
|
$('.field-validation-error').remove();
|
|
//document.location.href = document.location.href;
|
|
init_form();
|
|
}
|
|
|
|
function InitGraph(hash) {
|
|
var __siteRoot = '@HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority)@Url.Content("~/")';
|
|
var url = __siteRoot + "SingleResQtiesOrCostByTime/GetGraphData";
|
|
var selectedScenarios = $("#@Html.ClientIdFor(x => x.SelectedScenarios)").val();
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
contentType: "application/json; charset=utf-8",
|
|
url: url,
|
|
data: JSON.stringify({
|
|
startDate: $("#@Html.ClientIdFor(x => x.StartDate)").datepicker('getDate').val(),
|
|
endDate: $("#@Html.ClientIdFor(x => x.EndDate)").datepicker('getDate').val(),
|
|
cost: $("#@Html.ClientIdFor(x => x.SeatsCosts)").val() == "1" || $("#@Html.ClientIdFor(x => x.SeatsCosts)").val() == "Cost",
|
|
selectedScenarios: JSON.parse(selectedScenarios.length == 0 ? '[]' : selectedScenarios),
|
|
selectedExpenditureItems: JSON.parse($("#@Html.ClientIdFor(x => x.SelectedExpenditureItems)").val()),
|
|
graphType: ($("ul#tabs li.active a").attr('href') == '#general' ? "0" : "1"),
|
|
type: $("#@Html.ClientIdFor(x => x.SelectedScenarioType)").val(),
|
|
groupId: $("#@Html.ClientIdFor(x => x.GroupId)").val(),
|
|
SystemAttributeOne: $("#@Html.ClientIdFor(x => x.SystemAttribute1)").val(),
|
|
SystemAttributeTwo: $("#@Html.ClientIdFor(x => x.SystemAttribute2)").val(),
|
|
selectedCapacity: $("#@Html.ClientIdFor(x => x.SelectedCapacity)").val(),
|
|
isUOMHours: $('#uomMode').prop('checked')
|
|
}),
|
|
dataType: "json",
|
|
success: function(data) {
|
|
var maxValue = 0;
|
|
var graphData = new Array();
|
|
//debugger;
|
|
for (var i = 0; i < data.SingleResQtiesOrCostByTime.length; i++) {
|
|
var expCatData = new Array();
|
|
for (var colIndex = 0; colIndex < data.FiscalCalendarRecordHeaders.length; colIndex++) {
|
|
var val = 0;
|
|
var projectName = data.SingleResQtiesOrCostByTime[i].ProjectName;
|
|
if ($("#@Html.ClientIdFor(x => x.SeatsCosts)").val() == "1" || $("#@Html.ClientIdFor(x => x.SeatsCosts)").val() == "Cost")
|
|
val = data.SingleResQtiesOrCostByTime[i].CostValues[colIndex];
|
|
else
|
|
val = data.SingleResQtiesOrCostByTime[i].QuantityValues[colIndex];
|
|
if (val == undefined)
|
|
val = 0;
|
|
//val = Math.round(val * 100) / 100;
|
|
expCatData[colIndex] = [data.FiscalCalendarRecordMilliseconds[colIndex], val, projectName];
|
|
|
|
if (expCatData[colIndex][1] > maxValue)
|
|
maxValue = expCatData[colIndex][1];
|
|
|
|
}
|
|
|
|
if ("Capacity" == data.SingleResQtiesOrCostByTime[i].ScenarioType) {
|
|
|
|
graphData[i] = {
|
|
label: data.SingleResQtiesOrCostByTime[i].ScenarioDisplayName,
|
|
data: expCatData,
|
|
lines: { show: true, fill: false, steps: false },
|
|
filledPoints: true,
|
|
stack: false
|
|
};
|
|
} else {
|
|
graphData[i] = {
|
|
label: data.SingleResQtiesOrCostByTime[i].ScenarioName,
|
|
data: expCatData,
|
|
lines: { show: true, fill: true, steps: false },
|
|
filledPoints: true,
|
|
stack: true
|
|
};
|
|
}
|
|
}
|
|
|
|
draw(hash, graphData, maxValue);
|
|
drawTable(hash, graphData);
|
|
|
|
},
|
|
error: function(msg) {
|
|
alert(msg.responseText);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function drawTable(hash, graphData) {
|
|
var table = (hash == '#general' ? '#SingleResQtiesOrCostByTimeTable' : '#SingleResQtiesOrCostByTimeTableProbability');
|
|
$(table + " > thead").html("");
|
|
$(table + " > tbody").html("");
|
|
if (graphData.length > 0) {
|
|
var header_html = "<tr><th style='padding-left:200px'></th><th style='padding: 0 0 0 100px'></th>";
|
|
for (var i = 0; i < graphData[0].data.length; i++) {
|
|
var formattedDate = new Date(graphData[0].data[i][0]);
|
|
var d = formattedDate.getDate();
|
|
var m = formattedDate.getMonth();
|
|
m += 1; // JavaScript months are 0-11
|
|
var y = formattedDate.getFullYear();
|
|
header_html += "<th>" + (m.toString().length == 1 ? "0" + m.toString() : m.toString()) + "/" + (d.toString().length == 1 ? "0" + d.toString() : d.toString()) + "/" + y + "</th>";
|
|
}
|
|
header_html += "</tr>";
|
|
$(table + " > thead:last").append(header_html);
|
|
|
|
var scenario_total = [0];
|
|
|
|
//Build scenario rows
|
|
for (var i = 0; i < graphData.length - 4; i++) {
|
|
var total_row = 0;
|
|
var projectName = graphData[i].data.length > 0 && graphData[i].data[0][2] != null ? graphData[i].data[0][2] : "";
|
|
var row_html = "<tr>";
|
|
row_html += "<td>" + (projectName.length > 0 ? "(" + projectName + ") " : "") + graphData[i].label + (hash == '#general' ? '' : ' - 100%') + "</td>";
|
|
row_html += "<td id='total" + i + "'></td>";
|
|
|
|
for (var j = 0; j < graphData[i].data.length; j++) {
|
|
//Write grand total in first item
|
|
var val = graphData[i].data[j][1];
|
|
if (i == 0) {
|
|
scenario_total.push(val);
|
|
|
|
} else {
|
|
scenario_total[j + 1] += val;
|
|
}
|
|
scenario_total[0] += val;
|
|
total_row += val;
|
|
|
|
row_html += "<td>" + displayCost(val) + "</td>";
|
|
}
|
|
row_html += "</tr>";
|
|
$(table + " > tbody:last").append(row_html);
|
|
$(table).find("#total" + i).text(displayCost(total_row));
|
|
|
|
}
|
|
//if (graphData.length - 5 == i) {
|
|
var row_html = "<tr>";
|
|
row_html += "<td>Scenario Totals</td>";
|
|
row_html += "<td>" + displayCost(scenario_total[0]) + "</td>";
|
|
|
|
for (var j = 0; j < graphData[i].data.length; j++) {
|
|
row_html += "<td>" + displayCost(scenario_total[j + 1]) + "</td>";
|
|
}
|
|
row_html += "</tr>";
|
|
$(table + " > tbody:last").append(row_html);
|
|
row_html = "<tr>";
|
|
row_html += "<td></td>";
|
|
row_html += "<td></td>";
|
|
|
|
for (var j = 0; j < graphData[i].data.length; j++) {
|
|
row_html += "<td></td>";
|
|
}
|
|
row_html += "</tr>";
|
|
$(table + " > tbody:last").append(row_html);
|
|
|
|
var total = [0];
|
|
var facility_total = [0];
|
|
var onLeave_total = [0];
|
|
//last 5 are:Capacity,LoanOut,Training,Vacation
|
|
for (var i = graphData.length - 4; i < graphData.length; i++) {
|
|
var total_row = 0;
|
|
var projectName = graphData[i].data.length > 0 && graphData[i].data[0][2] != null ? graphData[i].data[0][2] : "";
|
|
var row_html = "<tr><td>" + graphData[i].label + "</td>" +
|
|
"<td id='total" + i + "'></td>";
|
|
//debugger;
|
|
for (var j = 0; j < graphData[i].data.length; j++) {
|
|
var val = graphData[i].data[j][1];
|
|
|
|
if (i == (graphData.length - 4)) {
|
|
total.push(0);
|
|
facility_total.push(0);
|
|
onLeave_total.push(0);
|
|
}
|
|
|
|
if (graphData[i].label == "Capacity" || graphData[i].label == "LoanOut") {
|
|
facility_total[j + 1] += parseFloat(val);
|
|
onLeave_total[j + 1] += 0;
|
|
} else {
|
|
facility_total[j + 1] += 0;
|
|
onLeave_total[j + 1] += parseFloat(val);
|
|
}
|
|
|
|
//Write grand total in first item
|
|
total[0] += val;
|
|
total[j + 1] += val;
|
|
total_row += val;
|
|
row_html += "<td>" + displayCost(val) + "</td>";
|
|
}
|
|
row_html += "</tr>";
|
|
$(table + " > tbody:last").append(row_html);
|
|
$(table).find("#total" + i).text(displayCost(total_row));
|
|
|
|
}
|
|
|
|
var row_html = "<tr>" +
|
|
"<td>Totals</td>";
|
|
|
|
for (var j = 0; j < total.length; j++) {
|
|
row_html += "<td>" + displayCost(total[j]) + "</td>";
|
|
}
|
|
row_html += "</tr>";
|
|
$(table + " > tbody:last").append(row_html);
|
|
|
|
row_html = "<tr>" +
|
|
"<td></td>";
|
|
|
|
for (var j = 0; j < total.length; j++) {
|
|
row_html += "<td></td>";
|
|
}
|
|
row_html += "</tr>";
|
|
$(table + " > tbody:last").append(row_html);
|
|
row_html = "<tr>";
|
|
|
|
row_html += "<td>Crew To Hire(OH)</td>";
|
|
row_html += "<td id='OH'></td>";
|
|
total_row = 0;
|
|
//debugger;
|
|
for (var j = 1; j < scenario_total.length; j++) {
|
|
val = (onLeave_total[j] + scenario_total[j] - facility_total[j]);
|
|
row_html += "<td>" + displayCost(val) + "</td>";
|
|
total_row += val;
|
|
}
|
|
row_html += "</tr>";
|
|
|
|
$(table + " > tbody:last").append(row_html);
|
|
$(table).find("#OH").text(displayCost(total_row));
|
|
}
|
|
|
|
}
|
|
|
|
function displayCost(val) {
|
|
if (val != undefined) {
|
|
if ($("#@Html.ClientIdFor(x => x.SeatsCosts)").val() == "1" || $("#@Html.ClientIdFor(x => x.SeatsCosts)").val() == "Cost") {
|
|
return (Math.round(val * 100) / 100).toString();
|
|
} else {
|
|
return (Math.round(val * 100) / 100).toString();
|
|
}
|
|
} else {
|
|
return 0;
|
|
}
|
|
|
|
return val.toString();
|
|
|
|
}
|
|
|
|
function draw(hash, graphData, maxValue) {
|
|
// Init Chart
|
|
var checkedData = new Array();
|
|
for (var i = 0; i < graphData.length; i++) {
|
|
//var chk = document.getElementById('expCatCheckedId_' + (i + 1));
|
|
//if (chk.checked)
|
|
checkedData[checkedData.length] = graphData[i];
|
|
}
|
|
$('#div' + (hash == '#general' ? 'WhatIfGraph' : 'WhatIfGraphProbability') + "Container").
|
|
html("<div id='div" + (hash == '#general' ? 'WhatIfGraph' : 'WhatIfGraphProbability') + "'></div>");
|
|
|
|
var div = $('#div' + (hash == '#general' ? 'WhatIfGraph' : 'WhatIfGraphProbability'));
|
|
//debugger;
|
|
div.pixelPlot(checkedData, {
|
|
series: {
|
|
points: {
|
|
show: false
|
|
},
|
|
lines: {
|
|
show: true,
|
|
fill: true,
|
|
steps: false
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: "time",
|
|
tickSize: [1, "month"],
|
|
tickLength: 0,
|
|
axisLabel: "time",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 10
|
|
},
|
|
yaxis: {
|
|
|
|
//tickSize: maxValue / 5
|
|
}
|
|
}, {
|
|
height: 405,
|
|
tooltipText: ($("#@Html.ClientIdFor(x => x.SeatsCosts)").val() == "0" || $("#@Html.ClientIdFor(x => x.SeatsCosts)").val() == "Quantity" ?
|
|
"y + ' quantity at '" :
|
|
"'$'+ y + ' at '")
|
|
+ " + (new Date(x)).toString()"
|
|
});
|
|
}
|
|
|
|
function updateHidden(name, val) {
|
|
$("input[name='" + name + "']").val(val);
|
|
}
|
|
|
|
function saveSelectedScenarios() {
|
|
var selectedScenarioList = $("#@Html.ClientIdFor(x => x.SelectedScenarios)");
|
|
var res = "";
|
|
|
|
$.each($("input[type='checkbox']"), function(i, o) {
|
|
if (o.checked && $(o).attr('scenario') != null) {
|
|
res += ",\"" + $(o).attr('scenario') + "\"";
|
|
$(o).parent().parent().removeClass('unchecked');
|
|
} else if ($(o).attr('scenario') != null) {
|
|
$(o).parent().parent().addClass('unchecked');
|
|
}
|
|
});
|
|
|
|
if (res.length > 0)
|
|
selectedScenarioList.val("[" + res.substr(1, res.length - 1) + "]");
|
|
else
|
|
selectedScenarioList.val("");
|
|
|
|
return true;
|
|
}
|
|
|
|
function saveSelectedExpsCats() {
|
|
var SelectedExpenditureItems = $("#@Html.ClientIdFor(x => x.SelectedExpenditureItems)");
|
|
var res = "";
|
|
|
|
$.each($("input[type='checkbox']"), function(i, o) {
|
|
if (o.checked && o.id.substr(0, 16) == 'expCatCheckedId_') {
|
|
res += ",\"" + $(o).val() + "\"";
|
|
$(o).parent().parent().removeClass('unchecked');
|
|
} else if (o.id.substr(0, 16) == 'expCatCheckedId_') {
|
|
$(o).parent().parent().addClass('unchecked');
|
|
}
|
|
});
|
|
|
|
//debugger;
|
|
if (res.length > 0)
|
|
SelectedExpenditureItems.val("[" + res.substr(1, res.length - 1) + "]");
|
|
else
|
|
SelectedExpenditureItems.val("");
|
|
|
|
return true;
|
|
}
|
|
|
|
|
|
function refreshGraph() {
|
|
saveSelectedScenarios();
|
|
saveSelectedExpsCats();
|
|
var selectedScenarios = $("#@Html.ClientIdFor(x => x.SelectedScenarios)").val();
|
|
if (selectedScenarios.length == 0 || selectedScenarios == "[]")
|
|
alert("Please select a scenario.");
|
|
else
|
|
InitGraph($("ul#tabs li.active a").attr('href'));
|
|
}
|
|
|
|
</script>
|
|
}
|
|
|
|
@section pagemenu
|
|
{
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown">
|
|
<i class="fa fa-bars"></i><span>Page Options</span> <i class="fa fa-caret-down"></i>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-right" id="visibilitydropdown">
|
|
<li><a onclick="_printDoc();$(this).parent().parent().parent().removeClass('open');"><i class="dropdown-icon fa fa-print"></i> Print Page</a></li>
|
|
<li class="divider"></li>
|
|
<li class="padding-xs-hr"><label><span class="switcherLbl">Quantity as</span><input type="checkbox" @isUOMHoursChecked name="uomMode" id="uomMode" class="switcher px" onclick="refreshGraph()"/></label></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
}
|
|
|
|
<div id="srqBody">
|
|
<div id="filter">
|
|
@Html.Partial("_filter", Model)
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-body">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-2">
|
|
@Html.LabelFor(model => model.SelectedCapacity, new {@class = "control-label"})
|
|
<div class="form-group no-margin-hr">
|
|
@Html.DropDownListFor(model => model.SelectedCapacity, Utils.GetCapacityDropdown(), new {@class = "form-control disabled", @onchange = "updateHidden(this.name, $(this).val());"})
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
@Html.LabelFor(model => model.SeatsCosts, new {@class = "control-label"})
|
|
<div class="form-group no-margin-hr">
|
|
@Html.DropDownListFor(model => model.SeatsCosts, Utils.GetListboxItems<SeatsCostsType>(), new {@class = "form-control disabled", @onchange = "updateHidden(this.name, $(this).val());"})
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
@Html.LabelFor(model => model.StartDate, new {@class = "control-label"})
|
|
@Html.EditorFor(model => model.StartDate)
|
|
@Html.ValidationMessageFor(model => model.StartDate)
|
|
</div>
|
|
<div class="col-sm-2">
|
|
@Html.LabelFor(model => model.EndDate, new {@class = "control-label"})
|
|
@Html.EditorFor(model => model.EndDate)
|
|
@Html.ValidationMessageFor(model => model.EndDate)
|
|
</div>
|
|
<div class="col-sm-2">
|
|
@Html.LabelFor(model => model.SystemAttribute1, new {@class = "control-label"})
|
|
<div class="form-group no-margin-hr">
|
|
@Html.DropDownListFor(model => model.SystemAttribute1, Utils.GetSystemAttributeOne(), new {@class = "form-control disabled", @onchange = "updateHidden(this.name, $(this).val());"})
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
@Html.LabelFor(model => model.SystemAttribute2, new {@class = "control-label"})
|
|
<div class="form-group no-margin-hr">
|
|
@Html.DropDownListFor(model => model.SystemAttribute2, Utils.GetSystemAttributeTwo(), new {@class = "form-control disabled", @onchange = "updateHidden(this.name, $(this).val());"})
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-footer text-right">
|
|
<button type="button" class="btn btn-primary" onclick=" refreshGraph() ">Refresh</button>
|
|
</div>
|
|
</div>
|
|
|
|
<ul id="tabs" class="nav nav-tabs">
|
|
<li class="active">
|
|
<a href="#general" data-toggle="tab">Crew Graph by Scenario (100%)<span class="badge badge-primary"></span></a>
|
|
</li>
|
|
<li>
|
|
<a href="#probability" data-toggle="tab">Crew Graph by Scenario (Use Probability)<span class="badge badge-primary"></span></a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content tab-content-bordered">
|
|
<div class="tab-pane fade in active" id="general">
|
|
<div class="panel">
|
|
<div class="panel-body">
|
|
<div class="graph-container" style="margin-bottom: 20px;" id="divWhatIfGraphContainer">
|
|
<div id="divWhatIfGraph"></div>
|
|
</div>
|
|
<div class="table-light table-responsive" style="width: 100%; overflow-x: auto;">
|
|
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="SingleResQtiesOrCostByTimeTable">
|
|
<thead>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="probability">
|
|
<div class="panel">
|
|
<div class="panel-body">
|
|
<div class="graph-container" style="margin-bottom: 20px;" id="divWhatIfGraphProbabilityContainer">
|
|
<div id="divWhatIfGraphProbability"></div>
|
|
</div>
|
|
<div class="table-light table-responsive" style="width: 100%; overflow-x: auto;">
|
|
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="SingleResQtiesOrCostByTimeTableProbability">
|
|
<thead>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|