Improvements

config.inc.php

@@ -1,3 +1,9 @@
 <?php
 
 define("UPTIME_KUMA_URL", "http://uptime-kuma.local:3001");
+
+define("ENABLE_TWIG_CACHE", false);
+
+define("MONITORINGS", [
+	4 => ["rich" => true]
+]);

controller/status.php

@@ -0,0 +1,54 @@
+<?php
+
+require_once("../vendor/autoload.php");
+
+class UptimeStatus {
+
+	private $data;
+
+	public function load_data() {
+		$page = json_decode(file_get_contents(UPTIME_KUMA_URL . "/api/status-page/public"), true);
+		$status = json_decode(file_get_contents(UPTIME_KUMA_URL . "/api/status-page/heartbeat/public"), true);
+		$this->data = array_merge($page, $status);
+	}
+
+	public function display() {
+
+		$filter = new \Twig\TwigFilter('timeago', function ($ago, $now) {
+
+			$time = strtotime($now) - strtotime($ago); 
+		  
+			$units = array (
+				31536000 => 'year',
+				2592000 => 'month',
+				604800 => 'week',
+				86400 => 'day',
+				3600 => 'hour',
+				60 => 'minute',
+				1 => 'second'
+			);
+		  
+			foreach ($units as $unit => $val) {
+				if ($time < $unit) continue;
+				$numberOfUnits = floor($time / $unit);
+				return ($val == 'second')? 'a few seconds ago' : 
+					(($numberOfUnits>1) ? $numberOfUnits : 'a')
+					.' '.$val.(($numberOfUnits>1) ? 's' : '').' ago';
+			}
+		  
+		});
+		
+		$twig_config = [];
+		if(ENABLE_TWIG_CACHE) $twig_config["cache"] = "../cache/twig/";
+		
+		$loader = new \Twig\Loader\FilesystemLoader("../view/");
+		$twig = new \Twig\Environment($loader, $twig_config);
+		$twig->addFilter($filter);
+		
+		$monitoring = MONITORINGS ?? [];
+
+		echo $twig->render('index.twig', array_merge(["monitoring" => $monitoring], $this->data));
+
+	}
+
+}

public/index.php

@@ -1,16 +1,10 @@
 <?php
 
-require_once("../config.inc.php");
-require_once("../vendor/autoload.php");
 
-$loader = new \Twig\Loader\FilesystemLoader("../view/");
+require("../config.inc.php");
-$twig = new \Twig\Environment($loader, [
+require("../controller/status.php");
-    'cache' => '../cache/twig/',
-]);
 
-$page = json_decode(file_get_contents(UPTIME_KUMA_URL . "/api/status-page/public"), true);
+$status = new UptimeStatus;
-$monitors = json_decode(file_get_contents(UPTIME_KUMA_URL . "/api/status-page/heartbeat/public"), true);
 
-$data = array_merge($page, $monitors);
+$status->load_data();
-
+$status->display();
-echo $twig->render('index.twig', $data);

public/style.css

@@ -29,7 +29,6 @@ h3, h4 {
 
 .group .item {
 	overflow: hidden;
-	margin: 5px 0;
 	border-radius: var(--border-radius);
 }
 
@@ -37,6 +36,13 @@ h3, h4 {
 	background-color: #fff1;
 }
 
+:is(.group, .item) > .inner {
+	margin: 10px;
+}
+
+
+/* MONITOR */
+
 .monitor {
 	--color: #fff2;
 }
@@ -54,27 +60,57 @@ h3, h4 {
 	grid-template-columns: 22px 1fr max-content;
 }
 
-.monitor .heartbeats {
+.monitor .icon {
+	color: var(--color);
+	display: flex;
+}
+
+.monitor .uptime {
+	font-size: .9rem;
+	color: var(--color);
+}
+
+
+/* HEARTBEATS */
+
+.heartbeats {
+	display: flex;
+	gap: 5px;
+	flex-direction: column;
+}
+
+.heartbeats .items {
 	display: flex;
 	gap: 2px;
 	border-radius: var(--border-radius);
 	overflow: hidden;
 	height: 5px;
-	transition: all .3s;
+	transition: all .3s .5s;
 	opacity: .4;
 }
 
-.monitor:hover .heartbeats {
+.heartbeats .items > * {
-	height: 25px;
-	opacity: 1;
-}
-
-.monitor .heartbeats > * {
 	flex: 1;
 	background-color: var(--color);
 	border-radius: var(--border-radius);
 }
 
+.heartbeats .time {
+	display: flex;
+	justify-content: space-between;
+	font-size: .9rem;
+	opacity: .5;
+	line-height: 1;
+}
+
+.monitor:hover .heartbeats .items {
+	height: 25px;
+	opacity: 1;
+}
+
+
+/* STATUS COLORS */
+
 .monitor.status-1, .monitor .heartbeats .status-1 {
 	--color: var(--green-color);
 }
@@ -85,18 +121,4 @@ h3, h4 {
 
 .monitor.status-2, .monitor .heartbeats .status-2 {
 	--color: var(--red-color);
-}
-
-:is(.group, .item) > .inner {
-	margin: 10px;
-}
-
-.monitor .icon {
-	color: var(--color);
-	display: flex;
-}
-
-.monitor .uptime {
-	font-size: .9rem;
-	color: var(--color);
 }

view/heartbeats.twig

@@ -0,0 +1,11 @@
+<div class="heartbeats">
+	<div class="items">
+		{% for heartbeat in heartbeats %}
+			<div class="status-{{ heartbeat.status }}"></div>
+		{% endfor %}	
+	</div>
+	<div class="time">
+		<div>{{ (heartbeats | first).time | timeago((heartbeats | last).time) }}</div>
+		<div>now</div>
+	</div>
+</div>

view/monitor.twig

@@ -19,10 +19,8 @@
 				<b>{{ (attribute(uptimeList, "#{monitor.id}_24") * 100) | number_format(1, '.') }}%</b> uptime
 			</div>
 		</header>
-		<div class="heartbeats">
+		{% if monitoring[monitor.id].rich %}
-			{% for heartbeat in heartbeats %}
+			{{ include('./heartbeats.twig') }}
-				<div class="status-{{ heartbeat.status }}"></div>
+		{% endif %}
-			{% endfor %}	
-		</div>
 	</div>
 </div>