Controller/Status.php

@@ -8,7 +8,8 @@ class Status extends Controller {
 		$vars=array();
 
 		$uptime=exec("uptime");
-		#$uptime="17:16:18 up 22 days,  9:39,  1 user,  load average: 2.10, 2.18, 2.33";
+		if ($uptime=="")
+			$uptime="17:16:18 up 22 days,  9:39,  1 user,  load average: 2.10, 2.18, 2.33";
 		$matches=array();
 		preg_match("/(\d+) days,\s*(\d*):(\d*)/", $uptime, $matches);
 		$vars['uptime']=[
@@ -47,10 +48,12 @@ class Status extends Controller {
 
 	public function GetProcesses() {
 		$lines=array();
-		#$output=file_get_contents("/ps.txt");
-		#$output=htmlspecialchars($output);
-		#$lines=explode("\n", $output);
 		exec("ps aux", $lines);
+		if (count($lines)==0){
+			$output=file_get_contents("/ps.txt");
+			$output=htmlspecialchars($output);
+			$lines=explode("\n", $output);
+		}
 		$header=preg_split('/\s+/', $lines[0]);
 		for ($i=0; $i<count($lines); $i++)
 			$lines[$i]=preg_split('/\s+/', $lines[$i], count($header));

View/Status/index.view

@@ -1,59 +1,10 @@
-@Title{Server Status}@
-@JavaScript{
-	function parseStatusData(data){
-		var headers=data.shift();
-		var cpuIndex=-1;
-		var ignoreColNames=["user", "pid", "vsz", "rss", "tty", "stat"];
-		var ignoreCols=[];
-		
-		var html="<tr>";
-		for (col in headers){
-			if (headers[col].toLowerCase()=="%cpu")
-				cpuIndex=col;
-				
-			if (ignoreColNames.indexOf(headers[col].toLowerCase())>-1)
-				ignoreCols.push(col);
-			else
-				html+="<th>"+headers[col]+"</th>";
-		}	
-		html+="</tr>";
-		
-		console.log(ignoreCols);
-		
-		data.sort(function(a,b){
-			cpuA=parseFloat(a[cpuIndex]);
-			cpuB=parseFloat(b[cpuIndex]);
-			if (cpuA>cpuB)
-				return -1;
-			if (cpuA<cpuB)
-				return 1
-			return 0;
-		});
-		
-		for (row in data){
-			html+="<tr>";
-			for (col in data[row]){
-				if (ignoreCols.indexOf(col)==-1)
-					html+="<td>"+data[row][col]+"</td>";
-			}
-			html+="</tr>";
-		}
-		$("#processTable").html(html);
-	}
-
-	$(function(){
-		$.ajax({
-			url:"/status/getprocesses",
-			success:function(data){
-				parseStatusData($.parseJSON(data));
-			},
-			error:function(){
-				
-			},
-		});
-	});
+@Init{
+	$this->RegisterJSFile("services/statusService.js");
+	$this->RegisterJSFile("controllers/status.js");
 }@
+@Title{Server Status}@
 @Body{
+<div ng-controller="status">
 	<h3>Uptime</h3>
 	<?=$uptime['days']?> days, <?=$uptime['hours']?> hours and <?=$uptime['minutes']?> minutes
 	<h3>Load</h3>
@@ -71,5 +22,12 @@
 		<?php } ?>
 	</table>
 	<h3>Process List</h3>
-	<table id="processTable"></table>
+	<input type="number" ng-model="procesRefreshInterval" min="1" />
+	<table id="processTable">
+		<tr>
+			<th ng-repeat="header in processes.headers">{{header}}</th>
+		</tr>
+		<tr ng-repeat="data in processes.data"><td ng-repeat="col in data">{{col}}</td></tr>
+	</table>
+</div>
 }@

base/View.php

@@ -1,15 +1,15 @@
 <?php
-$files=glob('Converters/*');
-//var_dump($files);
-foreach ($files as $file)
-	include_once $file;
 
 class View{
-	private $_view,$_variables;
+	private $_view,$_variables,$_cssFiles,$_jsFiles;
 	
 	public function __construct($view, $variables=array()) {
 		$this->_view=$view;
+		if (isset($variables['this']))
+			throw new Exception("'this' is a reserved variable index");
 		$this->_variables=$variables;
+		$this->_cssFiles=array();
+		$this->_jsFiles=array();
 	}
 	
 	// This is here to force the IConvertible interface use
@@ -54,4 +54,20 @@ class View{
 		
 		return $output;
 	}
+	
+	public function RegisterCSSFile($path){
+		$this->_cssFiles[]=$path;
+	}
+	
+	public function GetCSSFiles() {
+		return $this->_cssFiles;
+	}
+	
+	public function RegisterJSFile($path){
+		$this->_jsFiles[]=$path;
+	}
+	
+	public function GetJSFiles() {
+		return $this->_jsFiles;
+	}
 }

scripts/controllers/main.js

@@ -0,0 +1,4 @@
+/* global app, angular */
+
+var app=angular.module("robware",[]);
+

scripts/controllers/status.js

@@ -0,0 +1,21 @@
+app.controller('status', function ($scope, statusService, $interval) {
+	function reloadProcesses() {
+		statusService.getProcesses()
+			.then(
+				function (data) {
+					$scope.processes = data;
+				}
+			);
+	}
+
+	$scope.processses = {};
+	$scope.procesRefreshInterval = 5;
+	var refresh = $interval(reloadProcesses, $scope.procesRefreshInterval * 1000);
+	reloadProcesses();
+
+	$scope.$watch("procesRefreshInterval", function () {
+		$interval.cancel(refresh);
+		refresh = $interval(reloadProcesses, $scope.procesRefreshInterval * 1000);
+	});
+});
+

javascript.js

@@ -51,12 +51,7 @@ $(function(){
 	});
 	
 	$("#content").css("margin-bottom",window.innerHeight-$("#buttons").offset().top);
-	
-	$("#cookiePopup button").click(function(){
-		$("#cookiePopup").fadeOut();
-		CreateCookie("cookiePopupConfirmed",true,3650); // ten years should do it
-	});
-	
+		
 	$("#menu-button").click(function(e){
 		$("#menu").show("slide", {direction: "left", easing:'easeOutCirc'});
 		$("body>.backdrop").fadeIn();

scripts/services/statusService.js

@@ -0,0 +1,48 @@
+app.service('statusService', function($http, $q) {
+	function parseProcessData(data) {
+		var headers = data.shift();
+		var cpuIndex = -1;
+		var ignoreColNames = ["user", "pid", "vsz", "rss", "tty", "stat"];
+		var ignoreCols = [];
+
+		var processHeaders = []
+		for (var col in headers) {
+			if (headers[col].toLowerCase() === "%cpu")
+				cpuIndex = col;
+
+			if (ignoreColNames.indexOf(headers[col].toLowerCase()) > -1)
+				ignoreCols.push(col);
+			else
+				processHeaders.push(headers[col]);
+		}
+
+		data.sort(function (a, b) {
+			cpuA = parseFloat(a[cpuIndex]);
+			cpuB = parseFloat(b[cpuIndex]);
+			if (cpuA > cpuB)
+				return -1;
+			if (cpuA < cpuB)
+				return 1
+			return 0;
+		});
+
+		var processData = [];
+		for (var row in data) {
+			var obj = {};
+			for (var col in data[row]) {
+				if (ignoreCols.indexOf(col) === -1)
+					obj[headers[col]] = data[row][col];
+			}
+			processData.push(obj);
+		}
+
+		return [processHeaders, processData];
+	}
+	
+	this.getProcesses = function() {
+		return $http.get('/status/getprocesses').then(function(response) {
+			parsedData = parseProcessData(response.data);
+			return {headers: parsedData[0], data: parsedData[1]};
+		});
+	};
+});

template.php

@@ -1,4 +1,7 @@
 <?php
+$this->RegisterJSFile("javascript.js");
+$this->RegisterJSFile("controllers/main.js");
+
 function FormatURI(URI $uri, $base=""){
 	$image=$uri->GetImage();
 	$imageHTML="";
@@ -7,9 +10,11 @@ function FormatURI(URI $uri, $base=""){
 	return '<a href="'.$base.$uri->GetLinkLocation().'">'.$imageHTML.$uri->GetText().'</a>';
 }
 ?>
-
+<?php
+{@Init}
+?>
 <!DOCTYPE html>
-<html>
+<html ng-app="robware">
 	<head>
 		<title>
 			{@Title}<?php
@@ -20,9 +25,12 @@ function FormatURI(URI $uri, $base=""){
 		</title>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
-		<link href="/css/style.css" rel="stylesheet" />
-		<link href="/css/style-med.css" media="(max-width:1023px)" rel="stylesheet" />
-		<link href="/css/style-small.css" media="(max-width:680px)" rel="stylesheet" />
+		<link href="/css/style.css?t=<?= filemtime("css/style.css") ?>" rel="stylesheet" />
+		<link href="/css/style-med.css?t=<?= filemtime("css/style-med.css") ?>" media="(max-width:1023px)" rel="stylesheet" />
+		<link href="/css/style-small.css?t=<?= filemtime("css/style-small.css") ?>" media="(max-width:680px)" rel="stylesheet" />
+		<?php foreach ($this->GetCSSFiles() as $css){
+			echo '<link href="/css/',$css,'?t=', filemtime('css/'.$css),'" rel="stylesheet" />';
+		}?>
 		<style type="text/css">
 			{@CSS}
 		</style>
@@ -32,9 +40,12 @@ function FormatURI(URI $uri, $base=""){
 		<style media="(max-width:680px)">
 			{@CSSSmall}
 		</style>
+		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
-		<script src="/javascript.js"></script>
+		<?php foreach ($this->GetJSFiles() as $js){
+			echo '<script src="/scripts/',$js,'?t=', filemtime('scripts/'.$js),'"></script>';
+		}?>
 		<script type="text/javascript">
 			{@JavaScript}
 		</script>
@@ -110,30 +121,6 @@ function FormatURI(URI $uri, $base=""){
 			</div>
 			<div id="footer">{@Footer}</div>
 		</div>
-		<?php if (!isset($_COOKIE['cookiePopupConfirmed']) || $_COOKIE['cookiePopupConfirmed']!=true) { ?>
-			<div id="cookiePopup">
-				<p>This site uses cookies. Please leave if you're not OK with this.</p>
-				<p>In a hilarious twist of irony, we have to store a cookie to stop this popup appearing on every page.</p>
-				<div>
-					<button>OK</button>
-				</div>
-			</div>
-		<?php }?>
 		<div class="backdrop"></div>
-		<!-- Piwik -->
-		<!--script type="text/javascript">
-			var _paq = _paq || [];
-			_paq.push(['trackPageView']);
-			_paq.push(['enableLinkTracking']);
-			(function() {
-				var u="//piwik.robware.uk/";
-				_paq.push(['setTrackerUrl', u+'piwik.php']);
-				_paq.push(['setSiteId', 1]);
-				var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-				g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
-			})();
-		</script>
-		<noscript><p><img src="//piwik.robware.uk/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
-		<!-- End Piwik Code -->
 	</body>
 </html>