203 lines
11 KiB
Plaintext
203 lines
11 KiB
Plaintext
@using EnVisage.Code
|
|
@model EnVisage.Models.CostSavingModel
|
|
@{
|
|
// need to init cost saving controller
|
|
var jsModel = new
|
|
{
|
|
startDate = Model.CostSavingStartDate.HasValue ? Model.CostSavingStartDate.Value.ToString("MM/dd/yyyy") : null,
|
|
endDate = Model.CostSavingEndDate.HasValue ? Model.CostSavingEndDate.Value.ToString("MM/dd/yyyy") : null,
|
|
costSavings = Model.CostSavings,
|
|
costSavingDescription = Model.CostSavingDescription,
|
|
isExpanded = Model.CostSavingsPanelExpanded,
|
|
costSavingType = Model.CostSavingType,
|
|
isMonthlyMode = Model.IsMonthlyMode,
|
|
isEditable = Model.IsEditable,
|
|
scenarioId = Model.ScenarioId,
|
|
scenarioStartDate = Model.ScenarioStartDate.HasValue ? Model.ScenarioStartDate.Value.ToString("MM/dd/yyyy") : null,
|
|
scenarioEndDate = Model.ScenarioEndDate.HasValue ? Model.ScenarioEndDate.Value.ToString("MM/dd/yyyy") : null,
|
|
items = string.IsNullOrWhiteSpace(Model.CostSavingItems) ? null : Model.CostSavingItems
|
|
|
|
};
|
|
var json = Newtonsoft.Json.JsonConvert.SerializeObject(jsModel);
|
|
}
|
|
<script type="text/javascript">
|
|
function initCostSaving() {
|
|
var options = {
|
|
format: 'mm/dd/yyyy',
|
|
autoclose: true,
|
|
orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto',
|
|
startDate: '@(!string.IsNullOrWhiteSpace(jsModel.scenarioStartDate) ? jsModel.scenarioStartDate : Constants.MIN_SELECTABLE_DATE)', // SA. ENV-1235. Disable incorrect dates input
|
|
endDate: '@(!string.IsNullOrWhiteSpace(jsModel.scenarioEndDate) ? jsModel.scenarioEndDate : Constants.MAX_SELECTABLE_DATE)' // SA. ENV-1235. Disable incorrect dates input
|
|
};
|
|
|
|
$('#bs-datepicker-cost-range').datepicker(options);
|
|
$('#bs-datepicker-cost-range span.input-group-addon').hide();
|
|
$('#@Html.IdFor(x=> x.CostSavingType)').switcher({
|
|
on_state_content: 'Hard Savings',
|
|
off_state_content: 'Soft Savings'
|
|
});
|
|
$('#@Html.IdFor(x=> x.CostSavingType)').parent().css("width", "120px");
|
|
|
|
$('#@Html.IdFor(x=> x.IsMonthlyMode)').switcher({
|
|
on_state_content: 'Months',
|
|
off_state_content: 'Years'
|
|
});
|
|
$('#@Html.IdFor(x=> x.IsMonthlyMode)').parent().css("width", "80px");
|
|
|
|
$(document).off('cs.auto.costSaving-range-changed').on('cs.auto.costSaving-range-changed', function (e, data) {
|
|
data = data || {};
|
|
var startDate = new Date(data.costSavingStartDateNew);
|
|
var endDate = new Date(data.costSavingEndDateNew);
|
|
|
|
// we always need to set min date for datepickers: if scenarioStartDate is existing value we will set correct min date
|
|
// and clear min date validation in other case
|
|
$('#@Html.IdFor(x=> x.CostSavingStartDate)').data('datepicker').setStartDate(data.scenarioStartDate);
|
|
$('#@Html.IdFor(x=> x.CostSavingEndDate)').data('datepicker').setStartDate(data.scenarioStartDate);
|
|
|
|
if (startDate.getTime() > 0)
|
|
$('#@Html.IdFor(x=> x.CostSavingStartDate)').data('datepicker').setDate(startDate);
|
|
|
|
if (endDate.getTime() > 0)
|
|
$('#@Html.IdFor(x=> x.CostSavingEndDate)').data('datepicker').setDate(endDate);
|
|
|
|
$('#@Html.IdFor(x=> x.ScenarioStartDate)').val(data.scenarioStartDate);
|
|
$('#@Html.IdFor(x=> x.ScenarioEndDate)').val(data.scenarioEndDate);
|
|
});
|
|
}
|
|
</script>
|
|
<style type="text/css">
|
|
.smallWidth {
|
|
width: 200px;
|
|
}
|
|
|
|
#costSaving-table thead tr th,
|
|
#costSaving-table thead tr td {
|
|
min-width: 70px;
|
|
}
|
|
|
|
#costSaving-table thead tr td input {
|
|
min-width: 100%;
|
|
}
|
|
</style>
|
|
<div id="costSavingsController" ng-controller="costSavingController" ng-init="init(@json)" ng-cloak>
|
|
@Html.HiddenFor(x => x.CostSavingsPanelExpanded, new { ng_value = "ViewModel.IsExpanded" })
|
|
@Html.HiddenFor(m => m.CostSavingItems, new { ng_value = "ViewModel.ItemsJson" })
|
|
@Html.HiddenFor(x => x.IsEditable, new { ng_value = "ViewModel.IsEditable" })
|
|
@Html.HiddenFor(x => x.ScenarioStartDate)
|
|
@Html.HiddenFor(x => x.ScenarioEndDate)
|
|
<div class="row" ng-show="!ViewModel.IsExpanded">
|
|
<div class="col-sm-6">
|
|
<a class="btn btn-primary" ng-click="addCostSaving()" ng-disabled="!ViewModel.IsEditable"><i class="fa fa-money"></i> Add Cost Savings</a>
|
|
</div>
|
|
</div>
|
|
<div class="row" ng-show="ViewModel.IsExpanded">
|
|
<div class="col-sm-6">
|
|
<a class="btn btn-danger" ng-click="removeCostSaving()" ng-disabled="!ViewModel.IsEditable"><i class="fa fa-money nav-icon-btn-danger"></i> Remove Cost Savings</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" ng-show="ViewModel.IsExpanded">
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="form-group no-margin-hr">
|
|
<label class="control-label">Cost Savings</label>
|
|
<div class="input-group">
|
|
<span class="input-group-addon">$</span>
|
|
@Html.TextBoxFor(model => model.CostSavings, new { @class = "form-control", data_ng_model = "ViewModel.CostSavings", ng_disabled = "!ViewModel.IsEditable || !ViewModel.IsExpanded", ng_model_options = "{ updateOn: 'change' }" })
|
|
</div>
|
|
@Html.ValidationMessageFor(model => model.CostSavings)
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<div class="form-group no-margin-hr">
|
|
<label class="control-label">Cost Saving Dates</label>
|
|
<div class="input-daterange input-group" id="bs-datepicker-cost-range">
|
|
@Html.TextBoxFor(m => m.CostSavingStartDate, "MM/dd/yyyy", new { @class = "form-control", data_ng_model = "ViewModel.StartDate", ng_disabled = "!ViewModel.IsEditable || !ViewModel.IsExpanded", ng_model_options = "{ updateOn: 'change' }" })
|
|
<div class="input-group-addon">to</div>
|
|
@Html.TextBoxFor(m => m.CostSavingEndDate, "MM/dd/yyyy", new
|
|
{
|
|
@class = "form-control",
|
|
data_ng_model = "ViewModel.EndDate",
|
|
ng_disabled = "!ViewModel.IsEditable || !ViewModel.IsExpanded",
|
|
ng_model_options = "{ updateOn: 'change' }",
|
|
data_val_dategreaterthanorequal = "Cost Saving End Date should not be less than Cost Saving Start Date",
|
|
data_val_dategreaterthanorequal_otherpropertyname = Html.IdFor(x => x.CostSavingStartDate)
|
|
})
|
|
</div>
|
|
@Html.ValidationMessageFor(model => model.CostSavingStartDate)
|
|
@Html.ValidationMessageFor(model => model.CostSavingEndDate)
|
|
</div>
|
|
</div>
|
|
@if (Model.ROIDate.HasValue)
|
|
{
|
|
<div class="col-sm-3">
|
|
<div class="form-group no-margin-hr">
|
|
@Html.LabelFor(x => x.ROIDate, new { @class = "control-label" })
|
|
@Html.TextBoxFor(x => x.ROIDate, "{0:MM/dd/yyyy}", new { @class = "form-control", disabled = "disabled" })
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="row" ng-show="ViewModel.Items != null && ViewModel.IsExpanded">
|
|
<div class="col-sm-12">
|
|
<label class="control-label">
|
|
Show values for
|
|
</label>
|
|
@Html.CheckBoxFor(x => x.IsMonthlyMode, new { @class = "switcher", ng_model = "ViewModel.Show" })
|
|
<div class="table-light table-responsive" style="overflow-x:auto;">
|
|
<table class="table table-bordered no-margin-vr" id="costSaving-table" ng-class="{smallWidth: !ViewModel.Show}">
|
|
<thead>
|
|
<tr>
|
|
<th class="nextcol"> </th>
|
|
<th class="nextcol">Total</th>
|
|
<th class="headcol nextcol" ng-repeat="header in (ViewModel.Months)" ng-show="ViewModel.Show" style="text-align:center;">
|
|
{{header}}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="row in (ViewModel.Items)" ng-init="sectionIndex = $index">
|
|
<td>
|
|
{{row.Year}}
|
|
</td>
|
|
<td class="headcol">
|
|
<a href="#" class="editable-click" ng-click="onShow(this)" ng-disabled="!ViewModel.IsEditable" editable-text="row.Costs[0]" e-name="ColValue_{{row.Year}}" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit" onbeforesave="checkValue($data, $index, 0)" e-required>
|
|
{{ (row.Costs[0] || 0 | number:2) }}
|
|
</a>
|
|
</td>
|
|
<td class="headcol" ng-repeat="col in (ViewModel.Months)" ng-show="ViewModel.Show">
|
|
<a href="#" class="editable-click" ng-click="onShow(this, $index)" ng-disabled="!ViewModel.IsEditable" ng-if="row.Costs[$index + 1] != null" editable-text="row.Costs[$index + 1]" e-name="ColValue_{{row.Year}}_{{$index}}" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit" onbeforesave="checkValue($data, sectionIndex, $index+1)" e-required>
|
|
{{ (row.Costs[$index + 1] || 0 | number:2) }}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4" style="display:none;">
|
|
<div style="width:100%; height:200px;background-color:lightgray;">Graph Place Holder</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" ng-show="ViewModel.IsExpanded">
|
|
<div class="col-sm-4 col-md-3">
|
|
<div class="form-group no-margin-hr switcher-block">
|
|
@Html.LabelFor(model => model.CostSavingType, new { @class = "control-label" })
|
|
<span ng-show="ViewModel.IsEditable">
|
|
@Html.CheckBoxFor(model => model.CostSavingType, new { @class = "switcher form-control", ng_model = "ViewModel.CostSavingType" })
|
|
</span>
|
|
<span ng-show="!ViewModel.IsEditable">
|
|
@(Model.CostSavingType ? "Hard Savings" : "Soft Savings")
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<div class="form-group no-margin-hr">
|
|
@Html.LabelFor(model => model.CostSavingDescription, new { @class = "control-label" })
|
|
@Html.TextAreaFor(model => model.CostSavingDescription, 3, 55, new { @class = "form-control", data_ng_model = "ViewModel.Description", ng_disabled = "!ViewModel.IsEditable || !ViewModel.IsExpanded", ng_model_options = "{ updateOn: 'change' }" })
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |