Stats table & begin Graph

Author: kimbtech

php/core/Stats.php

@@ -26,10 +26,50 @@ public function __construct( Template $temp, Login $login ) {
 			$cmd = $this->paramsToCmd();
 			if( !empty($cmd)){
 				$data = new TTTStats($cmd, API::getStorageDir($this->login->getGroup()));
+				$this->displayContent($data->getAllResults());
+			}
+		}
+	}
 
-				$this->temp->setContent('GRAPH', PHP_EOL .  print_r($data->getAllResults(), true));
+	private function displayContent(array $data) : void {
+		$this->temp->setContent('COMBIDATA', json_encode($data['combi']));
+		$this->temp->setContent('TABLEA', $this->arrayToTable($data['main']));
+		if(isset($data['today'])){
+			$this->temp->setContent('TABLEB', $this->arrayToTable($data['today']) );
+		}
+	} 
+
+	private function arrayToTable(array $data) : string {
+		$table = "<table class=\"accounttable\">";
+		$head = false;
+		$lastCat = '';
+		foreach($data as $row){
+			if(!$head){
+				$table .= "<tr>";
+				foreach($row as $col => $val){
+					$table .= "<th>". $col ."</th>";
+				}
+				$table .= "</tr>";
+				$head = true;
+			}
+			$table .= "<tr>";
+			foreach($row as $key => $val){
+				if($key === 'Category'){
+					if( $val === $lastCat ){
+						$table .= "<td></td>";
+					}
+					else{
+						$table .= "<td>". $val ."</td>";
+					}
+					$lastCat = $val;
+				}
+				else{
+					$table .= "<td>". $val ."</td>";
+				}
 			}
+			$table .= "</tr>";
 		}
+		return $table . "</table>";
 	}
 
 	private function paramsToCmd() : array {
@@ -53,6 +93,12 @@ private function paramsToCmd() : array {
 				$cmd[] = $_POST["range-from"];
 				$cmd[] = $_POST["range-to"];
 			}
+			else if( isset($_POST["range-from"]) && preg_match( TTTStatsData::DATE_PREG, $_POST["range-from"]) === 1 ){
+				$cmd[] = $_POST["range-from"];
+			}
+			else if( isset($_POST["range-to"]) && preg_match( TTTStatsData::DATE_PREG, $_POST["range-to"]) === 1){
+				$cmd[] = $_POST["range-to"];
+			}
 			else{
 				$error = true;
 			}
@@ -85,6 +131,7 @@ private function paramsToCmd() : array {
 			return array();
 		}
 		else{
+			$this->temp->setContent('CMD', 'ttt s ' . implode(' ', $cmd));
 			return $cmd;
 		}
 	}
@@ -104,6 +151,20 @@ private function setUpHtml(){
 			}
 			$this->temp->setMultipleContent('Devices', $ds);
 		}
+
+		$this->temp->setContent('GRAPHES', json_encode(
+			array_values(array_map(
+				function ($s) {
+					return substr($s, 0, -3);
+				},
+				array_filter(
+					scandir(__DIR__ . '/../load/graphs/'),
+					function ($s) {
+						return strlen($s) > 4 && substr($s, -3) === '.js';
+					}
+				)
+			))
+		));
 	}
 
 }

php/core/templates/stats.json

@@ -8,5 +8,9 @@
 			"%%NAME%%" : ""
 		}
 	},
-	"%%GRAPH%%" : ""
+	"%%TABLEA%%" : "",
+	"%%TABLEB%%" : "",
+	"%%COMBIDATA%%" : "[]",
+	"%%CMD%%" : "",
+	"%%GRAPHES%%" : ""
 }

php/core/templates/stats_en.html

@@ -48,9 +48,39 @@ <h3>Select data</h3>
 	}
 });
 </script>
+<h3>Tables</h3>
+<p><code>%%CMD%%</code></p>
+
+<div style="margin-bottom: 10px;">
+	%%TABLEA%%
+</div>
+<div>
+	%%TABLEB%%
+</div>
 
 <h3>Graph</h3>
+<select id="graphselect">
+	
+</select>
+<button id="displaygraph">Display Graph</button>
+
+<div id="maingraph"></div>
+<script>
+	var combiData = %%COMBIDATA%%;
+	var graphes = %%GRAPHES%%;
+	var loadUrl = "%%SERVERURL%%/load/graphs/";
+	
+	$.ajaxSetup({cache: true});
+	graphes.forEach( (g) => {
+		$("select#graphselect").append('<option value="'+g+'">'+g+'</option>');
+	});
 
-<pre>
-	%%GRAPH%%
-</pre>
+	$("button#displaygraph").click( () => {
+		var url = loadUrl + $("select#graphselect").val()  + '.js';
+		$.getScript( url, () => {
+			if( typeof createGraph === "function" && combiData.length > 0 ){
+				createGraph(combiData, "div#maingraph");
+			}
+		});
+	});
+</script>

php/load/graphs/simple.js

@@ -0,0 +1,9 @@
+function createGraph(data, selector){
+	/**
+	 * The DOM has jQuery as $ and the ChartJS library.
+	 * The data can be found in data and selector is a css-selector
+	 * 	where the graph should appear.
+	 */
+
+	console.log('simple', data, selector);
+}

php/load/graphs/test.js

@@ -0,0 +1,9 @@
+function createGraph(data, selector){
+	/**
+	 * The DOM has jQuery as $ and the ChartJS library.
+	 * The data can be found in data and selector is a css-selector
+	 * 	where the graph should appear.
+	 */
+
+	console.log('test', data, selector);
+}