fixed Budget view

SE/se-lib/Route/Budget.php

@@ -28,8 +28,9 @@ class Route_Budget extends RouteBase {
 		UI::gora();
 		UI::menu();
 		if (!$args['_print']) {
-			$this->menu($args['year']);
+			$this->printMenu($args['year']);
 		}
+
 		UI::dol();
 	}
 
@@ -49,7 +50,7 @@ class Route_Budget extends RouteBase {
 		UI::gora();
 		UI::menu();
 		if (!$args['_print']) {
-			$this->menu($args['year'], $groups, $args['groups']);
+			$this->printMenu($args['year'], $groups, $args['groups']);
 		}
 
 		if (empty($args['year'])) {
@@ -69,7 +70,7 @@ class Route_Budget extends RouteBase {
 		UI::dol();
 	}
 
-	public function menu($selectedYear, $groups = array(), $selectedGroups = array()) {
+	public function printMenu($selectedYear, $groups = array(), $selectedGroups = array()) {
 		//UI::menu();
 		$year = ($selectedYear)? $selectedYear : date("Y");
 		UI::startTag('div', ['class'=>"jumbotron"]);
@@ -116,84 +117,23 @@ class Route_Budget extends RouteBase {
 		]);
 	}
 
-	function css() {
-		?>
-	<style type="text/css">
-		.c { text-align:center; }
-		.r { text-align:right; }
-
-		.zestawienie-kosztow-tbl { border-collapse:collapse; border:1px solid #aaa; }
-		.zestawienie-kosztow-tbl td { border:1px solid #aaa; }
-		.zestawienie-kosztow-tbl .p2 { padding:0 2px; }
-		.zestawienie-kosztow-tbl .nr { color:#7A7A7A; }
-		.zestawienie-kosztow-tbl thead th { border:1px solid #aaa; }
-		.zestawienie-kosztow-tbl tbody tr:hover td { background:#cafbfd; }
-		.row-selected td {background-color:#d8fded;}
-		.showOnlySelected tr { display:none; }
-		.showOnlySelected tr.row-selected { display:table-row; }
-
-		.cell-cost { padding:0 2px; min-width:30px; text-align:right; }
-		.cell-cost-only_self      { color:#197fe6; }
-		.cell-cost-self_and_child { color:#33b2cc; }
-		.cell-cost-only_child     { color:#59a680; }
-		.cell-plan { padding:0 2px; min-width:30px; text-align:right; color:#777; }
-		.cell-procent { padding:0 2px; min-width:20px; text-align:right; color:#777; }
-		.cell-procent-below100 { color:#777; }
-		.cell-procent-100 { color:#777; }
-		.cell-procent-over100 { color:#ff9b00; }
-		.cell-procent-over150 { color:#f00; }
-
-		/* print table background colors */
-		table td, table th { -webkit-print-color-adjust:exact; }
-		table { page-break-after:auto }
-		tr    { page-break-inside:avoid; page-break-after:auto; position:relative; }
-		td    { page-break-inside:avoid; page-break-after:auto; position:relative; }
-		thead { display:table-header-group }
-		tfoot { display:table-footer-group }
-
-		#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
-	}
-
 	function printCostsForYear($year, $groups) {
 		$months = array();
 		for ($i = 0; $i < 12; $i++) {
 			$months[] = $i + 1;
 		}
-		$this->css();
-		//DBG::_('DBG', '>1', "costs", $this->_costs, __CLASS__, __FUNCTION__, __LINE__);
-
-		//echo'<pre>' . json_encode(array_keys($this->_projectPathsOrder)) . '</pre>';
-		//echo'<pre>' . json_encode($this->_projectPathsOrder) . '</pre>';
-		//echo'<pre>' . json_encode($this->_projectInfo) . '</pre>';
-		//echo'<pre>' . json_encode($this->_costs) . '</pre>';
-		//echo'<pre>' . json_encode($this->_plan) . '</pre>';
 		$projectPathsOrder = array_keys($this->_projectPathsOrder);
 		foreach ($projectPathsOrder as $key => $value) {
 			$projectPathsOrder[$key] = "" . $value;
 		}
 
 		UI::tag('div', ['id' => "widget-budget"]);
-		UI::tag('script', ['src'=>"stuff/vendors.js"]);
-		UI::tag('script', ['src'=>"stuff/bundle.se_route_budget.js?v=2.1"]);
-		UI::inlineJS(__FILE__ . '.yearBudget.js', [
+
+		UI::inlineCSS(__FILE__ . '.budget.css', []);
+		echo UI::h('script', [ 'src' => "static/vendor.js" ]); // window.p5VendorJs: { React, ReactDOM, createReactClass, Redux }
+		UI::inlineJS(__FILE__ . '.budget.js', []); // window.p5VendorJs.p5UI__Budget
+		UI::inlineJS(__FILE__ . '.init-budget.js', [ // render window.p5VendorJs.p5UI__Budget
+			'HTML_ID' => "widget-budget",
 			'year' => $year,
 			'today' => date('Y-m-d'),
 			'projectPathsOrder' => $projectPathsOrder,
@@ -201,7 +141,7 @@ class Route_Budget extends RouteBase {
 			'projectInfo' => $this->_projectInfo,
 			'costs' => $this->_costs,
 			'plan' => $this->_plan,
-			'dbg' => false,
+			'DBG' => false,
 		]);
 	}
 
@@ -760,7 +700,7 @@ END
 			$_REQUEST['ff_YEAR'] = $_GET['ff_YEAR'] = $args['year'];
 		}
 
-		$this->menu($args['year']);
+		$this->printMenu($args['year']);
 
 		if ($args['year'] > 0) {
 			UI::startContainer();

SE/se-lib/Route/Budget.php.init-budget.js

@@ -0,0 +1,29 @@
+if (!HTML_ID) throw "Missing HTML_ID"; // 'widget-budget'
+if (!year) throw "Missing year"; // '2018'
+if (!today) throw "Missing today"; // date('Y-m-d')
+if (!projectPathsOrder) throw "Missing projectPathsOrder";
+if (!projectPathsMap) throw "Missing projectPathsMap";
+if (!projectInfo) throw "Missing projectInfo";
+if (!costs) throw "Missing costs";
+if (!plan) throw "Missing plan";
+var DBG = DBG || false;
+
+if (!window.p5VendorJs) throw "Missing window.p5VendorJs - load static/vendor.js";
+const createReactClass = window.p5VendorJs.createReactClass;
+const h = window.p5VendorJs.React.createElement;
+const React = window.p5VendorJs.React;
+const ReactDOM = window.p5VendorJs.ReactDOM;
+
+if (!window.p5VendorJs.p5UI__Budget) throw "Missing p5UI__Budget - load budget.js";
+var p5UI__Budget = window.p5VendorJs.p5UI__Budget;
+
+ReactDOM.render(h(p5UI__Budget, {
+	year: year,
+	today: today,
+	projectPathsOrder: projectPathsOrder,
+	projectPathsMap: projectPathsMap,
+	projectInfo: projectInfo,
+	costs: costs,
+	plan: plan,
+	DBG: DBG
+}), document.getElementById(HTML_ID));

SE/se-lib/Route/Budget.php.yearBudget.js

@@ -1,19 +0,0 @@
-// @require var year
-// @require var today
-// @require var projectPathsOrder
-// @require var projectPathsMap
-// @require var projectInfo
-// @require var costs
-// @require var plan
-// @require var dbg
-
-jQuery("#widget-budget").Budget({
-	year: year,
-	today: today,
-	projectPathsOrder: projectPathsOrder,
-	projectPathsMap: projectPathsMap,
-	projectInfo: projectInfo,
-	costs: costs,
-	plan: plan,
-	dbg: dbg
-});