DealsSales - render table in js

SE/se-lib/Route/DealsSales.php

@@ -71,6 +71,13 @@ class Route_DealsSales extends RouteBase {
 		}
 	}
 
+	public function ajaxAction() {
+		header("Content-type: application/json");
+		$response = new stdClass();
+		$response->msg = 'TODO: F. ' . __FUNCTION__ . ' L.' . __LINE__;
+		return json_encode($response);
+	}
+
 	public function legacy_DEALS_SALES() {
 
 	$id_telboxes  = V::get('id_telboxes', '', $_REQUEST);
@@ -83,6 +90,7 @@ class Route_DealsSales extends RouteBase {
 	$typeSpecialCompanies = null;// TypespecialVariable::getInstance(-1, '__COMPANIES');
 
 	$obroty = array();
+	$obrotyByYear = array();
 	$marki = array();
 	$obrotyToMarki = array();
 	if (!empty($id_telboxes) || $id_companies > 0) {
@@ -120,13 +128,16 @@ class Route_DealsSales extends RouteBase {
 			$year  = $r->SALES_YEAR;
 			$month = sprintf("%02d", $r->SALES_MONTH);
 			$obroty[$r->ID_DEALS_TABLE][$year][$month] = $r->SALES_VALUE;
+			$obrotyByYear[$year][$month] = floatval($r->SALES_VALUE);
 			$marki[$r->marka] = true;
 			$obrotyToMarki[$year][$month] = $r->marka;
 		}
 	}
+	krsort($obrotyByYear);
 
-	DBG::_('DBG', '>0', "marki", $marki, __CLASS__, __FUNCTION__, __LINE__);
-	DBG::_('DBG', '>0', "obrotyToMarki", $obrotyToMarki, __CLASS__, __FUNCTION__, __LINE__);
+	//DBG::_(true, true, "obrotyByYear", $obrotyByYear, __CLASS__, __FUNCTION__, __LINE__);
+	//DBG::_('DBG', '>0', "marki", $marki, __CLASS__, __FUNCTION__, __LINE__);
+	//DBG::_('DBG', '>0', "obrotyToMarki", $obrotyToMarki, __CLASS__, __FUNCTION__, __LINE__);
 
 	$markiOut = array();
 	{
@@ -142,6 +153,14 @@ class Route_DealsSales extends RouteBase {
 	$monthsOut = array();
 	for ($i = 0; $i < 12; $i++) $monthsOut[] = sprintf("%02d", $i + 1);
 
+	$initData = new stdClass();
+	$initData->obroty = $obrotyByYear;
+	$initData->marki = $markiOut;
+	$initData->obrotyToMarki = $obrotyToMarki;
+	$initData->months = $monthsOut;
+	$initData->years = array_keys($obrotyByYear);
+	//DBG::_(true, true, "initData", $initData, __CLASS__, __FUNCTION__, __LINE__);
+
 	?>
 <style type="text/css">
 	.cell_marka_primary	{ background-color: #d9edf7; }
@@ -222,41 +241,135 @@ class Route_DealsSales extends RouteBase {
 			</tr>
 		</table>
 
-		<table class="table table-bordered table-hover">
-			<thead>
-				<th></th>
-				<?php foreach ($monthsOut as $vMonth) : ?>
-					<th><?php echo $vMonth; ?></th>
-				<?php endforeach; ?>
-				<th>suma</th>
-			</thead>
-		<?php foreach ($obroty as $kComId => $vSalesByYear) : ?>
-			<?php krsort($vSalesByYear); foreach ($vSalesByYear as $kYearId => $vSalesByMonth) : ?>
-				<tr>
-					<th><?php echo $kYearId; ?></th>
-					<?php $sumaYear = 0; foreach ($monthsOut as $vMonth) : ?>
-						<?php
-							$clsName = '';
-							if (!empty($obrotyToMarki[$kYearId][$vMonth])) {
-								$vMarka = $obrotyToMarki[$kYearId][$vMonth];
-								$vMarkaLabel = $markiOut[$vMarka];
-								$clsName = "cell_marka_{$vMarkaLabel}";
+		<div id="dealsSalesByMonth"></div>
+<script>
+(function($, undefined) {
+	var DealsSalesTable = function () {
+		var priv = {};// private api
+		var publ = {};// public api
+
+		priv.options = {};
+		var defaults = {
+					url: '',
+					initData: {}
+				},
+				_uiNodeCont = null,// container node
+				_uiNode$Table = null,
+				_state = {};// state - to replace variables below (date, ...)
+
+		priv.init = function () {
+			_uiNodeCont = priv.options.id;
+			_state = {};// init state
+			priv.initEvents();
+			priv.initData();
+			priv.initialRender();// set up _uiNode$...
+		};
+
+		priv.initEvents = function () {
+			jQuery(_uiNodeCont).on('DealsSalesTable:render', priv.onRender);
+		};
+
+		priv.initData = function () {
+			if (!priv.options.initData) return;
+			if (priv.options.initData.obroty) _state.obroty = priv.options.initData.obroty;
+			if (priv.options.initData.marki) _state.marki = priv.options.initData.marki;
+			if (priv.options.initData.obrotyToMarki) _state.obrotyToMarki = priv.options.initData.obrotyToMarki;
+			if (priv.options.initData.months) _state.months = priv.options.initData.months;
+			if (priv.options.initData.years) _state.years = priv.options.initData.years;
+		};
+
+		priv.initialRender = function () {
+			_uiNode$Table = $('<table class="table table-bordered table-hover"></table>');
+			{// thead
+				var thead$Node = $('<thead></thead>').appendTo(_uiNode$Table);
+				var theadTr$Node = $('<tr></tr>').appendTo(thead$Node);
+				$('<th></th>').appendTo(theadTr$Node);
+				$.each(_state.months, function(index, value) {
+					$('<th>' + value + '</th>').appendTo(theadTr$Node);
+				});
+				$('<th>suma</th>').appendTo(theadTr$Node);
+			}
+			{// body
+				_uiNode$TableBody = $('<tbody></tbody>').appendTo(_uiNode$Table);
+				var vSalesByYear = _state.obroty;
+				$.each(_state.years, function(yearIdx, vYearId) {
+					var vSalesByMonth = vSalesByYear[vYearId];
+					var tr$Node = $('<tr></tr>').appendTo(_uiNode$TableBody);
+					$('<th>' + vYearId + '</th>').appendTo(tr$Node);
+					var suma = 0;
+					$.each(_state.months, function(monthsIdx, vMonth) {
+						var td$Node = $('<td></td>').appendTo(tr$Node);
+						td$Node.css({textAlign: 'right'});
+						var saleValue = parseFloat(vSalesByMonth[vMonth]);
+						//if (!vSalesByMonth.hasOwnProperty(vMonth)) {
+						if (isNaN(saleValue)) {
+							td$Node.text('...');
+							td$Node.css({color: '#ddd'});
+						} else {
+							suma += saleValue;
+							$('<nobr>' + numeral(saleValue).format('0,0[.]00') + '</nobr>').appendTo(td$Node);
+							if (undefined !== _state.obrotyToMarki[vYearId][vMonth]) {
+								var marka = _state.obrotyToMarki[vYearId][vMonth];
+								td$Node.addClass('cell_marka_' + _state.marki[marka]);
 							}
-						?>
-						<td class="<?php echo $clsName; ?>">
-							<?php if (isset($vSalesByMonth[$vMonth])) : ?>
-								<?php $sumaYear += $vSalesByMonth[$vMonth]; ?>
-								<nobr><?php echo number_format($vSalesByMonth[$vMonth], 2, ',', ' '); ?></nobr>
-							<?php else : ?>
-								...
-							<?php endif; ?>
-						</td>
-					<?php endforeach; ?>
-					<td><nobr><?php echo number_format($sumaYear, 2, ',', ' '); ?></nobr></td>
-				</tr>
-			<?php endforeach; ?>
-		<?php endforeach; ?>
-		</table>
+						}
+					});
+					var suma$Node = $('<td>' + numeral(suma).format('0,0[.]00') + '</td>').appendTo(tr$Node);
+					suma$Node.css({textAlign: 'right'});
+				});
+
+			}
+			_uiNode$Table.appendTo(_uiNodeCont);
+			// TODO: priv.renderInlineEditBox();// .tblAjax__inlineEditBox
+		};
+
+		priv.onRender = function(e) {
+			if (priv.options.debug) console.log('onRender.arguments:', arguments.length, arguments, 'e:', e);
+			if (arguments.length > 1) {
+				for (var i=1; i<arguments.length; i++) {
+					switch (arguments[i]) {
+						case 'head': _head = undefined; break;
+						case 'body': _body = undefined; break;
+						case 'foot': _foot = undefined; break;
+						case 'footer__toolbar__info': priv.renderFooterInfo(); break;
+						case 'footer__toolbar__pagination': priv.renderFooterPagination(); break;
+						case 'footer__toolbar__pagesizes': priv.renderFooterPageSizes(); break;
+						case 'foot__columnPicker': priv.renderFooterColumnPicker(); break;
+						case 'head__specialFilters': priv.renderHeadSpecialFilters(); break;
+					}
+				}
+				//priv.renderTable();
+			}
+		};
+
+		publ.init = function (options) {
+			if (priv.options.debug) console.log('DealsSalesTable initialization...');
+			//merge supplied options with defaults
+			$.extend(priv.options, defaults, options);
+			priv.init();
+			return publ;
+		};
+
+		return publ;
+	};
+
+	$.fn.DealsSalesTable = function (options) {
+		options = options || {};
+		return this.each(function () {
+			options.id = this;
+			$(this).data('DealsSalesTable', new DealsSalesTable().init(options));
+		});
+	};
+
+})(jQuery);
+
+	jQuery(document).ready(function() {
+		jQuery('#dealsSalesByMonth').DealsSalesTable({
+			url: 'index.php?_route=DealsSales&_task=ajax',
+			initData: <?php echo json_encode($initData); ?>
+		});
+	});
+</script>
 
 		<script src="stuff/RGraph/libraries/RGraph.common.core.js"></script>
 		<script src="stuff/RGraph/libraries/RGraph.common.dynamic.js"></script>

SE/se-lib/tmpl/_layout_gora.php

@@ -20,6 +20,7 @@
 	<script src="stuff/jquery.autosize.min.js"></script>
 	<script src="stuff/bootstrap/js/bootstrap.min.js"></script>
 	<script src="stuff/jquery.selectize/js/standalone/selectize.min.js"></script>
+	<script src="stuff/numeral/numeral.min.js"></script>
 	<script src="stuff/moment/moment.min.js"></script>
 	<script src="stuff/moment/pl.js"></script>
 	<script src="stuff/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>