enhance version-check and beautify displayed information

Signed-off-by: Michael Kaufmann <d00p@froxlor.org>

lib/Froxlor/Ajax/Ajax.php

@@ -34,6 +34,7 @@ use Froxlor\Database\Database;
 use Froxlor\FileDir;
 use Froxlor\Froxlor;
 use Froxlor\Http\HttpClient;
+use Froxlor\Install\Update;
 use Froxlor\Settings;
 use Froxlor\UI\Listing;
 use Froxlor\UI\Panel\UI;
@@ -193,8 +194,14 @@ class Ajax
 		try {
 			$json_result = \Froxlor\Api\Commands\Froxlor::getLocal($this->userinfo)->checkUpdate();
 			$result = json_decode($json_result, true)['data'];
-			$result = UI::twig()->render($this->theme . '/misc/version_top.html.twig', $result);
-			return $this->jsonResponse($result);
+			$result['full_version'] = Froxlor::getFullVersion();
+			$result['dbversion'] = Froxlor::DBVERSION;
+			$uc_data = Update::getUpdateCheckData();
+			$result['last_update_check'] = $uc_data['ts'];
+			$result['channel'] = Settings::Get('system.update_channel');
+
+			$result_rendered = UI::twig()->render($this->theme . '/misc/version_top.html.twig', $result);
+			return $this->jsonResponse($result_rendered);
 		} catch (Exception $e) {
 			// don't display anything if just not allowed due to permissions
 			if ($e->getCode() != 403) {

lib/Froxlor/Api/Commands/Froxlor.php

@@ -87,7 +87,8 @@ class Froxlor extends ApiCommand
 						'version' => $this->version,
 						'message' => $text,
 						'link' => AutoUpdate::getFromResult('url'),
-						'additional_info' => AutoUpdate::getFromResult('info')
+						'additional_info' => AutoUpdate::getFromResult('info'),
+						'aucheck' => $aucheck
 					];
 				} else if ($aucheck < 0 || $aucheck > 1) {
 					// errors
@@ -105,7 +106,8 @@ class Froxlor extends ApiCommand
 						'version' => $this->version,
 						'message' => '',
 						'link' => '',
-						'additional_info' => $errmsg
+						'additional_info' => $errmsg,
+						'aucheck' => $aucheck
 					];
 				} else {
 					$response = [
@@ -113,7 +115,8 @@ class Froxlor extends ApiCommand
 						'version' => $this->version,
 						'message' => '',
 						'link' => '',
-						'additional_info' => lng('update.noupdatesavail', [(Settings::Get('system.update_channel') == 'testing' ? lng('serversettings.uc_testing') . ' ' : '')])
+						'additional_info' => AutoUpdate::getFromResult('info'),
+						'aucheck' => $aucheck
 					];
 				}
 

lib/Froxlor/Cli/UpdateCommand.php

@@ -103,7 +103,7 @@ final class UpdateCommand extends CliCommand
 						return self::SUCCESS;
 					}
 					// no new version
-					$output->writeln('<info>' . lng('update.noupdatesavail', [(Settings::Get('system.update_channel') == 'testing' ? lng('serversettings.uc_testing') . ' ' : '')]) . '</>');
+					$output->writeln('<info>' . AutoUpdate::getFromResult('info') . '</>');
 					$result = self::SUCCESS;
 				}
 			} catch (Exception $e) {

lib/Froxlor/UI/Panel/FroxlorTwig.php

@@ -76,6 +76,10 @@ class FroxlorTwig extends AbstractExtension
 				$this,
 				'getSetting'
 			]),
