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

@using EnVisage.Code.HtmlHelpers
@using EnVisage.Code
@{
    ViewBag.Title = "Scenario Templates";
}

@section scripts
{
    <script type="text/javascript">
    	function formatDate(jsonDate) {
    		if (jsonDate == null || jsonDate == "")
    			return "";
    		var dt = new Date(parseInt(jsonDate.replace("/Date(", "").replace(")/", ""), 10));
    		return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
    	}

    	function ToggleStatus(scenarioId, control) {
    	    
    	    if (scenarioId == null || scenarioId == "")
    	        return "";
    	    var url = "/Scenarios/ToggleTemplateStatus/";
    	    var request = {
    	        'scenarioId': scenarioId
    	    };
    	    $.get(url, request, function (data) {
    	        if ($(control).hasClass("btn-warning")) {
    	            $(control).removeClass("btn-warning");
    	            $(control).addClass("btn-primary");
    	            $("#sct " + control + " i").addClass("fa-check-circle-o");
    	            $("#sct " + control + " i").removeClass("fa-times-circle-o");
                    $(control).attr("title", "Activate");
    	        }
    	        else {
    	            $(control).addClass("btn-warning");
    	            $(control).removeClass("btn-primary");
    	            $("#sct " + control + " i").addClass("fa-times-circle-o");
    	            $("#sct " + control + " i").removeClass("fa-check-circle-o");
    	            $(control).attr("title", "Deactivate");
    	        }
    	    });
    	    return '';
    	}
    	var GroupArr = new Array();
    	init.push(function () {
			$('#sct').dataTable({
				"bProcessing": true,
				"bServerSide": true,
				"bAutoWidth" : false,
				"sAjaxSource": document.URL,
				"sServerMethod": "POST",
				"aoColumns": [
				{ "mDataProp": "Name" },
                {
                    "mData": function (data, type, full) {
                        var retVal = "";
                        for (var i = 0; i < data.TemplateGroupNames.length; i++) {
                            retVal += data.TemplateGroupNames[i] + ", ";
                            if (GroupArr.indexOf(data.TemplateGroupNames[i]) == -1) {
                                GroupArr.push(data.TemplateGroupNames[i]);
                                $('span.filterColumn>select')
                                    .append('<option value="' + data.TemplateGroupNames[i] + '" class="">' + data.TemplateGroupNames[i] + '</option>');
                            }
                        }

                        $('span.filterColumn>select>option:first').val('All groups');
                        $('span.filterColumn>select>option:first').text('All groups');

                        if (retVal.length > 1) {
                            return retVal.substr(0, retVal.length - 2);
                        }
                        return retVal;
                    }
                },
				{
					"mDataProp": "StartDate",
					"mRender": function (data, type, full) {
						return formatDate(data);
					}
				},
				{
					"mDataProp": "EndDate",
					"mRender": function (data, type, full) {
						return formatDate(data);
					}
				},
                { "mDataProp": "Duration" },
				{ "mDataProp": "ScenariosCount" },
                {
                	"mDataProp": "CGSplit",
                	"mRender": function (data, type, full) {
                		return data != null && data != "" ? parseFloat(data).toFixed(2)*100 + "%" : "";
                	}
                },
                {
                	"mDataProp": "EFXSplit",
                	"mRender": function (data, type, full) {
                		return data != null && data != "" ? parseFloat(data).toFixed(2) * 100 + "%" : "";
                	}
                },
                {
                    "mDataProp": "Id",
                    "mRender": function (data, type, full) {
                        @if (SecurityManager.CheckSecurityObjectPermission(Areas.ScenarioTemplates, AccessLevel.Write))
						{
						<text>
                        return (full["Status"] == 1) ? "<a class=\"btn btn-xs btn-warning popover-warning popover-dark\" id=\"" + data + "\" onclick=\"ToggleStatus('" + data + "',  this);\" title=\"Deactivate\"><i class=\"fa fa-times-circle-o\"></i></a>" : "<a class=\"btn btn-xs btn-primary popover-warning popover-dark\" id=\"" + data + "\" onclick=\"ToggleStatus('" + data + "',  this);\" title=\"Deactivate\"><i class=\"fa fa-check-circle-o\"></i></a>";
                        </text>
						}
                    }
                }
				],
				"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {

				}
			});
			$('#sct_wrapper .dataTables_filter input').attr('placeholder', 'Search...');
			$('#sct_wrapper .dataTables_processing').addClass("table-caption");
			$('#sct_wrapper .dataTables_processing').html('<span class="h3"><img class="valign-middle" src="../Content/images/loadFA.gif"/></span>');
		});
    </script>
}

<div class="table-light table-responsive">
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="sct">
        <thead>
            <tr>
                <th>
                    Template Name
                </th>
                <th>
                    Groups
                </th>
                <th>
                    Start Date
                </th>
                <th>
                    End Date
                </th>
                <th>
                    Duration
                </th>
                <th>
                    Scenarios #
                </th>
                <th>
                    Labor
                </th>
                <th>
                    Materials
                </th>
                <th>
                    
                </th>
             </tr>
        </thead>
    </table>
</div>