Guest User

Untitled

a guest
Jan 21st, 2018
32
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.33 KB | None | 0 0
  1. @model IEnumerable<SEPCO_SODOIT.Models.ProductGroup>
  2. @{
  3. ViewBag.Title = "Index";
  4. Layout = "~/Views/Shared/_Layout.cshtml";
  5. }
  6.  
  7.  
  8. <style>
  9. .jqplot-point-label {
  10. color: white;
  11. }
  12.  
  13. .imgHolder {
  14. position: relative;
  15. }
  16.  
  17. .imgHolder span {
  18. position: relative;
  19. right: 10px;
  20. top: 10px;
  21. }
  22.  
  23. #tblDate tr td {
  24. border: none !important;
  25. }
  26.  
  27. #dataContent {
  28. width: 100%;
  29. }
  30. .loader {
  31. border: 16px solid #f3f3f3;
  32. border-top: 16px solid #3498db;
  33. border-radius: 50%;
  34. width: 120px;
  35. height: 120px;
  36. animation: spin 2s linear infinite;
  37. }
  38. #loadingImage {
  39. position: absolute;
  40. top: 50%;
  41. left: 50%;
  42. margin: -50px 0px 0px -50px;
  43. box-shadow: 0px 0px 5px #fff;
  44. z-index: 1000001;
  45. }
  46. </style>
  47.  
  48. <div class="container-fluid">
  49. <h2>EOL Depletion(<label id="lblMonthlyWeekly">-</label>)</h2>
  50. <div class="imgHolder">
  51. <img id="loadingImage" src="~/LoadingIMG/Preloader_2.gif" style="display:none;" />
  52. <span style="display:none;" id="loading"><label>Loading...</label></span>
  53. </div>
  54.  
  55. <table class="table table-responsive">
  56. <thead>
  57. <tr>
  58. <th>AP1</th>
  59. <th>GSCM Account</th>
  60. <th>Dealer</th>
  61. <th>Site Name</th>
  62. <th>Week/Month</th>
  63. </tr>
  64. </thead>
  65. <tbody>
  66. <tr>
  67. <td>
  68. @Html.DropDownList("AP1", null,new { @id = "ddlAP1", @class = "form-control", @style = "width:100%;" })
  69. </td>
  70. <td>
  71. <select id="ddlGSCMAccount" class="form-control" style="width:100%;"></select>
  72. </td>
  73. <td>
  74. <select id="ddlDealer" class="form-control SlectBox" style="width:100%;"></select>
  75. </td>
  76. <td>
  77. <select id="ddlSiteName" class="form-control SlectBox" style="width:100%;"></select>
  78. </td>
  79. <td>
  80. <select class="form-control" id="ddlMonthWeek" style="width:100%;">
  81. <option>Monthly</option>
  82. <option>Weekly</option>
  83. </select>
  84. </td>
  85. </tr>
  86. </tbody>
  87. </table>
  88.  
  89. <table style="width:40%;" class="table table-responsive" id="tblDate">
  90. <thead>
  91. <tr>
  92. <th></th>
  93. <th>FROM</th>
  94. <th>TO</th>
  95. <th></th>
  96. <th></th>
  97. </tr>
  98. </thead>
  99. <tbody>
  100. <tr>
  101. <td style="width:5%;"><label id="lblMonthWeek">MONTH:</label> </td>
  102. <td style="width:10%;">
  103. <select class="form-control" id="ddlWeekFrom" style="display:none;">
  104. <option>01</option>
  105. <option>02</option>
  106. <option>03</option>
  107. <option>04</option>
  108. <option>05</option>
  109. <option>06</option>
  110. <option>07</option>
  111. <option>08</option>
  112. <option>09</option>
  113. @{
  114. for (var i = 10; i <= 52; i++)
  115. {
  116. <option>@i</option>
  117. }
  118. }
  119. </select>
  120. @Html.DropDownList("MonthMappingFrom1", null, new { @class = "form-control", @id = "ddlMonthMappingFrom", @style = "width:100%;" })
  121. </td>
  122. <td style="width:10%;">
  123.  
  124. <select class="form-control" id="ddlWeekTo" style="display:none;">
  125. <option>01</option>
  126. <option>02</option>
  127. <option>03</option>
  128. <option>04</option>
  129. <option>05</option>
  130. <option>06</option>
  131. <option>07</option>
  132. <option>08</option>
  133. <option>09</option>
  134. @{
  135. for (var i = 10; i <= 52; i++)
  136. {
  137. <option>@i</option>
  138. }
  139. }
  140. </select>
  141. @Html.DropDownList("MonthMappingTo1", null, new { @class = "form-control", @id = "ddlMonthMappingTo", @style = "width:100%;" })
  142. </td>
  143.  
  144. </tr>
  145. <tr>
  146. <td style="width:5%;"><label>YEAR:</label></td>
  147. <td style="width:10%;">
  148. @Html.DropDownList("YearMappingFrom1", null, new { @class = "form-control", @id = "ddlYearMappingFrom", @style = "width:100%;" })
  149. </td>
  150. <td style="width:10%;">
  151. @*@Html.DropDownList("YearMappingTo1", null, new { @class = "form-control", @id = "ddlYearMappingTo", @style = "width:100%;" })*@
  152. </td>
  153. <td style="width:2%;"></td>
  154. <td style="width:10%;"><button type="button" class="btn btn-info" style="width:100%;" id="generateEOLTable">Apply Filters</button></td>
  155. </tr>
  156. </tbody>
  157. </table>
  158. </div>
  159. <div class="panel panel-primary">
  160. <div class="panel-heading">
  161. <h4>PRODUCT GROUP</h4>
  162. </div>
  163. <div class="panel-body">
  164. <div class="container-fluid">
  165. <div class="row">
  166. <div id="productgroupContent">
  167. </div>
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. <div id="ProductModal" class="modal fade" role="dialog">
  173. <div class="modal-dialog" style="width:90%;">
  174. <div class="modal-content">
  175. <div class="modal-header">
  176. <button type="button" class="close" data-dismiss="modal">&times;</button>
  177. <h4 class="modal-title" id="ProductGroupName" style="text-align:center"></h4>
  178. </div>
  179. <div class="modal-body" style="height:700px;overflow-y:scroll; overflow-x:hidden;">
  180. <div id="productContent">
  181. </div>
  182. </div>
  183. <div class="modal-footer">
  184. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  185. </div>
  186. </div>
  187.  
  188. </div>
  189. </div>
  190. <div id="ModelModal" class="modal fade" role="dialog">
  191. <div class="modal-dialog" style="width:90%;">
  192. <div class="modal-content">
  193. <div class="modal-header">
  194. <button type="button" class="close" data-dismiss="modal">&times;</button>
  195. <h4 class="modal-title" id="ProductName" style="text-align:center"></h4>
  196. </div>
  197. <div class="modal-body">
  198. <div id="modelContent" style="height:700px;overflow-y:scroll; overflow-x:hidden;">
  199. </div>
  200. </div>
  201. <div class="modal-footer">
  202. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <div id="StoreModal" class="modal fade" role="dialog">
  208. <div class="modal-dialog" style="width:90%;">
  209. <div class="modal-content">
  210. <div class="modal-header">
  211. <button type="button" class="close" data-dismiss="modal">&times;</button>
  212. <h4 class="modal-title" id="StoreName" style="text-align:center"></h4>
  213. </div>
  214. <div class="modal-body">
  215. <div id="storeContent" style="height:700px;overflow-y:scroll; overflow-x:hidden;">
  216. </div>
  217. </div>
  218. <div class="modal-footer">
  219. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  220. </div>
  221. </div>
  222. </div>
  223. </div>
  224.  
  225.  
  226. <script type="text/javascript">
  227.  
  228. $(document).ready(function () {
  229.  
  230. $(document)
  231. .ajaxStart(function () {
  232. $('#loadingImage').show();
  233. $('#loading').show();
  234. })
  235. .ajaxStop(function () {
  236. $('#loadingImage').hide();
  237. $('#loading').hide();
  238. });
  239.  
  240.  
  241. $("#generateEOLTable").click(function () {
  242. ProductGroup();
  243. })
  244.  
  245. $('#lblMonthlyWeekly').html($('#ddlMonthWeek').val());
  246.  
  247. $('#ddlMonthWeek').on("change", function () {
  248. if ($('#ddlMonthWeek').val().trim() == "Monthly") {
  249. $('#ddlWeekTo').hide();
  250. $('#ddlWeekFrom').hide();
  251. $('#ddlMonthMappingFrom').show();
  252. $('#ddlMonthMappingTo').show();
  253. $('#lblMonthWeek').html('MONTH:');
  254. $('#lblMonthlyWeekly').html("Monthly");
  255. }
  256. if ($('#ddlMonthWeek').val().trim() == "Weekly") {
  257. $('#ddlWeekTo').show();
  258. $('#ddlWeekFrom').show();
  259. $('#ddlMonthMappingFrom').hide();
  260. $('#ddlMonthMappingTo').hide();
  261. $('#lblMonthWeek').html('WEEK:');
  262. $('#lblMonthlyWeekly').html("Weekly");
  263. }
  264. });
  265.  
  266. $('#ddlAP1').SumoSelect();
  267. $('#ddlDealer').SumoSelect();
  268. $('#ddlGSCMAccount').SumoSelect();
  269. $('#ddlSiteName').SumoSelect();
  270. $('#ddlMonthWeek').SumoSelect();
  271.  
  272. var ddlGSCMAccount = $("#ddlGSCMAccount");
  273. $('#ddlAP1').change(function () {
  274. var sel = $('#ddlAP1').val();
  275. var count = $('#ddlGSCMAccount').length;
  276. if (count != 0) {
  277. $('#ddlGSCMAccount option').each(function () {
  278. $('#ddlGSCMAccount')[0].sumo.remove(0);
  279. });
  280. $('#ddlDealer option').each(function () {
  281. $('#ddlDealer')[0].sumo.remove(0);
  282. });
  283. $('#ddlSiteName option').each(function () {
  284. $('#ddlSiteName')[0].sumo.remove(0);
  285. });
  286.  
  287. }
  288.  
  289.  
  290. $.ajax({
  291. url: '@Url.Action("getGSCMAccountListBasedOnAP1", "RPEOLDepletion")',
  292. data: { AP1: sel },
  293. global: false,
  294. success: function (data) {
  295. for (var i = 0; i < data.length; i++) {
  296. $('#ddlGSCMAccount')[0].sumo.add(data[i]["GSCMAccountName"]);
  297.  
  298. }
  299.  
  300. }
  301. });
  302. });
  303. $("#ddlGSCMAccount").change(function () {
  304. var sel = $('#ddlGSCMAccount').val();
  305. var count = $('#ddlDealer').length;
  306. if (count != 0) {
  307. $('#ddlDealer option').each(function () {
  308. $('#ddlDealer')[0].sumo.remove(0);
  309. });
  310. $('#ddlSiteName option').each(function () {
  311. $('#ddlSiteName')[0].sumo.remove(0);
  312. });
  313. }
  314.  
  315. $.ajax({
  316. url: '@Url.Action("getDealerListByGSCMAccount", "RPEOLDepletion")',
  317. data: { gscmaccount: sel },
  318. global: false,
  319. success: function (data) {
  320.  
  321. for (var i = 0; i < data.length; i++) {
  322. $('#ddlDealer')[0].sumo.add(data[i].Dealer);
  323. }
  324. }
  325. });
  326. });
  327. $("#ddlDealer").change(function () {
  328. var sel = $('#ddlDealer').val();
  329. var count = $('#ddlSiteName').length;
  330. if (count != 0) {
  331. $('#ddlSiteName option').each(function () {
  332. $('#ddlSiteName')[0].sumo.remove(0);
  333. });
  334. }
  335.  
  336. $.ajax({
  337. url: '@Url.Action("getSiteNameListByDealer", "RPEOLDepletion")',
  338. data: { dealer: sel },
  339. global: false,
  340. success: function (data) {
  341. for (var i = 0; i < data.length; i++) {
  342.  
  343. $('#ddlSiteName')[0].sumo.add(data[i].SiteName);
  344. }
  345. }
  346. });
  347.  
  348. });
  349. });
  350.  
  351.  
  352. function ProductGroup() {
  353.  
  354. var childCount = $('#productgroupContent').children().length;
  355. if (childCount != 0) {
  356. $('#productgroupContent').children().remove();
  357. }
  358. var productchildCount = $("#productContent").children().length;
  359. if (productchildCount != 0) {
  360. $('#productContent').children().remove();
  361. }
  362. var modelchildCount = $("#modelContent").children().length;
  363. if (modelchildCount != 0) {
  364. $('#modelContent').children().remove();
  365.  
  366. }
  367. var storechildCount = $("#storeContent").children().length;
  368. if (storechildCount != 0) {
  369. $('#storeContent').children().remove();
  370. }
  371.  
  372.  
  373. var mw = $('#ddlMonthWeek').val();
  374. var product = $('#ddlProduct').val();
  375. var wf = $('#ddlWeekFrom').val();
  376. var wt = $('#ddlWeekTo').val();
  377. var de = $('#ddlDealer').val();
  378. var ga = $('#ddlGSCMAccount').val();
  379. var ap1 = $('#ddlAP1').val();
  380. $.ajax({
  381. url: '@Url.Action("getAllProductGroup", "RPEOLDepletion")',
  382. success: function (datapg) {
  383. for (var i = 0 ; i < datapg.length-1; i++)
  384. {
  385. var counter = 0;
  386. var pg = datapg[counter].GroupName;
  387. $.ajax({
  388. url: '@Url.Action("getEOLinProductGroup", "RPEOLDepletion")',
  389. type: "POST",
  390. data: {
  391. MonthMappingFrom: $("#ddlMonthMappingFrom").val(),
  392. MonthMappingTo: $("#ddlMonthMappingTo").val(),
  393. YearMappingFrom: $('#ddlYearMappingFrom').val(),
  394. ProductGroup: pg,
  395. Product: product,
  396. Dealer: de,
  397. GSCMAccount: ga,
  398. AP1: ap1,
  399. MonthWeek: mw,
  400. WeekFrom: wf,
  401. WeekTo: wt,
  402. },
  403. success: function (data) {
  404.  
  405. if (datapg[counter].GroupName.includes('/')) {
  406. pg = datapg[counter].GroupName.replace('/', '');
  407. }
  408. var innerButton = document.createElement('button');
  409. innerButton.className = "btn btn-primary";
  410. innerButton.id = pg;
  411. innerButton.innerHTML = datapg[counter].GroupName;
  412. alert(pg);
  413. var innerDiv = document.createElement('div');
  414. innerDiv.id = pg;
  415. innerDiv.innerHTML = data;
  416.  
  417. document.getElementById('productgroupContent').append(innerButton);
  418. document.getElementById('productgroupContent').append(innerDiv);
  419. counter++;
  420.  
  421. return datapg;
  422.  
  423. $("#" + pg).click(function () {
  424.  
  425. var productchildCount = $("#productContent").children().length;
  426. if (productchildCount != 0) {
  427. $('#productContent').children().remove();
  428. }
  429. var modelchildCount = $("#modelContent").children().length;
  430. if (modelchildCount != 0) {
  431. $('#modelContent').children().remove();
  432. }
  433.  
  434. var ModalProductGroupTitle = ($(this).text());
  435. $.ajax({
  436. data: {
  437. ProductGroup: ModalProductGroupTitle
  438. },
  439. url: '@Url.Action("getAllProductsbyGroupName", "RPEOLDepletion")',
  440. success: function (dataproduct) {
  441. for (var x = 0 ; x < dataproduct.length; x++)
  442. {
  443. var prod = dataproduct[x].Product;
  444. $.ajax({
  445. url: '@Url.Action("getProductsofProductGroupName", "RPEOLDepletion")',
  446. async: false,
  447. data: {
  448. MonthMappingFrom: $("#ddlMonthMappingFrom").val(),
  449. MonthMappingTo: $("#ddlMonthMappingTo").val(),
  450. YearMappingFrom: $('#ddlYearMappingFrom').val(),
  451. ProductGroup: pg,
  452. Product: product,
  453. Dealer: de,
  454. GSCMAccount: ga,
  455. AP1: ap1,
  456. MonthWeek: mw,
  457. WeekFrom: wf,
  458. WeekTo: wt,
  459. },
  460. success: function (dataofproduct) {
  461. if (dataproduct[x].Product.includes('/')) {
  462. prod = dataproduct[x].Product.replace('/', '');
  463. }
  464. $("#ProductGroupName").html(ModalProductGroupTitle);
  465. $('#ProductModal').modal('show');
  466.  
  467. var innerButton1 = document.createElement('button');
  468. innerButton1.className = "btn btn-primary";
  469. innerButton1.id =prod;
  470. innerButton1.innerHTML = dataproduct[x].Product;
  471.  
  472.  
  473. var innerDiv1 = document.createElement('div');
  474. innerDiv1.id = prod;
  475. innerDiv1.innerHTML = dataofproduct;
  476.  
  477. document.getElementById('productContent').append(innerButton1);
  478. document.getElementById('productContent').append(innerDiv1);
  479.  
  480. //display models by product by cliking this button
  481.  
  482. $("#" + prod).click(function () {
  483. var modelchildCount = $("#modelContent").children().length;
  484. if (modelchildCount != 0) {
  485. $('#modelContent').children().remove();
  486. }
  487.  
  488. var ModalProductTitle = ($(this).text());
  489. $("#ProductName").html(ModalProductTitle);
  490.  
  491.  
  492. $.ajax({
  493. data: {
  494. Product: ModalProductTitle
  495. },
  496. url: '@Url.Action("getAllModelsbyProducts", "RPEOLDepletion")',
  497. success: function (datamodel) {
  498. for (var y = 0 ; y < datamodel.length; y++) {
  499.  
  500. var mod = datamodel[y].Model;
  501. $.ajax({
  502. url: '@Url.Action("getProductsofProductGroupName", "RPEOLDepletion")',
  503. async: false,
  504. data: {
  505. MonthMappingFrom: $("#ddlMonthMappingFrom").val(),
  506. MonthMappingTo: $("#ddlMonthMappingTo").val(),
  507. YearMappingFrom: $('#ddlYearMappingFrom').val(),
  508. ProductGroup: pg,
  509. Product: product,
  510. Dealer: de,
  511. GSCMAccount: ga,
  512. AP1: ap1,
  513. MonthWeek: mw,
  514. WeekFrom: wf,
  515. WeekTo: wt,
  516. },
  517. success: function (dataofmodel) {
  518. if (datamodel[y].Model.includes('/')) {
  519. mod = datamodel[y].Model.replace('/', '');
  520. }
  521. $("#ProductName").html(ModalProductTitle);
  522. $('#ProductModal').modal('hide');
  523. $('#ModelModal').modal('show');
  524.  
  525. var innerButton2 = document.createElement('button');
  526. innerButton2.className = "btn btn-primary";
  527. innerButton2.id = mod;
  528. innerButton2.innerHTML = datamodel[y].Model;
  529.  
  530.  
  531. var innerDiv2 = document.createElement('div');
  532. innerDiv2.id = mod;
  533. innerDiv2.innerHTML = dataofmodel;
  534.  
  535. document.getElementById('modelContent').append(innerButton2);
  536. document.getElementById('modelContent').append(innerDiv2);
  537.  
  538.  
  539. // display store by model by cliking this button
  540. $("#" + mod).click(function () {
  541.  
  542. var storechildCount = $("#storeContent").children().length;
  543. if (storechildCount != 0) {
  544. $('#storeContent').children().remove();
  545. }
  546.  
  547. var ModalStoreTitle = ($(this).text());
  548.  
  549. $.ajax({
  550. data: {
  551. Product: ModalProductTitle
  552. },
  553. url: '@Url.Action("getAllStoresbyModel", "RPEOLDepletion")',
  554. async: false,
  555. success: function (datastore) {
  556. for (var j = 0 ; j < datastore.length - 1; j++) {
  557. $.ajax({
  558. url: '@Url.Action("getProductsofProductGroupName", "RPEOLDepletion")',
  559. async: false,
  560. data: {
  561. MonthMappingFrom: $("#ddlMonthMappingFrom").val(),
  562. MonthMappingTo: $("#ddlMonthMappingTo").val(),
  563. YearMappingFrom: $('#ddlYearMappingFrom').val(),
  564. ProductGroup: pg,
  565. Product: product,
  566. Dealer: de,
  567. GSCMAccount: ga,
  568. AP1: ap1,
  569. MonthWeek: mw,
  570. WeekFrom: wf,
  571. WeekTo: wt,
  572. },
  573. success: function (dataofstore) {
  574. if (datamodel[2].includes("/")) {
  575. datamodel[2] = "AC";
  576. }
  577. $("#StoreName").html(ModalStoreTitle + "3");
  578. $('#ModelModal').modal('hide');
  579. $('#StoreModal').modal('show');
  580.  
  581. var innerButton3 = document.createElement('button');
  582. innerButton3.className = "btn btn-primary";
  583. innerButton3.id = datamodel[j] + "3";
  584. innerButton3.innerHTML = datamodel[j];
  585.  
  586.  
  587. var innerDiv3 = document.createElement('div');
  588. innerDiv3.id = prod;
  589. innerDiv3.innerHTML = dataofstore;
  590.  
  591. document.getElementById('storeContent').append(innerButton3);
  592. document.getElementById('storeContent').append(innerDiv3);
  593. }
  594. });
  595. }
  596. }
  597. });
  598. });
  599. }
  600. });
  601. }
  602. }
  603. });
  604. });
  605. }
  606. });
  607. }
  608. }
  609. });
  610. });
  611. }
  612. });
  613. }
  614. }
  615. });
  616. };
  617.  
  618. </script>
Add Comment
Please, Sign In to add comment