echosystem.fr
/
phpservermon
mirror of https://github.com/phpservermon/phpservermon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Status list layout

This commit is contained in:
jerome 2014-04-26 16:31:59 +02:00 committed by Pepijn Over
parent f8bb776cd1
commit d7f36da391
5 changed files with 184 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/psm/Module/AbstractController.class.php
View File

@ -86,6 +86,12 @@ abstract class AbstractController implements ControllerInterface {
*/ */
protected $modal = array(); protected $modal = array();
/**
* html code of header accessories
* @var string $header_accessories
*/
protected $header_accessories;
/** /**
* Database object * Database object
* @var \psm\Service\Database $db * @var \psm\Service\Database $db
@ -125,6 +131,12 @@ abstract class AbstractController implements ControllerInterface {
*/ */
protected $user_level_required_actions = array(); protected $user_level_required_actions = array();
/*
* Required using black background layout
* @var boolean $black_background
*/
protected $black_background = false;
/** /**
* XHR mode? * XHR mode?
* @var boolean $xhr * @var boolean $xhr
@ -214,6 +226,10 @@ abstract class AbstractController implements ControllerInterface {
if($this->add_menu) { if($this->add_menu) {
$tpl_data['html_menu'] = $this->createHTMLMenu(); $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 ? // add modal dialog to page ?
if(sizeof($this->modal)) { if(sizeof($this->modal)) {
$html_modal = ''; $html_modal = '';
@ -240,6 +256,10 @@ abstract class AbstractController implements ControllerInterface {
if(psm_update_available()) { if(psm_update_available()) {
$tpl_data['update_available'] = str_replace('{version}', 'v'.psm_get_conf('version_update_check'), psm_get_lang('system', 'update_available')); $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 // add the module's custom template to the main template to get some content
$this->setTemplateId('main'); $this->setTemplateId('main');
@ -497,6 +517,14 @@ abstract class AbstractController implements ControllerInterface {
return $this; 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 * Check if XHR is on
* @return boolean * @return boolean

10
src/psm/Module/Server/Controller/StatusController.class.php
View File

@ -46,6 +46,14 @@ class StatusController extends AbstractServerController {
* @todo move the background colurs to the config * @todo move the background colurs to the config
*/ */
protected function executeIndex() { 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->setTemplateId('server_status', 'server/status.tpl.html');
$this->addFooter(false); $this->addFooter(false);
@ -76,6 +84,8 @@ class StatusController extends AbstractServerController {
// add servers to template // add servers to template
$this->tpl->addTemplateDataRepeat($this->getTemplateId(), 'servers_offline', $offline); $this->tpl->addTemplateDataRepeat($this->getTemplateId(), 'servers_offline', $offline);
$this->tpl->addTemplateDataRepeat($this->getTemplateId(), 'servers_online', $online); $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 // check if we need to add the auto refresh
$auto_refresh = psm_get_conf('auto_refresh_servers'); $auto_refresh = psm_get_conf('auto_refresh_servers');

5
src/templates/main.tpl.html
View File

@ -22,7 +22,7 @@
<script type="text/javascript" src="static/plugin/twitter-bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="static/plugin/twitter-bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/scripts.js"></script> <script type="text/javascript" src="static/js/scripts.js"></script>
</head> </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 --> <!-- navbar -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
@ -43,7 +43,8 @@
<!-- container --> <!-- container -->
<div id="main-container"> <div id="main-container">
<div class="page-header"> <div class="page-header">
<h1>{subtitle}</h1> <div class="header-label"><h1>{subtitle}</h1></div>
<div class="header-accessories">{header_accessories}</div>
</div> </div>
<div id="main-content"> <div id="main-content">
{html_sidebar} {html_sidebar}

104
src/templates/server/status.tpl.html
View File

@ -1,43 +1,73 @@
<!--%tpl_server_status--> <!--%tpl_server_status-->
<style type="text/css"> <div class="tab-content">
body { <div id="flow-layout" class="tab-pane active">
background: black; <div class="entity-container">
} <!--%tpl_repeat_servers_offline-->
<div class="offline">
.page-header { <div class="entity {class_warning}" onclick="window.location.href='{url_view}'">
border-bottom: 0; <h2>{label}</h2>
} <p>{label_last_online}: {last_online_nice}</p>
<p>{label_last_check}: {last_checked_nice}</p>
h2, p { </div>
margin: 0; </div>
padding: 0; <!--%%tpl_repeat_servers_offline-->
} {servers_offline}
<!--%tpl_repeat_servers_online-->
h2 { <div class="online">
margin-bottom: 10px; <div class="entity" onclick="window.location.href='{url_view}'">
} <h2>{label}</h2>
<p>{label_last_online}: {last_checked_nice}</p>
</style> <p>{label_rtime}: {rtime}s</p>
<div class="entity-container"> </div>
<!--%tpl_repeat_servers_offline--> </div>
<div class="offline"> <!--%%tpl_repeat_servers_online-->
<div class="entity {class_warning}" onclick="window.location.href='{url_view}'"> {servers_online}
<h2>{label}</h2>
<p>{label_last_online}: {last_online_nice}</p>
<p>{label_last_check}: {last_checked_nice}</p>
</div> </div>
</div> </div>
<!--%%tpl_repeat_servers_offline--> <div id="list-layout" class="tab-pane">
{servers_offline} <div class="entity-container">
<!--%tpl_repeat_servers_online--> <table class="table table-bordered">
<div class="online"> <tbody>
<div class="entity" onclick="window.location.href='{url_view}'"> <!--%tpl_repeat_servers_offline2-->
<h2>{label}</h2> <tr class="row-offline" onclick="window.location.href='{url_view}'">
<p>{label_last_online}: {last_checked_nice}</p> <td class="{class_warning}"><div class="server-name">{label}</div>
<p>{label_rtime}: {rtime}s</p> <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> </div>
<!--%%tpl_repeat_servers_online-->
{servers_online}
</div> </div>
<!--%%tpl_server_status--> <!--%%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-->

78
static/css/style.css
View File

@ -10,6 +10,19 @@ body {
-ms-user-select: none; -ms-user-select: none;
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 { .navbar-fixed-top {
position: fixed; position: fixed;
margin: 0; margin: 0;
@ -55,6 +68,23 @@ body {
white-space: nowrap; 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 { table {
background-color: white; background-color: white;
} }
@ -64,9 +94,12 @@ fieldset {
.tab-content { .tab-content {
display: block; display: block;
width: auto; width: auto;
padding-top: 19px; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.tab-content.well {
padding-top: 19px;
}
.nav-tabs { .nav-tabs {
position: relative; position: relative;
top: 1px; top: 1px;
@ -163,6 +196,7 @@ legend {
color: #666; color: #666;
} }
/* Status page */
.offline, .online { .offline, .online {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@ -177,6 +211,13 @@ legend {
margin-bottom: 20px; margin-bottom: 20px;
cursor: pointer; cursor: pointer;
} }
.entity h2 {
margin-bottom: 10px;
}
.entity p {
margin: 0;
padding: 0;
}
.offline .entity { .offline .entity {
background: #a00000; background: #a00000;
color: #f7cece; color: #f7cece;
@ -192,6 +233,33 @@ legend {
color: #d8f7ce; color: #d8f7ce;
border: 2px solid #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.visible-desktop, th.visible-desktop,
td.hidden-phone, th.hidden-phone, td.hidden-phone, th.hidden-phone,
@ -239,7 +307,7 @@ span.hidden-desktop, span.hidden-desktop {
.visible-desktop { .visible-desktop {
display: none !important; display: none !important;
} }
.tab-content { .tab-content.well {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
@ -306,6 +374,12 @@ span.hidden-desktop, span.hidden-desktop {
text-align: center !important; text-align: center !important;
background-color: white; background-color: white;
} }
.visible-small {
display: block;
}
td.visible-small {
display: table-cell;
}
} }
body.install{ body.install{