Merge pull request #1367 from henrywhitaker3/homepage-speedtest

Added homepage item for speedtest-tracker

api/config/default.php

@@ -177,6 +177,7 @@ return array(
 	'homepageOrdertautulli' => '21',
 	'homepageOrderMonitorr' => '22',
 	'homepageOrderWeatherAndAir' => '23',
+	'homepageOrderSpeedtest' => '24',
 	'homepageShowStreamNames' => false,
 	'homepageShowStreamNamesAuth' => '1',
 	'homepageStreamRefresh' => '60000',
@@ -307,4 +308,10 @@ return array(
 	'monitorrHeaderToggle' => true,
 	'monitorrHeader' => 'Monitorr',
 	'monitorrCompact' => false,
+	'homepageSpeedtestEnabled' => false,
+	'homepageSpeedtestAuth' => '1',
+	'homepageSpeedtestRefresh' => '3600000',
+	'speedtestURL' => '',
+	'speedtestHeaderToggle' => true,
+	'speedtestHeader' => 'Speedtest',
 );

api/functions/homepage-connect-functions.php

@@ -71,6 +71,9 @@ function homepageConnect($array)
 		case 'getWeatherAndAir':
 			return getWeatherAndAir();
 			break;
+		case 'getSpeedtest':
+			return getSpeedtest();
+			break;
 		default:
 			# code...
 			break;
@@ -2666,6 +2669,36 @@ function getMonitorr()
 	}
 }
 
+function getSpeedtest()
+{
+	if ($GLOBALS['homepageSpeedtestEnabled'] && !empty($GLOBALS['speedtestURL']) && qualifyRequest($GLOBALS['homepageSpeedtestAuth'])) {
+		$api = [];
+		$url = qualifyURL($GLOBALS['speedtestURL']);
+		$dataUrl = $url . '/api/speedtest/latest';
+		try {
+			$response = Requests::get($dataUrl);
+			if ($response->success) {
+				$json = json_decode($response->body, true);
+
+				$api['data'] = [
+					'current' => $json['data'],
+					'average' => $json['average'],
+					'max' => $json['max'],
+				];
+
+				$api['options'] = [
+					'title' => $GLOBALS['speedtestHeader'],
+					'titleToggle' => $GLOBALS['speedtestHeaderToggle'],
+				];
+			}
+		} catch (Requests_Exception $e) {
+			writeLog('error', 'Speedtest Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
+		};
+		$api = isset($api) ? $api : false;
+		return $api;
+	}
+}
+
 function testAPIConnection($array)
 {
 	switch ($array['data']['action']) {

api/functions/homepage-functions.php

@@ -25,7 +25,8 @@ function homepageOrder()
 		"homepageOrdertautulli" => $GLOBALS['homepageOrdertautulli'],
 		"homepageOrderPihole" => $GLOBALS['homepageOrderPihole'],
 		"homepageOrderMonitorr" => $GLOBALS['homepageOrderMonitorr'],
-		"homepageOrderWeatherAndAir" => $GLOBALS['homepageOrderWeatherAndAir']
+		"homepageOrderWeatherAndAir" => $GLOBALS['homepageOrderWeatherAndAir'],
+		"homepageOrderSpeedtest" => $GLOBALS['homepageOrderSpeedtest'],
 	);
 	asort($homepageOrder);
 	return $homepageOrder;
@@ -383,6 +384,18 @@ function buildHomepageItem($homepageItem)
 				';
 			}
 			break;
+		case 'homepageOrderSpeedtest':
+			if ($GLOBALS['homepageSpeedtestEnabled']) {
+				$item .= '<div class="white-box"><h2 class="text-center" lang="en">Loading Speedtest...</h2></div>';
+				$item .= '
+				<script>
+				// Speedtest
+				homepageSpeedtest("' . $GLOBALS['homepageSpeedtestRefresh'] . '");
+				// End Speedtest
+				</script>
+				';
+			}
+			break;
 		default:
 			# code...
 			break;
@@ -2903,6 +2916,60 @@ function getHomepageList()
 				),
 			)
 		),
+		array(
+			'name' => 'Speedtest',
+			'enabled' => true,
+			'image' => 'plugins/images/tabs/speedtest-icon.png',
+			'category' => 'Monitor',
+			'settings' => array(
+				'Enable' => array(
+					array(
+						'type' => 'html',
+						'override' => 6,
+						'label' => 'Info',
+						'html' => '<p>This homepage item requires <a href="https://github.com/henrywhitaker3/Speedtest-Tracker" target="_blank" rel="noreferrer noopener">Speedtest-Tracker</a> to be running on your network.</p>'
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'homepageSpeedtestEnabled',
+						'label' => 'Enable',
+						'value' => $GLOBALS['homepageSpeedtestEnabled']
+					),
+					array(
+						'type' => 'select',
+						'name' => 'homepageSpeedtestAuth',
+						'label' => 'Minimum Authentication',
+						'value' => $GLOBALS['homepageSpeedtestAuth'],
+						'options' => $groups
+					)
+				),
+				'Connection' => array(
+					array(
+						'type' => 'input',
+						'name' => 'speedtestURL',
+						'label' => 'URL',
+						'value' => $GLOBALS['speedtestURL'],
+						'help' => 'Enter the IP:PORT of your speedtest instance e.g. http(s)://<ip>:<port>'
+					),
+				),
+				'Options' => array(
+					array(
+						'type' => 'input',
+						'name' => 'speedtestHeader',
+						'label' => 'Title',
+						'value' => $GLOBALS['speedtestHeader'],
+						'help' => 'Sets the title of this homepage module',
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'speedtestToggle',
+						'label' => 'Toggle Title',
+						'value' => $GLOBALS['speedtestHeaderToggle'],
+						'help' => 'Shows/hides the title of this homepage module'
+					),
+				),
+			)
+		),
 	);
 }
 
@@ -3056,6 +3123,13 @@ function buildHomepageSettings()
 					$class .= ' faded';
 				}
 				break;
+			case 'homepageOrderSpeedtest':
+				$class = 'bg-success';
+				$image = 'plugins/images/tabs/speedtest-icon.png';
+				if (!$GLOBALS['homepageSpeedtestEnabled']) {
+					$class .= ' faded';
+				}
+				break;
 			default:
 				$class = 'blue-bg';
 				$image = '';

js/functions.js

@@ -7214,6 +7214,162 @@ function homepageMonitorr(timeout){
     if(typeof timeouts[timeoutTitle] !== 'undefined'){ clearTimeout(timeouts[timeoutTitle]); }
     timeouts[timeoutTitle] = setTimeout(function(){ homepageMonitorr(timeout); }, timeout);
 }
