Budget add sum, show/hide month cols

SE/se-lib/Route/Budget.php

@@ -157,7 +157,26 @@ jQuery(document).ready(function () {
 		td    { page-break-inside:avoid; page-break-after:auto; position:relative; }
 		thead { display:table-header-group }
 		tfoot { display:table-footer-group }
-	</style>
+
+		#zestawienie-kosztow-projektow.hidden_month_1 .col_month_1 {display:none}
+		#zestawienie-kosztow-projektow.hidden_month_2 .col_month_2 {display:none}
+		#zestawienie-kosztow-projektow.hidden_month_3 .col_month_3 {display:none}
+		#zestawienie-kosztow-projektow.hidden_month_4 .col_month_4 {display:none}
+		#zestawienie-kosztow-projektow.hidden_month_5 .col_month_5 {display:none}
+		#zestawienie-kosztow-projektow.hidden_month_6 .col_month_6 {display:none}
+		#zestawienie-kosztow-projektow.hidden_month_7 .col_month_7 {display:none}
+		#zestawienie-kosztow-projektow.hidden_month_8 .col_month_8 {display:none}
+		#zestawienie-kosztow-projektow.hidden_month_9 .col_month_9 {display:none}
+		#zestawienie-kosztow-projektow.hidden_month_10 .col_month_10 {display:none}
+		#zestawienie-kosztow-projektow.hidden_month_11 .col_month_11 {display:none}
+		#zestawienie-kosztow-projektow.hidden_month_12 .col_month_12 {display:none}
+		.thead__cols_summary,
+		.row__summary__cost,
+		.row__summary__plan {background-color:#fcf8e3;}
+		.thead_col_month .col_month_remove { opacity:0.2; }
+		.thead_col_month:hover .col_month_remove { opacity:0.6; }
+
+</style>
 		<?php
 	}
 
@@ -177,10 +196,10 @@ jQuery(document).ready(function () {
 	<thead>
 		<tr>
 			<td colspan="3" class="p2">
-				<span class="pull-right"><b>miesiąc</b></span>
+				<span class="pull-right"><b>miesiąc</b> <span class="month_cols_picker"></span></span>
 			</td>
 			<?php foreach ($months as $month) { ?>
-				<th class="c" colspan="3"><?php echo sprintf("%02d", $month); ?></th>
+				<th class="c col_month_<?php echo $month; ?> thead_col_month" colspan="3"><?php echo sprintf("%02d", $month); ?></th>
 			<?php } ?>
 		</tr>
 		<tr>
@@ -190,9 +209,9 @@ jQuery(document).ready(function () {
 				</span>
 			</td>
 			<?php foreach ($months as $month) { ?>
-				<th class="c" title="Koszty wprowadzone do korespondencji">Koszty</th>
-				<th class="c" title="Plan budżetu">Plan</th>
-				<th class="c" title="Procent przekroczenia planu">%</th>
+				<th class="c col_month_<?php echo $month; ?>" title="Koszty wprowadzone do korespondencji">Koszty</th>
+				<th class="c col_month_<?php echo $month; ?>" title="Plan budżetu">Plan</th>
+				<th class="c col_month_<?php echo $month; ?>" title="Procent przekroczenia planu">%</th>
 			<?php } ?>
 		</tr>
 	</thead>
@@ -231,14 +250,15 @@ jQuery(document).ready(function () {
 				<?php $vMonthCost = $this->getCost($projectID, $month); ?>
 				<?php $monthCostTotal = ($vMonthCost)? $vMonthCost->COST_TOTAL : 0; ?>
 				<?php if (!$projectAccess) : ?>
-			<td style="min-width:30px;text-align:right;">***</td>
+			<td class="col_month_<?php echo $month; ?>" style="min-width:30px;text-align:right;">***</td>
 				<?php elseif (!$vMonthCost) : ?>
-			<td style="min-width:30px">&nbsp;</td>
+			<td class="col_month_<?php echo $month; ?>" style="min-width:30px">&nbsp;</td>
 				<?php else : ?>
 					<?php
 						$vCostChildOut = number_format($vMonthCost->COST_CHILD, 2);
 						$vCostSelfOut = number_format($vMonthCost->COST_SELF, 2);
 						$vCostTotalOut = number_format($vMonthCost->COST_TOTAL, 2);
+						$vCostTotalOutJs = number_format($vMonthCost->COST_TOTAL, 2, '.', '');
 						$title = "Koszt projektu {$vCostSelfOut} / koszt podprojektów $vCostChildOut";
 						$cellCostCls = '';
 						if ($vMonthCost->COST_CHILD > 0) {
@@ -251,17 +271,20 @@ jQuery(document).ready(function () {
 							$cellCostCls = 'cell-cost-only_self';
 						}
 					?>
-			<td class="cell-cost <?php echo $cellCostCls; ?>"
+			<td class="cell-cost <?php echo $cellCostCls; ?> col_month_<?php echo $month; ?>"
 					data-month_num="<?php echo $month; ?>"
-					data-cost="<?php echo $vCostTotalOut; ?>"
+					data-cost="<?php echo $vCostTotalOutJs; ?>"
 					data-proj_path="<?php echo $projectPath; ?>"
 					data-proj_id="<?php echo $projectID; ?>">
 				<span class="ttip" title="<?php echo $title; ?>"><?php echo $vCostTotalOut; ?></span>
 			</td>
 				<?php endif; ?>
-			<td class="cell-plan">
-				<?php $monthPlan = $this->getPlan($projectID, $month); ?>
-				<?php $monthPlanOut = number_format($monthPlan, 2); ?>
+			<?php $monthPlan = $this->getPlan($projectID, $month); ?>
+			<?php $monthPlanOut = number_format($monthPlan, 2); ?>
+			<?php $monthPlanOutJs = number_format($monthPlan, 2, '.', ''); ?>
+			<td class="cell-plan col_month_<?php echo $month; ?>"
+					data-month_num="<?php echo $month; ?>"
+					data-plan="<?php echo $monthPlanOutJs; ?>">
 				<?php if (!$projectAccess) : ?>
 					***
 				<?php elseif ($monthPlan > 0) : ?>
@@ -288,9 +311,9 @@ jQuery(document).ready(function () {
 				}
 			?>
 				<?php if (!$projectAccess) : ?>
-			<td style="min-width:30px;text-align:right;">***</td>
+			<td class="col_month_<?php echo $month; ?>" style="min-width:30px;text-align:right;">***</td>
 				<?php else : ?>
-			<td class="cell-procent <?php echo $cellProcentCls; ?>"><?php echo $procentOut; ?></td>
+			<td class="cell-procent <?php echo $cellProcentCls; ?> col_month_<?php echo $month; ?>"><?php echo $procentOut; ?></td>
 				<?php endif; ?>
 			<?php endforeach; ?>
 		</tr>
@@ -344,7 +367,224 @@ jQuery(document).ready(function() {
 			$modal.find('.modal-body').html(modalBody);
 			$modal.modal({});
 		})
-})
+
+	jQuery('#zestawienie-kosztow-projektow').data('visible_months', <?php echo json_encode($months); ?>);
+
+	jQuery('#zestawienie-kosztow-projektow').on('show_month', function(e, argMonthNum) {
+		var this$Node = $(this),
+				monthNum = parseInt(argMonthNum),
+				visibleMonths = this$Node.data('visible_months'),
+				dbgLvl = parseInt(this$Node.data('dbg_lvl'))
+		;
+		if(dbgLvl){console.log('event:show_month argMonthNum', argMonthNum);}
+		monthNum = parseInt(monthNum);
+		if (monthNum < 1 || monthNum > 12) return;
+		if (-1 === visibleMonths.indexOf(monthNum)) {
+			visibleMonths.push(monthNum);
+			this$Node.data('visible_months', visibleMonths);
+			if(dbgLvl>1){console.log('event:show_month removed monthNum', monthNum, 'visibleMonths', visibleMonths);}
+			this$Node.trigger('visible_months_changed');
+			// TODO: trigger render_sum
+		} else {
+			if(dbgLvl>1){console.log('event:hide_month monthNum('+monthNum+') already in visibleMonths', visibleMonths);}
+		}
+	});
+
+	jQuery('#zestawienie-kosztow-projektow').on('hide_month', function(e, argMonthNum) {
+		var this$Node = $(this),
+				monthNum = parseInt(argMonthNum),
+				monthInd,
+				visibleMonths = this$Node.data('visible_months'),
+				dbgLvl = parseInt(this$Node.data('dbg_lvl'))
+		;
+		if(dbgLvl){console.log('event:hide_month argMonthNum', argMonthNum);}
+		if (monthNum < 1 || monthNum > 12) return;
+		monthInd = visibleMonths.indexOf(monthNum);
+		if (-1 === monthInd) {
+			if(dbgLvl>1){console.log('event:hide_month monthNum('+monthNum+') not in visibleMonths', visibleMonths);}
+		} else {
+			visibleMonths.splice(monthInd, 1);
+			this$Node.data('visible_months', visibleMonths);
+			if(dbgLvl>1){console.log('event:hide_month removed monthNum', monthNum, 'visibleMonths', visibleMonths);}
+			this$Node.trigger('visible_months_changed');
+		}
+	});
+
+	jQuery('#zestawienie-kosztow-projektow').on('visible_months_changed', function(e) {
+		var this$Node = $(this);
+		this$Node.trigger('render_cols_select');
+		this$Node.trigger('render_cols');
+		this$Node.trigger('render_sum');
+	});
+
+	jQuery('#zestawienie-kosztow-projektow').on('initial_render', function(e) {
+		var this$Node = $(this);
+		this$Node.trigger('render_cols_select');
+		this$Node.trigger('render_cols');
+		this$Node.trigger('render_sum');
+
+		var theadFirstRow$Node = $('#zestawienie-kosztow-projektow').find('thead').find('tr:first'),
+				close$Node;
+		for (var i = 1; i <= 12; i++) {
+			close$Node = $('<i class="pull-right glyphicon glyphicon-remove col_month_remove"></i>').appendTo(theadFirstRow$Node.find('.col_month_' + i));
+			close$Node.css({padding:'2px', cursor: 'pointer', color:'red'});
+			close$Node.data('month_num', i);
+			close$Node.on('click', function(e) {
+				var this$Node = $(this),
+						monthNum = this$Node.data('month_num'),
+						root$Node = $('#zestawienie-kosztow-projektow'),
+						dbgLvl = parseInt(root$Node.data('dbg_lvl'))
+				;
+				if(dbgLvl){console.log('click month col remove btn:', monthNum);}
+				root$Node.trigger('hide_month', monthNum);
+			});
+		}
+	});
+
+	jQuery('#zestawienie-kosztow-projektow').on('render_cols_select', function(e) {
+		var this$Node = $(this),
+				dbgLvl = parseInt(this$Node.data('dbg_lvl'))
+		;
+		if(dbgLvl){console.log('event:render_cols_select');}
+		var this$Node = $(this),
+				visibleMonths = this$Node.data('visible_months'),
+				nodeClass = 'month_cols_picker',
+				currentNode,
+				node
+		;
+		currentNode = this$Node.find('thead').find('.' + nodeClass);
+		node = $('<div class="btn-group pull-right dropdown columnpicker ' + nodeClass + '"></div>');
+		var btn = $('<button class="btn btn-sm btn-link dropdown-toggle" data-toggle="dropdown" href="#">wybierz&nbsp;</button>').appendTo(node);
+		btn.css({padding: '0 10px'});
+		var span = $('<span class="caret"></span>').appendTo(btn);
+		var ul$Node = $('<ul class="dropdown-menu">').appendTo(node);
+
+		for (var i = 1; i <= 12; i++) {
+			var li$Node = $('<li class="checkbox" style="margin:0 10px;"></li>').appendTo(ul$Node),
+					label$Node = $('<label></label>').appendTo(li$Node),
+					input$Node;
+			input$Node = $('<input type="checkbox" title="' + i + '" value="' + i + '" >').appendTo(label$Node);
+			label$Node.append(' ' + i);
+			input$Node.prop('checked', (-1 !== visibleMonths.indexOf(i)));
+		}
+		{// show months all
+			if (visibleMonths.length < 12) {
+				var li$Node = $('<li class="checkbox" style="margin:0 10px;"></li>').appendTo(ul$Node),
+						btnViewAll$Node = $('<button class="btn btn-link">Pokaż wszystkie</button>').appendTo(li$Node)
+				;
+				btnViewAll$Node.on('click', function(e) {
+					var root$Node = $('#zestawienie-kosztow-projektow'),
+							visibleMonths = root$Node.data('visible_months')
+					;
+					if (visibleMonths.length < 12) {
+						visibleMonths = [];
+						for (var i = 1; i <= 12; i++) visibleMonths.push(i);
+						root$Node.data('visible_months', visibleMonths);
+						root$Node.trigger('visible_months_changed');
+					}
+				});
+			}
+		}
+		node.on('change', 'input', function(e) {
+			var this$Node = $(this),
+					monthNum = this$Node.val(),
+					dbgLvl = parseInt($('#zestawienie-kosztow-projektow').data('dbg_lvl'))
+			;
+			e.preventDefault();
+			e.stopPropagation();
+			if(dbgLvl>1){console.log('change checkbox val:', this$Node.val(), 'checked:', this$Node.prop('checked'));}
+			if (this$Node.prop('checked')) {
+				jQuery('#zestawienie-kosztow-projektow').trigger('show_month', monthNum);
+			} else {
+				jQuery('#zestawienie-kosztow-projektow').trigger('hide_month', monthNum);
+			}
+		});
+		currentNode.replaceWith(node);
+	});
+
+	// @require css: #zestawienie-kosztow-projektow.hidden_month_1 .col_month_1 {display:none}
+	jQuery('#zestawienie-kosztow-projektow').on('render_cols', function(e) {
+		var this$Node = $(this),
+				thead$Node = this$Node.find('thead'),
+				tbody$Node = this$Node.find('tbody'),
+				visibleMonths = this$Node.data('visible_months'),
+				dbgLvl = parseInt($('#zestawienie-kosztow-projektow').data('dbg_lvl'))
+		;
+		if(dbgLvl){console.log('event:render_cols visibleMonths', visibleMonths);}
+		for (var i = 1; i <= 12; i++) {
+			if (-1 === visibleMonths.indexOf(i)) {
+				this$Node.addClass('hidden_month_' + i);
+			} else {
+				this$Node.removeClass('hidden_month_' + i);
+			}
+		}
+	});
+
+	jQuery('#zestawienie-kosztow-projektow').on('render_sum', function(e) {
+		var this$Node = $(this),
+				thead$Node = this$Node.find('thead'),
+				tbody$Node = this$Node.find('tbody'),
+				visibleMonths = this$Node.data('visible_months'),
+				dbgLvl = parseInt($('#zestawienie-kosztow-projektow').data('dbg_lvl'))
+		;
+		if(dbgLvl){console.log('event:render_sum visibleMonths', visibleMonths);}
+		if (!thead$Node.find('.thead__cols_summary').length) {
+			$('<th colspan="2" class="thead__cols_summary c">Suma</th>').appendTo(thead$Node.children('tr:first'));
+			$('<th class="thead__cols_summary c">Koszty</th>').appendTo(thead$Node.children('tr:last'));
+			$('<th class="thead__cols_summary c">Plan</th>').appendTo(thead$Node.children('tr:last'));
+			tbody$Node.find('tr').each(function(ind, n) {
+				var this$Node = $(this);
+				$('<td class="row__summary__cost r"></td>').appendTo(this$Node);
+				$('<td class="row__summary__plan r"></td>').appendTo(this$Node);
+			});
+		}
+
+		tbody$Node.find('tr').each(function(ind, n) {
+			var this$Node = $(this),
+					rowSumCost = 0,
+					rowSumPlan = 0
+			;
+			this$Node.find('.cell-cost').each(function(ind, n) {
+				var monthNum = $(this).data('month_num'),
+						costValueOut = $(this).data('cost'),
+						costValue = 0
+				;
+				monthNum = parseInt(monthNum);
+				if (monthNum < 1 || monthNum > 12) return;
+				if (-1 === visibleMonths.indexOf(monthNum)) {
+					if(dbgLvl>2){console.log('HIDE: .cell-cost monthNum', monthNum, 'costValueOut', costValueOut, 'visibleMonths', visibleMonths);}
+					return;
+				} else {
+					costValue = parseFloat(costValueOut);
+					if (isNaN(costValue) || !costValue) costValue = 0;
+					if (costValue) rowSumCost += costValue;
+				}
+				if(dbgLvl>2){console.log('.cell-cost monthNum', monthNum, 'costValueOut', costValueOut, 'visibleMonths', visibleMonths);}
+			});
+			this$Node.find('.cell-plan').each(function(ind, n) {
+				var monthNum = $(this).data('month_num'),
+						planValueOut = $(this).data('plan'),
+						planValue = 0
+				;
+				monthNum = parseInt(monthNum);
+				if (monthNum < 1 || monthNum > 12) return;
+				if (-1 === visibleMonths.indexOf(monthNum)) {
+					if(dbgLvl>2){console.log('HIDE: .cell-cost monthNum', monthNum, 'planValueOut', planValueOut, 'visibleMonths', visibleMonths);}
+					return;
+				} else {
+					planValue = parseFloat(planValueOut);
+					if (isNaN(planValue) || !planValue) planValue = 0;
+					if (planValue) rowSumPlan += planValue;
+				}
+				if(dbgLvl>2){console.log('.cell-cost monthNum', monthNum, 'planValueOut', planValueOut, 'visibleMonths', visibleMonths);}
+			});
+			this$Node.find('.row__summary__cost').html((rowSumCost)? rowSumCost.toFixed(2) : '');
+			this$Node.find('.row__summary__plan').html((rowSumPlan)? rowSumPlan.toFixed(2) : '');
+		});
+	});
+
+	jQuery('#zestawienie-kosztow-projektow').trigger('initial_render');
+});
 	</script>
 
 	<!-- Modal -->