Add update notifications

Using the Github API, it checks the latest release against
the current version. If it needs updating, it shows an
update alert in the top right dropdown-menu and opens it
automatically. Also this commit stops the dropdown-menu
from closing if you click inside of it. It will only close
if you click the toggle button or outside of it.

footer.php

@@ -4,8 +4,12 @@
     <!-- /.content-wrapper -->
     <footer class="main-footer">
         <div class="pull-right hidden-xs">
-            <b>Pi-hole Version </b> <?php echo exec("cd /etc/.pihole/ && git describe --tags --abbrev=0"); ?>
-            <b>Web Interface Version </b> <?php echo exec("cd /var/www/html/admin/ && git describe --tags --abbrev=0"); ?>
+            <?php
+            $piholeVersion = exec("cd /etc/.pihole/ && git describe --tags --abbrev=0");
+            $webVersion = exec("cd /var/www/html/admin/ && git describe --tags --abbrev=0");
+            ?>
+            <b>Pi-hole Version </b> <?php echo $piholeVersion; ?>
+            <b>Web Interface Version </b> <?php echo $webVersion; ?>
         </div>
         <i class="fa fa-github"></i> <strong><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=3J2L3Z4DHW9UY">Donate</a></strong> if you found this useful.
     </footer>
@@ -20,5 +24,57 @@
 <script src="js/dataTables.bootstrap.min.js" type="text/javascript"></script>
 <script src="js/Chart.min.js"></script>
 
+<script>
+    // User menu toggle
+    $("#dropdown-menu a").on("click", function(event) {
+        $(this).parent().toggleClass("open");
+    });
+    $("body").on("click", function(event) {
+        if(!$("#dropdown-menu").is(event.target) && $("#dropdown-menu").has(event.target).length === 0) {
+            $("#dropdown-menu").removeClass("open");
+        }
+    });
+    
+    // Credit for following function: https://gist.github.com/alexey-bass/1115557
+    function versionCompare(left, right) {
+        if (typeof left + typeof right != 'stringstring')
+            return false;
+
+        var a = left.split('.')
+            ,   b = right.split('.')
+            ,   i = 0, len = Math.max(a.length, b.length);
+
+        for (; i < len; i++) {
+            if ((a[i] && !b[i] && parseInt(a[i]) > 0) || (parseInt(a[i]) > parseInt(b[i]))) {
+                return 1;
+            } else if ((b[i] && !a[i] && parseInt(b[i]) > 0) || (parseInt(a[i]) < parseInt(b[i]))) {
+                return -1;
+            }
+        }
+
+        return 0;
+    }
+    
+    // Update check
+    $.getJSON("https://api.github.com/repos/pi-hole/pi-hole/releases/latest", function(json) {
+        if(versionCompare("<?php echo substr($piholeVersion, 1); ?>", json.tag_name.slice(1)) < 0) {
+            // Alert user
+            $("#alPiholeUpdate").show();
+            if(!$("#dropdown-menu").hasClass("open")) {
+                $("#dropdown-menu").addClass("open");
+            }
+        }
+    });
+    $.getJSON("https://api.github.com/repos/pi-hole/AdminLTE/releases/latest", function(json) {
+        if(versionCompare("<?php echo substr($webVersion, 1); ?>", json.tag_name.slice(1)) < 0) {
+            // Alert user
+            $("#alWebUpdate").show();
+            if(!$("#dropdown-menu").hasClass("open")) {
+                $("#dropdown-menu").addClass("open");
+            }
+        }
+    });
+</script>
+
 </body>
 </html>

header.html

@@ -50,8 +50,8 @@
             <div class="navbar-custom-menu">
                 <ul class="nav navbar-nav">
                     <!-- User Account: style can be found in dropdown.less -->
-                    <li class="dropdown user user-menu">
-                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                    <li id="dropdown-menu" class="dropdown user user-menu">
+                        <a href="#" class="dropdown-toggle">
                             <img src="img/pihole-160x160.jpg" class="user-image" alt="Pi-hole logo" />
                             <span class="hidden-xs">Pi-hole</span>
                         </a>
@@ -76,8 +76,17 @@
                                     <a href="https://github.com/pi-hole/pi-hole/releases">Updates</a>
                                 </div>
                             </li>
-                            <!-- Menu Footer-->
+                            <!-- Menu Footer -->
                             <li class="user-footer">
+                                <!-- Update alerts -->
+                                <div id="alPiholeUpdate" class="alert alert-info alert-dismissible fade in" role="alert" hidden>
+                                    <a class="alert-link" href="https://github.com/pi-hole/pi-hole/releases">There's an update available for this Pi-hole!</a>
+                                </div>
+                                <div id="alWebUpdate" class="alert alert-info alert-dismissible fade in" role="alert" hidden>
+                                    <a class="alert-link" href="https://github.com/pi-hole/AdminLTE/releases">There's an update available for this Web Interface!</a>
+                                </div>
+                                
+                                <!-- PayPal -->
                                 <div>
                                     <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                                         <input type="hidden" name="cmd" value="_s-xclick">