Custom website dashboard starter pack
<?php | |
/** | |
* @package Watchful Sites overview | |
* @author Watchful | |
* @authorUrl https://watchful.net | |
* This sample dashboard is intended for educational purposes only. | |
* It is not suitable for production environments. | |
* Be sure to always protect your API key from public exposure. | |
*/ | |
//Config | |
define('API_KEY', 'YOUR_API_KEY_HERE'); | |
define('BASE_URL', 'https://app.watchful.net/api/v1'); | |
$ch = curl_init(BASE_URL . '/sites?limit=100&order=access_url+'); | |
$options = array( | |
CURLOPT_RETURNTRANSFER => true, | |
CURLOPT_SSL_VERIFYPEER => false, | |
CURLOPT_CUSTOMREQUEST => 'GET', | |
CURLOPT_HTTPHEADER => array( | |
'Api-Key: ' . API_KEY, | |
'Content-type: application/json', | |
'Accept: application/json' | |
) , | |
); | |
curl_setopt_array($ch, ($options)); | |
// retrieve data | |
$watchful = json_decode(curl_exec($ch)); | |
// if no error proceed | |
if (!$watchful->error): | |
$sitesdata = $watchful | |
->msg->data; | |
endif; | |
?> | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Simple website dashboard based on the Watchful API</title> | |
<meta name="description" content="A simple website agency dashboard built with the Watchful API."> | |
<meta name="author" content="Watchful"> | |
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> | |
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> | |
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<script> | |
$(document).ready(function() { | |
$('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');}); | |
$('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');}); | |
}); | |
</script> | |
<style type="text/css"> | |
.view-group { | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-direction: row; | |
flex-direction: row; | |
padding-left: 0; | |
margin-bottom: 0; | |
} | |
.thumbnail | |
{ | |
margin-bottom: 30px; | |
padding: 0px; | |
-webkit-border-radius: 0px; | |
-moz-border-radius: 0px; | |
border-radius: 0px; | |
} | |
.card { | |
width: 100%; | |
} | |
.hidden { | |
display: none; | |
} | |
.item.list-group-item | |
{ | |
float: none; | |
width: 100%; | |
background-color: #fff; | |
margin-bottom: 30px; | |
-ms-flex: 0 0 100%; | |
flex: 0 0 100%; | |
max-width: 100%; | |
padding: 0 1rem; | |
border: 0; | |
} | |
.item.list-group-item .img-event { | |
float: left; | |
width: 30%; | |
} | |
.item.list-group-item .list-group-image | |
{ | |
margin-right: 10px; | |
} | |
.item.list-group-item .thumbnail | |
{ | |
margin-bottom: 0px; | |
display: inline-block; | |
} | |
.item.list-group-item .caption | |
{ | |
float: left; | |
width: 70%; | |
margin: 0; | |
} | |
.item.list-group-item:before, .item.list-group-item:after | |
{ | |
display: table; | |
content: " "; | |
} | |
.item.list-group-item:after | |
{ | |
clear: both; | |
} | |
.card .card-body span.group.inner.list-group-item-text, .card .card-body span.lead { | |
display: block; | |
} | |
.list-group-item .card .card-body span.group.inner.list-group-item-text { | |
display: contents; | |
} | |
.list-group-item .card .card-body .site-details span:not(:last-child):after { | |
content: " | "; | |
} | |
.card .card-body .site-tags { | |
padding: 0 0 10px 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-lg-12 my-3"> | |
<div class="pull-right"> | |
<div class="btn-group"> | |
<button class="btn btn-danger" id="grid"> | |
Grid View | |
</button> | |
<button class="btn btn-info" id="list"> | |
List View | |
</button> | |
<button class="btn btn-warning" id="table"> | |
Table View | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div id="views"> | |
<div id="products" class="row view-group"> | |
<?php foreach ($sitesdata as $site): ?> | |
<div class="item col-xs-4 col-lg-4"> | |
<div class="thumbnail card"> | |
<div class="img-event"> | |
<img class="group list-group-image img-fluid" src="http://placehold.it/400x250.png?text=<?php echo $site->name; ?>" alt="" /> | |
</div> | |
<div class="caption card-body"> | |
<h4 class="group card-title inner list-group-item-heading"><?php echo ($site->cms === 'joomla') ? '<i class="fa fa-joomla"></i>' : '<i class="fa fa-wordpress"></i>'; ?> <?php echo $site->name; ?> </h4> | |
<div class="site-details"> | |
<span class="group inner list-group-item-text"><b>Core:</b> <?php echo ($site->cms === 'joomla') ? 'Joomla!' : 'WordPress'; ?> <?php echo $site->j_version; ?></span> | |
<span class="group inner list-group-item-text"><b>MySQL:</b> 5.6.47</span> | |
<span class="group inner list-group-item-text"><b>PHP:</b> <?php echo $site->php_version; ?></span> | |
<span class="group inner list-group-item-text"><b>Pending Updates:</b> <?php echo $site->nbUpdates; ?></span> | |
</div> | |
<div class="site-backups"> | |
<span class="group inner list-group-item-text"><b>Backup Date:</b> | |
<?php | |
$date = strtotime($site->dateBackup); | |
echo date('j-M-Y', $date); | |
?> | |
</span> | |
</div> | |
<div class="site-tags"> | |
<span class="group inner list-group-item-text"><b>Tags:</b> | |
<?php | |
$TagArray = []; | |
foreach ($site->tags as $tag) | |
{ | |
$TagArray[] = '<span>' . ucfirst($tag->name) . '</span>'; | |
} | |
echo implode(', ', $TagArray); ?> | |
</span> | |
</div> | |
<div class="row"> | |
<div class="col-xs-12 col-md-6"> | |
<a class="btn btn-success float-left" href="<?php echo $site->access_url; ?>" target="_blank">Visit Frontend</a> | |
</div> | |
<div class="col-xs-12 col-md-6"> | |
<a class="btn btn-warning float-right" href="<?php echo $site->admin_url; ?>" target="_blank">Visit Backend</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<?php | |
endforeach; ?> | |
</div> | |
</div> | |
</div> | |
<div id="table-view" class="hidden"> | |
<div class="container"> | |
<table class="table table-striped table-responsive"> | |
<thead> | |
<tr> | |
<th scope="col">Site Name</th> | |
<th scope="col">Core</th> | |
<th scope="col">PHP</th> | |
<th scope="col">MYSQL</th> | |
<th scope="col">Backup Date</th> | |
<th scope="col">Updates</th> | |
<th scope="col">Tags</th> | |
</tr> | |
</thead> | |
<tbody> | |
<?php foreach ($sitesdata as $site): ?> | |
<tr> | |
<th scope="row"><?php echo $site->name; ?></th> | |
<td><?php echo ($site->cms === 'joomla') ? '<i class="fa fa-joomla"></i>' : '<i class="fa fa-wordpress"></i>'; ?> <?php echo $site->j_version; ?></td> | |
<td><?php echo $site->php_version; ?></td> | |
<td>5.6.47</td> | |
<td> | |
<?php | |
$date = strtotime($site->dateBackup); | |
echo date('j-M-Y', $date); | |
?> | |
</td> | |
<td><?php echo $site->nbUpdates; ?></td> | |
<td> | |
<?php | |
$TagArray = []; | |
foreach ($site->tags as $tag) | |
{ | |
$TagArray[] = '<span>' . ucfirst($tag->name) . '</span>'; | |
} | |
echo implode(', ', $TagArray); | |
?> | |
</td> | |
</tr> | |
<?php | |
endforeach; ?> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
<hr> | |
<footer class="container"> | |
<p class="small">© <?php echo date("d-m-Y"); ?> <a href="https://watchful.net" target="_blank">Watchful</a>. All rights reserved <a href="https://watchful.net/faqs/tools/watchful-rest-api">Watchful REST API</a>.</p> | |
</footer> | |
</body> | |
<script> | |
$(document).ready(function() { | |
$('#table').click(function(event){event.preventDefault();$('#views').addClass('hidden'); $('#table-view').removeClass('hidden');}) | |
$('#list').click(function(event){event.preventDefault();$('#table-view').addClass('hidden'); $('#views').removeClass('hidden'); }); | |
$('#grid').click(function(event){event.preventDefault();$('#table-view').addClass('hidden'); $('#views').removeClass('hidden'); }); | |
}); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment