Big update 1.2.0

Updated bootstrap v3 to bootstrap v4

Updated chart js from v1 to v2

Configure grunt so files in bower folder are copied first then minified instead of just copied

Delete not needed css files for datatables and add the minimal one jquery.dataTables.min.css

Added images for datatable for better UX knowing you can sort tables

Moved chart code into its own method into main/php/main.php

Made charts half columns on default now col-md-6 instead of col-md-12.  This allows you to see more easier if you have multiple monitors.  If theres only 1 monitor it will fallback to full width col-md-12.

Update some comments in the PHP.

Refactor some css and use bootstrap 4 native classes to handle most of the margin/padding in the template.

Add _() function on all translatable strings. ( plan on adding translation soon )

Performance improvements.  Charts had some lag before and now they seem to be a lot faster.

Migration:

Just git pull and relax.  No need to do anything else.

:)

Gruntfile.js

@@ -39,11 +39,35 @@ module.exports = function(grunt){
             expand: true
           },
           {
-            cwd: 'bower_components/Chart.js/',
-            src: 'Chart.js',
+            cwd: 'bower_components/Chart.js/dist/',
+            src: 'Chart.min.js',
             dest: 'main/js/src/',
             expand: true
-          }
+          },
+          {
+            cwd: 'bower_components/tether/dist/js/',
+            src: 'tether.min.js',
+            dest: 'main/js/src/',
+            expand: true
+          },
+          {
+            cwd: 'bower_components/datatables.net/js/',
+            src: 'jquery.dataTables.min.js',
+            dest: 'main/js/src/',
+            expand: true
+          },
+          {
+            cwd: 'bower_components/datatables.net-dt/css/',
+            src: 'jquery.dataTables.min.css',
+            dest: 'main/css/src/',
+            expand: true
+          },
+          {
+            cwd: 'bower_components/datatables.net-dt/images/',
+            src: '**/*',
+            dest: 'main/img/',
+            expand: true
+          },
         ]
       }
     },
@@ -75,9 +99,8 @@ module.exports = function(grunt){
         files: {
           'main/css/dist/all.styles.min.css':
            [
-            'bower_components/bootstrap/dist/css/bootstrap.min.css',
-            'main/css/src/dataTables.bootstrap.min.css',
-            'main/css/src/responsive.bootstrap.min.css',
+            'main/css/src/bootstrap.min.css',
+            'main/css/src/jquery.dataTables.min.css',
             'main/css/src/main.css'
           ]
         }
@@ -90,11 +113,11 @@ module.exports = function(grunt){
         files: {
           'main/js/dist/all.scripts.min.js':
            [
-            'bower_components/jquery/dist/jquery.js',
-            'bower_components/Chart.js/Chart.js',
-            'bower_components/bootstrap/dist/js/bootstrap.js',
+            'main/js/src/jquery.js',
+            'main/js/src/tether.min.js',
+            'main/js/src/bootstrap.js',
+            'main/js/src/Chart.min.js',
             'main/js/src/jquery.dataTables.min.js',
-            'main/js/src/dataTables.bootstrap.min.js',
             'main/js/src/main.js'
           ]
         }

README.md

@@ -24,7 +24,7 @@ Check out the demo <a href="http://up-monitor.com/">http://up-monitor.com/</a>
   cd uptime-robot && cp config-sample.php config.php
   ```
 
-3.  Edit config.php and put an Uptime Robot API key ( must be account specific )
+3.  Edit config.php and put an Uptime Robot API key
 
   ```
   $UP_ACCOUNT_API_KEY = "replace_with_yours";
@@ -35,11 +35,11 @@ Check out the demo <a href="http://up-monitor.com/">http://up-monitor.com/</a>
   # This may vary depending where you installed the app and/or your environment
   http://localhost/uptime-robot/main/
   ```
-  
+
 <h3>Usage</h3>
 
 This is a simple one page application to monior uptime.  It is powered by the <a href="https://uptimerobot.com/">Uptime Robot </a> API.  Uptime Robot can notify you about downtime. They offer up to 50 Monitors, Checked Every 5 Minutes, Totally Free.
-  
+
 
 <h3>Building/Making Edits</h3>
 

bower.json

@@ -1,17 +1,20 @@
 {
   "name": "uptime-robot",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "authors": [
-    "HeadTalker <code@headtalker.com>"
+    "HeadTalker <contact@headtalker.com>"
   ],
   "ignore": [
     "**/.*",
     "node_modules",
     "bower_components"
   ],
   "dependencies": {
-    "Chart.js": "~1.0.2",
-    "bootstrap": "~3.3.5",
-    "jquery": "~2.1.4"
+    "Chart.js": "2.1.4",
+    "jquery": "2.1.4",
+    "bootstrap": "v4.0.0-alpha.2",
+    "tether": "1.3.2",
+    "datatables.net": "1.10.12",
+    "datatables.net-dt": "1.10.12"
   }
 }

config-sample.php

@@ -6,8 +6,4 @@
 //
 //======================================================================
 
-//-----------------------------------------------------
-// API KEY - must be account specific
-//-----------------------------------------------------
-
 $UP_ACCOUNT_API_KEY = "replace_with_yours";

main/css/src/main.css

@@ -5,7 +5,6 @@
 * Base structure
 */
 body {
-  padding-top: 20px;
   background: #252830;
   color: #cfd2da;
 }
@@ -14,29 +13,29 @@ a {
   color: #cfd2da;
 }
 
-hr {
-  border-top: 1px solid #555;
-}
-
 /*
-* Main content
+* Tables
 */
-.main .page-header {
-  margin-top: 0;
+.dataTables_wrapper {
+  width: 99%;
 }
-
-.page-header {
-  border-bottom: 1px solid #555;
-  color: #fff;
-  padding: 25px;
+.dataTables_wrapper select {
+  color: #434857 !important;
+}
+.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper select {
+  color: #cfd2da;
 }
 
-/*
-* Tables
-*/
 .table-hover > tbody > tr:hover {
   background: #434857;
-  color: #fff;
+}
+
+table.dataTable tbody tr {
+  background: none;
+}
+
+.table-bordered, .table-bordered td, .table-bordered th {
+  border: 1px solid #434857;
 }
 
 td {
@@ -59,19 +58,3 @@ td img {
 .dataTables_info {
   margin-top: 6px;
 }
-
-/*
-* Graphs
-*/
-*:before, *:after {
-  box-sizing: inherit;
-}
-
-.l-chart {
-  padding: 20px;
-}
-
-.aspect-ratio {
-  height: 0;
-  padding-bottom: 50%;
-}