379 lines
16 KiB
Plaintext
379 lines
16 KiB
Plaintext
@model EnVisage.Models.WhatIfCalendarModel
|
|
@using EnVisage.Code;
|
|
@{
|
|
ViewBag.Title = "What-If Calendar";
|
|
var isUOMHoursChecked = "checked";
|
|
if (ViewBag.IsUOMHours != null)
|
|
{
|
|
isUOMHoursChecked = ViewBag.IsUOMHours ? "checked" : string.Empty;
|
|
}
|
|
}
|
|
|
|
@section scripts
|
|
{
|
|
<script>
|
|
|
|
init.push(function () {
|
|
var options = {
|
|
format: 'm/d/yyyy',
|
|
startDate: '@Constants.MIN_SELECTABLE_DATE', // SA. ENV-1235. Disable incorrect dates input
|
|
endDate: '@Constants.MAX_SELECTABLE_DATE' // SA. ENV-1235. Disable incorrect dates input
|
|
};
|
|
|
|
$(".datepicker").datepicker(options)
|
|
.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',
|
|
startDate: '@Constants.MIN_SELECTABLE_DATE', // SA. ENV-1235. Disable incorrect dates input
|
|
endDate: '@Constants.MAX_SELECTABLE_DATE' // SA. ENV-1235. Disable incorrect dates input
|
|
};
|
|
$('#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");
|
|
|
|
InitGraph($("ul#tabs li.active a").attr('href'));
|
|
});
|
|
|
|
function InitGraph(hash) {
|
|
var siteRoot = '@HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority)@Url.Content("~/")';
|
|
var url = siteRoot + "WhatIfCalendar/GetGraphData";
|
|
$.ajax({
|
|
type: "POST",
|
|
contentType: "application/json; charset=utf-8",
|
|
url: url,
|
|
data: JSON.stringify({
|
|
startDate: $("#@Html.IdFor(x=>x.StartDate)").datepicker('getDate').val(),
|
|
endDate: $("#@Html.IdFor(x=>x.EndDate)").datepicker('getDate').val(),
|
|
cost: $("#@Html.IdFor(x=>x.SeatsCosts)").val() == "1" || $("#@Html.IdFor(x=>x.SeatsCosts)").val() == "Costs",
|
|
selectedScenarios: JSON.parse($("#@Html.IdFor(x=>x.SelectedScenarios)").val()),
|
|
graphType: ($("ul#tabs li.active a").attr('href') == '#general' ? "0" : "1"),
|
|
type: $("#@Html.IdFor(x=>x.SelectedScenarioType)").val(),
|
|
groupId: $("#@Html.IdFor(x=>x.GroupId)").val(),
|
|
isUOMHours: $('#uomMode').prop('checked')
|
|
}),
|
|
dataType: "json",
|
|
success: function (data) {
|
|
var maxValue = 0;
|
|
var graphData = new Array();
|
|
for (var i = 0; i < data.WhatIfCalendar.length; i++) {
|
|
var expCatData = new Array();
|
|
for (var colIndex = 0; colIndex < data.FiscalCalendarRecordHeaders.length; colIndex++) {
|
|
expCatData[colIndex] = [data.FiscalCalendarRecordMilliseconds[colIndex],
|
|
data.WhatIfCalendar[i].QuantityValues[colIndex]];
|
|
//if (true !== data.IsTableModeQuantity) {
|
|
// expCatData[colIndex][1] = data.ScenarioCalendar[i].CostValues[colIndex];
|
|
//}
|
|
if (expCatData[colIndex][1] > maxValue)
|
|
maxValue = expCatData[colIndex][1];
|
|
//expCatData[colIndex][1] = expCatData[colIndex][1].toFixed(2);
|
|
}
|
|
if ("Capacity" == data.WhatIfCalendar[i].ScenarioType) {
|
|
graphData[i] = {
|
|
label: data.WhatIfCalendar[i].ScenarioName,
|
|
data: expCatData,
|
|
lines: { show: true, fill: false, steps: false },
|
|
filledPoints: true,
|
|
stack: false
|
|
};
|
|
}
|
|
else {
|
|
graphData[i] = {
|
|
label: data.WhatIfCalendar[i].ScenarioName,
|
|
data: expCatData,
|
|
lines: { show: true, fill: true, steps: false },
|
|
filledPoints: true,
|
|
stack: true
|
|
};
|
|
}
|
|
}
|
|
draw(hash, graphData, maxValue);
|
|
},
|
|
error: function (msg) {
|
|
alert( msg.responseText);
|
|
}
|
|
});
|
|
}
|
|
|
|
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'));
|
|
div.pixelPlot(checkedData, {
|
|
series: {
|
|
points: {
|
|
show: false
|
|
},
|
|
lines: {
|
|
show: true,
|
|
fill: true,
|
|
steps: false
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: "time",
|
|
tickSize: [1, "month"],
|
|
tickLength: 0
|
|
}
|
|
}, {
|
|
height: 405,
|
|
tooltipText: ($("#@Html.IdFor(x=>x.SeatsCosts)").val() == "0" || $("#@Html.IdFor(x=>x.SeatsCosts)").val() == "Seats" ?
|
|
"y + ' seats at '" :
|
|
"'$'+ y + ' at '")
|
|
+ " + (new Date(x)).toString()"
|
|
});
|
|
}
|
|
|
|
function updateHidden(name, val)
|
|
{
|
|
$("input[name='" + name + "']").val(val);
|
|
}
|
|
|
|
function saveSelectedScenarios()
|
|
{
|
|
var selectedScenarioList = $("#@Html.IdFor(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 {
|
|
$(o).parent().parent().addClass('unchecked');
|
|
}
|
|
});
|
|
if (res.length > 0)
|
|
selectedScenarioList.val("[" + res.substr(1, res.length - 1) + "]");
|
|
else
|
|
selectedScenarioList.val("");
|
|
|
|
return true;
|
|
}
|
|
|
|
function refreshGraph()
|
|
{
|
|
saveSelectedScenarios();
|
|
//$("form").submit();
|
|
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="whatifBody">
|
|
@using (Html.BeginForm("Index", "WhatIfCalendar", FormMethod.Post, new { @class = "panel form-horizontal", style = "border:0;", onsubmit = "saveSelectedScenarios();" }))
|
|
{
|
|
@Html.AntiForgeryToken()
|
|
@Html.ValidationSummary(true)
|
|
@Html.HiddenFor(x => x.LaborMaterials)
|
|
@Html.HiddenFor(x => x.SeatsCosts)
|
|
@Html.HiddenFor(x => x.IncludeActuals)
|
|
@Html.HiddenFor(x => x.StartDate)
|
|
@Html.HiddenFor(x => x.EndDate)
|
|
@Html.HiddenFor(x => x.SelectedScenarios)
|
|
|
|
<div class="panel">
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
@Html.LabelFor(model => model.GroupName, new { @class = "control-label" })
|
|
<div class="form-group no-margin-hr">
|
|
@Html.DropDownListFor(model => model.GroupId, Utils.GetScenarioGroup(), new { @class = "form-control disabled" })
|
|
@Html.ValidationMessageFor(model => model.GroupId)
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
@Html.LabelFor(model => model.SelectedScenarioType, new { @class = "control-label" })
|
|
<div class="form-group no-margin-hr">
|
|
@Html.DropDownListFor(model => model.SelectedScenarioType, Utils.GetScenarioTypesPortfAndSched(), new { @class = "form-control disabled" })
|
|
@Html.ValidationMessageFor(model => model.SelectedScenarioType)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel-footer text-right">
|
|
<button type="submit" class="btn btn-primary">Filter</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<div class="table-light table-responsive">
|
|
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="RollUp">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>
|
|
Scnario Name
|
|
</th>
|
|
<th>
|
|
Poject Name
|
|
</th>
|
|
|
|
<th>
|
|
Start Date
|
|
</th>
|
|
<th>
|
|
End Date
|
|
</th>
|
|
<th>
|
|
Labor Split
|
|
</th>
|
|
<th>
|
|
Materials
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var item in Model.Scenarios)
|
|
{
|
|
var isChecked = (Model.SelectedScenarios != null && Model.SelectedScenarios.IndexOf(item.Id.ToString(), StringComparison.Ordinal) != -1);
|
|
<tr @(!isChecked ? "class=unchecked" : string.Empty)>
|
|
<td>
|
|
@Html.CheckBox("select", isChecked, new { @class = "control-label", scenario = item.Id})
|
|
</td>
|
|
<td>
|
|
@item.Name
|
|
</td>
|
|
<td>
|
|
@item.ProjectName
|
|
</td>
|
|
<td>
|
|
@(item.StartDate.HasValue ? item.StartDate.Value.ToShortDateString():string.Empty)
|
|
</td>
|
|
<td>
|
|
@(item.EndDate.HasValue ? item.EndDate.Value.ToShortDateString():string.Empty)
|
|
</td>
|
|
<td>
|
|
@string.Format("{0:0.##} %",item.EFXSplit * 100)
|
|
</td>
|
|
<td>
|
|
@string.Format("{0:0.##} %",item.CGSplit * 100)
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-body">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
@Html.LabelFor(model => model.LaborMaterials, new { @class = "control-label" })
|
|
<div class="form-group no-margin-hr">
|
|
|
|
@Html.DropDownListFor(model => model.LaborMaterials, Utils.GetListboxItems<LaborMaterialsType>(), 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.IncludeActuals, new { @class = "control-label" })
|
|
<div class="form-group no-margin-hr">
|
|
@Html.DropDownListFor(model => model.IncludeActuals, Utils.GetListboxItems<YesNoType>(), 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>
|
|
</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">What-If Calendar (100%)<span class="badge badge-primary"></span></a>
|
|
</li>
|
|
<li>
|
|
<a href="#probability" data-toggle="tab">What-If Calendar (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" id="divWhatIfGraphContainer">
|
|
<div id="divWhatIfGraph"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="probability">
|
|
<div class="panel">
|
|
<div class="panel-body">
|
|
<div class="graph-container" id="divWhatIfGraphProbabilityContainer">
|
|
<div id="divWhatIfGraphProbability"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|