Added status page code files for those that want to use it. Module ve…

…rsion coming soon!
sigel · Oct 30, 2020 · ff71843 · ff71843
1 parent ef54286
commit ff71843
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -23,3 +23,8 @@ The `css/custom.css` contains customizations such as removing module headers and
 The `config/config.js` contains my setup for each module.
 
 _My collection of backgrounds used is available for download [here](https://drive.google.com/file/d/1pKJM75EsiSegkv3AJiF6Wgw1kcQ0xOI5/view?usp=sharing)_
+
+### Status Page
+If you want to use the widget showing online/offline status of services such as sabnzbd, plex, etc. You'll have to edit `status/index.php` and upload it all to a webserver and use the [MMM-iFrame](https://github.com/alberttwong/MMM-iFrame) module to show it on your dashboard.
+
+As I wrote this, I decided it would be a fun idea to convert that to an actual module, so stay tuned!
diff --git a/status/img/icon-emby.png b/status/img/icon-emby.png
diff --git a/status/img/icon-plex.png b/status/img/icon-plex.png
diff --git a/status/img/icon-radarr.png b/status/img/icon-radarr.png
diff --git a/status/img/icon-sab.png b/status/img/icon-sab.png
diff --git a/status/img/icon-sonarr.png b/status/img/icon-sonarr.png
diff --git a/status/index.php b/status/index.php
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Servers Status</title>
+<meta content="text/html" charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+  <section class="server-status">
+    <div class="container-fluid">
+      <?php
+      $data = "";
+      //configure script
+      $timeout = "1";
+      $services = array();
+      $services[] = array("port" => "2784", "service" => "Sabnzbd", "icon" => "sab", "ip" => "");
+      $services[] = array("port" => "8989", "service" => "Sonarr", "icon" => "sonarr", "ip" => "");
+      $services[] = array("port" => "7878", "service" => "Radarr", "icon" => "radarr", "ip" => "");
+      $services[] = array("port" => "32400", "service" => "Plex", "icon" => "plex", "ip" => "");
+
+      foreach ($services  as $service) {
+        if($service['ip']==""){
+           $service['ip'] = "192.168.1.10";
+        }
+        $data .= '<div class="row"><div class="col name ' . $service['icon'] . '">' . $service['service'] . '</div>';
+      	$fp = @fsockopen($service['ip'], $service['port'], $errno, $errstr, $timeout);
+      	if (!$fp) {
+        	$data .= '<div class="col status red">Offline</div></div>';
+          //fclose($fp);
+        } else {
+        	$data .= '<div class="col status green">Online</div></div>';
+        	fclose($fp);
+      	}
+      }
+      echo $data;
+      ?>
+    </div>
+  </section>
+</body>
+</html>
diff --git a/status/style.css b/status/style.css
@@ -0,0 +1,36 @@
+html,body { margin: 0; padding: 0; }
+
+body {
+  background: transparent;
+  color: #fff;
+  font-family: 'Roboto Condensed', sans-serif;
+  font-weight: 400;
+  font-size: .9em;
+}
+
+.server-status {
+  overflow: hidden;
+  line-height: 20px;
+  padding: 16px;
+  background: rgba(0,0,0,.35);
+}
+
+.server-status .row {
+  padding: 7px 0;
+  border-bottom: 1px dotted rgba(51, 51, 51, 0.25);
+}
+.server-status .row:last-child { border: 0; }
+
+.name {
+  padding-left: 36px;
+}
+
+.status { text-align: right; }
+
+.sab { background: url('img/icon-sab.png') center left no-repeat; }
+.sonarr { background: url('img/icon-sonarr.png') center left no-repeat; }
+.radarr { background: url('img/icon-radarr.png') center left no-repeat; }
+.plex { background: url('img/icon-plex.png') center left no-repeat; }
+
+.red { color: red; }
+.green { color: #28da28; }