1288 lines
75 KiB
Plaintext
1288 lines
75 KiB
Plaintext
@using EnVisage.Code
|
||
@using EnVisage.Models
|
||
@using Microsoft.AspNet.Identity
|
||
@model ScenarioDetailsCalendarModel
|
||
|
||
<div id="erorMsgPlaceholder"></div>
|
||
<script type="text/javascript" src="~/Scripts/calendarMethods.js"></script>
|
||
<script type="text/javascript">
|
||
var _editTotalDataChanged = false;
|
||
function onETDataChanged() {
|
||
_editTotalDataChanged = true;
|
||
}
|
||
function resetETDataChanged() {
|
||
_editTotalDataChanged = false;
|
||
}
|
||
function isETDataChanged() {
|
||
return _editTotalDataChanged;
|
||
}
|
||
|
||
var _reallocatorDataChanged = false;
|
||
function onRTDataChanged() {
|
||
_reallocatorDataChanged = true;
|
||
}
|
||
function resetRTDataChanged() {
|
||
_reallocatorDataChanged = false;
|
||
}
|
||
function isRTDataChanged() {
|
||
return _reallocatorDataChanged;
|
||
}
|
||
|
||
var _pushPullDataChanged = false;
|
||
function onPPDataChanged() {
|
||
_pushPullDataChanged = true;
|
||
}
|
||
function resetPPDataChanged() {
|
||
_pushPullDataChanged = false;
|
||
}
|
||
function isPPDataChanged() {
|
||
return _pushPullDataChanged;
|
||
}
|
||
|
||
var _formatCellsDataChanged = false;
|
||
function onFCDataChanged() {
|
||
_formatCellsDataChanged = true;
|
||
}
|
||
function resetFCDataChanged() {
|
||
_formatCellsDataChanged = false;
|
||
}
|
||
function isFCDataChanged() {
|
||
return _formatCellsDataChanged;
|
||
}
|
||
|
||
@if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
|
||
{
|
||
<text>
|
||
var _saveScenarioDataChanged = false;
|
||
function onSSDataChanged() {
|
||
_saveScenarioDataChanged = true;
|
||
}
|
||
function resetSSDataChanged() {
|
||
_saveScenarioDataChanged = false;
|
||
}
|
||
function isSSDataChanged() {
|
||
return _saveScenarioDataChanged;
|
||
}
|
||
</text>
|
||
}
|
||
function _scenarioCalendarInitSwitchers() {
|
||
var container = $('#controller-details-grid');
|
||
$(container).find('#uomMode').switcher({
|
||
on_state_content: '# Hours',
|
||
off_state_content: '# Resources'
|
||
});
|
||
$(container).find('#uomMode').parent().attr('title', $(container).find('#uomMode').attr('title'));
|
||
|
||
$(container).find('#tableMode').switcher({
|
||
on_state_content: 'Quantity',
|
||
off_state_content: 'Cost'
|
||
});
|
||
$(container).find('#tableMode').parent().attr('title', $(container).find('#tableMode').attr('title'));
|
||
|
||
$(container).find('#viewMode').switcher({
|
||
on_state_content: 'Month',
|
||
off_state_content: 'Week'
|
||
});
|
||
$(container).find('#viewMode').parent().css("width", "80px").attr('title', $(container).find('#viewMode').attr('title'));
|
||
|
||
$(container).find('#actualsMode').switcher({
|
||
on_state_content: 'Actuals',
|
||
off_state_content: 'Projected'
|
||
});
|
||
$(container).find('#actualsMode').parent().css("width", "80px").attr('title', $(container).find('#actualsMode').attr('title'));
|
||
|
||
$(container).find('#dragNDropReplaceValues').switcher({
|
||
on_state_content: 'Replace values',
|
||
off_state_content: 'Sum values'
|
||
});
|
||
$(container).find('#dragNDropReplaceValues').parent().css("width", "110px").attr('title', $(container).find('#dragNDropReplaceValues').attr('title'));
|
||
|
||
$(container).find('#actualsModeGraph').switcher({
|
||
on_state_content: 'On',
|
||
off_state_content: 'Off'
|
||
});
|
||
$(container).find('#actualsModeGraph').parent().css("width", "80px");
|
||
|
||
$(container).find('#totalGraph').switcher({
|
||
on_state_content: 'Total',
|
||
off_state_content: 'EC\'s'
|
||
});
|
||
$(container).find('#totalGraph').parent().css("width", "80px");
|
||
|
||
$(container).find('#timeGraph').switcher({
|
||
on_state_content: 'Quantity',
|
||
off_state_content: 'Cost'
|
||
});
|
||
$(container).find('#timeGraph').parent().css("width", "80px");
|
||
|
||
$(container).find('#quantityGraph').switcher({
|
||
on_state_content: '# Hours',
|
||
off_state_content: '# Resources'
|
||
});
|
||
$(container).find('#quantityGraph').parent().css("width", "90px");
|
||
|
||
$(container).find('#is-active-scenario').switcher({
|
||
on_state_content: 'Active',
|
||
off_state_content: 'Inactive'
|
||
});
|
||
$(container).find('#is-active-scenario').parent().css('width', '100px');
|
||
}
|
||
|
||
function initScenarioDetails() {
|
||
$('#controller-details-grid').scenarioDetailsGrid();
|
||
_scenarioCalendarInitSwitchers();
|
||
_scenarioCalendarInitDatepickers();
|
||
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
|
||
};
|
||
$('#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);
|
||
}
|
||
});
|
||
$('#visibilitydropdown_graph').click(function (event) {
|
||
event.stopPropagation();
|
||
});
|
||
//$('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", "750px");
|
||
|
||
$("#pushPullExpCats").select2();
|
||
$("#roundExpCats").select2();
|
||
$("#formatCellsDecimalPlaces").select2({
|
||
minimumResultsForSearch: -1
|
||
});
|
||
$("#selSelectedExpCats").select2();
|
||
$("#selExpCats2Add").select2();
|
||
$('#selTeams2Add').select2();
|
||
$('#distributionType').select2();
|
||
|
||
|
||
$('#editTotal').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
|
||
if (typeof onETDataChanged === 'function')
|
||
onETDataChanged();
|
||
});
|
||
|
||
$('#reallocator').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
|
||
if (typeof onRTDataChanged === 'function')
|
||
onRTDataChanged();
|
||
});
|
||
|
||
$('#push_pull').find('input[type=number],select,input[type=radio]').on("change", function () {
|
||
if (typeof onPPDataChanged === 'function')
|
||
onPPDataChanged();
|
||
});
|
||
|
||
$('#modalFormatCells').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
|
||
if (typeof onFCDataChanged === 'function')
|
||
onFCDataChanged();
|
||
});
|
||
|
||
@if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
|
||
{
|
||
<text>
|
||
$('#saveScenarioModal').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
|
||
if (typeof onSSDataChanged === 'function')
|
||
onSSDataChanged();
|
||
});
|
||
</text>
|
||
}
|
||
$(document).on('hide.bs.modal', '#reallocator', function (e) {
|
||
if ($(e.target).attr('id') != 'reallocator') {
|
||
$("#reallocator").focus();
|
||
return true; // close modal form
|
||
}
|
||
if (typeof isRTDataChanged === 'function')
|
||
if (isRTDataChanged()) {
|
||
if (confirm("Reallocator form contains unsaved changes, do you really want to close the form?")) {
|
||
if (typeof resetRTDataChanged === 'function') {
|
||
resetRTDataChanged();
|
||
$('#reallocator').modal('hide');
|
||
}
|
||
}
|
||
$("#reallocator").focus();
|
||
return false; // DO NOT close modal form
|
||
}
|
||
$("#reallocator").focus();
|
||
return true; // close modal form
|
||
}).on('shown.bs.modal', '#reallocator', function (e) {
|
||
if ($(e.target).attr('id') == 'reallocator') {
|
||
if (typeof resetRTDataChanged === 'function')
|
||
resetRTDataChanged();
|
||
}
|
||
});
|
||
$(document).on('hide.bs.modal', '#editTotal', function (e) {
|
||
if ($(e.target).attr('id') != 'editTotal') {
|
||
$("#editTotal").focus();
|
||
return true; // close modal form
|
||
}
|
||
if (typeof isETDataChanged === 'function')
|
||
if (isETDataChanged()) {
|
||
if (confirm("Change Curve form contains unsaved changes, do you really want to close the form?")) {
|
||
_editTotalDataChanged = false;
|
||
$('#editTotal').modal('hide');
|
||
}
|
||
$("#editTotal").focus();
|
||
return false; // DO NOT close modal form
|
||
}
|
||
$("#editTotal").focus();
|
||
return true; // close modal form
|
||
}).on('shown.bs.modal', '#editTotal', function (e) {
|
||
if ($(e.target).attr('id') == 'editTotal') {
|
||
if (typeof resetETDataChanged === 'function')
|
||
resetETDataChanged();
|
||
}
|
||
});
|
||
$(document).on('hide.bs.modal', '#push_pull', function (e) {
|
||
if ($(e.target).attr('id') != 'push_pull') {
|
||
$("#push_pull").focus();
|
||
return true; // close modal form
|
||
}
|
||
if (typeof isPPDataChanged === 'function')
|
||
if (isPPDataChanged()) {
|
||
if (confirm("Push/Pull form contains unsaved changes, do you really want to close the form?")) {
|
||
if (typeof resetPPDataChanged === 'function') {
|
||
resetPPDataChanged();
|
||
$('#push_pull').modal('hide');
|
||
}
|
||
}
|
||
$("#push_pull").focus();
|
||
return false; // DO NOT close modal form
|
||
}
|
||
$("#push_pull").focus();
|
||
return true; // close modal form
|
||
}).on('shown.bs.modal', '#push_pull', function (e) {
|
||
if ($(e.target).attr('id') == 'push_pull') {
|
||
if (typeof resetPPDataChanged === 'function')
|
||
resetPPDataChanged();
|
||
}
|
||
});
|
||
$(document).on('hide.bs.modal', '#modalFormatCells', function (e) {
|
||
if ($(e.target).attr('id') != 'modalFormatCells') {
|
||
$("#modalFormatCells").focus();
|
||
return true; // close modal form
|
||
}
|
||
if (typeof isFCDataChanged === 'function')
|
||
if (isFCDataChanged()) {
|
||
if (confirm("Round Expenditures form contains unsaved changes, do you really want to close the form?")) {
|
||
if (typeof resetFCDataChanged === 'function') {
|
||
resetFCDataChanged();
|
||
$('#modalFormatCells').modal('hide');
|
||
}
|
||
}
|
||
$("#modalFormatCells").focus();
|
||
return false; // DO NOT close modal form
|
||
}
|
||
$("#modalFormatCells").focus();
|
||
return true; // close modal form
|
||
}).on('shown.bs.modal', '#modalFormatCells', function (e) {
|
||
if ($(e.target).attr('id') == 'modalFormatCells') {
|
||
if (typeof resetFCDataChanged === 'function')
|
||
resetFCDataChanged();
|
||
}
|
||
});
|
||
@if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
|
||
{
|
||
<text>
|
||
$(document).on('hide.bs.modal', '#saveScenarioModal', function (e) {
|
||
if ($(e.target).attr('id') != 'saveScenarioModal') {
|
||
$("#saveScenarioModal").focus();
|
||
return true; // close modal form
|
||
}
|
||
if (typeof isSSDataChanged === 'function')
|
||
if (isSSDataChanged()) {
|
||
if (confirm("Scenario Save form contains unsaved changes, do you really want to close the form?")) {
|
||
if (typeof resetSSDataChanged === 'function') {
|
||
resetSSDataChanged();
|
||
$('#saveScenarioModal').modal('hide');
|
||
}
|
||
}
|
||
$("#saveScenarioModal").focus();
|
||
return false; // DO NOT close modal form
|
||
}
|
||
$("#saveScenarioModal").focus();
|
||
return true; // close modal form
|
||
});
|
||
</text>
|
||
}
|
||
}
|
||
function _scenarioCalendarInitDatepickers() {
|
||
|
||
var datePickerOptions = {
|
||
format: 'mm/dd/yyyy',
|
||
autoclose: true,
|
||
orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto',
|
||
startDate: '@(Constants.MIN_SELECTABLE_DATE)', // SA. ENV-1235
|
||
endDate: '@(Constants.MAX_SELECTABLE_DATE)' // SA. ENV-1235
|
||
};
|
||
|
||
$('#bs-datepicker-scenario-calendar-range').datepicker(datePickerOptions).on('changeDate', function (evt) {
|
||
if (evt.target.id === 'scenarioCalendarStartDate' && !$('#scenarioCalendarEndDate').val()) {
|
||
// SA. ENV-1235
|
||
$('#bs-datepicker-scenario-calendar-range').data('datepicker').pickers[1].prepopulate(evt.date);
|
||
}
|
||
});
|
||
@if(Model.Pinned)
|
||
{
|
||
<text>
|
||
readonlyDatepicker($('#bs-datepicker-scenario-calendar-range'), true);
|
||
</text>
|
||
}
|
||
}
|
||
|
||
function readonlyDatepicker (picker, makeReadonly) {
|
||
|
||
$(picker).each(function () {
|
||
|
||
//find corresponding hidden field
|
||
$.each($(this).find("input[type='text']"), function (i, o) {
|
||
|
||
var name = $(o).attr('name');
|
||
var $hidden = $('input[name="' + name + '"][type="hidden"]');
|
||
|
||
//if it doesn't exist, create it
|
||
if ($hidden.length === 0) {
|
||
$hidden = $('<input type="hidden" name="' + name + '"/>');
|
||
$hidden.insertAfter($(o));
|
||
}
|
||
|
||
if (makeReadonly) {
|
||
$hidden.val($(o).val());
|
||
$(this).unbind('change.readonly');
|
||
$(this).attr('disabled', true);
|
||
$(o).attr('disabled', true);
|
||
}
|
||
else {
|
||
$(this).bind('change.readonly', function () {
|
||
$hidden.val($(o).val());
|
||
});
|
||
$(this).attr('disabled', false);
|
||
$(o).attr('disabled', false);
|
||
}
|
||
});
|
||
});
|
||
};
|
||
|
||
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-details-grid')).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 savePagePreferences() {
|
||
var dataSection = getDataSection($("#controller-details-grid"));
|
||
var prefs = collectPreferences(dataSection);
|
||
saveUserPagePreferences(prefs, dataSection, '/Scenarios/Details');
|
||
}
|
||
|
||
@if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
|
||
{
|
||
<text>
|
||
function hideModals() {
|
||
$('#saveScenarioModal').modal('hide');
|
||
}
|
||
|
||
function refreshScenarioStatus(isActiveScenario) {
|
||
if (isActiveScenario)
|
||
$('#is-active-scenario').switcher('on');
|
||
else
|
||
$('#is-active-scenario').switcher('off');
|
||
}
|
||
</text>
|
||
}
|
||
|
||
function scrollGrid(mouseCoords) {
|
||
if (!mouseCoords)
|
||
return;
|
||
|
||
var threshold = 40;
|
||
var grandTotalCell = $('#table thead tr:eq(0) th.headcol:eq(2)');
|
||
var grandTotalCellOffset = grandTotalCell.offset();
|
||
var grandTotalCellEndX = grandTotalCellOffset.left + grandTotalCell.width();
|
||
|
||
var tableContainer = $('#table').parent();
|
||
var tableContainerEndX = tableContainer.offset().left + tableContainer.outerWidth();
|
||
var mouseGrandTotalCellDistance = mouseCoords.x - grandTotalCellEndX;
|
||
var mouseTableContainerEndDistance = tableContainerEndX - mouseCoords.x;
|
||
|
||
if (mouseGrandTotalCellDistance <= threshold) {
|
||
var newScrollPosition = Math.max(tableContainer.scrollLeft() - Math.abs(mouseGrandTotalCellDistance) - threshold, 0);
|
||
scrollWithAnimation(tableContainer, newScrollPosition, 300);
|
||
}
|
||
if (mouseTableContainerEndDistance <= threshold) {
|
||
var newScrollPosition = tableContainer.scrollLeft() + Math.abs(mouseGrandTotalCellDistance) + threshold;
|
||
scrollWithAnimation(tableContainer, newScrollPosition, 300);
|
||
}
|
||
}
|
||
|
||
function scrollWithAnimation(container, position, duration) {
|
||
container.stop(true, false);
|
||
container.animate({
|
||
scrollLeft: position
|
||
}, duration);
|
||
}
|
||
|
||
// SA. ENV-574. Time point tooltips for Expenditure Graph
|
||
function formatDateMY(val) {
|
||
if (!val || (val.length < 1))
|
||
return '';
|
||
|
||
var monthes = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||
var date = new Date(val);
|
||
var day = date.getDate();
|
||
var month = date.getMonth();
|
||
var year = date.getFullYear();
|
||
var monthText = monthes[month];
|
||
|
||
return day + ' ' + monthText + ' ' + year;
|
||
};
|
||
|
||
function scenarioDetailsEditFormIsValid() {
|
||
$.validator.unobtrusive.parseDynamicContent('#scenario-calendar-edit-form');
|
||
return $('#scenario-calendar-edit-form').valid();
|
||
};
|
||
</script>
|
||
<style type="text/css">
|
||
.validation-error {
|
||
color: red;
|
||
}
|
||
|
||
#table thead {
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
#table thead tr th {
|
||
-moz-background-clip: padding-box;
|
||
-webkit-background-clip: padding-box;
|
||
background-clip: padding-box;
|
||
border-top: 1.1px solid;
|
||
border-right: 1.1px solid;
|
||
}
|
||
.hideView {
|
||
visibility:hidden;
|
||
}
|
||
</style>
|
||
|
||
<div id="controller-details-grid" ng-controller="scenarioDetailsCalendarController" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))" ng-click="clearSelection()" ng-cloak>
|
||
<!-- Large modal -->
|
||
<div id="modalGraph" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
|
||
<div class="modal-dialog modal-lg">
|
||
<!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Large modal -->
|
||
@Html.ValidationSummary("The following errors occurred:")
|
||
|
||
<div class="panel-body form-horizontal" id="criteria-container" ng-show="data.CalendarFilter.ShowFilters">
|
||
<div class="col-sm-6">
|
||
@*<div class="form-group">
|
||
<label class="col-sm-4 control-label" for="selCGEFX">Labor / Materials</label>
|
||
<div class="col-sm-8">
|
||
<select ng-model="data.CalendarFilter.LaborMaterials" name="selCGEFX" ng-options="s.Value as s.Text for s in data.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="data.CalendarFilter.IncomeType" name="selIncomeTypes" ng-options="s.Value as s.Text for s in data.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="data.CalendarFilter.GLAccount" name="selGLAccounts" ng-options="s.Value as s.Text for s in data.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="data.CalendarFilter.CreditDepartment" name="selCreditDepartments" ng-options="s.Value as s.Text for s in data.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="selCategoryTypes">Category Type</label>
|
||
<div class="col-sm-8">
|
||
<select ng-model="data.CalendarFilter.CategoryType" name="selCategoryTypes" ng-options="s.Value as s.Text for s in data.CategoryTypes" class="form-control">
|
||
<option value="">--Select option--</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label" for="selSelectedExpCats">Expenditure Categories</label>
|
||
<div class="col-sm-8 select2-primary">
|
||
<select ng-model="data.CalendarFilter.SelectedExpCats" id="selSelectedExpCats" name="selSelectedExpCats" ng-options="s.Id as s.Name for s in data.AvailableExpenditures"
|
||
class="form-control" multiple="multiple"></select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body" id="buttons-container">
|
||
<div class="col-sm-12 scenarioDetailsDiv">
|
||
<button type="button" class="btn btn-default lockable" id="btnReloadCalendar" ng-click="setGridSource()" title="Reload"><i class="fa fa-refresh"></i></button>
|
||
<input type="checkbox" class="switcher px" id="tableMode" data-key="chMode" ng-model="data.CalendarFilter.IsTableModeQuantity" title="Grid Mode" onclick="savePagePreferences()" />
|
||
<input type="checkbox" class="switcher px" id="viewMode" data-key="monthWeekMode" ng-model="data.CalendarFilter.IsViewModeMonth" title="Default View" onclick="savePagePreferences()" />
|
||
<input type="checkbox" class="switcher px" id="actualsMode" data-key="actualsMode" ng-model="data.CalendarFilter.ShowActuals" title="Show Actuals" onclick="savePagePreferences()" />
|
||
<input type="checkbox" class="switcher px" id="uomMode" data-key="uomMode" ng-model="data.CalendarFilter.IsUOMHours" title="Quantity as" onclick="savePagePreferences()" />
|
||
<input type="checkbox" class="switcher px" id="dragNDropReplaceValues" data-key="dragNDropReplaceValues" ng-model="data.CalendarFilter.DragNDropReplaceValues" title="Drag-n-Drop Mode" onclick="savePagePreferences()" />
|
||
<div class="btn-group">
|
||
<button class="btn btn-info dropdown-toggle lockable" type="button" data-toggle="dropdown"><i class="fa fa-bars"></i> <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" data-key="showFilters" ng-model="data.CalendarFilter.ShowFilters" class="columnVisibilityTrigger px" onclick="savePagePreferences();" /> <span class="lbl">Show Criteria</span></label></div></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#" id="btnPushPull" data-toggle="modal" data-target="#push_pull" ng-disabled="data.CalendarFilter.ShowActuals">Push/Pull Category Resource</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body form-horizontal" ng-show="showMessagePanel()">
|
||
<div class="alert alert-warning" ng-show="showWarningBlock()">
|
||
<ul>
|
||
@* Only for RMO *@
|
||
<li ng-show="gridWasChanged() && Opener == 2">
|
||
Your changes to this scenario have not been saved yet. Please click "Save Changes" button and then click "Save this Mix" button to complete this change.
|
||
</li>
|
||
@* Only for scenario details *@
|
||
<li ng-show="gridWasChanged() && Opener == 1">
|
||
Your changes to this scenario have not been saved. Please click "Save Changes" button to complete this change.
|
||
</li>
|
||
@* Only for create scenario wizard *@
|
||
<li ng-show="gridWasChanged() && Opener == 0">
|
||
Your changes to this scenario have not been saved yet. Please finish the wizard to complete this change.
|
||
</li>
|
||
<li ng-show="ExpendituresIsUnderAllocated">
|
||
Some categories are underallocated
|
||
</li>
|
||
<li ng-show="!IsPossibleMarginDesignated">
|
||
Designated margin is not possible
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="alert alert-danger" ng-show="!isValidAllocation()">
|
||
<ul>
|
||
<li ng-show="ExpendituresIsOverAllocated">
|
||
Some categories are overallocated
|
||
</li>
|
||
<li ng-show="TeamsIsOverAllocated">
|
||
Some teams are overallocated
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
@if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.RMO)
|
||
{
|
||
<div class="panel-body">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<form id="scenario-calendar-edit-form">
|
||
<div class="row">
|
||
<div class="col-sm-7">
|
||
<label class="control-label">Scenario Dates</label>
|
||
<div class="input-daterange input-group" id="bs-datepicker-scenario-calendar-range">
|
||
<div class="input-daterange input-group date floatdaterange" id="scenario-calendar-startDate">
|
||
<input type="text" class="form-control" id="scenarioCalendarStartDate" name="scenarioCalendarStartDate"
|
||
ng-model="data.ScenarioGeneralInfoEditModel.StartDate" ng-change="scenarioEditModelChanged()"
|
||
data-val="true" data-val-date="The field Scenario Start Date must be a date."
|
||
data-val-required="The Scenario Start Date field is required."
|
||
data-val-scenariostartdate=""
|
||
data-val-scenariostartdate-actualsstartdate="{{data.ScenarioGeneralInfoEditModel.ActualStartDate}}"
|
||
data-val-scenariostartdate-hasactuals="{{data.ScenarioGeneralInfoEditModel.HasActuals}}" />
|
||
</div>
|
||
<div class="pull-left floatdaterange-addon">To</div>
|
||
<div class="input-daterange input-group date floatdaterange" id="scenario-calendar-endDate">
|
||
<input type="text" class="form-control" id="scenarioCalendarEndDate" name="scenarioCalendarEndDate"
|
||
ng-model="data.ScenarioGeneralInfoEditModel.EndDate" ng-change="scenarioEditModelChanged()"
|
||
data-val="true" data-val-date="The field Scenario End Date must be a date."
|
||
data-val-required="The Scenario End Date field is required."
|
||
data-val-scenarioenddate=""
|
||
data-val-scenarioenddate-actualsenddate="{{data.ScenarioGeneralInfoEditModel.ActualEndDate}}"
|
||
data-val-scenarioenddate-hasactuals="{{data.ScenarioGeneralInfoEditModel.HasActuals}}"
|
||
data-val-scenarioenddate-projectdeadline="{{data.ScenarioGeneralInfoEditModel.ProjectDeadline}}"
|
||
data-val-dategreaterthanorequal="Scenario End Date should not be less than Start Date"
|
||
data-val-dategreaterthanorequal-otherpropertyname="scenarioCalendarStartDate" />
|
||
</div>
|
||
</div>
|
||
<i ng-if="data.ScenarioGeneralInfoEditModel.ProjectDeadline">(<label>Project Deadline</label> {{data.ScenarioGeneralInfoEditModel.ProjectDeadline | date: 'MM/dd/yyyy'}})</i>
|
||
<span class="help-block field-validation-valid" data-valmsg-for="scenarioCalendarStartDate" data-valmsg-replace="true"></span>
|
||
<span class="help-block field-validation-valid" data-valmsg-for="scenarioCalendarEndDate" data-valmsg-replace="true"></span>
|
||
</div>
|
||
<div class="col-sm-5 select2-primary">
|
||
<label class="control-label">Distribution Type</label>
|
||
<select ng-model="data.ScenarioGeneralInfoEditModel.DistributionType" ng-change="scenarioEditModelChanged()"
|
||
id="distributionType" name="distributionType">
|
||
<option value="0">General</option>
|
||
<option value="1">Keep Total</option>
|
||
<option value="2">Change Duration</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<button type="button" class="btn btn-default lockable" style="margin-top: 25px;" ng-disabled="!data.ScenarioGeneralInfoEditModel.IsChanged" ng-click="recalculateScenarioDetails()"><i class="fa fa-refresh"></i> Recalculate</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
<div class="table-light table-responsive very-big-table freezeTable fixedTable">
|
||
<table class="table table-striped table-bordered dataTable ng-hide" id="table" ng-show="data != null && data.Calendar.Rows.length > 0">
|
||
<thead>
|
||
<tr>
|
||
<th class="headcol">
|
||
<a href="#" class="clpsd-btn"><i class="navbar-icon fa fa-bars icon"></i></a>
|
||
</th>
|
||
<th class="headcol">Name</th>
|
||
<th class="headcol">Grand Totals</th>
|
||
<th ng-repeat="header in (data.Calendar.MonthHeaders) track by $index" class="headcol-week" ng-click="onMonthHeaderClick(header, $index, $event)"
|
||
colspan="{{header.IsCollapsed ? 1 : header.ColspanValues[data.CalendarFilter.ViewModeName]}}" ng-show="header.Show" nowrap
|
||
ng-if="header.Initialized">
|
||
<i class="fa" ng-class="header.CollapsedClass" style="margin-right: 5px;"></i>{{header.Title}}
|
||
</th>
|
||
</tr>
|
||
<tr>
|
||
<th class="headcol"></th>
|
||
<th class="headcol"></th>
|
||
<th class="headcol"></th>
|
||
<th ng-repeat="header in data.Calendar.WeekHeaders track by $index" ng-show="header.Show" ng-if="header.Initialized">
|
||
{{ header.Title}}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody ng-repeat="row in data.Calendar.Rows track by $index" ng-if="$index > 0" ng-show="row.Visible" ng-init="ExpCatSourceIndex = $index">
|
||
<tr class="dnd-container">
|
||
<td class="headcol">
|
||
<div class="grid-actions-div">
|
||
@*env-843 start*@
|
||
@*<a href="#" ng-click="onOpenReallocate(row)" data-toggle="modal" data-target="#reallocator" title="Reallocate resource" ng-disabled="!row.IsEditable"><i class="fa fa-random icon black"></i></a>*@
|
||
<a href="#" ng-click="onOpenReallocate(row)" data-toggle="modal" data-target="#reallocator" title="Reallocate resource" ng-disabled="!row.IsEditable || data.CalendarFilter.VisibleExpCats.length <= 1"><i class="fa fa-random icon black"></i></a>
|
||
@*env-843 end*@
|
||
<a href="#" ng-click="removeExpCat(row)" title="Delete Expenditure" ng-disabled="!row.IsEditable || data.CalendarFilter.VisibleExpCats.length <= 1"><i class="fa fa-times-circle icon red"></i></a>
|
||
<a href="#" ng-click="prefillFormatCells(row)" data-toggle="modal" data-target="#modalFormatCells" title="Round expenditure" ng-disabled="!row.IsEditable"><i class="fa fa-building-o icon black"></i></a>
|
||
@*env-843 start*@
|
||
@*<a href="#" ng-click="openChangeCurveModal(row)" data-toggle="modal" data-target="#editTotal" title="Change Curve" ng-disabled="!row.IsEditable"><i class="fa fa-bar-chart-o icon black"></i></a>*@
|
||
<a href="#" ng-click="openChangeCurveModal(row)" data-toggle="modal" data-target="#editTotal" title="Change Curve" ng-disabled="!row.IsEditable || data.CalendarFilter.VisibleExpCats.length <= 1"><i class="fa fa-bar-chart-o icon black"></i></a>
|
||
@*env-843 end*@
|
||
|
||
</div>
|
||
<script type="text/ng-template" id="drag-helper">
|
||
<div class="drag-helper">
|
||
<span ng-bind="getSelectedCellsCount(row)"></span>
|
||
<span>weeks</span>
|
||
</div>
|
||
</script>
|
||
</td>
|
||
<td class="headcol headcol-week {{data.CalendarFilter.ShowActuals ? row.CSSClass[0] : ''}}" ng-click="onExpCatCollapseClick(row, $event)">
|
||
<a id="id_exp{{row.ExpCatId}}" href="#">
|
||
<i class="fa" ng-class="row.CollapsedClass" ng-if="!data.CalendarFilter.ShowActuals" style="margin-right: 5px;"
|
||
ng-attr-title="{{row.Collapsed ? 'Expande' : 'Collapse'}}">
|
||
</i>
|
||
{{ row.ExpCatName || 'empty' }}
|
||
</a>
|
||
</td>
|
||
<td class="headcol {{data.CalendarFilter.ShowActuals ? row.CSSClass[0] : ''}}">
|
||
<a ng-if="3 != row.UseType && row.IsEditable" ng-show="3 != row.UseType && row.IsEditable" href="#"
|
||
editable-text="data.CalendarFilter.IsTableModeQuantity ? row.GrandTotalQuantity : row.GrandTotalCost"
|
||
e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit"
|
||
onbeforesave="checkTotalValue($data, row, $index)" e-required>
|
||
{{ data.CalendarFilter.IsTableModeQuantity ? (row.GrandTotalQuantity || 0 | number:2) : (row.GrandTotalCost || 0 | currency) }}
|
||
</a>
|
||
<span ng-if="3 != row.UseType && !row.IsEditable" ng-show="3 != row.UseType && !row.IsEditable">
|
||
{{ data.CalendarFilter.IsTableModeQuantity ? (row.GrandTotalQuantity || 0 | number:2) : (row.GrandTotalCost || 0 | currency) }}
|
||
</span>
|
||
</td>
|
||
<td class="{{row.CSSClass[$index]}}"
|
||
ng-repeat="col in row.Cells track by $index" @* collection of weeks and months in the row this is the value *@
|
||
ng-class="{'droppable-active': row.ActiveDroppables[$index], 'draggable-selected': row.SelectedCells[$index]}"
|
||
ng-show="data.Calendar.WeekHeaders[$index].Show"
|
||
ng-if="data.Calendar.WeekHeaders[$index].Initialized"
|
||
dnd-draggable="!data.CalendarFilter.ShowActuals"
|
||
dnd-draggable-opts="{layer: 'l-ec-{{row.ExpCatId}}', helper: 'drag-helper', useAsPoint: true}"
|
||
dnd-on-dragstart="dragStart($dragmodel)"
|
||
dnd-on-drag="drag($api)"
|
||
dnd-on-dragend="dragEnd($dragmodel)"
|
||
dnd-on-dragenter="dragEnter($dropmodel, $dragmodel)"
|
||
dnd-droppable="!data.CalendarFilter.ShowActuals"
|
||
dnd-droppable-opts="{layer: 'l-ec-{{row.ExpCatId}}'}"
|
||
dnd-on-drop="drop($dropmodel, $dragmodel)"
|
||
dnd-containment="'.dnd-container'"
|
||
dnd-model="{ExpCat: row, ExpCatSourcePosition: ExpCatSourceIndex, Position: $index}"
|
||
ng-click="selectCell(row, $index, $event)">
|
||
<!--Editable forecast (non-calculated) columns-->
|
||
<a ng-if="data.Calendar.WeekHeaders[$index].Editable[data.CalendarFilter.ViewModeName]" href="#" 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>
|
||
{{ data.CalendarFilter.IsTableModeQuantity ? (col || 0 | number:2) : (col || 0 | currency) }}
|
||
</a>
|
||
<!--Readonly actuals or calculated columns-->
|
||
<span ng-if="!data.Calendar.WeekHeaders[$index].Editable[data.CalendarFilter.ViewModeName]">
|
||
{{ data.CalendarFilter.IsTableModeQuantity ? (col || 0 | number:2) : (col || 0 | currency) }}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr ng-repeat-start="team in row.Teams track by $index" ng-show="!row.Collapsed" ng-if="!row.Collapsed && !data.CalendarFilter.ShowActuals">
|
||
<td class="headcol">
|
||
<div class="grid-actions-div">
|
||
<a href="#" ng-click="removeTeam(team)" title="Delete Team" ng-show="team.CanBeDeleted"><i class="fa fa-times-circle icon red"></i></a>
|
||
</div>
|
||
</td>
|
||
<td class="headcol headcol-week" ng-click="onTeamCollapseClick(row.ExpCatId, team, $event)">
|
||
<div class="restbl" style="padding-left:20px;">
|
||
<div>
|
||
<div>
|
||
<a title="{{ team.Name || 'empty' }}" href="#" style="display:inline-block;max-width:154px;overflow-x:hidden;text-overflow:ellipsis">
|
||
<i class="fa" ng-class="team.CollapsedClass" ng-if="!data.CalendarFilter.ShowActuals" style="margin-right: 5px;" ng-attr-title="{{team.Collapsed ? 'Expande' : 'Collapse'}}"></i>{{ team.Name || 'empty' }}
|
||
</a>
|
||
</div>
|
||
<div>
|
||
<button type="button" title="Fill remaining" class="btn btn-info btn-xs" ng-disabled="!data.CalendarFilter.IsTableModeQuantity" ng-click="assignRestForTeam(row, team, $event)"><i class="fa fa-asterisk"></i></button>
|
||
<button type="button" title="Take full available capacity" class="btn btn-primary btn-xs" ng-disabled="!data.CalendarFilter.IsTableModeQuantity" ng-click="assignAllForTeam(row, team, $event)"><i class=" fa fa-plus"></i></button>
|
||
<button type="button" title="Zero this team" class="btn btn-success btn-xs" ng-disabled="!data.CalendarFilter.IsTableModeQuantity" ng-click="zeroTeam(row, team, $event)"><i class="fa fa-minus"></i></button>
|
||
<button ng-class="{hideView:!team.IsAccessible}" type="button" title="View on Calendar" class="btn btn-primary btn-xs" ng-click="go(team.Id, $event)"><i class="fa fa-calendar"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="headcol">
|
||
<a href="#" editable-text="team.GrandTotalQuantity" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no"
|
||
blur="submit" onbeforesave="checkTeamTotalValue($data, row, team)" e-required
|
||
ng-show="data.CalendarFilter.IsTableModeQuantity">
|
||
{{ team.GrandTotalQuantity || 0 | number:2 }}
|
||
</a>
|
||
<span ng-show="!data.CalendarFilter.IsTableModeQuantity">N/A</span>
|
||
</td>
|
||
<td class="{{team.CSSClass[$index]}}"
|
||
ng-class="{'droppable-active': row.ActiveDroppables[$index], 'draggable-selected': row.SelectedCells[$index]}"
|
||
ng-repeat="col in team.Cells track by $index"
|
||
ng-if="data.Calendar.WeekHeaders[$index].Initialized"
|
||
ng-show="data.Calendar.WeekHeaders[$index].Show">
|
||
<a href="#" editable-text="col" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no"
|
||
blur="submit" onbeforesave="checkTeamValue(row, team, $index, $data, true)" e-required
|
||
ng-show="data.CalendarFilter.IsTableModeQuantity">
|
||
{{ (col || 0 | number:2) }}
|
||
</a>
|
||
<span ng-show="!data.CalendarFilter.IsTableModeQuantity">N/A</span>
|
||
</td>
|
||
</tr>
|
||
<tr ng-repeat="res in team.Resources track by $index" ng-show="!team.Collapsed && !row.Collapsed" ng-if="!team.Collapsed && !data.CalendarFilter.ShowActuals">
|
||
<td class="headcol"></td>
|
||
<td class="headcol">
|
||
<div class="restbl" style="padding-left:40px;">
|
||
<div>
|
||
<div>{{res.Name}}</div>
|
||
<div>
|
||
<button type="button" title="Fill remaining" class="btn btn-info btn-xs" ng-disabled="(row.Resources.length <= 1) || !data.CalendarFilter.IsTableModeQuantity" ng-click="assignRestForResource(res, team, row.ExpCatId)"><i class="fa fa-asterisk"></i></button>
|
||
<button type="button" title="Take full available capacity" class="btn btn-primary btn-xs" ng-disabled="!data.CalendarFilter.IsTableModeQuantity" ng-click="assignAllForResource(res, team, row.ExpCatId)"><i class="fa fa-plus"></i></button>
|
||
<button type="button" title="Zero this resource" class="btn btn-success btn-xs" ng-disabled="!data.CalendarFilter.IsTableModeQuantity" ng-click="zeroResource(res, team, row.ExpCatId)"><i class="fa fa-minus"></i></button>
|
||
<button type="button" title="Remove this resource" class="btn btn-danger btn-xs" ng-disabled="(data.CalendarFilter.IsTableModeQuantity && res.GrandTotalQuantity > 0) || (!data.CalendarFilter.IsTableModeQuantity && res.GrandTotalCost > 0) || !data.CalendarFilter.IsTableModeQuantity" ng-click="removeResource(res.Id, row.ExpCatId, team, $index)"><i class="fa fa-times"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="headcol">
|
||
<a href="#" editable-text="res.GrandTotalQuantity" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no"
|
||
blur="submit" onbeforesave="checkResourceTotalValue($data, row, team, res)" e-required
|
||
ng-show="data.CalendarFilter.IsTableModeQuantity">
|
||
{{ res.GrandTotalQuantity || 0 | number:2 }}
|
||
</a>
|
||
<span ng-show="!data.CalendarFilter.IsTableModeQuantity">N/A</span>
|
||
</td>
|
||
<td class="{{res.CSSClass[$index]}}"
|
||
ng-class="{'droppable-active': row.ActiveDroppables[$index], 'draggable-selected': row.SelectedCells[$index]}"
|
||
ng-repeat="col in res.Cells track by $index"
|
||
ng-if="data.Calendar.WeekHeaders[$index].Initialized"
|
||
ng-show="data.Calendar.WeekHeaders[$index].Show">
|
||
<a href="#" editable-text="col" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no"
|
||
blur="submit" onbeforesave="checkResourceValue(row.ExpCatId, team, res, $index, $data, true)" e-required
|
||
ng-show="data.CalendarFilter.IsTableModeQuantity && !res.ReadOnly[$index]">
|
||
{{ col || 0 | number:2 }}
|
||
</a>
|
||
<span ng-show="res.ReadOnly[$index]">
|
||
{{ col || 0 | number:2 }}
|
||
</span>
|
||
<span ng-show="!data.CalendarFilter.IsTableModeQuantity">N/A</span>
|
||
</td>
|
||
</tr>
|
||
<tr ng-repeat-end ng-if="3 != row.UseType && !data.CalendarFilter.ShowActuals" ng-show="!team.Collapsed && !row.Collapsed && team.AvailableResources.length > 0" class="resRow">
|
||
<td class="headcol"></td>
|
||
<td class="headcol assign" colspan="2">
|
||
<div class="col-sm-8">
|
||
<span>Assign a person:</span>
|
||
</div><br />
|
||
<div class="col-sm-8 select2-primary">
|
||
<select ng-model="team.ResourceToAssignId">
|
||
<option ng-repeat="item in team.AvailableResources track by $index" value="{{item.id}}">{{item.name}}</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-sm-2">
|
||
<button type="button" class="btn btn-sm btn-success"
|
||
ng-disabled="team.ResourceToAssignId == null || !data.CalendarFilter.IsTableModeQuantity"
|
||
ng-click="assignResource(row, team, $event)">
|
||
Assign
|
||
</button>
|
||
</div>
|
||
</td>
|
||
<td colspan="{{data.VisibleCellCount}}"></td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot ng-show="data.Calendar.Rows[0].Visible">
|
||
<tr>
|
||
<td colspan="3" style="text-align: right;" class="headcol">{{data.Calendar.Rows[0].ExpCatName}}</td>
|
||
<td class="headcol">
|
||
<a href="#" ng-if="data.Calendar.Rows[0].IsEditable" ng-show="data.Calendar.Rows[0].IsEditable"
|
||
editable-text="data.CalendarFilter.IsTableModeQuantity ? data.Calendar.Rows[0].GrandTotalQuantity : data.Calendar.Rows[0].GrandTotalCost"
|
||
e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit"
|
||
onbeforesave="checkGrandTotalValue($data)" e-required>
|
||
{{ data.CalendarFilter.IsTableModeQuantity ? (data.Calendar.Rows[0].GrandTotalQuantity || 0 | number:2) : (data.Calendar.Rows[0].GrandTotalCost || 0 | currency) }}
|
||
</a>
|
||
<span ng-if="!data.Calendar.Rows[0].IsEditable" ng-show="!data.Calendar.Rows[0].IsEditable">
|
||
{{ data.CalendarFilter.IsTableModeQuantity ? (data.Calendar.Rows[0].GrandTotalQuantity || 0 | number:2) : (data.Calendar.Rows[0].GrandTotalCost || 0 | currency) }}
|
||
</span>
|
||
</td>
|
||
<td ng-repeat="col in data.Calendar.Rows[0].Cells track by $index" ng-if="data.Calendar.WeekHeaders[$index].Initialized" ng-show="data.Calendar.WeekHeaders[$index].Show">
|
||
{{ data.CalendarFilter.IsTableModeQuantity ? (col || 0 | number:2) : (col || 0 | currency) }}
|
||
</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
<div class="panel-body form-horizontal">
|
||
@if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.CreateScenarioWizard ||
|
||
Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
|
||
{
|
||
<div class="col-sm-8">
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label" for="selExpCats2Add">Expenditure Categories</label>
|
||
<div class="col-sm-6 select2-primary" ng-mouseup="clearSelection()">
|
||
<select ng-model="data.CalendarFilter.ExpCats2Add" id="selExpCats2Add" name="selExpCats2Add" ng-options="cat.Name group by cat.GroupElement.Name for cat in data.Expenditures2Add | exceptThis:data.AvailableExpenditures | orderBy:['GroupElement.Name','Name']"
|
||
class="form-control" multiple="multiple"></select>
|
||
</div>
|
||
<div class="col-sm-2">
|
||
<a href="#" ng-click="addExpCats()" class="btn btn-success"><i class="fa fa-plus"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label" for="selTeams2Add">Teams</label>
|
||
<div class="col-sm-6 select2-primary" ng-mouseup="clearSelection()">
|
||
<select ng-model="data.CalendarFilter.Teams2Add" id="selTeams2Add" name="selTeams2Add" class="form-control"
|
||
multiple="multiple" ng-options="team.Text for team in RestTeams"></select>
|
||
</div>
|
||
<div class="col-sm-2">
|
||
<a href="#" ng-click="addTeams()" class="btn btn-success"><i class="fa fa-plus"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
@if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
|
||
{
|
||
<div class="col-sm-4 text-right">
|
||
<button type="button" class="btn btn-primary lockable" ng-disabled="!gridWasChanged() || !isValidAllocation()" data-target="#saveScenarioModal" data-toggle="modal"><i class="fa fa-save"></i> Save Changes</button>
|
||
<button type="button" class="btn btn-warning lockable" ng-disabled="!gridWasChanged()" onclick="window.location.reload(true);">Cancel Changes</button>
|
||
</div>
|
||
}
|
||
@if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.RMO)
|
||
{
|
||
<div class="col-sm-12 text-right">
|
||
<button type="button" class="btn btn-primary lockable" ng-disabled="!gridWasChanged() || !isValidAllocation()" ng-click="saveScenarioDetails()"><i class="fa fa-save"></i> Save Changes</button>
|
||
<button type="button" class="btn btn-warning lockable" ng-click="cancelScenarioDetails()">Cancel Changes</button>
|
||
</div>
|
||
}
|
||
</div>
|
||
@if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
|
||
{
|
||
<div class="panel-body form-horizontal" ng-show="gridWasChanged()">
|
||
<div class="alert alert-warning">
|
||
Scenario has been changed. Changes will affect the graph once saved.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-body">
|
||
<div class="col-sm-12">
|
||
<div class="btn-group btn-group-xs pull-right" id="divGraphMenu" style="margin-top: 3px; margin-right: 5px;">
|
||
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-bars"></i> <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu dropdown-menu-right sd-graph" style="min-width: 200px;" id="visibilitydropdown_graph">
|
||
<li ng-repeat="row in data.Calendar.Rows track by $index" ng-if="$index > 0" class="padding-xs-hr">
|
||
<div class="checkbox">
|
||
<label>
|
||
<input class="ecVisibilityTrigger px" type="checkbox" ng-click="toggleGraphExpCat(row.ExpCatId)" checked="checked">
|
||
<span class="lbl">{{ row.ExpCatName || 'empty' }}</span>
|
||
</label>
|
||
</div>
|
||
</li>
|
||
<li class="padding-xs-hr">
|
||
<span class="switcherLbl">Actuals</span>
|
||
<input type="checkbox" class="switcher px" id="actualsModeGraph" data-key="actualsModeGraph" ng-model="GraphFilter.Actuals" ng-click="toggleGraphActuals()" title="Show Actuals" />
|
||
</li>
|
||
<li class="padding-xs-hr" style="margin-top:6px;">
|
||
<span class="switcherLbl">Display</span>
|
||
<input type="checkbox" class="switcher px" id="totalGraph" data-key="totalGraph" ng-model="GraphFilter.ShowTotal" ng-click="toggleGraphTotal()" title="Display as" />
|
||
</li>
|
||
@* <li class="padding-xs-hr" data-key="quantityGraph">
|
||
<span class="switcherLbl">Value As</span>
|
||
<input type="checkbox" class="switcher px" id="timeGraph" data-key="timeGraph" ng-model="GraphFilter.ShowTime" ng-click="toggleGraphValue()" title="Value as" />
|
||
</li>
|
||
<li class="padding-xs-hr" data-key="quantityGraph">
|
||
<span class="switcherLbl">Quantity</span>
|
||
<input type="checkbox" class="switcher px" id="quantityGraph" data-key="quantityGraph" ng-model="GraphFilter.Quantity" ng-click="toggleGraphQuantity()" title="Quantity as" />
|
||
</li>*@
|
||
|
||
</ul>
|
||
</div>
|
||
<h4 class="modal-title">Expenditure Graph by Scenario</h4>
|
||
|
||
<div id="DetailsGraphContainer" class="graph-container" style="min-height: 307px; min-width:200px; width:100%">
|
||
<div id="divDetailsGraph" style="min-width: 10px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
|
||
<!-- Modal -->
|
||
<form name="editTotalForm">
|
||
<div id="editTotal" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
|
||
<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">Change Curve</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label">Use Different Curve</label>
|
||
<div class="col-sm-8">
|
||
<select ng-model="editTotal.OtherCurve" name="selCategoryCurve" ng-options="s.Id as s.Name for s in data.CalendarFilter.VisibleExpCats" class="form-control"></select>
|
||
</div>
|
||
</div>
|
||
</div> <!-- / .modal-body -->
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" ng-click="changeCurve()">Save</button>
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</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;" data-backdrop="static">
|
||
<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 data.CalendarFilter.VisibleExpCats" 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 data.CalendarFilter.SecondaryExpCats" 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">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 data.CalendarFilter.VisibleExpCats" 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">Cancel</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;" data-backdrop="static">
|
||
<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="panel-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 select2-primary">
|
||
<select id="pushPullExpCats" multiple="multiple" ng-model="pushpuller.resource" class="form-control" ng-options="s.Id as s.Name for s in data.CalendarFilter.VisibleExpCats"></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-2">
|
||
<input ng-model="pushpuller.weeks" style="width: 60px;" type="number" id="weeksNum" name="weeksNum" min="1" ng-max="pushpuller.maxWeeks" max="{{pushpuller.maxWeeks}}" data-bind="value: weeksNum" required />
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<span class="validation-error" ng-show="pushPullForm.weeksNum.$error.required">Number of weeks is a required field</span>
|
||
<span class="validation-error" ng-show="pushPullForm.weeksNum.$error.min">Number of weeks can't be less then 1</span>
|
||
<span class="validation-error" ng-show="pushPullForm.weeksNum.$error.ngMax">You cannot set the number of weeks to push/pull that exceeds scenario duration.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- / .modal-body -->
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" ng-click="pushPullForm.$valid && pushPull()">OK</button>
|
||
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="hidePushPull()">Cancel</button>
|
||
</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- /.modal -->
|
||
</form>
|
||
<!-- / Modal -->
|
||
|
||
<form name="formatCellsForm">
|
||
<div id="modalFormatCells" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
|
||
<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">Round Expenditures</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="panel-body">
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label" for="selFormatExpCats">Expenditure Categories</label>
|
||
<div class="col-sm-8 select2-primary">
|
||
<select ng-model="formatCells.SelectedExpCats" name="selFormatExpCats" ng-options="s.Id as s.Name for s in data.CalendarFilter.VisibleExpCats track by s.Id"
|
||
id="roundExpCats" multiple="multiple" class="form-control" size="8" style="height: 173px;" required></select>
|
||
</div>
|
||
<div class="col-sm-offset-4 col-sm-6">
|
||
<span class="validation-error" ng-show="formatCellsForm.selFormatExpCats.$error.required">Expenditure Category is a required field</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label" for="formatStartDate">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-8 select2-primary">
|
||
<select ng-model="formatCells.DecimalPlaces" name="formatCellsDecimalPlaces" ng-options="s.Value as s.Name for s in formatCells.RoundOptions"
|
||
id="formatCellsDecimalPlaces" class="form-control"></select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" ng-click="formatCellsForm.$valid && 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>
|
||
@if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
|
||
{
|
||
<form name="saveScenarioForm">
|
||
<div id="saveScenarioModal" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
|
||
<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">Save Scenario</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="panel-body form-horizontal">
|
||
<div class="form-group">
|
||
<div class="col-sm-12">
|
||
<input id="save-as-update" name="save-as-update" type="radio" ng-model="data.Scenario.SaveAs" value="0" />
|
||
<label for="save-as-update" class="control-label">Save Changes to Current Scenario</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="col-sm-12">
|
||
<input id="save-as-new" name="save-as-new" type="radio" ng-model="data.Scenario.SaveAs" value="1" />
|
||
<label for="save-as-new" class="control-label">Create New Scenario</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" ng-show="data.Scenario.SaveAs == 1">
|
||
<div class="row">
|
||
<div class="col-sm-offset-1 col-sm-2">
|
||
<label class="control-label">Name: </label>
|
||
</div>
|
||
<div class="col-sm-9">
|
||
<input type="text" ng-model="data.Scenario.Name" id="scenarioName" name="scenarioName" class="form-control" ng-required="data.Scenario.SaveAs == 1" />
|
||
<span class="validation-error" ng-show="data.Scenario.SaveAs == 1 && saveScenarioForm.scenarioName.$error.required">Scenario Name is a required field</span>
|
||
</div>
|
||
</div>
|
||
<div class="row" style="margin-top:5px;">
|
||
<div class="col-sm-offset-1 col-sm-2">
|
||
<label class="control-label">Status: </label>
|
||
</div>
|
||
<div class="col-sm-9">
|
||
<input type="checkbox" ng-model="data.Scenario.IsActiveScenario" id="is-active-scenario" name="is-active-scenario" class="form-control" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" ng-click="saveScenarioForm.$valid && saveChanges()">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 -->
|
||
|
||
</div>
|