auto arrange panels

mcurry · Jul 3, 2009 · cc135ec · cc135ec
1 parent eb29aa9
commit cc135ec
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 41 deletions.
diff --git a/config/status.php.default b/config/status.php.default
@@ -3,7 +3,7 @@ class STATUS_CONFIG {
 
   var $googleAnalytics = array(
     'datasource' => 'google_analytics',
-    'username' => 'xxxx',
+    'email' => 'xxxx',
     'password' => 'yyyy',
   );
 

diff --git a/models/status_console.php b/models/status_console.php
@@ -2,5 +2,23 @@
 class StatusConsole extends StatusAppModel {
 	var $name = 'StatusConsole';
 	var $order = 'started DESC';
+
+	function afterFind($results) {
+		foreach($results as $i => $result) {
+			if(!empty($result['StatusConsole']['runtime'])) {
+				$results[$i]['StatusConsole']['runtime'] = $this->__timeHumanize($result['StatusConsole']['runtime']);
+			}
+		}
+
+		return $results;
+	}
+
+	function __timeHumanize($time) {
+		if($time > 1000) {
+			return round($time / 1000, 1) . 's';
+		}
+
+		return $time . 'ms';
+	}
 }
 ?>
diff --git a/vendors/css/status.css b/vendors/css/status.css
@@ -1,10 +1,24 @@
 /* =General
 -----------------------------------------------------------------------------*/
+html, body, ul, ol, li, p,
+h1, h2, h3, h4, h5, h6,
+form, fieldset, a, img {
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
 body {
-	font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
-	font-size:.7em;
+	font: 100.01% Arial, Verdana, Helvetica, sans-serif;
+	color: #000;
+	background: #fff;
 }
 
+#status-dashboard {
+	font-size: .7em;
+	margin: 10px;
+	position: relative;
+}
 .status-detail {
 	cursor: pointer;
 }
@@ -45,12 +59,30 @@ body {
 table {
 	border-collapse: collapse;
 	margin: 0;
+	background: #fff;
+	border:1px solid #ccc;
+	border-right:0;
+	clear: both;
+	color: #333;
+	width: 100%;
 }
 table tr th,
 table tr td {
 	text-align: left;
 	border: 1px solid #ccc;
 }
+th {
+	background: #f2f2f2;
+	border:1px solid #bbb;
+	border-top: 1px solid #fff;
+	border-left: 1px solid #fff;
+}
+table tr td {
+	background: #fff;
+	border-right: 1px solid #ccc;
+	padding: 4px;
+	vertical-align: top;
+}
 
 /* =Messages
 -----------------------------------------------------------------------------*/

diff --git a/vendors/js/jquery.arrange.js b/vendors/js/jquery.arrange.js
@@ -0,0 +1,67 @@
+(function($) {
+	var options = null;
+
+	$.fn.arrange = function(opts) {
+		options = $.extend({}, $.fn.arrange.defaults, opts);
+
+		return this.each(function() {
+			$elem = $(this);
+			$(window).resize(function(){
+				$.fn.arrange.run($elem);
+			}).resize();
+		});
+	};
+
+	$.fn.arrange.run = function($this) {
+		totalWidth = $this.width();
+		totalColumns = Math.floor(totalWidth / options.bestWidth);
+		width = Math.floor((totalWidth - (totalColumns * options.margin)) / totalColumns);
+
+		columnsHeight = {};
+		row = 0;
+		col = 0;
+
+		for (i = 0; i < totalColumns; i++) {
+			columnsHeight[i] = 0;
+		}
+
+		$this.children("div").each(function(i) {
+			if (i % totalColumns == 0) {
+				row++;
+				col = 0;
+			}
+
+			bestColumn = col;
+			if (row == 1) {
+				height = 0;
+				top = columnsHeight[bestColumn];
+			} else {
+				bestColumn = null;
+				for (i = 0; i < totalColumns; i++) {
+					if (bestColumn == null || columnsHeight[i] < columnsHeight[bestColumn]) {
+						bestColumn = i;
+					}
+				}
+
+				top = (columnsHeight[bestColumn] + options.margin) + "px";
+			}
+
+			css = {
+				width: width + "px",
+				position: "absolute",
+				left: ((bestColumn * width) + (bestColumn * options.margin)) + "px",
+				top: top
+			};
+			$(this).css(css);
+
+			columnsHeight[bestColumn] += $(this).outerHeight() + options.margin;
+			col++;
+		})
+	};
+
+	$.fn.arrange.defaults = {
+		bestWidth: 350,
+		margin: 20
+	};
+
+})(jQuery);
diff --git a/vendors/shells/tasks/log.php b/vendors/shells/tasks/log.php
@@ -18,7 +18,7 @@ function start() {
 	}
 
 	function out($message) {
-		$this->output = $message . "\n";
+		$this->output .= $message . "\n";
 	}
 
 	function __destruct() {

diff --git a/views/elements/shell.ctp b/views/elements/shell.ctp
@@ -28,11 +28,11 @@
 					?></td></tr>
 					<tr><td><?php __('Output') ?></td><td><?php echo nl2br($row['StatusConsole']['output']) ?></td></tr>
 					<tr><td><?php __('Started') ?></td><td><?php echo $row['StatusConsole']['created'] ?></td></tr>
-					<tr><td><?php __('Runtime') ?></td><td><?php echo $row['StatusConsole']['runtime'] ?>ms</td></tr>
+					<tr><td><?php __('Runtime') ?></td><td><?php echo $row['StatusConsole']['runtime'] ?></td></tr>
 				</table>
 			</div>
 		</td>
-		<td><?php echo $row['StatusConsole']['runtime'] ?>ms</td>
+		<td><?php echo $row['StatusConsole']['runtime'] ?></td>
 	</tr>
 <?php } ?>
 </table>

diff --git a/views/layouts/default.ctp b/views/layouts/default.ctp
@@ -33,41 +33,19 @@
 		echo $html->meta('icon');
 
 		echo $javascript->link(array('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',
-																 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'));
+																 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js',
+																 '/status/js/jquery.arrange.js'));
 		echo $html->css(array('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css',
-													'cake.generic', '/status/css/status'));
+													'/status/css/status'));
 
 		echo $scripts_for_layout;
 	?>
 </head>
 <body>
 	<div id="container">
