Skip to content

Instantly share code, notes, and snippets.

@watchfulli

watchfulli/api-site-overview.php

Last active February 24, 2021 15:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save watchfulli/b4198e23f99d68cce0ac15c682c0d9a3 to your computer and use it in GitHub Desktop.
Save watchfulli/b4198e23f99d68cce0ac15c682c0d9a3 to your computer and use it in GitHub Desktop.
Download ZIP
Custom website dashboard starter pack
Raw
api-site-overview.php
<?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&nbsp;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">&copy; <?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