Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @model IEnumerable<SEPCO_SODOIT.Models.ProductGroup>
- @{
- ViewBag.Title = "Index";
- Layout = "~/Views/Shared/_Layout.cshtml";
- }
- <style>
- .jqplot-point-label {
- color: white;
- }
- .imgHolder {
- position: relative;
- }
- .imgHolder span {
- position: relative;
- right: 10px;
- top: 10px;
- }
- #tblDate tr td {
- border: none !important;
- }
- #dataContent {
- width: 100%;
- }
- .loader {
- border: 16px solid #f3f3f3;
- border-top: 16px solid #3498db;
- border-radius: 50%;
- width: 120px;
- height: 120px;
- animation: spin 2s linear infinite;
- }
- #loadingImage {
- position: absolute;
- top: 50%;
- left: 50%;
- margin: -50px 0px 0px -50px;
- box-shadow: 0px 0px 5px #fff;
- z-index: 1000001;
- }
- </style>
- <div class="container-fluid">
- <h2>EOL Depletion(<label id="lblMonthlyWeekly">-</label>)</h2>
- <div class="imgHolder">
- <img id="loadingImage" src="~/LoadingIMG/Preloader_2.gif" style="display:none;" />
- <span style="display:none;" id="loading"><label>Loading...</label></span>
- </div>
- <table class="table table-responsive">
- <thead>
- <tr>
- <th>AP1</th>
- <th>GSCM Account</th>
- <th>Dealer</th>
- <th>Site Name</th>
- <th>Week/Month</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- @Html.DropDownList("AP1", null,new { @id = "ddlAP1", @class = "form-control", @style = "width:100%;" })
- </td>
- <td>
- <select id="ddlGSCMAccount" class="form-control" style="width:100%;"></select>
- </td>
- <td>
- <select id="ddlDealer" class="form-control SlectBox" style="width:100%;"></select>
- </td>
- <td>
- <select id="ddlSiteName" class="form-control SlectBox" style="width:100%;"></select>
- </td>
- <td>
- <select class="form-control" id="ddlMonthWeek" style="width:100%;">
- <option>Monthly</option>
- <option>Weekly</option>
- </select>
- </td>
- </tr>
- </tbody>
- </table>
- <table style="width:40%;" class="table table-responsive" id="tblDate">
- <thead>
- <tr>
- <th></th>
- <th>FROM</th>
- <th>TO</th>
- <th></th>
- <th></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td style="width:5%;"><label id="lblMonthWeek">MONTH:</label> </td>
- <td style="width:10%;">
- <select class="form-control" id="ddlWeekFrom" style="display:none;">
- <option>01</option>
- <option>02</option>
- <option>03</option>
- <option>04</option>
- <option>05</option>
- <option>06</option>
- <option>07</option>
- <option>08</option>
- <option>09</option>
- @{
- for (var i = 10; i <= 52; i++)
- {
- <option>@i</option>
- }
- }
- </select>
- @Html.DropDownList("MonthMappingFrom1", null, new { @class = "form-control", @id = "ddlMonthMappingFrom", @style = "width:100%;" })
- </td>
- <td style="width:10%;">
- <select class="form-control" id="ddlWeekTo" style="display:none;">
- <option>01</option>
- <option>02</option>
- <option>03</option>
- <option>04</option>
- <option>05</option>
- <option>06</option>
- <option>07</option>
- <option>08</option>
- <option>09</option>
- @{
- for (var i = 10; i <= 52; i++)
- {
- <option>@i</option>
- }
- }
- </select>
- @Html.DropDownList("MonthMappingTo1", null, new { @class = "form-control", @id = "ddlMonthMappingTo", @style = "width:100%;" })
- </td>
- </tr>
- <tr>
- <td style="width:5%;"><label>YEAR:</label></td>
- <td style="width:10%;">
- @Html.DropDownList("YearMappingFrom1", null, new { @class = "form-control", @id = "ddlYearMappingFrom", @style = "width:100%;" })
- </td>
- <td style="width:10%;">
- @*@Html.DropDownList("YearMappingTo1", null, new { @class = "form-control", @id = "ddlYearMappingTo", @style = "width:100%;" })*@
- </td>
- <td style="width:2%;"></td>
- <td style="width:10%;"><button type="button" class="btn btn-info" style="width:100%;" id="generateEOLTable">Apply Filters</button></td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="panel panel-primary">
- <div class="panel-heading">
- <h4>PRODUCT GROUP</h4>
- </div>
- <div class="panel-body">
- <div class="container-fluid">
- <div class="row">
- <div id="productgroupContent">
- </div>
- </div>
- </div>
- </div>
- </div>
- <div id="ProductModal" class="modal fade" role="dialog">
- <div class="modal-dialog" style="width:90%;">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal">×</button>
- <h4 class="modal-title" id="ProductGroupName" style="text-align:center"></h4>
- </div>
- <div class="modal-body" style="height:700px;overflow-y:scroll; overflow-x:hidden;">
- <div id="productContent">
- </div>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
- </div>
- <div id="ModelModal" class="modal fade" role="dialog">
- <div class="modal-dialog" style="width:90%;">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal">×</button>
- <h4 class="modal-title" id="ProductName" style="text-align:center"></h4>
- </div>
- <div class="modal-body">
- <div id="modelContent" style="height:700px;overflow-y:scroll; overflow-x:hidden;">
- </div>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
- </div>
- <div id="StoreModal" class="modal fade" role="dialog">
- <div class="modal-dialog" style="width:90%;">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal">×</button>
- <h4 class="modal-title" id="StoreName" style="text-align:center"></h4>
- </div>
- <div class="modal-body">
- <div id="storeContent" style="height:700px;overflow-y:scroll; overflow-x:hidden;">
- </div>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- $(document).ready(function () {
- $(document)
- .ajaxStart(function () {
- $('#loadingImage').show();
- $('#loading').show();
- })
- .ajaxStop(function () {
- $('#loadingImage').hide();
- $('#loading').hide();
- });
- $("#generateEOLTable").click(function () {
- ProductGroup();
- })
- $('#lblMonthlyWeekly').html($('#ddlMonthWeek').val());
- $('#ddlMonthWeek').on("change", function () {
- if ($('#ddlMonthWeek').val().trim() == "Monthly") {
- $('#ddlWeekTo').hide();
- $('#ddlWeekFrom').hide();
- $('#ddlMonthMappingFrom').show();
- $('#ddlMonthMappingTo').show();
- $('#lblMonthWeek').html('MONTH:');
- $('#lblMonthlyWeekly').html("Monthly");
- }
- if ($('#ddlMonthWeek').val().trim() == "Weekly") {
- $('#ddlWeekTo').show();
- $('#ddlWeekFrom').show();
- $('#ddlMonthMappingFrom').hide();
- $('#ddlMonthMappingTo').hide();
- $('#lblMonthWeek').html('WEEK:');
- $('#lblMonthlyWeekly').html("Weekly");
- }
- });
- $('#ddlAP1').SumoSelect();
- $('#ddlDealer').SumoSelect();
- $('#ddlGSCMAccount').SumoSelect();
- $('#ddlSiteName').SumoSelect();
- $('#ddlMonthWeek').SumoSelect();
- var ddlGSCMAccount = $("#ddlGSCMAccount");
- $('#ddlAP1').change(function () {
- var sel = $('#ddlAP1').val();
- var count = $('#ddlGSCMAccount').length;
- if (count != 0) {
- $('#ddlGSCMAccount option').each(function () {
- $('#ddlGSCMAccount')[0].sumo.remove(0);
- });
- $('#ddlDealer option').each(function () {
- $('#ddlDealer')[0].sumo.remove(0);
- });
- $('#ddlSiteName option').each(function () {
- $('#ddlSiteName')[0].sumo.remove(0);
- });
- }
- $.ajax({
- url: '@Url.Action("getGSCMAccountListBasedOnAP1", "RPEOLDepletion")',
- data: { AP1: sel },
- global: false,
- success: function (data) {
- for (var i = 0; i < data.length; i++) {
- $('#ddlGSCMAccount')[0].sumo.add(data[i]["GSCMAccountName"]);
- }
- }
- });
- });
- $("#ddlGSCMAccount").change(function () {
- var sel = $('#ddlGSCMAccount').val();
- var count = $('#ddlDealer').length;
- if (count != 0) {
- $('#ddlDealer option').each(function () {
- $('#ddlDealer')[0].sumo.remove(0);
- });
- $('#ddlSiteName option').each(function () {
- $('#ddlSiteName')[0].sumo.remove(0);
- });
- }
- $.ajax({
- url: '@Url.Action("getDealerListByGSCMAccount", "RPEOLDepletion")',
- data: { gscmaccount: sel },
- global: false,
- success: function (data) {
- for (var i = 0; i < data.length; i++) {
- $('#ddlDealer')[0].sumo.add(data[i].Dealer);
- }
- }
- });
- });
- $("#ddlDealer").change(function () {
- var sel = $('#ddlDealer').val();
- var count = $('#ddlSiteName').length;
- if (count != 0) {
- $('#ddlSiteName option').each(function () {
- $('#ddlSiteName')[0].sumo.remove(0);
- });
- }
- $.ajax({
- url: '@Url.Action("getSiteNameListByDealer", "RPEOLDepletion")',
- data: { dealer: sel },
- global: false,
- success: function (data) {
- for (var i = 0; i < data.length; i++) {
- $('#ddlSiteName')[0].sumo.add(data[i].SiteName);
- }
- }
- });
- });
- });
- function ProductGroup() {
- var childCount = $('#productgroupContent').children().length;
- if (childCount != 0) {
- $('#productgroupContent').children().remove();
- }
- var productchildCount = $("#productContent").children().length;
- if (productchildCount != 0) {
- $('#productContent').children().remove();
- }
- var modelchildCount = $("#modelContent").children().length;
- if (modelchildCount != 0) {
- $('#modelContent').children().remove();
- }
- var storechildCount = $("#storeContent").children().length;
- if (storechildCount != 0) {
- $('#storeContent').children().remove();
- }
- var mw = $('#ddlMonthWeek').val();
- var product = $('#ddlProduct').val();
- var wf = $('#ddlWeekFrom').val();
- var wt = $('#ddlWeekTo').val();
- var de = $('#ddlDealer').val();
- var ga = $('#ddlGSCMAccount').val();
- var ap1 = $('#ddlAP1').val();
- $.ajax({
- url: '@Url.Action("getAllProductGroup", "RPEOLDepletion")',
- success: function (datapg) {
- for (var i = 0 ; i < datapg.length-1; i++)
- {
- var pg = datapg[i].GroupName;
- $.ajax({
- url: '@Url.Action("getEOLinProductGroup", "RPEOLDepletion")',
- async: false,
- data: {
- MonthMappingFrom: $("#ddlMonthMappingFrom").val(),
- MonthMappingTo: $("#ddlMonthMappingTo").val(),
- YearMappingFrom: $('#ddlYearMappingFrom').val(),
- ProductGroup: pg,
- Product: product,
- Dealer: de,
- GSCMAccount: ga,
- AP1: ap1,
- MonthWeek: mw,
- WeekFrom: wf,
- WeekTo: wt,
- },
- success: function (data) {
- if (datapg[i].GroupName.includes('/')) {
- pg = datapg[i].GroupName.replace('/', '');
- }
- var innerButton = document.createElement('button');
- innerButton.className = "btn btn-primary";
- innerButton.id = pg;
- innerButton.innerHTML = datapg[i].GroupName;
- var innerDiv = document.createElement('div');
- innerDiv.id = pg;
- innerDiv.innerHTML = data;
- document.getElementById('productgroupContent').append(innerButton);
- document.getElementById('productgroupContent').append(innerDiv);
- $("#" + pg).click(function () {
- var productchildCount = $("#productContent").children().length;
- if (productchildCount != 0) {
- $('#productContent').children().remove();
- }
- var modelchildCount = $("#modelContent").children().length;
- if (modelchildCount != 0) {
- $('#modelContent').children().remove();
- }
- var ModalProductGroupTitle = ($(this).text());
- $.ajax({
- data: {
- ProductGroup: ModalProductGroupTitle
- },
- url: '@Url.Action("getAllProductsbyGroupName", "RPEOLDepletion")',
- success: function (dataproduct) {
- for (var x = 0 ; x < dataproduct.length; x++)
- {
- var prod = dataproduct[x].Product;
- $.ajax({
- url: '@Url.Action("getProductsofProductGroupName", "RPEOLDepletion")',
- async: false,
- data: {
- MonthMappingFrom: $("#ddlMonthMappingFrom").val(),
- MonthMappingTo: $("#ddlMonthMappingTo").val(),
- YearMappingFrom: $('#ddlYearMappingFrom').val(),
- ProductGroup: pg,
- Product: product,
- Dealer: de,
- GSCMAccount: ga,
- AP1: ap1,
- MonthWeek: mw,
- WeekFrom: wf,
- WeekTo: wt,
- },
- success: function (dataofproduct) {
- if (dataproduct[x].Product.includes('/')) {
- prod = dataproduct[x].Product.replace('/', '');
- }
- $("#ProductGroupName").html(ModalProductGroupTitle);
- $('#ProductModal').modal('show');
- var innerButton1 = document.createElement('button');
- innerButton1.className = "btn btn-primary";
- innerButton1.id =prod;
- innerButton1.innerHTML = dataproduct[x].Product;
- var innerDiv1 = document.createElement('div');
- innerDiv1.id = prod;
- innerDiv1.innerHTML = dataofproduct;
- document.getElementById('productContent').append(innerButton1);
- document.getElementById('productContent').append(innerDiv1);
- //display models by product by cliking this button
- $("#" + prod).click(function () {
- var modelchildCount = $("#modelContent").children().length;
- if (modelchildCount != 0) {
- $('#modelContent').children().remove();
- }
- var ModalProductTitle = ($(this).text());
- $("#ProductName").html(ModalProductTitle);
- $.ajax({
- data: {
- Product: ModalProductTitle
- },
- url: '@Url.Action("getAllModelsbyProducts", "RPEOLDepletion")',
- success: function (datamodel) {
- for (var y = 0 ; y < datamodel.length; y++) {
- var mod = datamodel[y].Model;
- $.ajax({
- url: '@Url.Action("getProductsofProductGroupName", "RPEOLDepletion")',
- async: false,
- data: {
- MonthMappingFrom: $("#ddlMonthMappingFrom").val(),
- MonthMappingTo: $("#ddlMonthMappingTo").val(),
- YearMappingFrom: $('#ddlYearMappingFrom').val(),
- ProductGroup: pg,
- Product: product,
- Dealer: de,
- GSCMAccount: ga,
- AP1: ap1,
- MonthWeek: mw,
- WeekFrom: wf,
- WeekTo: wt,
- },
- success: function (dataofmodel) {
- if (datamodel[y].Model.includes('/')) {
- mod = datamodel[y].Model.replace('/', '');
- }
- $("#ProductName").html(ModalProductTitle);
- $('#ProductModal').modal('hide');
- $('#ModelModal').modal('show');
- var innerButton2 = document.createElement('button');
- innerButton2.className = "btn btn-primary";
- innerButton2.id = mod;
- innerButton2.innerHTML = datamodel[y].Model;
- var innerDiv2 = document.createElement('div');
- innerDiv2.id = mod;
- innerDiv2.innerHTML = dataofmodel;
- document.getElementById('modelContent').append(innerButton2);
- document.getElementById('modelContent').append(innerDiv2);
- // display store by model by cliking this button
- $("#" + mod).click(function () {
- var storechildCount = $("#storeContent").children().length;
- if (storechildCount != 0) {
- $('#storeContent').children().remove();
- }
- var ModalStoreTitle = ($(this).text());
- $.ajax({
- data: {
- Product: ModalProductTitle
- },
- url: '@Url.Action("getAllStoresbyModel", "RPEOLDepletion")',
- async: false,
- success: function (datastore) {
- for (var j = 0 ; j < datastore.length - 1; j++) {
- $.ajax({
- url: '@Url.Action("getProductsofProductGroupName", "RPEOLDepletion")',
- async: false,
- data: {
- MonthMappingFrom: $("#ddlMonthMappingFrom").val(),
- MonthMappingTo: $("#ddlMonthMappingTo").val(),
- YearMappingFrom: $('#ddlYearMappingFrom').val(),
- ProductGroup: pg,
- Product: product,
- Dealer: de,
- GSCMAccount: ga,
- AP1: ap1,
- MonthWeek: mw,
- WeekFrom: wf,
- WeekTo: wt,
- },
- success: function (dataofstore) {
- if (datamodel[2].includes("/")) {
- datamodel[2] = "AC";
- }
- $("#StoreName").html(ModalStoreTitle + "3");
- $('#ModelModal').modal('hide');
- $('#StoreModal').modal('show');
- var innerButton3 = document.createElement('button');
- innerButton3.className = "btn btn-primary";
- innerButton3.id = datamodel[j] + "3";
- innerButton3.innerHTML = datamodel[j];
- var innerDiv3 = document.createElement('div');
- innerDiv3.id = prod;
- innerDiv3.innerHTML = dataofstore;
- document.getElementById('storeContent').append(innerButton3);
- document.getElementById('storeContent').append(innerDiv3);
- }
- });
- }
- }
- });
- });
- }
- });
- }
- }
- });
- });
- }
- });
- }
- }
- });
- });
- }
- });
- }
- }
- });
- };
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement