Advertisement
Guest User

Untitled

a guest
Jan 21st, 2018
289
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.10 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 pg = datapg[i].GroupName;
  386. $.ajax({
  387. url: '@Url.Action("getEOLinProductGroup", "RPEOLDepletion")',
  388. async: false,
  389. data: {
  390. MonthMappingFrom: $("#ddlMonthMappingFrom").val(),
  391. MonthMappingTo: $("#ddlMonthMappingTo").val(),
  392. YearMappingFrom: $('#ddlYearMappingFrom').val(),
  393. ProductGroup: pg,
  394. Product: product,
  395. Dealer: de,
  396. GSCMAccount: ga,
  397. AP1: ap1,
  398. MonthWeek: mw,
  399. WeekFrom: wf,
  400. WeekTo: wt,
  401. },
  402. success: function (data) {
  403.  
  404. if (datapg[i].GroupName.includes('/')) {
  405. pg = datapg[i].GroupName.replace('/', '');
  406. }
  407. var innerButton = document.createElement('button');
  408. innerButton.className = "btn btn-primary";
  409. innerButton.id = pg;
  410. innerButton.innerHTML = datapg[i].GroupName;
  411.  
  412. var innerDiv = document.createElement('div');
  413. innerDiv.id = pg;
  414. innerDiv.innerHTML = data;
  415.  
  416. document.getElementById('productgroupContent').append(innerButton);
  417. document.getElementById('productgroupContent').append(innerDiv);
  418.  
  419. $("#" + pg).click(function () {
  420.  
  421. var productchildCount = $("#productContent").children().length;
  422. if (productchildCount != 0) {
  423. $('#productContent').children().remove();
  424. }
  425. var modelchildCount = $("#modelContent").children().length;
  426. if (modelchildCount != 0) {
  427. $('#modelContent').children().remove();
  428. }
  429.  
  430. var ModalProductGroupTitle = ($(this).text());
  431. $.ajax({
  432. data: {
  433. ProductGroup: ModalProductGroupTitle
  434. },
  435. url: '@Url.Action("getAllProductsbyGroupName", "RPEOLDepletion")',
  436. success: function (dataproduct) {
  437. for (var x = 0 ; x < dataproduct.length; x++)
  438. {
  439. var prod = dataproduct[x].Product;
  440. $.ajax({
  441. url: '@Url.Action("getProductsofProductGroupName", "RPEOLDepletion")',
  442. async: false,
  443. data: {
  444. MonthMappingFrom: $("#ddlMonthMappingFrom").val(),
  445. MonthMappingTo: $("#ddlMonthMappingTo").val(),
  446. YearMappingFrom: $('#ddlYearMappingFrom').val(),
  447. ProductGroup: pg,
  448. Product: product,
  449. Dealer: de,
  450. GSCMAccount: ga,
  451. AP1: ap1,
  452. MonthWeek: mw,
  453. WeekFrom: wf,
  454. WeekTo: wt,
  455. },
  456. success: function (dataofproduct) {
  457. if (dataproduct[x].Product.includes('/')) {
  458. prod = dataproduct[x].Product.replace('/', '');
  459. }
  460. $("#ProductGroupName").html(ModalProductGroupTitle);
  461. $('#ProductModal').modal('show');
  462.  
  463. var innerButton1 = document.createElement('button');
  464. innerButton1.className = "btn btn-primary";
  465. innerButton1.id =prod;
  466. innerButton1.innerHTML = dataproduct[x].Product;
  467.  
  468.  
  469. var innerDiv1 = document.createElement('div');
  470. innerDiv1.id = prod;
  471. innerDiv1.innerHTML = dataofproduct;
  472.  
  473. document.getElementById('productContent').append(innerButton1);
  474. document.getElementById('productContent').append(innerDiv1);
  475.  
  476. //display models by product by cliking this button
  477.  
  478. $("#" + prod).click(function () {
  479. var modelchildCount = $("#modelContent").children().length;
  480. if (modelchildCount != 0) {
  481. $('#modelContent').children().remove();
  482. }
  483.  
  484. var ModalProductTitle = ($(this).text());
  485. $("#ProductName").html(ModalProductTitle);
  486.  
  487.  
  488. $.ajax({
  489. data: {
  490. Product: ModalProductTitle
  491. },
  492. url: '@Url.Action("getAllModelsbyProducts", "RPEOLDepletion")',
  493. success: function (datamodel) {
  494. for (var y = 0 ; y < datamodel.length; y++) {
  495.  
  496. var mod = datamodel[y].Model;
  497. $.ajax({
  498. url: '@Url.Action("getProductsofProductGroupName", "RPEOLDepletion")',
  499. async: false,
  500. data: {
  501. MonthMappingFrom: $("#ddlMonthMappingFrom").val(),
  502. MonthMappingTo: $("#ddlMonthMappingTo").val(),
  503. YearMappingFrom: $('#ddlYearMappingFrom').val(),
  504. ProductGroup: pg,
  505. Product: product,
  506. Dealer: de,
  507. GSCMAccount: ga,
  508. AP1: ap1,
  509. MonthWeek: mw,
  510. WeekFrom: wf,
  511. WeekTo: wt,
  512. },
  513. success: function (dataofmodel) {
  514. if (datamodel[y].Model.includes('/')) {
  515. mod = datamodel[y].Model.replace('/', '');
  516. }
  517. $("#ProductName").html(ModalProductTitle);
  518. $('#ProductModal').modal('hide');
  519. $('#ModelModal').modal('show');
  520.  
  521. var innerButton2 = document.createElement('button');
  522. innerButton2.className = "btn btn-primary";
  523. innerButton2.id = mod;
  524. innerButton2.innerHTML = datamodel[y].Model;
  525.  
  526.  
  527. var innerDiv2 = document.createElement('div');
  528. innerDiv2.id = mod;
  529. innerDiv2.innerHTML = dataofmodel;
  530.  
  531. document.getElementById('modelContent').append(innerButton2);
  532. document.getElementById('modelContent').append(innerDiv2);
  533.  
  534.  
  535. // display store by model by cliking this button
  536. $("#" + mod).click(function () {
  537.  
  538. var storechildCount = $("#storeContent").children().length;
  539. if (storechildCount != 0) {
  540. $('#storeContent').children().remove();
  541. }
  542.  
  543. var ModalStoreTitle = ($(this).text());
  544.  
  545. $.ajax({
  546. data: {
  547. Product: ModalProductTitle
  548. },
  549. url: '@Url.Action("getAllStoresbyModel", "RPEOLDepletion")',
  550. async: false,
  551. success: function (datastore) {
  552. for (var j = 0 ; j < datastore.length - 1; j++) {
  553. $.ajax({
  554. url: '@Url.Action("getProductsofProductGroupName", "RPEOLDepletion")',
  555. async: false,
  556. data: {
  557. MonthMappingFrom: $("#ddlMonthMappingFrom").val(),
  558. MonthMappingTo: $("#ddlMonthMappingTo").val(),
  559. YearMappingFrom: $('#ddlYearMappingFrom').val(),
  560. ProductGroup: pg,
  561. Product: product,
  562. Dealer: de,
  563. GSCMAccount: ga,
  564. AP1: ap1,
  565. MonthWeek: mw,
  566. WeekFrom: wf,
  567. WeekTo: wt,
  568. },
  569. success: function (dataofstore) {
  570. if (datamodel[2].includes("/")) {
  571. datamodel[2] = "AC";
  572. }
  573. $("#StoreName").html(ModalStoreTitle + "3");
  574. $('#ModelModal').modal('hide');
  575. $('#StoreModal').modal('show');
  576.  
  577. var innerButton3 = document.createElement('button');
  578. innerButton3.className = "btn btn-primary";
  579. innerButton3.id = datamodel[j] + "3";
  580. innerButton3.innerHTML = datamodel[j];
  581.  
  582.  
  583. var innerDiv3 = document.createElement('div');
  584. innerDiv3.id = prod;
  585. innerDiv3.innerHTML = dataofstore;
  586.  
  587. document.getElementById('storeContent').append(innerButton3);
  588. document.getElementById('storeContent').append(innerDiv3);
  589. }
  590. });
  591. }
  592. }
  593. });
  594. });
  595. }
  596. });
  597. }
  598. }
  599. });
  600. });
  601. }
  602. });
  603. }
  604. }
  605. });
  606. });
  607. }
  608. });
  609. }
  610. }
  611. });
  612. };
  613.  
  614. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement