Merge pull request #1343 from henrywhitaker3/monitorr-homepage-item

Added Monitorr Homepage item

api/config/default.php

@@ -164,6 +164,7 @@ return array(
 	'homepageOrderunifi' => '19',
 	'homepageOrderPihole' => '20',
 	'homepageOrdertautulli' => '21',
+	'homepageOrderMonitorr' => '22',
 	'homepageShowStreamNames' => false,
 	'homepageShowStreamNamesAuth' => '1',
 	'homepageStreamRefresh' => '60000',
@@ -286,5 +287,12 @@ return array(
 	'homepagePiholeRefresh' => '10000',
 	'homepagePiholeCombine' => false,
 	'piholeHeaderToggle' => true,
-	'piholeURL' => ''
+	'piholeURL' => '',
+	'homepageMonitorrEnabled' => false,
+	'homepageMonitorrAuth' => '1',
+	'homepageMonitorrRefresh' => '5000',
+	'monitorrURL' => '',
+	'monitorrHeaderToggle' => true,
+	'monitorrHeader' => 'Monitorr',
+	'monitorrCompact' => false,
 );

api/functions/homepage-connect-functions.php

@@ -65,6 +65,9 @@ function homepageConnect($array)
 		case 'getPihole':
 			return getPihole();
 			break;
+		case 'getMonitorr':
+			return getMonitorr();
+			break;
 		default:
 			# code...
 			break;
@@ -2511,6 +2514,83 @@ function getTautulli()
 	return false;
 }
 
+function getMonitorr()
+{
+	if ($GLOBALS['homepageMonitorrEnabled'] && !empty($GLOBALS['monitorrURL']) && qualifyRequest($GLOBALS['homepageMonitorrAuth'])) {
+		$api = [];
+		$url = qualifyURL($GLOBALS['monitorrURL']);
+		$dataUrl = $url . '/assets/php/loop.php';
+		try {
+			$response = Requests::get($dataUrl, [ 'Token' => $GLOBALS['organizrAPI'] ], []);
+			if ($response->success) {
+				$html = html_entity_decode($response->body);
+
+				// This section grabs the names of all services by regex
+				$services = [];
+				$servicesMatch = [];
+				$servicePattern = '/<div id="servicetitle"><div>(.*)<\/div><\/div><div class="btnonline">Online<\/div><\/a><\/div><\/div>|<div id="servicetitleoffline" style="cursor: default"><div>(.*)<\/div><\/div><div class="btnoffline" style="cursor: default">Offline<\/div><\/div><\/div>/';
+				preg_match_all($servicePattern, $html, $servicesMatch);
+				unset($servicesMatch[0]);
+				$servicesMatch = array_values($servicesMatch);
+				foreach($servicesMatch as $group) {
+					foreach($group as $service) {
+						if($service !== '') {
+							array_push($services, $service);
+						}
+					}
+				}
+
+				// This section then grabs the status and image of that service with regex
+				$statuses = [];
+				foreach($services as $service) {
+					$statusPattern = '/' . $service . '<\/div><\/div><div class="btnonline">(Online)<\/div><\/a><\/div><\/div>|' . $service . '<\/div><\/div><div class="btnoffline" style="cursor: default">(Offline)<\/div><\/div><\/div>/';
+					$status = [];
+					preg_match($statusPattern, $html, $status);
+					$statuses[$service] = $status;
+					foreach($status as $match) {
+						if($match == 'Online') {
+							$statuses[$service] = [
+								'status' => true
+							];
+						} else if($match == 'Offline') {
+							$statuses[$service] = [
+								'status' => false
+							];
+						}
+					}
+
+					$imageMatch = [];
+
+					$imgPattern = '/assets\/img\/..\/img\/(.*)" class="serviceimg" alt=.*><\/div><\/div><div id="servicetitle"><div>' . $service . '|assets\/img\/\.\.\/img\/(.*)" class="serviceimg imgoffline" alt=.*><\/div><\/div><div id="servicetitleoffline" style="cursor: default"><div>' . $service . '/';
+
+					preg_match($imgPattern, $html, $imageMatch);
+					unset($imageMatch[0]);
+					$imageMatch = array_values($imageMatch);
+					// array_push($api['imagematches'][$service], $imageMatch);
+					foreach($imageMatch as $match) {
+						if($match!== '') {
+							$image = $match;
+						}
+					}
+					$statuses[$service]['image'] = $url . '/assets/img/' . $image;
+				}
+
+				ksort($statuses);
+				$api['services'] = $statuses;
+				$api['options'] = [
+					'title' => $GLOBALS['monitorrHeader'],
+					'titleToggle' => $GLOBALS['monitorrHeaderToggle'],
+					'compact' => $GLOBALS['monitorrCompact'],
+				];
+			}
+		} catch (Requests_Exception $e) {
+			writeLog('error', 'Monitorr 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

@@ -24,6 +24,7 @@ function homepageOrder()
 		"homepageOrderunifi" => $GLOBALS['homepageOrderunifi'],
 		"homepageOrdertautulli" => $GLOBALS['homepageOrdertautulli'],
 		"homepageOrderPihole" => $GLOBALS['homepageOrderPihole'],
+		"homepageOrderMonitorr" => $GLOBALS['homepageOrderMonitorr'],
 	);
 	asort($homepageOrder);
 	return $homepageOrder;
@@ -356,6 +357,19 @@ function buildHomepageItem($homepageItem)
 				</script>
 				';
 			}
+			break;
+		case 'homepageOrderMonitorr':
+			if ($GLOBALS['homepageMonitorrEnabled']) {
+				$item .= '<div class="white-box"><h2 class="text-center" lang="en">Loading Monitorr...</h2></div>';
+				$item .= '
+				<script>
+				// Monitorr
+				homepageMonitorr("' . $GLOBALS['homepageMonitorrRefresh'] . '");
+				// End Monitorr
+				</script>
+				';
+			}
+			break;
 		default:
 			# code...
 			break;
@@ -2701,6 +2715,69 @@ function getHomepageList()
 				),
 			)
 		),
+		array(
+			'name' => 'Monitorr',
+			'enabled' => true,
+			'image' => 'plugins/images/tabs/monitorr.png',
+			'category' => 'Monitor',
+			'settings' => array(
+				'Enable' => array(
+					array(
+						'type' => 'switch',
+						'name' => 'homepageMonitorrEnabled',
+						'label' => 'Enable',
+						'value' => $GLOBALS['homepageMonitorrEnabled']
+					),
+					array(
+						'type' => 'select',
+						'name' => 'homepageMonitorrAuth',
+						'label' => 'Minimum Authentication',
+						'value' => $GLOBALS['homepageMonitorrAuth'],
+						'options' => $groups
+					)
+				),
+				'Connection' => array(
+					array(
+						'type' => 'input',
+						'name' => 'monitorrURL',
+						'label' => 'URL',
+						'value' => $GLOBALS['monitorrURL'],
+						'help' => 'URL for Monitorr. Please use the revers proxy URL i.e. https://domain.com/monitorr/.',
+						'placeholder' => 'http://domain.com/monitorr/'
+					),
+					array(
+						'type' => 'select',
+						'name' => 'homepageMonitorrRefresh',
+						'label' => 'Refresh Seconds',
+						'value' => $GLOBALS['homepageMonitorrRefresh'],
+						'options' => optionTime()
+					),
+				),
+				'Options' => array(
+					array(
+						'type' => 'input',
+						'name' => 'monitorrHeader',
+						'label' => 'Title',
+						'value' => $GLOBALS['monitorrHeader'],
+						'help' => 'Sets the title of this homepage module',
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'monitorrHeaderToggle',
+						'label' => 'Toggle Title',
+						'value' => $GLOBALS['monitorrHeaderToggle'],
+						'help' => 'Shows/hides the title of this homepage module'
+					),
+					array(
+						'type' => 'switch',
+						'name' => 'monitorrCompact',
+						'label' => 'Compact view',
+						'value' => $GLOBALS['monitorrCompact'],
+						'help' => 'Toggles the compact view of this homepage module'
+					),
+				),
+			)
+		),
 	);
 }
 
@@ -2840,6 +2917,13 @@ function buildHomepageSettings()
 					$class .= ' faded';
 				}
 				break;
+			case 'homepageOrderMonitorr':
+				$class = 'bg-info';
+				$image = 'plugins/images/tabs/monitorr.png';
+				if (!$GLOBALS['homepageMonitorrEnabled']) {
+					$class .= ' faded';
+				}
+				break;
 			default:
 				$class = 'blue-bg';
 				$image = '';

js/functions.js

@@ -6712,6 +6712,183 @@ function homepageTautulli(timeout){
     if(typeof timeouts[timeoutTitle] !== 'undefined'){ clearTimeout(timeouts[timeoutTitle]); }
     timeouts[timeoutTitle] = setTimeout(function(){ homepageTautulli(timeout); }, timeout);
 }
+function buildMonitorrItem(array){
+    var cards = `
+    <style>
+    .monitorr-card {
+        background-color: #7b7b7b2e;
+    }
+
+    .monitorrCards .row {
+        padding-right: 10px;
+        padding-left: 10px;
+    }
+
+    .monitorr-card .card-body {
+        text-align: center;
+    }
+
+    .monitorr-card-compact {
+        height: 66px;
+    }
+
+    .monitorr-card-compact .card-body {
+        text-align: left;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .monitorr-card-compact p {
+        font-size: 1.5em;
+        font-weight: 450;
+        color: white;
+    }
+
+    .monitorr-card img {
+        max-height: 100px;
+        max-width: 100%;]
+    }
+
+    .monitorr-card .indicator {
+        border-radius: 7px;
+    }
+
+    .monitorr-card .indicator.online {
+        background-color: #3db85d;
+    }
+
+    .monitorr-card .indicator.offline {
+        background-color: #de3535;
+    }
+
+    .monitorr-card-compact.online {
+        border-left: 7px solid #3db85d;
+    }
+
+    .monitorr-card-compact.offline {
+        border-left: 7px solid #de3535;
+    }
+
+    .monitorr-card-compact .fa {
+        font-size: 2.5em;
+    }
+
+    .monitorr-card-compact .fa.online {
+        color: #3db85d;
+    }
+
+    .monitorr-card-compact .fa.offline {
+        color: #de3535;
+    }
+
+    .monitorr-card .indicator p {
+        font-weight: 600;
+        color: #fff;
+    }
+
+    .one-line {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    </style>
+    `;
+    var options = array['options'];
+    var services = array['services'];
+
+    var buildCard = function(name, data) {
+        if(options['compact']) {
+            var card = `
+            <div class="card monitorr-card monitorr-card-compact mb-3 `; if(data.status) { card += 'online' } else { card += 'offline' } card+=`">
+                <div class="card-body">
+                    <p class="ml-2 d-inline">`+name+`</p>`;
+                    if(data.status) {
+                        card += `<i class="fa fa-check-circle d-inline pull-right online" aria-hidden="true"></i>`;
+                    } else {
+                        card += `<i class="fa fa-times-circle d-inline pull-right offline" aria-hidden="true"></i>`;
+                    }
+            card += `
+                </div>
+            </div>
+            `;
+        } else {
+            var card = `
+            <div class="card monitorr-card mb-3">
+                <div class="card-body">
+                    <div class="d-block">
+                        <h4 class="one-line">`+name+`</h4>
+                        <img class="my-2" src="`+data.image+`" alt="service icon">
+                    </div>
+                    <div class="d-inline-block mt-4 py-2 px-4 indicator `; if(data.status) { card += 'online' } else { card += 'offline' } card+=`">
+                        <p class="mb-0">`; if(data.status) { card += 'ONLINE' } else { card += 'OFFLINE' } card+=`</p>
+                    </div>
+                </div>
+            </div>
+            `;
+        }
+        return card;
+    }
+
+    cards += '<div class="row">';
+    cards += '<div class="col"></div>';
+    for(var key in services) {
+        if(options['compact']) {
+            cards += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 px-2">';
+        } else {
+            cards += '<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 px-2">';
+        }
+        cards += buildCard(key, services[key]);
+        cards += '</div>';
+    };
+    cards += '<div class="col"></div>';
+    cards += '</div>';
+    return cards;
+}
+function buildMonitorr(array){
+    if(array === false){ return ''; }
+    var html = `
+    <div id="allMonitorr">
+		<div class="el-element-overlay row">`
+    if(array['options']['titleToggle']) {
+        html += `
+            <div class="col-md-12">
+                <h4 class="pull-left homepage-element-title"><span>`+array['options']['title']+`</span> : </h4><h4 class="pull-left">&nbsp;</h4>
+                <hr class="hidden-xs ml-2">
+            </div>
+            <div class="clearfix"></div>
+        `;
+    }
+    html += `
+            <div class="monitorrCards col-sm-12 my-3">
+                `+buildMonitorrItem(array)+`
+			</div>
+		</div>
+	</div>
+    `;
+    return (array) ? html : '';
+}
+function homepageMonitorr(timeout){
+    var timeout = (typeof timeout !== 'undefined') ? timeout : activeInfo.settings.homepage.refresh.homepagePiholeRefresh;
+    organizrAPI('POST','api/?v1/homepage/connect',{action:'getMonitorr'}).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('homepageOrderMonitorr').innerHTML = '';
+        if(response.data !== null){
+            buildMonitorr(response.data)
+            $('#homepageOrderMonitorr').html(buildMonitorr(response.data));
+        }
+    }).fail(function(xhr) {
+        console.error("Organizr Function: API Connection Failed");
+    });
+    var timeoutTitle = 'Monitorr-Homepage';
+    if(typeof timeouts[timeoutTitle] !== 'undefined'){ clearTimeout(timeouts[timeoutTitle]); }
+    timeouts[timeoutTitle] = setTimeout(function(){ homepageMonitorr(timeout); }, timeout);
+}
 // Thanks Swifty!
 function PopupCenter(url, title, w, h) {
     // Fixes dual-screen position                         Most browsers      Firefox