Web Interfaces of PROSUME

meter_i_d.ctp 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. <?php
  2. $this->layout = false;
  3. ?>
  4. <!DOCTYPE html>
  5. <html>
  6. <?= $this->element('Eprosume/header') ?>
  7. <body class="hold-transition skin-green sidebar-mini">
  8. <div class="wrapper">
  9. <?= $this->element('Eprosume/mainHeader') ?>
  10. <!-- Left side column. contains the logo and sidebar -->
  11. <?= $this->element('Eprosume/leftSideColumn') ?>
  12. <!-- Content Wrapper. Contains page content -->
  13. <div class="content-wrapper">
  14. <!-- Content Header (Page header) -->
  15. <section class="content-header">
  16. <h1>
  17. Balance <?= $meter_id ?>
  18. <br />
  19. <small><?= $balance['location'] ?></small>
  20. </h1>
  21. <ol class="breadcrumb">
  22. <li><a href="/web"><i class="fa fa-dashboard"></i> <?= $app_name ?></a></li>
  23. <li><a href="/web/meter">balance</a></li>
  24. <li class="active"><?= $meter_id; ?></li>
  25. </ol>
  26. </section>
  27. <!-- Main content -->
  28. <section class="content">
  29. <div class="row">
  30. <!-- /.col -->
  31. <div class="col-md-3 col-sm-6 col-xs-12">
  32. <div class="info-box">
  33. <span class="info-box-icon bg-red"><i class="ion ion-ios-paper"></i></span>
  34. <div class="info-box-content">
  35. <span class="info-box-text">TFT</span>
  36. <span class="info-box-number"><?= $balance['TFT'] ?></span>
  37. </div>
  38. <!-- /.info-box-content -->
  39. </div>
  40. <!-- /.info-box -->
  41. </div>
  42. <!-- /.col -->
  43. <div class="col-md-3 col-sm-6 col-xs-12">
  44. <div class="info-box">
  45. <span class="info-box-icon bg-aqua"><i class="ion ion-ios-pulse"></i></span>
  46. <div class="info-box-content">
  47. <span class="info-box-text">PRS</span>
  48. <span class="info-box-number"><?= $balance['PRS'] ?></span>
  49. </div>
  50. <!-- /.info-box-content -->
  51. </div>
  52. <!-- /.info-box -->
  53. </div>
  54. </div>
  55. <div class="row">
  56. <div class="col-md-3 col-sm-6 col-xs-12">
  57. <div class="info-box">
  58. <span class="info-box-icon bg-yellow"><i class="ion ion-card"></i></span>
  59. <div class="info-box-content">
  60. <span class="info-box-text">BuyPrice</span>
  61. <span class="info-box-number"><?= @$prices[$meter_id]['buyPrice'] ?></span>
  62. </div>
  63. <!-- /.info-box-content -->
  64. </div>
  65. <!-- /.info-box -->
  66. </div>
  67. <div class="col-md-3 col-sm-6 col-xs-12">
  68. <div class="info-box">
  69. <span class="info-box-icon bg-green"><i class="ion ion-card"></i></span>
  70. <div class="info-box-content">
  71. <span class="info-box-text">SellPrice</span>
  72. <span class="info-box-number"><?= @$prices[$meter_id]['sellPrice'] ?></span>
  73. </div>
  74. <!-- /.info-box-content -->
  75. </div>
  76. <!-- /.info-box -->
  77. </div>
  78. <!-- fix for small devices only -->
  79. <div class="clearfix visible-sm-block"></div>
  80. </div> <!-- /.row -->
  81. <div class="row">
  82. <blockquote>Last reading: <?php echo($balance['timestamp']); ?></blockquote>
  83. </div>
  84. <!-- /.row -->
  85. </section>
  86. <!-- /.content -->
  87. <!-- Main content -->
  88. <?php if($meter_id != $utility_account && $app_charts): ?>
  89. <section class="content">
  90. <div class="box">
  91. <div class="box-body">
  92. <?= $this->element('Eprosume/chartsToolbar') ?>
  93. </div>
  94. <div class="row">
  95. <!-- /.col -->
  96. <div class="col-md-12 col-sm-12 col-xs-12">
  97. <div id="chart-1"></div>
  98. <div id="chart-line"></div>
  99. </div>
  100. </div>
  101. </div>
  102. </section>
  103. <?php endif; ?>
  104. </div>
  105. <!-- /.content-wrapper -->
  106. <?= $this->element('Eprosume/footer') ?>
  107. </div>
  108. <!-- ./wrapper -->
  109. <?= $this->element('Eprosume/scripts') ?>
  110. <script>
  111. $('tr.blockRow').on('click touch',function(){
  112. })
  113. </script>
  114. <?php if($meter_id != $utility_account && $app_charts): ?>
  115. <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  116. <script>
  117. $(document).ready(function() {
  118. // pickerSelect element and event listener
  119. pickerElement = document.getElementById('pickerSelect');
  120. if(pickerElement != null) {
  121. var date = getDate();
  122. let minDate = new Date(date.getTime());
  123. minDate.setDate(minDate.getDate()-14);
  124. var today = getDateString(date);
  125. var yesterday = getDateString(minDate);
  126. pickerElement.setAttribute("data-from", yesterday);
  127. pickerElement.setAttribute("data-to", today);
  128. var picker = flatpickr(pickerElement, {
  129. enableTime: true,
  130. defaultDate: [ minDate, today ],
  131. maxDate: today,
  132. minDate: minDate,
  133. mode: 'range',
  134. time_24hr: true,
  135. onClose: function(selectedDates) {
  136. let dates = selectedDates.map(d => getDate(d));
  137. dates[0] == null && dates.push(today);
  138. dates[1] == null && dates.push(dates[0]);
  139. pickerElement.setAttribute("data-from", getDateString(dates[0]));
  140. pickerElement.setAttribute("data-to", getDateString(dates[1]));
  141. drawChart();
  142. },
  143. onChange: function(selectedDates, dateStr, instance) {
  144. if(selectedDates[0] != null && selectedDates[1] == undefined) {
  145. var maxDate = new Date(selectedDates[0].getTime());
  146. maxDate.setDate(maxDate.getDate()+14);
  147. var minDate = new Date(selectedDates[0].getTime());
  148. minDate.setDate(minDate.getDate()-14);
  149. instance.set({
  150. maxDate : (maxDate > date) ? today : maxDate,
  151. minDate
  152. });
  153. }
  154. }
  155. });
  156. $('#pickerReset').click( function() {
  157. picker.clear();
  158. pickerElement.setAttribute("data-from", "");
  159. pickerElement.setAttribute("data-to", "");
  160. });
  161. }
  162. var data = [];
  163. var min, max;
  164. var options = {
  165. series: [],
  166. chart: {
  167. id: 'chart2',
  168. type: 'bar',
  169. height: 230,
  170. toolbar: {
  171. autoSelected: 'pan',
  172. show: false
  173. }
  174. },
  175. colors: [
  176. '#00C0EF'
  177. ],
  178. stroke: {
  179. width: 3
  180. },
  181. dataLabels: {
  182. enabled: false
  183. },
  184. fill: {
  185. opacity: 1,
  186. },
  187. markers: {
  188. size: 0
  189. },
  190. xaxis: {
  191. labels: {
  192. formatter: function (value, timestamp) {
  193. const options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false };
  194. var x = new Date();
  195. return (new Date((timestamp * 1000) + (x.getTimezoneOffset() * 60 * 1000))).toLocaleDateString('en-US', options);
  196. },
  197. },
  198. tickAmount: 12
  199. },
  200. tooltip: {
  201. x: {
  202. formatter: function (value) {
  203. const options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false };
  204. var x = new Date();
  205. return (new Date((value * 1000) + (x.getTimezoneOffset() * 60 * 1000))).toLocaleDateString('en-US', options);
  206. },
  207. }
  208. },
  209. noData: {
  210. text: 'Loading...'
  211. },
  212. yaxis: {
  213. seriesName: 'PRS',
  214. tickAmount: 4
  215. }
  216. };
  217. var chart = new ApexCharts(document.querySelector("#chart-1"), options);
  218. chart.render();
  219. var optionsLine = {
  220. series: [],
  221. chart: {
  222. id: 'chart1',
  223. height: 130,
  224. type: 'bar',
  225. brush:{
  226. target: 'chart2',
  227. enabled: true
  228. },
  229. selection: {
  230. enabled: true,
  231. xaxis: {
  232. min: min,
  233. max: max
  234. }
  235. },
  236. },
  237. colors: [
  238. '#008FFB'
  239. ],
  240. fill: {
  241. type: 'gradient',
  242. gradient: {
  243. opacityFrom: 0.91,
  244. opacityTo: 0.1,
  245. }
  246. },
  247. xaxis: {
  248. labels: {
  249. formatter: function (value, timestamp) {
  250. const options = { month: 'short', day: 'numeric' };
  251. var x = new Date();
  252. return (new Date((timestamp * 1000) + (x.getTimezoneOffset() * 60 * 1000))).toLocaleDateString('en-US', options);
  253. },
  254. },
  255. tickAmount: 12
  256. },
  257. yaxis: {
  258. tickAmount: 2
  259. },
  260. noData: {
  261. text: 'Loading...'
  262. }
  263. };
  264. var chartLine = new ApexCharts(document.querySelector("#chart-line"), optionsLine);
  265. chartLine.render();
  266. var periodRadio = $('input[name=periodRadio]');
  267. periodRadio.change( function() {
  268. drawChart();
  269. });
  270. function drawChart() {
  271. var input = {};
  272. input.period = $('input[name=periodRadio]:checked').val();
  273. input.from = pickerElement.getAttribute("data-from");
  274. input.to = pickerElement.getAttribute("data-to");
  275. var qs = jQuery.param(input);
  276. var settings = {
  277. type: "GET",
  278. contentType: "application/json",
  279. headers: {
  280. "X-CSRF-Token": <?= json_encode($this->request->getParam('_csrfToken')) ?>
  281. },
  282. dataType : "json"
  283. };
  284. var promise = $.ajax(
  285. '/xhr/charts/payments/' + '<?= $meter_id; ?>?'+qs,
  286. settings
  287. ).then(function(data) {
  288. var series = {
  289. data: data,
  290. name: 'PRS'
  291. }
  292. if(data.length == 0) {
  293. min = 0;
  294. max = 0;
  295. chart.updateOptions({
  296. noData: { text: 'No data'}
  297. });
  298. chartLine.updateOptions({
  299. noData: { text: 'No data'}
  300. });
  301. } else {
  302. min = data[0][0];
  303. max = data[(data.length-1)][0];
  304. }
  305. chart.updateSeries([series]);
  306. chartLine.updateSeries([series]);
  307. chartLine.updateOptions({
  308. chart: {
  309. selection: {
  310. xaxis: {
  311. min: min,
  312. max: max
  313. }
  314. },
  315. },
  316. });
  317. });
  318. }
  319. drawChart();
  320. });
  321. </script>
  322. <?php endif; ?>
  323. </body>
  324. </html>