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

1232 lines
66 KiB
Plaintext
Raw 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.Code
@using EnVisage.Models
@model ScenarioDetailsCalendarModel
<div id="erorMsgPlaceholder"></div>
<script type="text/javascript">
var sidebarStateSet = false;
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 onActivateScenarioDetails() {
// Set collapsed / expanded state for scenario details grid sidebar (first column on the left).
// Performs this action once: on entering details grid tab for the first time
if (!sidebarStateSet) {
var isBottomUp = $('#IsBottomUp').is(':checked');
if (isBottomUp) {
$('#controller-details-grid').scenarioDetailsGrid('showSidebar', !isBottomUp);
}
sidebarStateSet = true;
}
}
function initScenarioDetails() {
$('#controller-details-grid').scenarioDetailsGrid();
_scenarioCalendarInitSwitchers();
_scenarioCalendarInitDatepickers();
var options = {
format: 'm/d/yyyy',
startDate: '@Constants.MIN_SELECTABLE_DATE',
endDate: '@Constants.MAX_SELECTABLE_DATE'
};
$('#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({
minimumResultsForSearch: -1
});
$('#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();
});
$(document).on('date-for-start-of-change-changed', function (e, date) {
$('#scenarioCalendarDate4StartOfChanges').data('datepicker').setDate(date);
});
@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()) {
var msg = "Reallocator form contains unsaved changes, do you really want to close the form?";
bootbox.confirm(msg, function (result) {
if (result) {
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()) {
var msg = "Change Curve form contains unsaved changes, do you really want to close the form?";
bootbox.confirm(msg, function (result) {
if (result) {
_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()) {
var msg = "Push/Pull form contains unsaved changes, do you really want to close the form?";
bootbox.confirm(msg, function (result) {
if (result) {
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()) {
var msg = "@Resources.Messages.RoundExpenditure_Close_UnsavedChanges";
bootbox.confirm(msg, function (result) {
if (result) {
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()) {
bootbox.confirm("@Resources.Messages.Scenario_Close_UnsavedChanges", function (result) {
if (result) {
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>
}
@if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.RMO)
{
<text>
initRMOProjectDependencies(GetDependencyData);
</text>
}
}
function _scenarioCalendarInitDatepickers() {
var datePickerOptions = {
format: 'mm/dd/yyyy',
autoclose: true,
orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto',
startDate: '@(Model.StartDateConstraint.HasValue ? Model.StartDateConstraint.Value.AddDays(1).ToString("MM/dd/yyyy") : Constants.MIN_SELECTABLE_DATE)' ,
@*endDate: '@(Constants.MAX_SELECTABLE_DATE)'*@
//endDate:'@(Model.ProjectDeadline.HasValue ? Model.ProjectDeadline.Value.AddDays(-1).ToString("MM/dd/yyyy") : Constants.MAX_SELECTABLE_DATE)'
endDate:'@(Model.EndDateConstrantWithDeadline.HasValue ? Model.EndDateConstrantWithDeadline.Value.AddDays(-1).ToString("MM/dd/yyyy") : Constants.MAX_SELECTABLE_DATE)'
};
$('#scenarioCalendarDate4StartOfChanges').datepicker(datePickerOptions);
$('#bs-datepicker-scenario-calendar-range').datepicker(datePickerOptions).on('changeDate', function (evt) {
if (evt.target.id === 'scenarioCalendarStartDate' && !$('#scenarioCalendarEndDate').val()) {
$('#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(3)');
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);
}
// 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();
};
var rtime;
var timeout = false;
var delta = 500;
init.push(function () {
$(window).resize(function () {
rtime = new Date();
if (timeout === false) {
timeout = true;
setTimeout(resizeend, delta);
}
});
});
function resizeend() {
if (new Date() - rtime < delta) {
setTimeout(resizeend, delta);
} else {
timeout = false;
DrawGraph();
}
}
function DrawGraph() {
var scope = angular.element($("#controller-details-grid")).scope();
scope.initGraph();
}
function initRMOProjectDependencies(dataFunction) {
var projectHasDepenencies = @(Model.ProjectHasDependencies ? "true" : "false");
if (projectHasDepenencies) {
var elem = $('div.date-dependency-constraints');
if (elem && elem.length) {
elem.scenarioDependencyInformer({
projectId: "@(Model.ParentId.ToString())",
//dataUrl: '@Url.Action("GetDependencies", "Project")',
externalDataFunction: dataFunction && (typeof dataFunction === 'function') ? dataFunction : undefined,
debug: true,
});
}
}
}
function GetDependencyData(){
var deferred = new $.Deferred();
deferred.resolve(@Html.Raw(Json.Encode(Model.DependencyListModel)));
return deferred.promise();
}
</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="applyGridFilter()" 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" ng-model="data.CalendarFilter.ShowActuals" title="Show Actuals" />
<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>&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" 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">
<form id="scenario-calendar-edit-form">
<div class="row">
<div class="col-sm-5">
<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-model-options="{ updateOn: 'change' }"
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}}"
data-val-dategreaterthan-otherpropertyname />
</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-model-options="{ updateOn: 'change' }"
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>
<div class="date-dependency-constraints"></div>
<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-4">
<label class="control-label">Date for start of change</label>
<div class="input-group date datepicker">
<input type="text" class="form-control" id="scenarioCalendarDate4StartOfChanges" name="scenarioCalendarDate4StartOfChanges"
ng-model="data.ScenarioGeneralInfoEditModel.DateForStartOfChanges" ng-model-options="{ updateOn: 'change' }" ng-change="scenarioEditModelChanged()"
data-val="true"
data-val-date="The field Date for Start of Change must be a date."
data-val-required="The Date for Start of Change field is required."
data-val-dateforstartofchange=""
data-val-dateforstartofchange-actualsenddate="{{data.ScenarioGeneralInfoEditModel.ActualEndDate}}"
data-val-dateforstartofchange-hasactuals="{{data.ScenarioGeneralInfoEditModel.HasActuals}}"
data-val-dateforstartofchange-scenariostartdateproperty="scenarioCalendarStartDate"
data-val-dateforstartofchange-scenarioenddateproperty="scenarioCalendarEndDate" />
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
<span class="help-block field-validation-valid" data-valmsg-for="scenarioCalendarDate4StartOfChanges" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3 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 class="row pull-right">
<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 class="table-light table-responsive very-big-table freezeTable fixedTable">
<table class="table table-striped table-bordered dataTable" id="table" ng-show="data != null">
<thead>
<tr>
<th class="headcol">
@*<a href="#" class="clpsd-btn"><i class="navbar-icon fa fa-bars icon"></i></a>*@
</th>
<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 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>
@Html.Partial("~/Views/Scenarios/_gridTopDown.cshtml")
@Html.Partial("~/Views/Scenarios/_gridBottomUp.cshtml")
</table>
</div>
<div class="panel-body form-horizontal">
@if (Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.CreateScenarioWizard || Model.Opener == ScenarioDetailsCalendarModel.ScenarioCalendarOpener.Details)
{
<div class="col-sm-8">
@* hide expenditure categories if scenario is BU one *@
<div class="form-group" ng-show="!data.Scenario.IsBottomUp">
<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>
@* show teams list only for BU scenario because for TD there is a list under each category *@
<div class="form-group" ng-show="data.Scenario.IsBottomUp">
<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.Id as team.Name for team in RestTeams | orderBy: 'Name'"></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="!canSaveScenario()" data-target="#saveScenarioModal" data-toggle="modal" ng-click="prepareWorkFlowOptionsBeforeSaving($event)" ><i class="fa fa-save"></i> @Resources.Buttons.Common_Save</button>
<button type="button" class="btn btn-primary lockable" ng-disabled="!canSaveScenario()" data-target="#saveScenarioModal" data-toggle="modal" ng-click="prepareWorkFlowOptionsBeforeSaving($event, true)"><i class="fa fa-save"></i> @Resources.Buttons.Common_SaveAs</button>
<button type="button" class="btn btn-warning lockable" ng-disabled="!gridWasChanged()" onclick="window.location.reload(true);">Cancel</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="!canSaveScenario()" ng-click="saveScenarioDetails($event)"><i class="fa fa-save"></i> @Resources.Buttons.Common_SaveChanges</button>
<button type="button" class="btn btn-warning lockable" ng-click="cancelScenarioDetails($event)">@Resources.Buttons.Common_Cancel</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>&nbsp;<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="(key, category) in data.Calendar.Expenditures" ng-if="data.Calendar.Expenditures" class="padding-xs-hr">
<div class="checkbox">
<label>
<input class="ecVisibilityTrigger px" type="checkbox" ng-click="toggleGraphExpCat(key)" checked="checked">
<span class="lbl">{{ category.ExpenditureCategoryName || '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 -->
<div id="editTotal" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
<form name="editTotalForm">
<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()">@Resources.Buttons.Common_Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">@Resources.Buttons.Common_Cancel</button>
</div>
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</form>
</div> <!-- /.modal -->
<!-- / Modal -->
<!-- Modal -->
<div id="reallocator" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
<form name="reallocatorForm">
<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 | filter:{ AllowResourceAssignment: true }" 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 | filter:{ AllowResourceAssignment: true }" 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">@Resources.Buttons.Common_Cancel</button>
</div>
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</form>
</div> <!-- /.modal -->
<!-- / Modal -->
<!-- Modal -->
<div id="push_pull" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
<form name="pushPullForm">
<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 than 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()">@Resources.Buttons.Common_Ok</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="hidePushPull()">@Resources.Buttons.Common_Cancel</button>
</div>
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</form>
</div> <!-- /.modal -->
<!-- / Modal -->
<div id="modalFormatCells" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
<form name="formatCellsForm">
<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 | filter:{ AllowResourceAssignment: true } 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()">@Resources.Buttons.Common_Ok</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div> <!-- / .modal-content -->
</div> <!-- / .modal-dialog -->
</form>
</div> <!-- / .modal -->
@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>
<div class="form-group" style="display:none">
<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" ng-show="data.Scenario.SaveAs == 0">
<div class="row" ng-hide="data.WorkFlowActions.length <= 1">
<div class="col-sm-offset-1 col-sm-3">
<label class="control-label">Workflow Status: </label>
</div>
<div class="col-sm-6">
<select id="_WFCmdSelect" class="form-control" ng-options="cmd as cmd.command for cmd in data.WorkFlowActions" ng-model="x.Selected" ng-change="updateWorkFlowAction(x.Selected)"></select>
</div>
</div>
</div>
<div class="form-group" style="display:none">
<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-3">
<label class="control-label">Name: </label>
</div>
<div class="col-sm-6">
<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-3">
<label class="control-label">Status: </label>
</div>
<div class="col-sm-6">
<input type="checkbox" ng-model="data.Scenario.IsActiveScenario" id="is-active-scenario" name="is-active-scenario" class="form-control" />
</div>
</div>
<div class="row" ng-hide="data.WorkFlowActions.length == 0">
<div class="col-sm-offset-1 col-sm-3">
<label class="control-label">Workflow State: </label>
</div>
<div class="col-sm-6">
<select id="_WFCmdSelect" class="form-control" ng-options="st as st.state for st in data.WorkFlowStates" ng-model="x.Selected" ng-change="updateWorkFlowState(x.Selected)"></select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="saveScenarioForm.$valid && saveChanges()">@Resources.Buttons.Common_Ok</button>
<button type="button" class="btn btn-default" data-dismiss="modal">@Resources.Buttons.Common_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>