EnVisageOnline/Beta/Source/EnVisage/Views/Scenarios/_scenarioCalendar.cshtml

955 lines
54 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@using EnVisage.Models
@model ScenarioDetailModel
@{
var isUOMHoursChecked = "checked";
if (ViewBag.IsUOMHours != null)
{
isUOMHoursChecked = ViewBag.IsUOMHours ? "checked" : string.Empty;
}
}
<div id="erorMsgPlaceholder"></div>
<script type="text/javascript">
var resizeFreez = function() {
var t = $("#table");
var thsWidthI = 0;
var tr = t.find("tr:eq(1)");
var ths = tr.find("th");
var dateThs = ths.filter(":gt(2):visible");
if (dateThs.length == 0)
return;
var visibleColumns = 0;
ths.filter(":visible").each(function(i, o) {
thsWidthI += $(o).innerWidth();
visibleColumns++;
});
var divWidthI = t.parent().innerWidth();
var thName = ths.eq(1);
var thNameWidth = thName.width();
var longestCategory = 0;
t.find("td:nth-child(2)").each(function(i, td) {
var text = $(td).html();
var txtElement = $("<td></td>").html(text).css({
'class': "headcol"
}).prependTo($(td).parent());
longestCategory = Math.max(longestCategory, txtElement.width());
txtElement.remove();
});
var delta = 0;
if (thsWidthI > divWidthI) {
// if width of all columns > visible table then we need to shrink name column to the width of smallest category name
delta = -Math.min(thNameWidth - longestCategory, thsWidthI - divWidthI + visibleColumns + 1);
} else if (thsWidthI < divWidthI) {
delta = divWidthI - thsWidthI - visibleColumns - 1;
}
if (delta == 0)
return;
t.find("tbody tr td:nth-child(2)").each(rszObj, [delta, null, null]);
t.find("th:nth-child(2)").each(rszObj, [delta, null, null]);
t.find("tfoot td:first").each(rszObj, [delta, null, null]);
t.find("tbody tr td:nth-child(3)").each(rszObj, [null, delta, null]);
t.find("th:nth-child(3)").each(rszObj, [null, delta, null]);
t.find("tfoot td:eq(1)").each(rszObj, [null, delta, null]);
var total3Width = ths.eq(0).outerWidth() + ths.eq(1).outerWidth() + ths.eq(2).outerWidth();
t.parent().each(rszObj, [null, null, total3Width-1]);
};
function rszObj(deltaWidth, deltaLeft, padLeft) {
if (deltaWidth != null && deltaWidth != 0) {
var oldWidth = $(this).width();
$(this).css('width', oldWidth + deltaWidth);
}
if (deltaLeft != null && deltaLeft != 0) {
var oldLeft = $(this).css('left');
if (oldLeft != null && oldLeft.length > 0) {
var l = parseInt(oldLeft.substr(0, oldLeft.length - 1));
if (!isNaN(l))
$(this).css('left', l + deltaLeft);
}
}
if (padLeft != null && !isNaN(padLeft)) {
$(this).css('padding-left', padLeft);
}
}
function reInitFields() {
angular.element(window).resize(function () {
resizeFreez();
});
}
init.push(function () {
reInitFields();
$("#btnReloadCalendar").click();
var options = {
format: 'm/d/yyyy'
};
$('#bs-datepicker-from').datepicker(options);
$('#bs-datepicker-to').datepicker(options);
$('#fs-datepicker-range').datepicker(options);
$('#percentage_container').slider({
'range': 'min',
'min': 0,
'max': 100,
'value': 100,
change: function(event, ui) {
onPercentageChange(event, ui, $(this));
changeScope(ui.value);
},
slide: function(event, ui) {
onPercentageSlide(event, ui, $(this));
changeScope(ui.value);
}
});
$('select[name=selCategoryFrom]').val($("select[name=selCategoryFrom] option:first").val());
//set minimal height to the container div to make sure options drop down menu does not get clipped
$("#content-wrapper").css("min-height", "720px");
//sliders init
if ($('#TeamAllocationsJson').val()) teamallocations = JSON.parse($('#TeamAllocationsJson').val());
for (key in teamallocations) {
$("#addTeams").find('option[value=' + key + ']').remove();
}
sliders = $("#teamsContainer .ui-slider");
$('#teamsContainer div.row').each(function (i, div) {
$(this).find('.ui-slider').slider({
'range': 'min',
'min': 0,
'max': 100,
'value': teamallocations[div.id.split("_")[0]],
change: onSliderDependentChange,
slide: onSliderDependentSlide
});
});
othersliders = sliders;
$("#addTeams").select2({
placeholder: "Select teams",
});
$("#addteamdiv").hide();
});
function onPercentageSlide(event, ui, obj) {
var value = ui.value;
obj.children(".sliderValue").val(value);
obj.children(".sliderTitle").html(value + '%');
}
function onPercentageChange(event, ui, obj) {
var value = ui.value;
obj.children(".sliderValue").val(value);
obj.children(".sliderTitle").html(value + '%');
}
function changeScope(value) {
var scope = angular.element(document.getElementById('controller')).scope();
scope.onPercentageChange(value);
}
function showWarningModal(title, message) {
var modal = $("#modal-warning");
if (modal != null) {
var divTitle = $("#modal-warning .modal-title");
if (divTitle != null)
divTitle.text(title);
var divMessage = $("#modal-warning .modal-body");
if (divMessage != null) {
divMessage.text($.trim(message));
if (divMessage.text().length > 0) {
$("#modal-warning").modal();
}
}
}
}
function ToggleCriteria() {
if ($('#criteria-container').css('display') == 'none')
$('#criteria-container').css('display', 'block');
else
$('#criteria-container').css('display', 'none');
}
function onSliderDependentSlide(event, ui) {
if (fired) return;
var value = parseInt(ui.value);
// Get current total
var total = 0;
var totalofothers = 0;
var availableTotal = 100;
var nonmovablesum = 0;
othersliders = $(othersliders).not(this); //putting this slider off collection of autoadjustable sliders
$(this).addClass("ui-slider-success");
if (othersliders.length == 0 && sliders.length > 1) {
fired = true;
$(sliders).slider("disable");
bootbox.confirm("By moving this slider, you will adjust previously set values for other teams on this scenario.",
function (result) {
if (!result) {
fired = false;
$(sliders).slider("enable");
var valuetoset = availableTotal;
$(sliders).not($("#" + ui.handle.parentElement.id.split("_")[0] + "_container")).each(function (i, div) {
availableTotal -= $(this).slider("value");
//console.log("val: " + $(this).slider("value") + "; availableTotal: " + availableTotal);
});
$("#" + ui.handle.parentElement.id.split("_")[0] + "_container").slider("value", availableTotal);
return;
}
else {
$(sliders).removeClass("ui-slider-success");
othersliders = $(sliders).not(this);
}
var valuetoset = availableTotal;
$(sliders).not($("#" + ui.handle.parentElement.id.split("_")[0] + "_container")).each(function (i, div) {
availableTotal -= $(this).slider("value");
//console.log("val: " + $(this).slider("value") + "; availableTotal: " + availableTotal);
});
$("#" + ui.handle.parentElement.id.split("_")[0] + "_container").slider("value", availableTotal);
fired = false;
$(sliders).slider("enable");
});
}
$(sliders).not(this).each(function () {
totalofothers += teamallocations[$(this).attr('id').split("_")[0]]; //calculate precise total for all allocatios except for one that we moved
});
$(othersliders).not(this).each(function () {
nonmovablesum += teamallocations[$(this).attr('id').split("_")[0]]; //calculate precise total for all allocatios except for one that we moved
});
nonmovablesum = totalofothers - nonmovablesum;
total = totalofothers + value;
var change = availableTotal - total; //amount to ditribute betwee autoadjustable sliders
//console.log("change: " + change);
var sliderscount = othersliders.length;
if (change != 0) {
var tempsum = value + Math.round(nonmovablesum);
var tempprecisesum = value + nonmovablesum;
for (i = othersliders.length - 1 ; i >= 0 ; i--) {
var currvalue = teamallocations[$(othersliders[i]).attr('id').split("_")[0]]; //getting value of one of autoadjustable sliders
var newprecisevalue = currvalue + change / sliderscount;
if (newprecisevalue < 0)
newprecisevalue = 0;
//console.log("currvalue: " + currvalue + "; set: " + newprecisevalue + "; tempsum " + tempsum);
if (i == 0) { //for the last slider we set value as 100-other values
if (tempprecisesum <= 100) {
teamallocations[$(othersliders[i]).attr('id').split("_")[0]] = 100 - tempprecisesum;
$(othersliders[i]).slider("value", 100 - tempsum);
}
else {
teamallocations[$(othersliders[i]).attr('id').split("_")[0]] = 0;
var remainder = (tempprecisesum - 100) / ((sliderscount - 1 > 0 ? sliderscount - 1 : 1));
//console.log("REMI: " + remainder);
for (j = 1; j < othersliders.length; j++) {
teamallocations[$(othersliders[j]).attr('id').split("_")[0]] -= remainder;
$(othersliders[j]).slider("value", Math.round(teamallocations[$(othersliders[j]).attr('id').split("_")[0]]));
}
}
//console.log("set last to " + (100 - tempsum));
}
else {
teamallocations[$(othersliders[i]).attr('id').split("_")[0]] = newprecisevalue;
$(othersliders[i]).slider("value", Math.round(newprecisevalue));
tempsum += Math.round(newprecisevalue);
tempprecisesum += newprecisevalue;
//console.log("set to " + Math.round(newprecisevalue));
}
}
}
teamallocations[ui.handle.parentElement.id.split("_")[0]] = value;
//console.log(teamallocations);
//$(this).children(".sliderValue").val(value);
$(this).children(".sliderTitle").html(value + '%');
}
function onSliderDependentChange(event, ui) {
var value = parseInt(ui.value);
$(this).children(".sliderValue").val(value);
$(this).children(".sliderTitle").html(value + '%');
}
function showaddteams() {
$("#addteambutton").hide();
$("#addteamdiv").show();
}
function hideteams() {
$("#addteambutton").show();
$("#addteamdiv").hide();
}
function addteams() {
$("#addteambutton").show();
$("#addteamdiv").hide();
var value_to_add = 0;
if (sliders.length == 0 && $("#addTeams").val().length > 0) {
value_to_add = 100 / $("#addTeams").val().length;
}
var data = $("#addTeams").select2('data');
jQuery.each($("#addTeams").val(), function (i, val) {
$('#teamsContainer div#addteambutton').last().before('<div class="row" id="' + val + '_div"><div class="col-sm-4" style="text-align:right;"><label id="' + val + '_label">' +
data[i].text + '</label></div><div class="col-sm-4" style="padding-top: 6px;"><div id="' + val + '_container" class="ui-slider">' +
'<input id="' + val + '_value" class="sliderValue" type="hidden" value="0" name="allocation" data-val="true"><span class="sliderTitle">0%</span>' +
'</div></div><div class="col-sm-4"><a class="btn btn-xs btn-labeled btn-danger" onclick="removeteam(\'' + val + '\');">Remove</a></div></div>');
$('#teamsContainer div.row').last().find('.ui-slider').first().slider({
'range': 'min',
'min': 0,
'max': 100,
'value': value_to_add,
change: onSliderDependentChange,
slide: onSliderDependentSlide
});
$("#teamsContainer .ui-slider").last().siblings().text(value_to_add + "%");///buggy!!!!!
othersliders.push($("#teamsContainer .ui-slider").last()[0]);
teamallocations[val] = value_to_add;
$("#addTeams").find('option[value=' + val + ']').remove();
});
$("#addTeams").select2("val", "");
sliders = $("#teamsContainer .ui-slider");
}
function removeteam(id) {
$('#addTeams')
.append($("<option></option>")
.attr("value", id)
.text($('#' + id + '_label').text()));
othersliders = $(othersliders).not($('#' + id + '_container').first());
var todistribute = teamallocations[id];
if (othersliders.length > 0) {
var sliderscount = othersliders.length;
for (i = othersliders.length - 1 ; i >= 0 ; i--) {
teamallocations[$(othersliders[i]).attr('id').split("_")[0]] += todistribute / sliderscount;
$(othersliders[i]).slider("value", Math.round(teamallocations[$(othersliders[i]).attr('id').split("_")[0]]));
}
}
else if (sliders.length > 0) {
var sliderscount = sliders.length;
for (i = othersliders.length - 1 ; i >= 0 ; i--) {
teamallocations[$(sliders[i]).attr('id').split("_")[0]] += todistribute / sliderscount;
$(sliders[i]).slider("value", Math.round(teamallocations[$(othersliders[i]).attr('id').split("_")[0]]));
}
}
$('#' + id + '_div').remove();
sliders = $("#teamsContainer .ui-slider");
delete teamallocations[id];
}
function SaveSliders() {
var finalSliderValues;
$("#teamsContainer .ui-slider").each(function (i, slider) {
teamallocations[$(this).attr('id').split("_")[0]] = $(this).slider("value");
});
$('#TeamAllocationsJson').val(JSON.stringify(teamallocations));
$("#teamsAllocationForm").submit();
}
function onTeamsAllocFailure(xhr) {
}
function onTeamsAllocSuccess(data) {
window.location = document.location.href + '&tab=scenarios';
}
</script>
<style type="text/css">
.validation-error {
color : red;
}
#table thead{
border-collapse: separate;
border-spacing: 0;
}
#table thead tr th{
background-clip: padding-box;
border-top: 1.1px solid;
border-right: 1.1px solid;
}
</style>
<!-- Large modal -->
<div id="modalGraph" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Expenditure Graph by Scenario</h4>
</div>
<div class="modal-body">
<div id="DetailsGraphContainer" class="graph-container">
<div id="divDetailsGraph" style="min-width:10px;"></div>
</div>
</div>
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- / .modal -->
<!-- / Large modal -->
<div id="controller" ng-app="app" ng-controller="scenarioDetailsCalendarController">
@Html.ValidationSummary("The following errors occurred:")
<div class="panel-body form-horizontal" id="criteria-container">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label" for="selCategoryTypes">Category Type</label>
<div class="col-sm-8">
<select ng-model="calendarFilters.CategoryType" name="selCategoryTypes" ng-options="s.Value as s.Text for s in categoryTypes" class="form-control">
<option value="">--Select option--</option>
</select>
</div>
</div>
@*<div class="form-group">
<label class="col-sm-4 control-label" for="selCGEFX">Labor / Materials</label>
<div class="col-sm-8">
<select ng-model="calendarFilters.LaborMaterials" name="selCGEFX" ng-options="s.Value as s.Text for s in CGEFX" class="form-control">
<option value="">--Select option--</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="selIncomeTypes">Income Types</label>
<div class="col-sm-8">
<select ng-model="calendarFilters.IncomeType" name="selIncomeTypes" ng-options="s.Value as s.Text for s in incomeTypes" class="form-control">
<option value="">--Select option--</option>
</select>
</div>
</div>*@
<div class="form-group">
<label class="col-sm-4 control-label" for="selGLAccounts">GL Account</label>
<div class="col-sm-8">
<select ng-model="calendarFilters.GLAccount" name="selGLAccounts" ng-options="s.Value as s.Text for s in glAccounts" class="form-control">
<option value="">--Select option--</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="selCreditDepartments">Cost Center</label>
<div class="col-sm-8">
<select ng-model="calendarFilters.CreditDepartment" name="selCreditDepartments" ng-options="s.Value as s.Text for s in creditDepartments" class="form-control">
<option value="">--Select option--</option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label" for="selSelectedExpCats">Expenditure Categories</label>
<div class="col-sm-8">
<select ng-model="calendarFilters.SelectedExpCats" name="selSelectedExpCats" ng-options="s.Id as s.Name for s in availableExpenditures"
class="form-control" multiple="multiple" size="16" style="height: 126px;"></select>
</div>
</div>
</div>
</div>
<div class="panel-body" id="buttons-container">
<div class="col-sm-12">
<button class="btn btn-default lockable" id="btnReloadCalendar" ng-click="getCalendar()"><i class="fa fa-refresh"></i> Reload</button>
<button class="btn btn-primary lockable" id="btnSaveChanges" ng-click="saveChanges()"><i class="fa fa-save"></i> Save Changes</button>
<div class="btn-group">
<button class="btn btn-info dropdown-toggle lockable" type="button" data-toggle="dropdown"><i class="fa fa-bars"></i>&nbsp;<i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu dropdown-menu-right" id="visibilitydropdown" style="width: 200px;">
<li class="padding-xs-hr"><div class="checkbox"><label><input type="checkbox" checked class="columnVisibilityTrigger px" onclick="ToggleCriteria()"/> <span class="lbl">Show Criteria</span></label></div></li>
<li class="padding-xs-hr"><label><span class="switcherLbl">Quantity as</span></label><input type="checkbox" @isUOMHoursChecked name="uomMode" id="uomMode" class="switcher px" ng-click="switchUOMMode()"/></li>
<li class="padding-xs-hr"><label><span class="switcherLbl">Grid Mode</span></label><input type="checkbox" name="chMode" id="chMode" class="switcher px" ng-click="switchTableMode()" checked/></li>
<li class="padding-xs-hr"><label><span class="switcherLbl">Default View</span></label><input type="checkbox" name="monthWeekMode" id="monthWeekMode" class="switcher px" ng-click="switchViewMode()" checked/></li>
<li class="divider"></li>
<li><a href="#" id="btnShowGraph" ng-click="showGraph()" disabled="disabled"><i class="fa fa-tasks"></i> Show Graph</a></li>
<li><a href="#" data-toggle="modal" data-target="#expenditures">Expenditures</a></li>
<li><a href="#" id="btnPushPull" data-toggle="modal" data-target="#push_pull" disabled="disabled">Push/Pull Category Resource</a></li>
<li><a href="#" id="btnReallocate" data-toggle="modal" data-target="#reallocator">Reallocate Resource</a></li>
<li><a href="#" data-toggle="modal" data-target="#editTotal" ng-click="recalcTotal()">Edit Total</a></li>
<li><a href="#" id="btnFormatCells" data-toggle="modal" data-target="#modalFormatCells" ng-click="prefillFormatCells()" disabled="disabled">Format Cells</a></li>
<li class="divider"></li>
<li><a href="#" data-toggle="modal" data-target="#teamsAllocation">Teams Allocation</a></li>
</ul>
</div>
</div>
</div>
<div class="table-light table-responsive very-big-table freezeTable">
<table class="table table-striped table-bordered dataTable" id="table" ng-if="data != null">
<thead>
<tr>
<th style="width: 20px;" class="headcol"></th>
<th style="width: 300px;left:38px;" class="headcol">Name</th>
<th style="width: 100px;left:355px;" class="headcol">Grand Totals</th>
<th ng-repeat="header in (data.Headers | filter : {IsMonth:true})" style="text-decoration:underline;color:#4083a9;cursor:pointer;" ng-click="onMonthHeaderClick(header)"
colspan="{{header.Collapsed ? 1 : header.Weeks.length}}">
<i class="fa" ng-class="header.CollapsedClass" style="margin-right: 5px;"></i>{{header.Title}}
</th>
</tr>
<tr>
<th style="width: 20px;" class="headcol"><input type="checkbox" ng-model="data.ScenarioCalendar[0].Checked" ng-click="checkAll()"/></th>
<th style="width: 300px;left:38px;" class="headcol"></th>
<th style="width: 100px;left:355px;" class="headcol"></th>
<th ng-repeat="header in data.Headers" ng-show="header.Show">
{{ header.IsMonth ? '' : header.Title}}
</th>
</tr>
</thead>
<tbody ng-repeat="row in data.ScenarioCalendar" ng-if="$index > 0">
<tr ng-if="checkEditable(row.UseType)">
<td style="width: 20px;" class="headcol">
<input type="checkbox" ng-model="row.Checked" ng-click="collectchecked(row)"/>
</td>
<td style="width: 300px;left:38px;text-decoration:underline;color:#4083a9;cursor:pointer;" class="headcol" ng-click="onExpCatClick(row)" resize-freez>
<a id="id_exp{{row.ExpCatId}}" href="javascript:void(0);">
<i class="fa" ng-class="row.CollapsedClass" style="margin-right: 5px;" title="Expand"></i>{{ row.ExpCatName || 'empty' }}</a>
</td>
<td style="width: 100px;left:355px;" class="headcol">
<span>{{ calendarFilters.IsTableModeQuantity ? (row.GrandTotalQuantity || 0 | number:2) : (row.GrandTotalCost || 0 | currency) }}</span>
</td>
<td ng-class="{cellequal : !data.Headers[$index].IsMonth && calendarFilters.IsTableModeQuantity && row.RestQuantity[$index] == 0,
cellover : !data.Headers[$index].IsMonth && calendarFilters.IsTableModeQuantity && row.RestQuantity[$index] < 0}"
ng-repeat="col in (calendarFilters.IsTableModeQuantity ? row.QuantityValues : row.CostValues) track by $index" ng-show="data.Headers[$index].Show">
<a href="#" ng-click="resizeFreezAng()" editable-text="col" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit" onbeforesave="checkValue($data, row.ExpCatId, $index)"
e-required>
{{ calendarFilters.IsTableModeQuantity ? (col || 0 | number:2) : (col || 0 | currency) }}
</a>
@*<span ng-show="data.Headers[$index].IsMonth">
{{ calendarFilters.IsTableModeQuantity ? (col || 0 | number:2) : (col || 0 | currency) }}
</span>*@
</td>
</tr>
<tr ng-if="!checkEditable(row.UseType)">
<td style="width: 20px;" class="headcol">
<input type="checkbox" class="cb_checked" ng-model="row.Checked" ng-click="collectchecked(row)" />
</td>
<td style="width: 300px;left:38px;text-decoration:underline;color:#4083a9;cursor:pointer;" class="headcol" ng-click="onExpCatClick(row)" resize-freez>
<a id="id_exp{{row.ExpCatId}}" href="javascript:;">
<i class="fa" ng-class="row.CollapsedClass" style="margin-right: 5px;" title="Expand"></i>{{ row.ExpCatName || 'empty' }}</a>
</td>
<td style="width: 100px;left:355px;" class="headcol">
<span>{{ calendarFilters.IsTableModeQuantity ? (row.GrandTotalQuantity || 0 | number:2) : (row.GrandTotalCost || 0 | currency) }}</span>
</td>
<td ng-repeat="col in (calendarFilters.IsTableModeQuantity ? row.QuantityValues : row.CostValues) track by $index" ng-show="data.Headers[$index].Show">
<span>
{{ calendarFilters.IsTableModeQuantity ? (col || 0 | number:2) : (col || 0 | currency) }}
</span>
</td>
</tr>
<tr ng-repeat="res in row.Resources" ng-show="!row.Collapsed">
<td style="width: 20px;" class="headcol">&nbsp;</td>
<td ng-style="{'width': res.width || '300px', 'left': '38px'}" class="headcol">
<div class="restbl">
<div>
<div>{{res.Name}}</div>
<div>
<button title="Take all" class="btn btn-info btn-xs" ng-disabled="(row.Resources.length <= 1) || !calendarFilters.IsTableModeQuantity" ng-click="takeAll(res.Id, row.ExpCatId)"><i class="fa fa-asterisk"></i></button>
<button title="Take remaining" class="btn btn-primary btn-xs" ng-disabled="!calendarFilters.IsTableModeQuantity" ng-click="takeRemaining(res.Id, row.ExpCatId)"><i class="fa fa-plus"></i></button>
<button title="Zero this resource" class="btn btn-success btn-xs" ng-disabled="!calendarFilters.IsTableModeQuantity" ng-click="zeroResource(res.Id, row.ExpCatId)"><i class="fa fa-minus"></i></button>
<button title="Remove this resource"class="btn btn-danger btn-xs" ng-disabled="(calendarFilters.IsTableModeQuantity && res.GrandTotalQuantity > 0) || (!calendarFilters.IsTableModeQuantity && res.GrandTotalCost > 0) || !calendarFilters.IsTableModeQuantity" ng-click="removeResource(res.Id, row.ExpCatId)"><i class="fa fa-times"></i></button>
</div>
</div>
</div>
</td>
<td ng-style="{'width': '100px', 'left': res.left || '355px'}" class="headcol">
<span>{{ calendarFilters.IsTableModeQuantity ? (res.GrandTotalQuantity || 0 | number:2) : (res.GrandTotalCost || 0 | currency) }}</span>
</td>
<td ng-class="{cellequal : !data.Headers[$index].IsMonth && calendarFilters.IsTableModeQuantity && row.RestQuantity[$index] == 0,
cellover : !data.Headers[$index].IsMonth && calendarFilters.IsTableModeQuantity && (row.RestQuantity[$index] < 0 || res.QuantityValues[$index] > res.CapacityQuantityValues[$index])}"
ng-repeat="col in (calendarFilters.IsTableModeQuantity ? res.QuantityValues : res.CostValues) track by $index" ng-show="data.Headers[$index].Show"
ng-attr-title="{{res.QuantityValues[$index]}}/{{res.CapacityQuantityValues[$index]}}">
<a href="#" ng-click="resizeFreezAng()" editable-text="col" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit" onbeforesave="checkResourceValue($data, row.ExpCatId, res.Id, $index)"
e-required>
{{ calendarFilters.IsTableModeQuantity ? (col || 0 | number:2) : "N/A" }}
</a>
@* <span ng-show="data.Headers[$index].IsMonth">
{{ calendarFilters.IsTableModeQuantity ? (col || 0 | number:2) : "N/A" }}
</span>*@
</td>
</tr>
<tr ng-if="checkEditable(row.UseType)" ng-show="!row.Collapsed" class="resRow">
<td style="width: 20px;" class="headcol">&nbsp;</td>
<td colspan="2" style="width: 417px;left:38px;" class="headcol" >
<div class="col-sm-8">
<span>Assign a person:</span>
</div><br />
<div class="col-sm-8">
<select ng-model="row.ResourceToAssignId">
<option ng-repeat="item in getExpCatResources(row)" value="{{item.Id}}">{{item.Name}}</option>
</select>
</div>
<div class="col-sm-2">
<button class="btn btn-sm btn-success" ng-disabled="row.ResourceToAssignId == null || !calendarFilters.IsTableModeQuantity" ng-click="assignResource(row.ResourceToAssignId, row.ExpCatId, $event)">Assign</button>
</div>
</td>
<td colspan="{{(calendarFilters.IsTableModeQuantity ? row.QuantityValues.length : row.CostValues.length)}}">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="width: 338px;text-align: right;" class="headcol">{{data.ScenarioCalendar[0].ExpCatName}}</td>
<td style="width: 100px;left:355px;" class="headcol">{{calendarFilters.IsTableModeQuantity ? (data.ScenarioCalendar[0].GrandTotalQuantity || 0 | number:2) : (data.ScenarioCalendar[0].GrandTotalCost || 0 | currency)}}</td>
<td ng-repeat="col in (calendarFilters.IsTableModeQuantity ? data.ScenarioCalendar[0].QuantityValues : data.ScenarioCalendar[0].CostValues) track by $index" ng-show="data.Headers[$index].Show">
{{ calendarFilters.IsTableModeQuantity ? (col || 0 | number:2) : (col || 0 | currency) }}
</td>
</tr>
</tfoot>
</table>
</div>
<!-- Modal -->
<form name="editTotalForm">
<div id="editTotal" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" >Edit Total</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-sm-4 control-label">Expenditure Category</label>
<div class="col-sm-8">
<select ng-model="editTotal.ExpCat" ng-options="s.Id as s.Name for s in availableExpenditures" ng-change="recalcTotal()" class="form-control">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Quantity/Cost</label>
<div class="col-sm-8">
<select ng-model="editTotal.SeatsCost" ng-options="option.value as option.name for option in typeOptions" ng-change="recalcTotal()" class="form-control"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Old Total Value</label>
<div class="col-sm-8">
<input ng-model="editTotal.CurrentTotal" class="form-control" disabled = "disabled"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">New Total Value</label>
<div class="col-sm-8">
<input ng-model="editTotal.NewTotal" name="NewTotal" class="form-control" required />
</div>
<div class="col-sm-offset-4 col-sm-6">
<span class="validation-error" ng-show="editTotalForm.NewTotal.$error.required">NewTotal is a required field</span>
</div>
</div>
<hr>
<div class="form-group">
<label class="col-sm-4 control-label">Use Current Curve</label>
<div class="col-sm-8">
<input type="radio" ng-model="editTotal.Curve" value="source">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Use Different Curve</label>
<div class="col-sm-8">
<div class="radio">
<input type="radio" ng-model="editTotal.Curve" value="other">
<select ng-model="editTotal.OtherCurve" name="selCategoryCurve" ng-disabled="!isOtherSelectedTotal()" ng-options="s.Id as s.Name for s in availableExpenditures" class="form-control">
</select>
</div>
</div>
</div>
</div> <!-- / .modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="editTotalFunc()">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->
</form>
<!-- / Modal -->
<!-- Modal -->
<form name="reallocatorForm">
<div id="reallocator" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Reallocate Resource</h4>
</div>
<div class="modal-body">
<h4>Expenditure Category</h4>
<div class="form-group">
<label class="col-sm-4 control-label">From</label>
<div class="col-sm-8">
<select ng-model="reallocator.SourceExpCat" ng-options="s.Id as s.Name for s in availableExpenditures" class="form-control"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">To</label>
<div class="col-sm-8">
<select ng-model="reallocator.TargetExpCat" ng-options="s.Id as s.Name for s in availableExpenditures" class="form-control"></select>
</div>
</div>
<h4>Week Ending</h4>
<div class="form-group">
<label class="col-sm-4 control-label">From</label>
<div class="col-sm-8">
<div class="input-group date" id="bs-datepicker-from">
<input type="text" ng-model="reallocator.SourceWeekEnding" name="SourceWeekEnding" class="form-control" ng-value="reallocator.SourceWeekEnding" required><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
<div class="col-sm-offset-4 col-sm-6">
<span class="validation-error" ng-show="reallocatorForm.SourceWeekEnding.$error.required">Source WeekEnding is a required field</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">To</label>
<div class="col-sm-8">
<div class="input-group date" id="bs-datepicker-to">
<input type="text" ng-model="reallocator.TargetWeekEnding" name="TargetWeekEnding" class="form-control" ng-value="reallocator.TargetWeekEnding" required><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
<div class="col-sm-offset-4 col-sm-6">
<span class="validation-error" ng-show="reallocatorForm.TargetWeekEnding.$error.required">Target WeekEnding is a required field</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">% to Transfer</label>
<div class="col-sm-8">
<div id="percentage_container">
<input id="percentage" type="hidden" class="sliderValue" ng-value="reallocator.Percentage" />
<span class="sliderTitle">100%</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Reallocate By</label>
<div class="col-sm-8">
<select ng-model="reallocator.ReallocateBy" ng-options="option.value as option.name for option in typeOptions" class="form-control"></select>
</div>
</div>
<hr>
<div class="form-group">
<label class="col-sm-4 control-label">Use Source Curve</label>
<div class="col-sm-8">
<input type="radio" ng-model="reallocator.CurveType" value="source">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="selCategoryTypes">Use Target Curve</label>
<div class="col-sm-8">
<input type="radio" ng-model="reallocator.CurveType" value="target">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="selCategoryTypes">Use Different Curve</label>
<div class="col-sm-8">
<div class="radio">
<input type="radio" ng-model="reallocator.CurveType" value="other">
<select ng-model="reallocator.OtherCurve" name="selCategoryCurve" ng-disabled="!isOtherSelectedReallocator()" ng-options="s.Id as s.Name for s in availableExpenditures" class="form-control"></select>
</div>
</div>
</div>
</div> <!-- / .modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="reallocateResource()">Reallocate</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->
</form>
<!-- / Modal -->
<!-- Modal -->
<form name="pushPullForm">
<div id="push_pull" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Push/Pull</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-4">
</div>
<div class="col-sm-8">
<div class="col-sm-6">
<label class="col-sm-4 control-label" for="sourceType">Push</label>
<input type="radio" ng-model="pushpuller.push" name="sourceType" ng-value="true" checked="checked">
</div>
<div class="col-sm-5">
<label class="col-sm-4 control-label" for="sourceType">Pull</label>
<input type="radio" ng-model="pushpuller.push" name="sourceType" ng-value="false">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="selCategoryTypes">Resources</label>
<div class="col-sm-8">
<select multiple="multiple" ng-model="pushpuller.resource" class="form-control" ng-options="s.ExpCatId as s.ExpCatName for s in checkedExpenditures"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="selCategoryTypes">By number of weeks</label>
<div class="col-sm-8">
<input ng-model="pushpuller.weeks" style="width: 60px;" type="number" id="replyNumber" name="replyNumber" min="0" data-bind="value:replyNumber" required />
</div>
<div class="col-sm-6">
<span class="validation-error" ng-show="pushPullForm.replyNumber.$error.required">Reply Number is a required field</span>
<span class="validation-error" ng-show="pushPullForm.replyNumber.$error.min">Reply Number can't be less 0</span>
</div>
</div>
</div> <!-- / .modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="pushPull()">OK</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->
</form>
<!-- / Modal -->
<!-- / Modal -->
<form name="formatCellsForm">
<div id="modalFormatCells" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Format Cells</h4>
</div>
<div class="modal-body">
<div class="panel-body form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label" for="selFormatExpCats">Expenditure Categories</label>
<div class="col-sm-8">
<select ng-model="formatCells.SelectedExpCats" name="selFormatExpCats" ng-options="s.Id as s.Name for s in formatCells.ExpCats"
class="form-control" size="8" style="height: 173px;"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="selFormatExpCats">Week Ending from</label>
<div class="col-sm-8">
<div class="input-daterange input-group" style="z-index: 1040;" id="fs-datepicker-range">
<input class="form-control" ng-model="formatCells.StartDate" id="formatStartDate" name="formatStartDate" type="text" required />
<span class="input-group-addon">to</span>
<input class="form-control" ng-model="formatCells.EndDate" id="formatEndDate" name="formatEndDate" type="text" required />
</div>
</div>
<div class="col-sm-offset-4 col-sm-6">
<span class="validation-error" ng-show="formatCellsForm.formatStartDate.$error.required">Start Date is a required field</span>
<br />
<span class="validation-error" ng-show="formatCellsForm.formatEndDate.$error.required">End Date is a required field</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="formatCellsDecimalPlaces">Decimal Places</label>
<div class="col-sm-2">
<input type="number" min="0" max="5" ng-model="formatCells.DecimalPlaces" name="formatCellsDecimalPlaces" class="form-control" required />
</div>
<div class="col-sm-6">
<span class="validation-error" ng-show="formatCellsForm.formatCellsDecimalPlaces.$error.required">DecimalPlaces is a required field</span>
<span class="validation-error" ng-show="formatCellsForm.formatCellsDecimalPlaces.$error.min">DecimalPlaces has so min value</span>
<span class="validation-error" ng-show="formatCellsForm.formatCellsDecimalPlaces.$error.max">DecimalPlaces has too long value</span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="submitFormatCells()">Ok</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- / .modal -->
</form>
<!-- / Modal -->
<!-- Warning modal alert -->
<div id="modal-warning" class="modal modal-alert modal-warning fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<i class="fa fa-times-circle"></i>
</div>
<div class="modal-title"></div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">OK</button>
</div>
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- / .modal -->
<!-- Modal -->
<div id="expenditures" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content" id="expendituresModal">
@Html.Partial("_expendituresModal", Model)
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->
@using (Ajax.BeginForm("UpdateTeamsAllocation", "Scenarios", new AjaxOptions { HttpMethod = "Post", OnSuccess = "onTeamsAllocSuccess", OnFailure = "onTeamsAllocFailure", UpdateTargetId = "teamsAllocation" }, new { @id = "teamsAllocationForm" }))
{
@Html.HiddenFor(model => model.TeamAllocationsJson)
@Html.HiddenFor(model => model.Id)
@Html.HiddenFor(model => model.ParentId)
@Html.HiddenFor(model => model.TeamAllocations)
<div id="teamsAllocation" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" >Teams Allocation</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12" id="teamsContainer">
@foreach (var teamalloc in Model.TeamAllocations)
{
<div class="row" id="@teamalloc.Team.Id.ToString()_div">
<div class="col-sm-4" style="text-align:right;">
<label id="@teamalloc.Team.Id.ToString()_label">
@teamalloc.Team.Name
</label>
</div>
<div class="col-sm-4" style="padding-top: 6px;">
<div id="@teamalloc.Team.Id.ToString()_container" class="ui-slider">
<input id="@teamalloc.Team.Id.ToString()_value" class="sliderValue" type="hidden" value="@teamalloc.Allocation" name="allocation" data-val="true">
<span class="sliderTitle">@teamalloc.Allocation%</span>
</div>
</div>
<div class="col-sm-4">
@*<a class="btn btn-xs btn-labeled btn-danger" onclick="removeteam('@team2proj.Team.Id.ToString()');">Remove</a>*@
</div>
</div>
}
<div id="addteambutton">
<div>
<div class="col-sm-4" style="text-align:right;">
<a class="btn btn-success" href="javascript:void(0)" onclick="showaddteams();">Add teams</a>
</div>
<div class="col-sm-4" style="padding-bottom: 17px;">
&nbsp;
</div>
<div class="col-sm-4" style="padding-bottom: 17px;">
</div>
</div>
</div>
<div id="addteamdiv" >
<div>
<div class="form-group no-margin-hr select2-primary col-sm-4" style="text-align:right;">
@Html.ListBox("addTeams", EnVisage.Code.Utils.GetTeams(false), new { @id = "addTeams", @class = "form-control" })
</div>
<div class="col-sm-4">
<a class="btn btn-success" href="javascript:void(0)" onclick="addteams();"><i class="fa fa-plus"></i> Add</a>
<a class="btn btn-default" href="javascript:void(0)" onclick="hideteams();">Cancel</a>
</div>
<div class="col-sm-4" style="padding-bottom: 17px;">
</div>
</div>
</div>
</div>
</div>
</div> <!-- / .modal-body -->
<div class="modal-footer">
<a type="button" class="btn btn-primary" onclick="SaveSliders()">Save</a>
<a type="button" class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</div> <!-- /.modal -->
}
</div>