-		<div id="header">
-			<h1><?php echo $html->link(__('Status Dashboard', true), 'http://github.com/mcurry/status'); ?></h1>
-		</div>
 		<div id="content">
-
-			<?php $session->flash(); ?>
-
 			<?php echo $content_for_layout; ?>
-
-		</div>
-		<div id="footer">
-			<?php echo $html->link(
-					'A PsuedoCoder.com Product',
-					'http://www.pseudocoder.com/',
-					array('target'=>'_blank'), null, false
-				);
-			?>
-
-			<?php echo $html->link(
-					$html->image('cake.power.gif', array('alt'=> __("CakePHP: the rapid development php framework", true), 'border'=>"0")),
-					'http://www.cakephp.org/',
-					array('target'=>'_blank'), null, false
-				);
-			?>
 		</div>
 	</div>
-	<?php echo $cakeDebug; ?>
 </body>
 </html>
diff --git a/views/status/index.ctp b/views/status/index.ctp
@@ -1,11 +1,24 @@
-<?php
-	foreach($panels as $panel) {
-		//echo '<div id=' . $plugin['name'] . 'Block></div>';
-		$options = array('plugin' => Inflector::underscore($panel['plugin']),
-										 'options' => $panel['options']);
+<div id="status-dashboard">
+	<?php
+		foreach($panels as $panel) {
+			//echo '<div id=' . $plugin['name'] . 'Block></div>';
+			$options = array('plugin' => Inflector::underscore($panel['plugin']),
+											 'options' => $panel['options']);
+
+			echo '<div id="' . $panel['plugin'] . Inflector::classify($panel['element']) . 'Block" class="block">'
+				. $this->element($panel['element'], $options)
+				. '</div>';
+		}
+	?>
+</div>
 
-		echo '<div id="' . $panel['plugin'] . Inflector::classify($panel['element']) . 'Block" class="block">'
-			. $this->element($panel['element'], $options)
-			. '</div>';
-	}
-?>
+<script type="text/javascript">
+	$(function(){
+		$("#status-dashboard").arrange();
+
+		$("#status-dashboard").ajaxComplete(function(event, request, settings){
+			 $("#status-dashboard").arrange();
+		 });
+
+	});
+</script>