API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 22nd, 2018
125
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.21 KB | None | 0 0
raw download clone embed print report
  1. @extends('commons.master')
  2.  
  3. @section('pageTitle')
  4. <div class="page-header">
  5. <div class="row">
  6. <div>
  7. <div class="col-lg-8">
  8. <h2>MRR Detail</h2>
  9. </div>
  10. <div class="col-lg-4">
  11. <button type="button" class="btn btn-info btn-lg button-filter-invoice pull-right" data-toggle="modal" data-target="#myModal">Open Filter</button>
  12. </div>
  13. </div>
  14. </div>
  15. </div>
  16. @endsection
  17.  
  18. @section('content')
  19. <style type="text/css">
  20. .td-limit {
  21. max-width: 400px;
  22. text-overflow: ellipsis;
  23. white-space: nowrap;
  24. overflow: hidden;
  25. }
  26.  
  27. #cover-spin {
  28. position:fixed;
  29. width:100%;
  30. left:0;right:0;top:0;bottom:0;
  31. background-color: rgba(255,255,255,0.7);
  32. z-index:9999;
  33. display: none;
  34. }
  35.  
  36. @-webkit-keyframes spin {
  37. from {-webkit-transform:rotate(0deg);}
  38. to {-webkit-transform:rotate(360deg);}
  39. }
  40.  
  41. @keyframes spin {
  42. from {transform:rotate(0deg);}
  43. to {transform:rotate(360deg);}
  44. }
  45.  
  46. #cover-spin::after {
  47. content:'';
  48. display:block;
  49. position:absolute;
  50. left:48%;top:40%;
  51. border: 16px solid #f3f3f3;
  52. width: 120px;
  53. height: 120px;
  54. border-style:solid;
  55. border-radius: 50%;
  56. border-top: 16px solid blue;
  57. border-bottom: 16px solid blue;
  58. border-width: 4px;
  59. border-radius:50%;
  60. -webkit-animation: spin 2s linear infinite;
  61. animation: spin 2s linear infinite;
  62. }
  63. </style>
  64. <script type="text/javascript">
  65. var URL_GET_TOTAL = "{!! URL::to('mrr_detail/get') !!}";
  66. </script>
  67. <div class="content-container">
  68. <div class="content-container">
  69.  
  70. <!-- FILTER FORM -->
  71. <div id="myModal" class="modal fade">
  72. <div class="modal-dialog">
  73. <div class="modal-content">
  74.  
  75. <div class="modal-header">
  76. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  77. <h4 class="modal-title">Filter</h4>
  78. </div>
  79.  
  80. <div class="modal-body">
  81. <div class="form-group">
  82. {!! Form::label('subdomain', 'Subdomain') !!}
  83. <input type="text" class="input form-control" id="subdomain" />
  84. </div>
  85. <div class="form-group">
  86. {!! Form::label('email', 'Period') !!}
  87. <div class="input-daterange input-group">
  88. <span class="input-group-addon">
  89. <select id="periodMonthStart" class="form-control">
  90. <option value=""> Month </option>
  91. @for($i=1;$i<=12;$i++)
  92. @if ($i < 10)
  93. <option value="0{{$i}}"> 0{{$i}} </option>
  94. @endif
  95. @if ($i >= 10)
  96. <option value="{{$i}}"> {{$i}} </option>
  97. @endif
  98. @endfor
  99. </select>
  100. </span>
  101. <span class="input-group-addon">
  102. <select id="periodYearStart" class="form-control">
  103. <option value=""> Year </option>
  104. @for($i=2000;$i<=2100;$i++)
  105. <option value="{{$i}}"> {{$i}} </option>
  106. @endfor
  107. </select>
  108. </span>
  109. <span class="input-group-addon">to</span>
  110. <span class="input-group-addon">
  111. <select id="periodMonthEnd" class="form-control">
  112. <option value=""> Month </option>
  113. @for($i=1;$i<=12;$i++)
  114. @if ($i < 10)
  115. <option value="0{{$i}}"> 0{{$i}} </option>
  116. @endif
  117. @if ($i >= 10)
  118. <option value="{{$i}}"> {{$i}} </option>
  119. @endif
  120. @endfor
  121. </select>
  122. </span>
  123. <span class="input-group-addon">
  124. <select id="periodYearEnd" class="form-control">
  125. <option value=""> Year </option>
  126. @for($i=2000;$i<=2100;$i++)
  127. <option value="{{$i}}"> {{$i}} </option>
  128. @endfor
  129. </select>
  130. </span>
  131. </div>
  132. </div>
  133. <div class="form-group">
  134. {!! Form::label('email', 'Date Start') !!}
  135. <div class="input-daterange input-group">
  136. <input type="text" class="input form-control" name="start" id="idstartdate" />
  137. <span class="input-group-addon">to</span>
  138. <input type="text" class="input form-control" name="end" id="idenddate" />
  139. </div>
  140. </div>
  141. </div>
  142.  
  143. <div class="modal-footer">
  144. <input type="hidden" name="hiduser" id="hiduser">
  145. <button type="submit" class="btn btn-default" data-dismiss="modal">Close</button>
  146. <button class="btn btn-primary" id="filter_invoice">Filter</button>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. <!-- END FILTER FORM -->
  152. <div id="cover-spin"></div>
  153. <div class="form-group">
  154. <h4>Total:</h4>
  155. <table style="background-color: #ffffff; filter: alpha(opacity=40); opacity: 0.95;border:1px red solid;">
  156. <tr style="padding: 5px;">
  157. <td style="padding: 5px;"><b>Normal Price</b></td>
  158. <td style="padding: 5px;">: <span id="totalPrice"></span></td>
  159. </tr>
  160. <tr style="padding: 5px;">
  161. <td style="padding: 5px;"><b>Discount</b></td>
  162. <td style="padding: 5px;">: <span id="totalDiscount"></span></td>
  163. </tr>
  164. <tr style="padding: 5px;">
  165. <td style="padding: 5px;"><b>SubTotal</b></td>
  166. <td style="padding: 5px;">: <span id="sumSubTotal"></span></td>
  167. </tr>
  168. </table>
  169. </div>
  170. <div class="table-responsive">
  171. <table class="table table-striped table-bordered" id="table-mrr-detail" style="width:100%">
  172.  
  173. </table>
  174. </div>
  175. </div>
  176. </div>
  177.  
  178. <script type="text/javascript">
  179. $("#filter_invoice").click(function(){
  180. var _sDate = $("input#idstartdate").val();
  181. var _eDate = $("input#idenddate").val();
  182.  
  183. var _sPMonth = $("select#periodMonthStart :selected").val();
  184. var _sPYear = $("select#periodYearStart :selected").val();
  185. var _ePMonth = $("select#periodMonthEnd :selected").val();
  186. var _ePYear = $("select#periodYearEnd :selected").val();
  187.  
  188. var _sPMonth2 = $("select#periodMonthStart :selected").val();
  189. var _sPYear2 = $("select#periodYearStart :selected").val();
  190. var _ePMonth2 = $("select#periodMonthEnd :selected").val();
  191. var _ePYear2 = $("select#periodYearEnd :selected").val();
  192.  
  193. var _subdomain = $("input#subdomain").val();
  194. var months = 0;
  195. var months2 = 0;
  196. var i = parseInt(_sPMonth);
  197. var i2 = parseInt(_sPMonth2);
  198.  
  199. $.ajax({
  200. "url": URL_GET_TOTAL,
  201. "cache": false,
  202. "dataType": "JSON",
  203. "type": "POST",
  204. "data": {
  205. _token: "{{csrf_token()}}",
  206. sDate: _sDate,
  207. eDate: _eDate,
  208. sPMonth: _sPMonth,
  209. sPYear: _sPYear,
  210. ePMonth: _ePMonth,
  211. ePYear: _ePYear,
  212. subdomain: _subdomain
  213. },
  214. beforeSend: function () {
  215. $('#totalPrice').empty();
  216. $('#totalDiscount').empty();
  217. $('#sumSubTotal').empty();
  218.  
  219. $('#cover-spin').show();
  220. },
  221. success: function(json){
  222. // $('#totalPrice').text(html.data[0].price);
  223. // $('#totalDiscount').text(html.data[0].discount);
  224. // $('#sumSubTotal').text(html.data[0].subtotal);
  225.  
  226. months = (_ePYear - _sPYear) * 12;
  227. months -= parseInt(_sPMonth);
  228. months += parseInt(_ePMonth);
  229.  
  230. var html = '';
  231. var counter = 0;
  232.  
  233. html = "<thead><tr>";
  234. html += "<td>Subdomain</td>";
  235.  
  236. for(i; i <= months; i++) {
  237. i %= 13
  238. if (i == 0) {
  239. //do nothing
  240. } else {
  241. if (i == 1 && counter != 0) {
  242. _sPYear = parseInt(_sPYear)+1;
  243. } else {
  244. _sPYear = _sPYear;
  245. }
  246.  
  247. html += "<td>"+_sPYear+' '+i+"</td>";
  248.  
  249. if (counter == months) {
  250. break;
  251. }
  252.  
  253. counter++;
  254. }
  255. }
  256.  
  257. html += "</tr></thead>";
  258. $('#table-mrr-detail').append(html);
  259.  
  260. //Build Body
  261. var html2 = '';
  262. var counter2 = 0;
  263.  
  264. months2 = (_ePYear2 - _sPYear2) * 12;
  265. months2 -= parseInt(_sPMonth2);
  266. months2 += parseInt(_ePMonth2);
  267.  
  268. html2 += "<tbody>";
  269.  
  270. $.each(json.data, function (i, ob) {
  271. var me = this;
  272. html2 += "<tr>";
  273. html2 += "<td>"+this.subdomain+"</td>";
  274. $.each(ob.data, function (ind, obj) {
  275. for(i2 = parseInt(_sPMonth2); i2 <= months2; i2++) {
  276. i2 %= 13
  277. // console.log(i2);
  278. if (i2 == 0) {
  279. //do nothing
  280. } else {
  281. if (i2 == 1 && counter2 != 0) {
  282. _sPYear2 = parseInt(_sPYear2)+1;
  283. } else {
  284. _sPYear2 = _sPYear2;
  285. }
  286.  
  287. if (this.month == i2 && this.year == _sPYear2) {
  288. html2 += "<td>"+this.amount+"</td>";
  289. } else {
  290. html2 += "<td>0</td>";
  291. }
  292.  
  293. console.log(me.subdomain+' '+obj.amount+' ('+obj.month+' '+i2+') ('+obj.year+' '+_sPYear2+')');
  294.  
  295. if (counter2 == months2) {
  296. return false;
  297. }
  298. return;
  299. counter2++;
  300. }
  301. }
  302. });
  303. html2 += "</tr>";
  304.  
  305. });
  306.  
  307. html2 += "</tbody>";
  308. $('#table-mrr-detail').append(html2);
  309.  
  310. // json.data.forEach(function(item) {
  311. // html += "<tr>";
  312.  
  313. // html += "<td>"+item.subdomain+"</td>";
  314. // console.log(item.data);
  315. // item.data.forEach(function (row) {
  316. // // console.log(row.amount);
  317. // for(i2; i2 <= months2; i2++) {
  318. // i2 %= 13
  319. // if (i2 == 0) {
  320. // //do nothing
  321. // } else {
  322. // if (i2 == 1 && counter2 != 0) {
  323. // _sPYear2 = parseInt(_sPYear2)+1;
  324. // } else {
  325. // _sPYear2 = _sPYear2;
  326. // }
  327. // if (row.month == i2 && row.year == _sPYear2) {
  328. // html += "<td>"+row.amount+"</td>";
  329. // } else {
  330. // html += "<td>0</td>";
  331. // }
  332.  
  333. // if (counter2 == months2) {
  334. // break;
  335. // }
  336.  
  337. // counter2++;
  338. // }
  339. // }
  340. // });
  341.  
  342. // html += "</tr>";
  343. // });
  344.  
  345.  
  346.  
  347.  
  348. $('#cover-spin').hide();
  349. $('#myModal').modal('hide');
  350. }
  351. });
  352. });
  353.  
  354. // $.ajax({
  355. // "url": URL_GET_TOTAL,
  356. // "cache": false,
  357. // "dataType": "JSON",
  358. // "type": "POST",
  359. // "data": {
  360. // _token: "{{csrf_token()}}"
  361. // },
  362. // beforeSend: function () {
  363. // $('#cover-spin').show();
  364. // },
  365. // success: function(html){
  366. // $('#totalPrice').text(html.data[0].price);
  367. // $('#totalDiscount').text(html.data[0].discount);
  368. // $('#sumSubTotal').text(html.data[0].subtotal);
  369. // $('#cover-spin').hide();
  370. // }
  371. // });
  372.  
  373. </script>
  374. @stop
  375.  
  376. @section('script')
  377.  
  378. $.fn.datepicker.defaults.format = 'yyyy-mm-dd';
  379. $('#datepicker').datepicker({
  380. todayBtn: "linked",
  381. forceParse: false,
  382. autoclose: true,
  383. todayHighlight: true
  384. });
  385.  
  386. $('#idstartdate').datepicker({
  387. todayBtn: "linked",
  388. forceParse: false,
  389. autoclose: true,
  390. todayHighlight: true
  391. });
  392.  
  393. $('#idenddate').datepicker({
  394. todayBtn: "linked",
  395. forceParse: false,
  396. autoclose: true,
  397. todayHighlight: true
  398. });
  399. @stop
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!