+			new TwigFunction('get_config', [
+				$this,
+				'getConfig'
+			]),
 			new TwigFunction('lng', [
 				$this,
 				'getLang'
@@ -125,6 +129,11 @@ class FroxlorTwig extends AbstractExtension
 		return Settings::Get($setting);
 	}
 
+	public function getConfig($config = null)
+	{
+		return Settings::Config($config);
+	}
+
 	public function getLang($identifier = null, array $arguments = [])
 	{
 		return lng($identifier, $arguments);

templates/Froxlor/misc/version_popover.html.twig

@@ -0,0 +1,26 @@
+{% macro vpopover(isnewerversion, additional_info, full_version, dbversion, channel, last_update_check, message) %}
+	{% if isnewerversion == 0 %}
+		<p>{{ additional_info }}</p>
+		<div class='d-flex justify-content-between'>
+			<div class='fw-bold'>Version:</div>
+			<div>{{ full_version }}</div>
+		</div>
+		<div class='d-flex justify-content-between'>
+			<div class='fw-bold'>Database version:</div>
+			<div>{{ dbversion }}</div>
+		</div>
+		<div class='d-flex justify-content-between'>
+			<div class='fw-bold'>Channel:</div>
+			<div>{{ channel }}</div>
+		</div>
+		<div class='d-flex justify-content-between'>
+			<div class='fw-bold'>Last checked:</div>
+			<div>{{ last_update_check|date('d.m.Y H:i') }}</div>
+		</div>
+	{% else %}
+		<p>{{ message }}</p>
+		{% if get_config('enable_webupdate') %}
+			<a class='btn d-block btn-outline-warning' href='admin_autoupdate.php?page=overview'>Open updater</a>
+		{% endif %}
+	{% endif %}
+{% endmacro %}

templates/Froxlor/misc/version_top.html.twig

@@ -1,8 +1,12 @@
-<a class="nav-link {% if isnewerversion == 0 %}text-success{% else %}text-warning{% endif %}" {% if isnewerversion == 0 %} href="#" {% else %} href="admin_autoupdate.php?page=overview" {% endif %} title="{% if isnewerversion == 0 %}{{ additional_info }}{% else %}{{ message }}{% endif %}">
-	{% if isnewerversion == 0 %}
+{% import "Froxlor/misc/version_popover.html.twig" as vc %}
+<span id="ucheck" class="nav-link {% if isnewerversion == 0 and aucheck < 0 %}text-muted{% elseif isnewerversion == 0 %}text-success{% else %}text-warning{% endif %}"
+	  data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="hover focus click" data-bs-html="true"
+	  data-bs-content="{{ vc.vpopover(isnewerversion, additional_info, full_version, dbversion, channel, last_update_check, message) }}"
+>
+	{% if isnewerversion == 0 and aucheck == 0 %}
 		<i class="fa-solid fa-circle-check me-1"></i>
 	{% else %}
 		<i class="fa-solid fa-circle-exclamation me-1"></i>
 	{% endif %}
-	<span class="d-md-none d-xl-inline">{{ version }}</span>
-</a>
+	<span class="d-none d-xl-inline">{{ version }}</span>
+</span>

templates/Froxlor/src/js/components/updatecheck.js

@@ -8,11 +8,13 @@ $(function() {
 			type: "GET",
 			success: function (data) {
 				$("#updatecheck").html(data);
+				new bootstrap.Popover(document.getElementById('ucheck'));
 			},
 			error: function (request, status, error) {
 				console.log(request, status, error)
 				let message = 'Can\'t check version';
-				$("#updatecheck").html('<span class="text-decoration-none badge bg-warning mt-2 me-2" data-bs-toggle="tooltip" data-bs-placement="left" title="' + message + '"><i class="fa-solid fa-exclamation-triangle"></i> <span class="d-md-none d-xl-inline">' + message + '</span></span>');
+				$("#updatecheck").html('<span id="ucheck" class="text-decoration-none badge bg-warning mt-2 me-2" data-bs-toggle="tooltip" data-bs-placement="left" title="' + message + '"><i class="fa-solid fa-exclamation-triangle"></i> <span class="d-md-none d-xl-inline">' + message + '</span></span>');
+				new bootstrap.Tooltip(document.getElementById('ucheck'));
 			}
 		});
 	}