EnVisageOnline/Main/Source/EnVisage/Views/Calendar/_editHoliday.cshtml

1217 lines
55 KiB
Plaintext

@using EnVisage.Code
@model EnVisage.Models.HolidayModel
@{
ViewBag.Title = Model.HolidayGroupId.Equals(Guid.Empty) ? "Add Holiday" : "Change Holiday";
}
<style type="text/css">
.select2-container-multi .select2-choices .select2-search-choice {
background: #3690e6 !important;
}
.input-group-btn .btn-info.active {
border-left-color: #555555 !important;
border-right-color: #555555 !important;
}
.btn-info.active {
background: #aaa !important; /*#4ab9db*/
border-color: #555555 !important; /*#28a4c9;*/
border-bottom-color: #555555 !important; /*#28a4c9*/
}
</style>
<script type="text/javascript">
emulateNavUrl = "/Calendar";
var holidayFormDataChanged = false;
var isNewItem = @(Model.HolidayGroupId.Equals(Guid.Empty) ? "true" : "false");
var resources = {};
var datePickerOptions = {
format: 'm/d/yyyy',
autoclose: true,
startDate: '@(Constants.MIN_SELECTABLE_DATE)',
endDate: '@(Constants.MAX_SELECTABLE_DATE)'
};
function initEditHolidayForm(holidayGroupId) {
if (holidayGroupId && (holidayGroupId != '@Guid.Empty')) {
StartEdit('Holiday', holidayGroupId, null, '#btnsave', 'erorMsgPlaceholder');
}
@if (Model.ExpenditureCategories.Count > 0)
{
<text>
$("#@Html.IdFor(model=>model.IncludexpenditureCategories)").attr("checked", "checked");
</text>
}
@if (Model.IsInclude)
{
<text>
$("#IsInclude").attr("checked", "checked");
</text>
}
$.validator.unobtrusive.adapters.add('recurrenddate', ['hasactuals', 'projectdeadline', 'actualsenddate'],
function (options) {
options.rules['recurrenddate'] = options.params;
}
);
$.validator.addMethod('recurrenddate', function (value, element, params) {
var startDate = new Date($("#@Html.IdFor(model=>model.StartDate)").val());
var endDate = new Date(value);
if(startDate > endDate)
{
$.validator.messages.recurrenddate = "The End by field should be greater or equal to Start date.";
return false;
}else{
return true;
}
});
$.validator.methods.range = function (value, element, param) {
return this.optional(element) || (value % 1 === 0) && (Number(value) >= Number(param[0]) && Number(value) <= Number(param[1]));
}
initRecurrence();
initSwitchers();
initDatePickers();
$.ajax({
url: '@Url.Action("GetResources", "Calendar")',
cache: false,
type: "post",
error: function (response) {
},
success: function (response) {
resources = JSON.parse(response);
initSelects();
}
});
if (isNewItem) {
// Effective date of change set automatically for new item
$('#effectiveChangeDateBlock').hide();
}
$.validator.unobtrusive.parseDynamicContent('form#holidayEditForm');
var pickerRangeSettings = {
datePickerOptions: datePickerOptions,
multiple: $('#@Html.IdFor(x=> x.MultipleDaysHoliday)').is(':checked')
};
$("#bs-datepicker-holiday-range").datePickerRange(pickerRangeSettings).on("change", function(e) {
$("#range_start_picker").val($("#@Html.IdFor(model=>model.StartDate)").val());
});
toggleAssignments();
toggleAssignmentEntities();
$('#holidayEditForm').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
onHolidayFormDataChanged();
});
};
function initSwitchers()
{
$('#showRecurrence').switcher({
on_state_content: 'On',
off_state_content: 'Off'
});
$('#@Html.IdFor(x=> x.MultipleDaysHoliday)').switcher({
on_state_content: 'Multiple Days',
off_state_content: 'Single Day'
}).parent().css("width", "120px");
$('#@Html.IdFor(x => x.CompanyImpactAllResources)').switcher({
on_state_content: 'All Resources',
off_state_content: 'Some Resources'
}).parent().css("width", "120px");
$('#IsInclude').switcher({
on_state_content: 'Includes',
off_state_content: 'Excludes'
}).parent().css("width", "120px");
$('#@Html.IdFor(model => model.IncludexpenditureCategories)').switcher({
on_state_content: 'Expenditure Category',
off_state_content: 'Resources'
}).parent().css("width", "150px");
}
function initDatePickers() {
// Limits for date value fields
var todayDate = new Date();
todayDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());
$('#@Html.IdFor(model => model.EffectiveChangeDate)').parents('.datepicker').datepicker({
startDate: todayDate,
@(Model.HolidayGroupId.Equals(Guid.Empty) ? "endDate: todayDate" : "")
});
}
function initSelects() {
$("#holidayEditForm").find("select.pm-teams").select2({
placeholder: "Select teams",
}).on('change', function (e) {
refreshResources(false);
});
$("#holidayEditForm").find("select.pm-resources").select2({
placeholder: "Select resources",
}).on('change', function (e) {
var sel = $(this).val();
if(sel.length > 0 && sel[0] == "-1")
{
selectAllResources();
selectAllTeams();
}else{
refreshTeams();
}
});
refreshResources(true);
$("#holidayEditForm").find("select.pm-expcats").select2({
placeholder: "Select Expenditures Categories",
});
}
function selectAllResources()
{
var res = $("#holidayEditForm").find("select.pm-resources");
var resourceIds = [];
$.each(res.find("option"), function(item, resource)
{
if($(resource).val() != "-1")
resourceIds.push($(resource).val());
});
res.select2('val', resourceIds);
}
function selectAllTeams()
{
var teams = $("#holidayEditForm").find("select.pm-teams");
var teamIds = [];
$.each(teams.find("option"), function(item, team)
{
teamIds.push($(team).val());
});
teams.select2('val', teamIds);
}
function refreshTeams()
{
var res = $("#holidayEditForm").find("select.pm-resources");
var teams =$("#holidayEditForm").find("select.pm-teams");
var resourceIds = res.val();
var newTeamIds = [];
if(resourceIds == null)
resourceIds =[];
for(var item in resources)
{
var groupId = item.substr(1, item.indexOf(",") - 1);
var found = false;
for(var option in resources[item])
{
var found1=false;
var opt = resources[item][option];
for(var i=0; i<resourceIds.length; i++)
{
if(resourceIds[i] == opt.Value)
{
found1 = true;
}
}
found = found1;
if(!found)
break;
}
if(!found)
continue;
newTeamIds.push(groupId);
}
teams.select2('val', newTeamIds);
}
function refreshResources(init)
{
var res = $("#holidayEditForm").find("select.pm-resources");
var options = '<option value="-1" class="select2-result-with-children">Select All</option>';
var resourceIds = res.val();
var teamIds = $("#holidayEditForm").find("select.pm-teams").val();
for(var item in resources)
{
if(!init)
{
if(resourceIds == null)
resourceIds =[];
for(var Id in teamIds)
{
if(item.indexOf(teamIds[Id]) > 0)
{
//if(resourceIds != null)
{
for(var option in resources[item])
{
var for_continue = false;
var opt = resources[item][option];
for(var i=0; i<resourceIds.length; i++)
{
if(resourceIds[i] == opt.Value)
{
for_continue = true;
break;
}
}
if(for_continue)
continue;
resourceIds.push(opt.Value);
}
}
}
}
}else{
var group = item;
//var skipTeam = false;
//for(var Id in teamIds)
//{
// if(item.indexOf(teamIds[Id]) > 0){
// skipTeam = true;
// break;
// }
//}
//if(skipTeam)
// continue;
var pos = item.indexOf(",");
if(item.length > 0 && pos > 0){
group=item.substr(pos+2, item.length - pos - 3);
}
options += '<optgroup label="' + group + '">';
for(var option in resources[item])
{
var opt = resources[item][option];
options += '<option value="' + opt.Value + '" class="select2-result-with-children">' + opt.Text + '</option>';
}
options += "</optgroup>";
}
}
if(init)
res.html(options);
//else
res.select2('val', resourceIds);
}
function initRecurrence() {
$("#range_picker").parent().datepicker(datePickerOptions);
$("#range_start_picker").parent().datepicker(datePickerOptions);
$("[name='periodOption']").change(function () {
refreshPeriod();
clearError();
});
$("[name='dailyOption']").change(function () {
refreshDaily();
clearError();
});
$("[name='monthlyOption']").change(function () {
refreshMonthly();
clearError();
});
$("[name='yearlyOption']").change(function () {
refreshYearly();
clearError();
});
$("[name='rangeOption']").change(function () {
var sel = $("[name='rangeOption']:checked").val();
switch (Number(sel)) {
case 1:
$("#Occurrences").attr("disabled", "disabled");
$("#range_picker").attr("disabled", "disabled");
break;
case 2:
$("#Occurrences").removeAttr("disabled");
$("#range_picker").attr("disabled", "disabled");
break;
case 3:
$("#Occurrences").attr("disabled", "disabled");
$("#range_picker").removeAttr("disabled");
break;
}
clearError();
});
deserializeRecurrence($("#@Html.IdFor(model=>model.Options)").val());
$("#range_start_picker").attr("disabled", "disabled");
$("#range_start_picker").val($("#@Html.IdFor(model=>model.StartDate)").val());
}
function refreshDaily()
{
var sel = $("[name='dailyOption']:checked").val();
switch (Number(sel)) {
case 1:
$("#dailyDay").removeAttr("disabled");
break;
case 2:
$("#dailyDay").attr("disabled", "disabled");
break;
}
}
function refreshMonthly()
{
var sel = $("[name='monthlyOption']:checked").val();
switch (Number(sel)) {
case 1:
$("#monthlyDate").removeAttr("disabled");
$("#monthlyMonths").removeAttr("disabled");
$("#monthlyOccurrence").attr("disabled", "disabled");
$("#monthlyWeek").attr("disabled", "disabled");
$("#monthlyMonth").attr("disabled", "disabled");
break;
case 2:
$("#monthlyDate").attr("disabled", "disabled");
$("#monthlyMonths").attr("disabled", "disabled");
$("#monthlyOccurrence").removeAttr("disabled");
$("#monthlyWeek").removeAttr("disabled");
$("#monthlyMonth").removeAttr("disabled");
break;
}
}
function refreshYearly()
{
var sel = $("[name='yearlyOption']:checked").val();
switch (Number(sel)) {
case 1:
$("#yearlyMonth").removeAttr("disabled");
$("#yearlyMonthNumber").removeAttr("disabled");
$("#yearlyOccurrence").attr("disabled", "disabled");
$("#yearlyWeek").attr("disabled", "disabled");
$("#yearlyMonth2").attr("disabled", "disabled");
break;
case 2:
$("#yearlyMonth").attr("disabled", "disabled");
$("#yearlyMonthNumber").attr("disabled", "disabled");
$("#yearlyOccurrence").removeAttr("disabled");
$("#yearlyWeek").removeAttr("disabled");
$("#yearlyMonth2").removeAttr("disabled");
break;
}
}
function refreshPeriod()
{
var sel = $("[name='periodOption']:checked").val();
switch (Number(sel)) {
case 1:
$("#daily_settings").css({ "display": "" });
$("#weekly_settings").css({ "display": "none" });
$("#monthly_settings").css({ "display": "none" });
$("#yearly_settings").css({ "display": "none" });
break;
case 2:
$("#daily_settings").css({ "display": "none" });
$("#weekly_settings").css({ "display": "" });
$("#monthly_settings").css({ "display": "none" });
$("#yearly_settings").css({ "display": "none" });
break;
case 3:
$("#daily_settings").css({ "display": "none" });
$("#weekly_settings").css({ "display": "none" });
$("#monthly_settings").css({ "display": "" });
$("#yearly_settings").css({ "display": "none" });
break;
case 4:
$("#daily_settings").css({ "display": "none" });
$("#weekly_settings").css({ "display": "none" });
$("#monthly_settings").css({ "display": "none" });
$("#yearly_settings").css({ "display": "" });
break;
}
}
function saveRecurrence()
{
var elem = $("#@Html.IdFor(model=>model.Options)");
if ($("#showRecurrence").prop("checked")) {
elem.val(JSON.stringify(serializeRecurrence()));
} else {
elem.val("");
}
return true;
}
function serializeRecurrence()
{
var res = {
"periodOption": $("[name='periodOption']:checked").val(),
"range_start_picker": $("#range_start_picker").val(),
"rangeOption" : $("[name='rangeOption']:checked").val(),
}
switch (Number(res["periodOption"]))
{
case 1: // Daily recurrence
res["dailyOption"] = $("[name='dailyOption']:checked").val();
res["dailyDay"] = $("#dailyDay").val();
break;
case 2: // Monthly recurrence
res["weeklyWeeks"] = $("#weeklyWeeks").val();
res["Sunday"] = $("#Sunday").prop("checked");
res["Monday"] = $("#Monday").prop("checked");
res["Tuesday"] = $("#Tuesday").prop("checked");
res["Wednesday"] = $("#Wednesday").prop("checked");
res["Thursday"] = $("#Thursday").prop("checked");
res["Friday"] = $("#Friday").prop("checked");
res["Saturday"] = $("#Saturday").prop("checked");
break;
case 3: // Monthly recurrence
res["monthlyOption"] = $("[name='monthlyOption']:checked").val();
switch(Number(res["monthlyOption"]))
{
case 1:
res["monthlyDate"] = $("#monthlyDate").val();
res["monthlyMonths"] = $("#monthlyMonths").val();
break;
case 2:
res["monthlyOccurrence"] = $("#monthlyOccurrence").val();
res["monthlyWeek"] = $("#monthlyWeek").val();
res["monthlyMonth"] = $("#monthlyMonth").val();
break;
}
break;
case 4: // Yearly recurrence
res["yearlyOption"] = $("[name='yearlyOption']:checked").val();
res["yearlyYear"] = $("#yearlyYear").val();
switch (Number(res["yearlyOption"]))
{
case 1:
res["yearlyMonth"] = $("#yearlyMonth").val();
res["yearlyMonthNumber"] = $("#yearlyMonthNumber").val();
break;
case 2:
res["yearlyOccurrence"] = $("#yearlyOccurrence").val();
res["yearlyWeek"] = $("#yearlyWeek").val();
res["yearlyMonth2"] = $("#yearlyMonth2").val();
break;
}
break;
}
switch (Number(res["rangeOption"]))
{
case 2:
res["Occurrences"] = $("#Occurrences").val();
break;
case 3:
res["range_picker"] = $("#range_picker").val();
}
// Added by SA
if (res["range_start_picker"] && (res["range_start_picker"].length > 0)) {
var startRepeatingDate = new Date(res["range_start_picker"]);
var UTCmilliseconds = startRepeatingDate.getTime() - startRepeatingDate.getTimezoneOffset() * 60 * 1000;
res["StartDate"] = UTCmilliseconds;
}
if (res["range_picker"] && (res["range_picker"].length > 0)) {
var endRepeatingDate = new Date(res["range_picker"]);
var UTCmilliseconds = endRepeatingDate.getTime() - endRepeatingDate.getTimezoneOffset() * 60 * 1000;
res["EndDate"] = UTCmilliseconds;
}
return res;
}
function deserializeRecurrence(data) {
if (data.length > 0) {
$("#showRecurrence").prop("checked", true);
toggleRecurrence();
var rec = JSON.parse(data);
$.each($("[name='periodOption']"), function (i, o) {
if ($(o).val() == rec.periodOption) {
o.checked = true;
refreshPeriod();
return false;
}
});
$.each($("[name='dailyOption']"), function (i, o) {
if ($(o).val() == rec.dailyOption) {
o.checked = true;
refreshDaily();
return false;
}
});
$("#dailyDay").val(rec.dailyDay);
$("#weeklyWeeks").val(rec.weeklyWeeks);
if (rec.Sunday) {
$("#Sunday").parent().addClass("active");
$("#Sunday").prop("checked", true);
}
if (rec.Monday) {
$("#Monday").parent().addClass("active");
$("#Monday").prop("checked", true);
}
if (rec.Tuesday) {
$("#Tuesday").parent().addClass("active");
$("#Tuesday").prop("checked", true);
}
if (rec.Wednesday) {
$("#Wednesday").parent().addClass("active");
$("#Wednesday").prop("checked", true);
}
if (rec.Thursday) {
$("#Thursday").parent().addClass("active");
$("#Thursday").prop("checked", true);
}
if (rec.Friday) {
$("#Friday").parent().addClass("active");
$("#Friday").prop("checked", true);
}
if (rec.Saturday) {
$("#Saturday").parent().addClass("active");
$("#Saturday").prop("checked", true);
}
$.each($("[name='monthlyOption']"), function (i, o) {
if ($(o).val() == rec.monthlyOption) {
o.checked = true;
refreshMonthly();
return false;
}
});
$("#monthlyDate").val(rec.monthlyDate);
$("#monthlyMonths").val(rec.monthlyMonths);
$("#monthlyOccurrence").val(rec.monthlyOccurrence);
$("#monthlyWeek").val(rec.monthlyWeek);
$("#monthlyMonth").val(rec.monthlyMonth);
$.each($("[name='yearlyOption']"), function (i, o) {
if ($(o).val() == rec.yearlyOption) {
o.checked = true;
refreshYearly();
return false;
}
});
$("#yearlyYear").val(rec.yearlyYear);
$("#yearlyMonth").val(rec.yearlyMonth);
$("#yearlyMonthNumber").val(rec.yearlyMonthNumber);
$("#yearlyOccurrence").val(rec.yearlyOccurrence);
$("#yearlyWeek").val(rec.yearlyWeek);
$("#yearlyMonth2").val(rec.yearlyMonth2);
$.each($("[name='rangeOption']"), function (i, o) {
if ($(o).val() == rec.rangeOption) {
o.checked = true;
switch (rec.rangeOption) {
case "2":
$("#range_picker").attr("disabled", "disabled");
$("#Occurrences").removeAttr("disabled");
break;
case "3":
$("#Occurrences").attr("disabled", "disabled");
$("#range_picker").removeAttr("disabled");
break;
default:
$("#range_picker").attr("disabled", "disabled");
$("#Occurrences").attr("disabled", "disabled");
break;
}
return false;
}
});
//$("#range_start_picker").val(rec.range_start_picker);
$("#Occurrences").val(rec.Occurrences);
$("#range_picker").val(rec.range_picker);
refreshDaily();
refreshMonthly();
refreshYearly();
} else {
$("#range_picker").attr("disabled", "disabled");
$("#Occurrences").attr("disabled", "disabled");
$("#monthlyOccurrence").attr("disabled", "disabled");
$("#monthlyWeek").attr("disabled", "disabled");
$("#monthlyMonth").attr("disabled", "disabled");
$("#yearlyOccurrence").attr("disabled", "disabled");
$("#yearlyWeek").attr("disabled", "disabled");
$("#yearlyMonth2").attr("disabled", "disabled");
}
}
function clearError() {
var $form = $('#holidayEditForm');
$form.data("validator").resetForm();
$form.find(".validation-summary-errors")
.addClass("validation-summary-valid")
.removeClass("validation-summary-errors");
$form.find(".field-validation-error")
.addClass("field-validation-valid")
.removeClass("field-validation-error")
.removeData("unobtrusiveContainer")
.find(">*") // If we were using valmsg-replace, get the underlying error
.removeData("unobtrusiveContainer");
$form.find(".input-validation-error")
.addClass("input-validation-valid")
.removeClass("input-validation-error")
.removeData("unobtrusiveContainer")
.find(">*") // If we were using valmsg-replace, get the underlying error
.removeData("unobtrusiveContainer");
$form.find(".field-validation-valid").html("");
}
function toggleMultipleDays() {
var multiple = $('#@Html.IdFor(x=> x.MultipleDaysHoliday)').is(':checked');
$("#bs-datepicker-holiday-range").datePickerRange('setState', multiple);
$('#WorkingDayLabel').text('Working Day' + (multiple ? 's' : ''));
}
function onHolidayMonthChange() {
var value = $("#yearlyMonth").val();
var curDayValue = $("#yearlyMonthNumber").val();
var numDays = 31;
if (value == '2') {
numDays = 29;
}
if (value == '4' || value == '6' || value == '9' || value == '11') {
numDays = 30;
}
var items = "";
for (var i = 1; i <= numDays; i++) {
items += "<option value=\"" + i + "\" " + ((i == parseInt(curDayValue)) ? "selected" : "") + ">" + i + "</option>";
};
$("#yearlyMonthNumber").html(items);
}
function onEditHolidaySuccess(result) {
handleAjaxResponse(result, function () {
document.location.reload();
}, null, null, $('#holidayEditForm'));
};
function onEditHolidayFailure(xhr) {
showErrorModal();
holidayFormDataChanged = true;
};
function onHolidayFormDataChanged() {
holidayFormDataChanged = true;
}
function toggleRecurrence()
{
if ($("#showRecurrence").prop("checked")) {
$("#fsRecurr").css({ "display": "" });
$("#fsRecurrRange").css({ "display": "" });
} else {
$("#fsRecurr").css({ "display": "none" });
$("#fsRecurrRange").css({ "display": "none" });
}
}
function toggleAssignmentEntities() {
if ($("#@Html.IdFor(model => model.IncludexpenditureCategories)").prop("checked")) {
$("#assignExpCats").css({ "display": "" });
$("#assignResources").css({ "display": "none" });
} else {
$("#assignResources").css({ "display": "" });
$("#assignExpCats").css({ "display": "none" });
}
}
function toggleAssignments()
{
if ($('#@Html.IdFor(x => x.CompanyImpactAllResources)').prop("checked")) {
$("#fsResources").css({ "display": "none" });
} else {
$("#fsResources").css({ "display": "" });
}
}
</script>
<div id="erorMsgPlaceholder"></div>
@using (Ajax.BeginForm("EditHoliday", "Calendar", new AjaxOptions
{
HttpMethod = "Post",
OnSuccess = "onEditHolidaySuccess",
OnFailure = "onEditHolidayFailure(xhr)",
OnBegin = "blockUI",
OnComplete = "unblockUI",
},
new
{
id = "holidayEditForm",
onsubmit = "return saveRecurrence()"
}))
{
@Html.HiddenFor(t => t.Id)
@Html.HiddenFor(t => t.HolidayGroupId)
@Html.HiddenFor(t => t.Options)
@Html.AntiForgeryToken()
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">@ViewBag.Title</h4>
</div>
<div class="modal-body" style="padding-bottom: 0px;">
<fieldset id="fsGeneral" class="form-group-margin">
<legend class="text-bold small-bottom-margin">General Holiday Information</legend>
<div class="row" id="effectiveChangeDateBlock">
<div class="col-sm-12">
<div class="form-group no-margin-hr">
@Html.LabelFor(model => model.EffectiveChangeDate, new { @class = "control-label" })
@Html.EditorFor(model => model.EffectiveChangeDate, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.EffectiveChangeDate)
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-lg-8">
<div class="form-group no-margin-hr">
@Html.LabelFor(model => model.Name, new { @class = "control-label" })
@Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="clearfix hidden-xs hidden-lg visible-sm-block visible-md-block"></div>
<div class="col-sm-4 col-lg-4">
<div class="form-group no-margin-hr switcher-block">
<label class="control-label" for="showRecurrence">Recurrence</label>
<input class="switcher form-control" id="showRecurrence" name="showRecurrence" type="checkbox" value="true" onchange="toggleRecurrence()" /><input name="showRecurrence" type="hidden" value="false" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-lg-8">
<div class="form-group no-margin-hr">
<div class="col-sm-6 col-lg-4 no-padding-hr">
<label class="control-label">Start/End Date</label>
</div>
<div class="col-sm-6 col-lg-8 no-padding-hr" style="text-align: right;">
@Html.CheckBoxFor(x => x.MultipleDaysHoliday, new { @class = "switcher form-control", name = "multipleDays", onchange = "toggleMultipleDays()" })
</div>
<div class="col-sm-12 col-lg-12 no-padding-hr">
<div class="input-daterange input-group" id="bs-datepicker-holiday-range">
@Html.EditorFor(x => x.StartDate)
<div class="input-group-addon">to</div>
@Html.EditorFor(x => x.EndDate)
</div>
@Html.ValidationMessageFor(model => model.StartDate)
@Html.ValidationMessageFor(model => model.EndDate)
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4">
<div class="form-group no-margin-hr switcher-block">
<label class="control-label" for="companyImpact">Company Impact</label>
@Html.CheckBoxFor(x => x.CompanyImpactAllResources, new { @name = "companyImpact", @class = "switcher form-control", @onchange = "toggleAssignments()" })
</div>
</div>
</div>
<div class="row">
<div class="form-group no-margin-hr">
<div class="col-sm-3">
@Html.LabelFor(model => model.WorkingDays, new { id = "WorkingDayLabel", @class = "control-label" })
</div>
<div class="col-sm-9">
@Html.EditorFor(model => model.WorkingDays, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.WorkingDays)
</div>
</div>
</div>
</fieldset>
<fieldset id="fsRecurr" class="form-group-margin" style="display:none;">
<legend class="text-bold small-bottom-margin">Recurrence pattern</legend>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group" style="margin-bottom:20px;">
<div class="radio col-sm-2 col-md-2" style="float:left;">
<label>
<input type="radio" name="periodOption" checked value="1" class="px">
<span class="lbl">Daily</span>
</label>
</div>
<div class="radio col-sm-2 col-md-2" style="margin-top:0px;float:left;">
<label>
<input type="radio" name="periodOption" value="2" class="px">
<span class="lbl">Weekly</span>
</label>
</div>
<div class="radio col-sm-2 col-md-2" style="margin-top:0px;float:left;">
<label>
<input type="radio" name="periodOption" value="3" class="px">
<span class="lbl">Monthly</span>
</label>
</div>
<div class="radio col-sm-2 col-md-2" style="margin-top:0px;float:left;">
<label>
<input type="radio" name="periodOption" value="4" class="px">
<span class="lbl">Yearly</span>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="daily_settings">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div @*@class="radio"*@>
@*<label>*@
<input type="radio" name="dailyOption" class="px" checked value="1" style="display:none;">
<span @*@class="lbl"*@>Every</span>
<input id="dailyDay" name="dailyDay" type="text" class="form-control" style="width:60px;display:inline;" data-val="true"
data-val-range="The Day(s) field should be integer and greater than zero." data-val-range-min="1" data-val-range-max="1000"
data-val-number="The Day(s) field should be nuneric." data-val-required="The Day(s) field is required.">
<span class="lbl">day(s)</span>
@*</label>*@
<span class="field-validation-valid" data-valmsg-for="dailyDay" data-valmsg-replace="true"></span>
</div>
<div class="radio" style="display: none;">
<label>
<input type="radio" name="dailyOption" class="px" value="2">
<span class="lbl">Every weekday</span>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="weekly_settings" style="display:none;">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="radio">
<label style="margin-left:-20px;">
<span class="lbl">Recur every</span>
<input id="weeklyWeeks" name="weeklyWeeks" type="text" class="form-control" style="width:60px;display:inline;" data-val="true"
data-val-number="The Recur field should be numeric."
data-val-range="The Recur field should be integer and greater than zero." data-val-range-min="1" data-val-range-max="1000"
data-val-required="The Recur field is required.">
<span class="lbl">weeks on:</span>
</label>
<span class="field-validation-valid" data-valmsg-for="weeklyWeeks" data-valmsg-replace="true"></span>
</div>
<div class="btn-group" data-toggle="buttons" style="margin-top:10px;">
<label class="btn btn-info" style="width:50px;">
<input type="checkbox" id="Sunday">Sun
</label>
<label class="btn btn-info" style="width:50px;">
<input type="checkbox" id="Monday">Mon
</label>
<label class="btn btn-info" style="width:50px;">
<input type="checkbox" id="Tuesday">Tue
</label>
<label class="btn btn-info" style="width:50px;">
<input type="checkbox" id="Wednesday">Wed
</label>
<label class="btn btn-info" style="width:50px;">
<input type="checkbox" id="Thursday">Thu
</label>
<label class="btn btn-info" style="width:50px;">
<input type="checkbox" id="Friday">Fri
</label>
<label class="btn btn-info" style="width:50px;">
<input type="checkbox" id="Saturday">Sat
</label>
</div> <!-- / .btn-group -->
</div>
</div>
</div>
<div class="row" id="monthly_settings" style="display:none;">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="monthlyOption" class="px" value="1" checked>
<span class="lbl">Date</span>
<input id="monthlyDate" name="monthlyDate" type="text" class="form-control" style="width:60px;display:inline;" data-val="true"
data-val-number="The Date field should be numeric."
data-val-range="The Date field should be integer and greater than zero." data-val-range-min="1" data-val-range-max="31"
data-val-required="The Date field is required.">
<span class="lbl">of every</span>
<input id="monthlyMonths" name="monthlyMonths" type="text" class="form-control" style="width:60px;display:inline;" data-val="true"
data-val-number="The Month(s) field should be numeric."
data-val-range="The Month(s) field should be integer and greater than zero." data-val-range-min="1" data-val-range-max="1000"
data-val-required="The Month(s) field is required.">
<span class="lbl">month(s)</span>
</label>
<span class="field-validation-valid" data-valmsg-for="monthlyDate" data-valmsg-replace="true" />
<span class="field-validation-valid" data-valmsg-for="monthlyMonths" data-valmsg-replace="true" />
</div>
<div class="radio">
<label>
<input type="radio" name="monthlyOption" class="px" value="2">
<span class="lbl">The</span>
<select id="monthlyOccurrence" name="monthlyOccurrence" class="form-control" style="width:130px;display:inline;" data-val="true"
data-val-required="The Month field is required.">
@foreach (var item in Utils.GetOccurrenceTypes())
{
<text>
<option value="@item.Value">@item.Text</option>
</text>
}
</select>
<select id="monthlyWeek" name="monthlyWeek" class="form-control" style="width:120px;display:inline;" data-val="true"
data-val-required="The Month field is required.">
@foreach (var item in Utils.GetWeekDays())
{
<text>
<option value="@item.Value">@item.Text</option>
</text>
}
</select>
<span class="lbl">of every</span>
<input id="monthlyMonth" name="monthlyMonth" type="text" class="form-control" style="width:50px;display:inline;" data-val="true"
data-val-number="The Month field should be numeric."
data-val-range="The Month field should be integer and greater than zero." data-val-range-min="1" data-val-range-max="1000"
data-val-required="The Month field is required.">
<span class="lbl" style="width:100px;">month(s)</span>
</label>
<span class="field-validation-valid" data-valmsg-for="monthlyMonth" data-valmsg-replace="true"></span>
<span class="field-validation-valid" data-valmsg-for="monthlyOccurrence" data-valmsg-replace="true"></span>
<span class="field-validation-valid" data-valmsg-for="monthlyWeek" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
<div class="row" id="yearly_settings" style="display:none;">
<div class="col-sm-10 col-md-10">
<div class="form-group">
<div class="radio">
<label style="margin-left:-20px;">
<span class="lbl">Recur every</span>
<input id="yearlyYear" name="yearlyYear" type="text" class="form-control" style="width:60px;display:inline;" data-val="true"
data-val-number="The Year(s) field should be numeric."
data-val-range="The Year(s) field should be integer and greater than zero." data-val-range-min="1" data-val-range-max="1000"
data-val-required="The Year(s) field is required.">
<span class="lbl">year(s)</span>
</label>
<span class="field-validation-valid" data-valmsg-for="yearlyYear" data-valmsg-replace="true"></span>
</div>
<div class="radio">
<label>
<input type="radio" name="yearlyOption" class="px" value="1" checked>
<span class="lbl">On:</span>
<select id="yearlyMonth" name="yearlyMonth" class="form-control" style="width:120px;display:inline;" data-val="true"
data-val-required="The Year(s) field is required." onchange="onHolidayMonthChange()">
@foreach (var item in Utils.GetMonths())
{
<text>
<option value="@item.Value">@item.Text</option>
</text>
}
</select>
<select id="yearlyMonthNumber" name="yearlyMonthNumber" class="form-control" style="width:80px;display:inline;" data-val="true"
data-val-number="The Month number field should be numeric." data-val-required="The Month number field is required.">
@foreach (var item in Utils.GetMonthDays(1))
{
<text>
<option value="@item.Value">@item.Text</option>
</text>
}
</select>
</label>
<span class="field-validation-valid" data-valmsg-for="yearlyMonth" data-valmsg-replace="true"></span>
<span class="field-validation-valid" data-valmsg-for="yearlyMonthNumber" data-valmsg-replace="true"></span>
</div>
<div class="radio">
<label>
<input type="radio" name="yearlyOption" class="px" value="2">
<span class="lbl">On the:</span>
<select id="yearlyOccurrence" name="yearlyOccurrence" class="form-control" style="width:130px;display:inline;" data-val="true"
data-val-required="The Year(s) field is required.">
@foreach (var item in Utils.GetOccurrenceTypes())
{
<text>
<option value="@item.Value">@item.Text</option>
</text>
}
</select>
<select id="yearlyWeek" name="yearlyWeek" class="form-control" style="width:120px;display:inline;" data-val="true"
data-val-required="The Year(s) field is required.">
@foreach (var item in Utils.GetWeekDays())
{
<text>
<option value="@item.Value">@item.Text</option>
</text>
}
</select>
<span class="lbl">of</span>
<select id="yearlyMonth2" name="yearlyMonth2" class="form-control" style="width:120px;display:inline;" data-val="true"
data-val-required="The Year(s) field is required.">
@foreach (var item in Utils.GetMonths())
{
<text>
<option value="@item.Value">@item.Text</option>
</text>
}
</select>
</label>
<span class="field-validation-valid" data-valmsg-for="yearlyOccurrence" data-valmsg-replace="true"></span>
<span class="field-validation-valid" data-valmsg-for="yearlyWeek" data-valmsg-replace="true"></span>
<span class="field-validation-valid" data-valmsg-for="yearlyMonth2" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset id="fsRecurrRange" class="form-group-margin" style="display:none;">
<legend class="text-bold small-bottom-margin">Range of Recurrence</legend>
<div class="row" id="range">
<div class="col-sm-4 col-md-4">
<div class="form-group no-margin-hr">
<label class="control-label">Start</label>
<div style="float:left;width:150px;">
<div class="input-group date datepicker">
<input id="range_start_picker" name="range_start_picker" type="text" class="form-control date" data-val="true"
data-val-date="The field Start by must be a date." data-val-required="The Start field is required."><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
<span class="help-block field-validation-valid" data-valmsg-for="range_start_picker" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="rangeOption" class="px" value="1" checked>
<span class="lbl">No end date</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="rangeOption" class="px" value="2">
<span class="lbl">End after</span>
<input id="Occurrences" name="Occurrences" type="text" class="form-control" style="width:60px;display:inline;" data-val="true" data-val-length="The field Occurrences must be a numeric."
data-val-number="The Occurrences field should be numeric."
data-val-range="The Occurrences field should be integer and greater than zero."
data-val-required="The Occurrences field is required.">
<span class="lbl">occurrences</span>
</label>
<span class="field-validation-valid" data-valmsg-for="Occurrences" data-valmsg-replace="true"></span>
</div>
<div class="radio" style="float:left;margin-top:10px;">
<label>
<input type="radio" name="rangeOption" class="px" value="3">
<span class="lbl">End by</span>
</label>
</div>
<div style="float:left;width:150px;margin-left:5px;">
<div class="input-group date datepicker">
<input id="range_picker" name="range_picker" class="form-control" data-val="true"
data-val-recurrenddate="The End by field should be greater or equal to Start date."
data-val-date="The field End by must be a date." data-val-required="The End field is required." type="text" value="" /><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
<span class="help-block field-validation-valid" data-valmsg-for="range_picker" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset id="fsResources" class="form-group-margin" style="display:none">
<legend class="text-bold small-bottom-margin">Assignments</legend>
<div class="row">
<div class="col-sm-12 col-lg-12">
<div class="form-group" style="float:left;width:90px;margin-top:5px;">
<label class="control-label" for="includeHoliday">This Holiday</label>
</div>
<div class="form-group switcher-block" style="float:left;width: 140px;">
@Html.CheckBoxFor(x => x.IsInclude, new { name = "IsInclude", @class = "switcher form-control" })
</div>
@*<div class="form-group switcher-block" style="float:left;width:140px;">
<input class="switcher form-control" id="IsInclude" name="IsInclude" type="checkbox" value="true" onchange="toggleRecurrence()" /><input name="showRecurrence" type="hidden" value="false" />
</div>*@
<div class="form-group" style="float:left;width:100px;margin-top:5px;">
<label class="control-label" for="@Html.IdFor(model=>model.IncludexpenditureCategories)">the following</label>
</div>
<div class="form-group switcher-block" style="float:left;width: 140px;">
@Html.CheckBoxFor(x => x.IncludexpenditureCategories, new { name = "IncludexpenditureCategories", @class = "switcher form-control", onchange = "toggleAssignmentEntities()" })
</div>
@*<div class="form-group switcher-block" style="float:left;width:140px;">
<input class="switcher form-control" id="@Html.IdFor(model=>model.IncludexpenditureCategories)" name="@Html.IdFor(model=>model.IncludexpenditureCategories)" type="checkbox" value="true" onchange="toggleAssignmentEntities()" /><input name="showRecurrence" type="hidden" value="false" />
</div>*@
</div>
</div>
<div class="row" id="assignResources">
<div class="col-sm-8 col-lg-6">
<div class="form-group no-margin-hr">
@Html.LabelFor(model => model.Teams, new { @class = "col-sm-6 control-label" })
@Html.ListBoxFor(model => model.Teams, Utils.GetTeamsAvailableForUser(Guid.Parse(User.Identity.GetID())), new { @class = "pm-teams form-control" })
@Html.ValidationMessageFor(model => model.Teams)
</div>
</div>
<div class="col-sm-8 col-lg-6">
<div class="form-group no-margin-hr">
@Html.LabelFor(model => model.Resources, new { @class = "col-sm-6 control-label" })
@Html.ListBoxFor(model => model.Resources, Utils.GetResources(User.Identity.GetID(), DateTime.UtcNow), new { @class = "pm-resources form-control" })
@Html.ValidationMessageFor(model => model.Resources)
</div>
</div>
</div>
<div class="row" id="assignExpCats" style="display:none;">
<div class="col-sm-8 col-lg-8">
<div class="form-group no-margin-hr">
@Html.LabelFor(model => model.ExpenditureCategories, new { @class = "col-sm-6 control-label" })
@Html.ListBoxFor(model => model.ExpenditureCategories, Utils.GetExpenditureAllCategories(true), new { @class = "pm-expcats form-control" })
@Html.ValidationMessageFor(model => model.ExpenditureCategories)
</div>
</div>
<div class="col-sm-8 col-lg-4">
</div>
</div>
</fieldset>
@Html.ValidationSummary(false, "The record could not be saved due to the following errors:")
</div> <!-- / .modal-body -->
<div class="modal-footer">
<button type="submit" class="btn btn-success"><i class="fa fa-save"></i>&nbsp;Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
}