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();
/**
* 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 = '';
@ -240,6 +256,10 @@ abstract class AbstractController implements ControllerInterface {
if(psm_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
$this->setTemplateId('main');
@ -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

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
*/
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');

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/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}

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

@ -1,43 +1,73 @@
<!--%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="entity-container">
<!--%tpl_repeat_servers_offline-->
<div class="offline">
<div class="entity {class_warning}" onclick="window.location.href='{url_view}'">
<h2>{label}</h2>
<p>{label_last_online}: {last_online_nice}</p>
<p>{label_last_check}: {last_checked_nice}</p>
<div class="tab-content">
<div id="flow-layout" class="tab-pane active">
<div class="entity-container">
<!--%tpl_repeat_servers_offline-->
<div class="offline">
<div class="entity {class_warning}" onclick="window.location.href='{url_view}'">
<h2>{label}</h2>
<p>{label_last_online}: {last_online_nice}</p>
<p>{label_last_check}: {last_checked_nice}</p>
</div>
</div>
<!--%%tpl_repeat_servers_offline-->
{servers_offline}
<!--%tpl_repeat_servers_online-->
<div class="online">
<div class="entity" onclick="window.location.href='{url_view}'">
<h2>{label}</h2>
<p>{label_last_online}: {last_checked_nice}</p>
<p>{label_rtime}: {rtime}s</p>
</div>
</div>
<!--%%tpl_repeat_servers_online-->
{servers_online}
</div>
</div>
<!--%%tpl_repeat_servers_offline-->
{servers_offline}
<!--%tpl_repeat_servers_online-->
<div class="online">
<div class="entity" onclick="window.location.href='{url_view}'">
<h2>{label}</h2>
<p>{label_last_online}: {last_checked_nice}</p>
<p>{label_rtime}: {rtime}s</p>
<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>
<!--%%tpl_repeat_servers_online-->
{servers_online}
</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;
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{