EnVisageOnline/Main-RMO/Source/EnVisage/Views/Shared/EditorTemplates/CostSavingModel.cshtml

170 lines
8.9 KiB
Plaintext

@using EnVisage.Code
@model EnVisage.Models.CostSavingModel
@{
// need to init cost saving controller
var json = Newtonsoft.Json.JsonConvert.SerializeObject(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,
scenarioStartDate = Model.ScenarioStartDate.HasValue ? Model.ScenarioStartDate.Value.ToString("MM/dd/yyyy") : null,
costSavings = Model.CostSavings,
costSavingDescription = Model.CostSavingDescription,
isExpanded = Model.CostSavingsPanelExpanded,
costSavingType = Model.CostSavingType,
isMonthlyMode = Model.IsMonthlyMode,
isEditable = Model.IsEditable,
ctrlStartDateId = Html.IdFor(t=>t.CostSavingStartDate).ToString(),
items = string.IsNullOrWhiteSpace(Model.CostSavingItems) ? null : Model.CostSavingItems
});
}
<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: '@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-cost-range').datepicker(options);
@if(Model.ScenarioStartDate.HasValue)
{
<text>
$('#CostSaving_CostSavingStartDate').data('datepicker').setStartDate(new Date('@(Model.ScenarioStartDate.HasValue ? Model.ScenarioStartDate.Value.ToString("MM/dd/yyyy") : null)'));
$('#CostSaving_CostSavingEndDate').data('datepicker').setStartDate(new Date('@(Model.ScenarioStartDate.HasValue ? Model.ScenarioStartDate.Value.ToString("MM/dd/yyyy") : null)'));
</text>
}
$('#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");
}
</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 = "IsExpanded" })
@Html.HiddenFor(m => m.CostSavingItems, new { @ng_value = "items" })
@Html.HiddenFor(x => x.IsEditable, new { @ng_value = "IsEditable" })
<div class="row" ng-show="!IsExpanded">
<div class="col-sm-6">
<a class="btn btn-primary" ng-click="addCostSaving()" ng-disabled="!IsEditable"><i class="fa fa-money"></i> Add Cost Savings</a>
</div>
</div>
<div class="row" ng-show="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 = "filters.CostSavings", @ng_disabled = "!IsEditable || !IsExpanded" })
</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 = "filters.StartDate", @ng_disabled = "!IsEditable || !IsExpanded" })
<div class="input-group-addon">to</div>
@Html.TextBoxFor(m => m.CostSavingEndDate, "MM/dd/yyyy", new { @class = "form-control", @data_ng_model = "filters.EndDate", @ng_disabled = "!IsEditable || !IsExpanded" })
</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="data != null && IsExpanded">
<div class="col-sm-12">
<label class="control-label">
Show values for
</label>
@Html.CheckBoxFor(x => x.IsMonthlyMode, new { @ng_click = "onMonthHeaderClick()", @class = "switcher", @ng_model = "filters.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: !filters.Show}">
<thead>
<tr>
<th class="nextcol">&nbsp;</th>
<th class="nextcol">Total</th>
<th class="headcol nextcol" ng-repeat="header in (filters.Months)" ng-show="filters.Show" style="text-align:center;">
{{header}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in (data)" ng-init="sectionIndex = $index">
<td>
{{row.Year}}
</td>
<td class="headcol">
<a href="#" ng-click="onShow(this)" ng-disabled="!IsEditable" editable-text="row.Costs[0]" e-name="ColValue" 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 (filters.Months)" ng-show="filters.Show">
<a href="#" ng-click="onShow(this, $index)" ng-disabled="!IsEditable" ng-if="row.Costs[$index + 1] != null" editable-text="row.Costs[$index + 1]" e-name="ColValue" 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="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="IsEditable">
@Html.CheckBoxFor(model => model.CostSavingType, new { @class = "switcher form-control", @ng_model = "filters.CostSavingType" })
</span>
<span ng-show="!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 = "filters.Description", @ng_disabled = "!IsEditable || !IsExpanded" })
</div>
</div>
</div>
</div>