Status list layout

2014-04-26 16:31:59 +02:00 · 2014-04-26 16:31:59 +02:00 · d7f36da391
parent f8bb776cd1
commit d7f36da391
5 changed files with 184 additions and 41 deletions
--- a/src/psm/Module/AbstractController.class.php
+++ b/src/psm/Module/AbstractController.class.php
@ -86,6 +86,12 @@ abstract class AbstractController implements ControllerInterface {
 	 */
 	protected $modal = array();

+	/**
+	 * html code of header accessories
+	 * @var string $header_accessories
+	 */
+	protected $header_accessories;
+
 	/**
 	 * Database object
 	 * @var \psm\Service\Database $db
@ -125,6 +131,12 @@ abstract class AbstractController implements ControllerInterface {
 	 */
 	protected $user_level_required_actions = array();

+	/*
+	 * Required using black background layout
+	 * @var boolean $black_background
+	 */
+	protected $black_background = false;
+	
 	/**
 	 * XHR mode?
 	 * @var boolean $xhr
@ -214,6 +226,10 @@ abstract class AbstractController implements ControllerInterface {
 			if($this->add_menu) {
 				$tpl_data['html_menu'] = $this->createHTMLMenu();
 			}
+			// add header accessories to page ?
+			if($this->header_accessories) {
+				$tpl_data['header_accessories'] = $this->header_accessories;
+			}
 			// add modal dialog to page ?
 			if(sizeof($this->modal)) {
 				$html_modal = '';
@ -241,6 +257,10 @@ abstract class AbstractController implements ControllerInterface {
 				$tpl_data['update_available'] = str_replace('{version}', 'v'.psm_get_conf('version_update_check'), psm_get_lang('system', 'update_available'));
 			}
 			
+			if($this->black_background) {
+				$tpl_data['body_class'] = 'black_background';
+			}
+
 			// add the module's custom template to the main template to get some content
 			$this->setTemplateId('main');
 			$this->tpl->addTemplatedata($this->getTemplateId(), $tpl_data);
@ -497,6 +517,14 @@ abstract class AbstractController implements ControllerInterface {
 		return $this;
 	}

+	/**
+	 * Set the html code of the header accessories
+	 * @param string $html
+	 */
+	public function setHeaderAccessories($html) {
+		$this->header_accessories = $html;
+	}
+	
 	/**
 	 * Check if XHR is on
 	 * @return boolean
--- a/src/psm/Module/Server/Controller/StatusController.class.php
+++ b/src/psm/Module/Server/Controller/StatusController.class.php
@ -46,6 +46,14 @@ class StatusController extends AbstractServerController {
 	 * @todo move the background colurs to the config
 	 */
 	protected function executeIndex() {
+		// set background color to black
+		$this->black_background = true;
+		
+		// add header accessories
+		$this->tpl->newTemplate('status_layout_selector', 'server/status.tpl.html');
+		$html_accessories = $this->tpl->getTemplate('status_layout_selector');
+		$this->setHeaderAccessories($html_accessories);
+		
 		$this->setTemplateId('server_status', 'server/status.tpl.html');
 		$this->addFooter(false);

@ -76,6 +84,8 @@ class StatusController extends AbstractServerController {
 		// add servers to template
 		$this->tpl->addTemplateDataRepeat($this->getTemplateId(), 'servers_offline', $offline);
 		$this->tpl->addTemplateDataRepeat($this->getTemplateId(), 'servers_online', $online);
+		$this->tpl->addTemplateDataRepeat($this->getTemplateId(), 'servers_offline2', $offline);
+		$this->tpl->addTemplateDataRepeat($this->getTemplateId(), 'servers_online2', $online);

 		// check if we need to add the auto refresh
 		$auto_refresh = psm_get_conf('auto_refresh_servers');
--- a/src/templates/main.tpl.html
+++ b/src/templates/main.tpl.html
@ -22,7 +22,7 @@
    <script type="text/javascript" src="static/plugin/twitter-bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="static/js/scripts.js"></script>
  </head>
-  <body data-spy="scroll" data-target=".subnav" data-offset="50">
+  <body data-spy="scroll" data-target=".subnav" data-offset="50" class="{body_class}">
    <!-- navbar -->
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
@ -43,7 +43,8 @@
    <!-- container -->
    <div id="main-container">
 		<div class="page-header">
-			<h1>{subtitle}</h1>
+			<div class="header-label"><h1>{subtitle}</h1></div>
+			<div class="header-accessories">{header_accessories}</div>
 		</div>
 		<div id="main-content">
 			{html_sidebar}
--- a/src/templates/server/status.tpl.html
+++ b/src/templates/server/status.tpl.html
@ -1,23 +1,6 @@
 <!--%tpl_server_status-->
-<style type="text/css">
-	body {
-		background: black;
-	}
-
-	.page-header {
-		border-bottom: 0;
-	}
-
-	h2, p {
-		margin: 0;
-		padding: 0;
-	}
-
-	h2 {
-		margin-bottom: 10px;
-	}
-
-</style>
+<div class="tab-content">
+	<div id="flow-layout" class="tab-pane active">
 		<div class="entity-container">
 			<!--%tpl_repeat_servers_offline-->
 			<div class="offline">
@ -40,4 +23,51 @@
 			<!--%%tpl_repeat_servers_online-->
 			{servers_online}
 		</div>
+	</div>
+	<div id="list-layout" class="tab-pane">
+		<div class="entity-container">
+			<table class="table table-bordered">
+				<tbody>
+					<!--%tpl_repeat_servers_offline2-->
+						<tr class="row-offline" onclick="window.location.href='{url_view}'">
+							<td class="{class_warning}"><div class="server-name">{label}</div>
+								<div class="visible-phone">
+									<div class="table-body">
+										<div class="table-row"><div class="table-cell-details tight">{label_last_online}: &nbsp;</div><div class="table-cell-details">{last_online_nice}</div></div>
+										<div class="table-row"><div class="table-cell-details tight">{label_last_check}: &nbsp;</div><div class="table-cell-details">{last_checked_nice}</div></div>
+									</div>
+								</div>
+							</td>
+							<td class="{class_warning} hidden-phone">{label_last_online}: {last_online_nice}</td>
+							<td class="{class_warning} hidden-phone">{label_last_check}: {last_checked_nice}</td>
+						</tr>
+					<!--%%tpl_repeat_servers_offline2--> 
+					{servers_offline2}
+					<!--%tpl_repeat_servers_online2-->
+						<tr class="row-online" onclick="window.location.href='{url_view}'">
+							<td><div class="server-name">{label}</div>
+								<div class="visible-phone">
+									<div class="table-body">
+										<div class="table-row"><div class="table-cell-details tight">{label_last_online}: &nbsp;</div><div class="table-cell-details">{last_online_nice}</div></div>
+										<div class="table-row"><div class="table-cell-details tight">{label_rtime}: &nbsp;</div><div class="table-cell-details">{rtime}</div></div>
+									</div>
+								</div>
+							</td>
+							<td class="hidden-phone">{label_last_online}: {last_online_nice}</td>
+							<td class="hidden-phone">{label_rtime}: {rtime}s</td>
+						</tr>
+					<!--%%tpl_repeat_servers_online2-->
+					{servers_online2}
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>
 <!--%%tpl_server_status-->
+
+<!--%tpl_status_layout_selector-->
+<div class="btn-group" data-toggle="buttons-radio">
+	<button class="btn active" data-toggle="tab" data-target="#flow-layout"><i class="icon-th-large"></i></button>
+	<button class="btn" data-toggle="tab" data-target="#list-layout"><i class="icon-th-list"></i></button>
+</div>
+<!--%%tpl_status_layout_selector-->
--- a/static/css/style.css
+++ b/static/css/style.css
@ -10,6 +10,19 @@ body {
 	-ms-user-select: none;
 	user-select: none;
 }
+
+body.black_background {
+	background: black;
+}
+
+body.black_background .page-header {
+	border-bottom: 0;
+}
+
+body.black_background .page-header  h1 {
+	color: #888;
+}
+
 .navbar-fixed-top {
 	position: fixed;
 	margin: 0;
@ -55,6 +68,23 @@ body {
 	white-space: nowrap;
 }

+.page-header {
+	display: table;
+	width: 100%;
+}
+.header-label {
+	display: table-cell;
+}
+.header-accessories {
+	display: table-cell;
+	white-space: nowrap;
+	text-align: right;
+}
+.header-accessories .btn-group {
+	display: inline-block;
+	vertical-align: bottom;
+}
+
 table {
  background-color: white;
 }
@ -64,9 +94,12 @@ fieldset {
 .tab-content {
 	display: block;
 	width: auto;
-	padding-top: 19px;
+	padding-top: 0;
 	padding-bottom: 0;
 }
+.tab-content.well {
+	padding-top: 19px;
+}
 .nav-tabs {
 	position: relative;
 	top: 1px;
@ -163,6 +196,7 @@ legend {
 	color: #666;
 }

+/* Status page */
 .offline, .online {
 	display: inline-block;
 	width: 100%;
@ -177,6 +211,13 @@ legend {
 	margin-bottom: 20px;
 	cursor: pointer;
 }
+.entity h2 {
+	margin-bottom: 10px;
+}
+.entity p {
+	margin: 0;
+	padding: 0;
+}
 .offline .entity {
 	background: #a00000;
 	color: #f7cece;
@ -192,6 +233,33 @@ legend {
 	color: #d8f7ce;
 	border: 2px solid #d8f7ce;
 }
+.entity-container table td {
+	padding: 6px 8px;
+	vertical-align: middle;
+}
+.row-offline td, .row-offline tr:hover td {
+	background: #a00000 !important;
+	color: #f7cece;
+}
+.row-offline td.warning, .row-offline tr:hover tr.warning {
+	background: #FAA732 !important;
+	color: #F3F3B1;
+}
+.row-online td, .row-online tr:hover td {
+	background: #53a000 !important;
+	color: #d8f7ce;
+}
+.entity-container .server-name {
+	display: inline-block;
+	font-size: 1.15em;
+	line-height: 18px;
+	font-weight: bold;
+	white-space: nowrap;
+}
+
+.visible-small {
+	display: none;
+}

 td.visible-desktop, th.visible-desktop,
 td.hidden-phone, th.hidden-phone,
@ -239,7 +307,7 @@ span.hidden-desktop, span.hidden-desktop {
 	.visible-desktop {
 		display: none !important;
 	}
-	.tab-content {
+	.tab-content.well {
 		padding-left: 10px;
 		padding-right: 10px;
 	}
@ -306,6 +374,12 @@ span.hidden-desktop, span.hidden-desktop {
 		text-align: center !important;
 		background-color: white;
 	}
+	.visible-small {
+		display: block;
+	}
+	td.visible-small {
+		display: table-cell;
+	}
 }

 body.install{