Custom website dashboard starter pack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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