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