+function homepageSpeedtest(timeout){
+    var timeout = (typeof timeout !== 'undefined') ? timeout : activeInfo.settings.homepage.refresh.homepageSpeedtestRefresh;
+    organizrAPI('POST','api/?v1/homepage/connect',{action:'getSpeedtest'}).success(function(data) {
+        try {
+            var response = JSON.parse(data);
+        }catch(e) {
+            console.log(e + ' error: ' + data);
+            orgErrorAlert('<h4>' + e + '</h4>' + formatDebug(data));
+            return false;
+        }
+        document.getElementById('homepageOrderSpeedtest').innerHTML = '';
+        if(response.data !== null){
+            $('#homepageOrderSpeedtest').html(buildSpeedtest(response.data));
+        }
+    }).fail(function(xhr) {
+        console.error("Organizr Function: API Connection Failed");
+    });
+    var timeoutTitle = 'Speedtest-Homepage';
+    if(typeof timeouts[timeoutTitle] !== 'undefined'){ clearTimeout(timeouts[timeoutTitle]); }
+    timeouts[timeoutTitle] = setTimeout(function(){ homepageSpeedtest(timeout); }, timeout);
+}
+function buildSpeedtest(array){
+    if(array === false){ return ''; }
+    var html = `
+    <style>
+    .shadow-sm {
+        -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important;
+        box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important;
+    }
+
+    .speedtest-card {
+        background-color: #2d2c2c;
+    }
+
+    .speedtest-card .text-success {
+        color: #07db71 !important;
+    }
+
+    .speedtest-card .text-warning {
+        color: #fca503 !important;
+    }
+
+    .speedtest-card .text-primary {
+        color: #3e95cd !important;
+    }
+
+    .speedtest-card span.icon {
+        font-size: 2em;
+    }
+
+    .speedtest-card h5 {
+    }
+
+    .speedtest-card h4,
+    .speedtest-card h3 {
+        font-weight: 450;
+        line-height: 1.2;
+    }
+
+    .speedtest-card .text-muted,
+    .speedtest-card h5 {
+        color: #9e9e9e !important;
+    }
+    </style>
+    `;
+    var current = array.data.current;
+    var average = array.data.average;
+    var max = array.data.max;
+    var options = array.options;
+    
+    html += `
+    <div id="allSpeedtest">
+    `;
+    if(options.titleToggle) {
+        html += `
+        <div class="row">
+            <div class="col-sm-12">
+                <h4 class="pull-left homepage-element-title"><span lang="en">`+array['options']['title']+` : </h4>
+            </div>
+        </div>
+        `;
+    }
+    html += `
+        <div class="row">
+            <div class="my-2 col-lg-4 col-md-4 col-sm-12">
+                <div class="card speedtest-card shadow-sm">
+                    <div class="card-body">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <h4>Ping</h4>
+                            <span class="ti-pulse icon text-success" />
+                        </div>
+                        <div class="text-truncate">
+                            <h3 class="d-inline">`+parseFloat(current.ping).toFixed(1)+`</h3>
+                            <p class="d-inline ml-1 text-white">ms (current)</p>
+                        </div>
+                        <div class="text-truncate text-muted">
+                            <h5 class="d-inline">`+parseFloat(average.ping).toFixed(1)+`</h5>
+                            <p class="d-inline ml-1">ms (average)</p>
+                        </div>
+                        <div class="text-truncate text-muted">
+                            <h5 class="d-inline">`+parseFloat(max.ping).toFixed(1)+`</h5>
+                            <p class="d-inline ml-1">ms (maximum)</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="my-2 col-lg-4 col-md-4 col-sm-12">
+                <div class="card speedtest-card shadow-sm">
+                    <div class="card-body">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <h4>Download</h4>
+                            <span class="ti-download icon text-warning" />
+                        </div>
+                        <div class="text-truncate">
+                            <h3 class="d-inline">`+parseFloat(current.download).toFixed(1)+`</h3>
+                            <p class="d-inline ml-1 text-white">Mbit/s (current)</p>
+                        </div>
+                        <div class="text-truncate text-muted">
+                            <h5 class="d-inline">`+parseFloat(average.download).toFixed(1)+`</h5>
+                            <p class="d-inline ml-1">Mbit/s (average)</p>
+                        </div>
+                        <div class="text-truncate text-muted">
+                            <h5 class="d-inline">`+parseFloat(max.download).toFixed(1)+`</h5>
+                            <p class="d-inline ml-1">Mbit/s (maximum)</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="my-2 col-lg-4 col-md-4 col-sm-12">
+                <div class="card speedtest-card shadow-sm">
+                    <div class="card-body">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <h4>Upload</h4>
+                            <span class="ti-upload icon text-primary" />
+                        </div>
+                        <div class="text-truncate">
+                            <h3 class="d-inline">`+parseFloat(current.upload).toFixed(1)+`</h3>
+                            <p class="d-inline ml-1 text-white">Mbit/s (current)</p>
+                        </div>
+                        <div class="text-truncate text-muted">
+                            <h5 class="d-inline">`+parseFloat(average.upload).toFixed(1)+`</h5>
+                            <p class="d-inline ml-1">Mbit/s (average)</p>
+                        </div>
+                        <div class="text-truncate text-muted">
+                            <h5 class="d-inline">`+parseFloat(max.upload).toFixed(1)+`</h5>
+                            <p class="d-inline ml-1">Mbit/s (maximum)</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    `;
+
+    return (array) ? html : '';
+}
 // Thanks Swifty!
 function PopupCenter(url, title, w, h) {
     // Fixes dual-screen position                         Most browsers      Firefox