mirror/webgui
1
0
Fork 0
mirror of https://github.com/unraid/webgui.git synced 2026-01-07 01:59:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1940 from Squidly271/patch-9

Browse Source 
Fix TS tooltip on mobile
This commit is contained in:
tom mortensen
2024-12-07 09:59:07 -08:00
committed by GitHub
parent b47a526edd e6af8ba523
commit 3083474d35
2 changed files with 37 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
emhttp/plugins/dynamix.docker.manager/DockerContainers.page
View File

@@ -115,20 +115,22 @@ function loadlist(init) {
$.get('/plugins/dynamix.docker.manager/include/DockerContainers.php',function(d) {
clearTimeout(timers.docker);
var data = d.split(/\0/);
$(".TS_tooltip").tooltipster("destroy");
$('#docker_list').html(data[0]);
$('#docker_list .TS_tooltip').tooltipster({
$('.TS_tooltip').tooltipster({
animation: 'fade',
delay: 200,
trigger: 'custom',
triggerOpen: {
mouseenter: true,
click: true
},
triggerClose: {
mouseleave: true,
click: true
},
contentAsHTML: true
triggerOpen: {click:true,touchstart:true,mouseenter:true},
triggerClose:{click:true,scroll:false,mouseleave:true},
interactive: true,
viewportAware: true,
contentAsHTML: true,
functionBefore: function(instance,helper) {
var origin = $(helper.origin);
var TScontent = $(origin).attr("data-tstitle");
instance.content(TScontent);
}
});
$('head').append('<script>'+data[1]+'<\/script>');
<?if (_var($display,'resize')):?>

50
emhttp/plugins/dynamix.docker.manager/include/DockerContainers.php
View File

@@ -194,10 +194,10 @@ foreach ($containers as $ct) {
echo "<span class='green-text' style='white-space:nowrap;'><i class='fa fa-check fa-fw'></i> "._('up-to-date')."</span>";
echo "<div class='advanced'><a class='exec' onclick=\"updateContainer('".addslashes(htmlspecialchars($name))."');\"><span style='white-space:nowrap;'><i class='fa fa-cloud-download fa-fw'></i> "._('force update')."</span></a></div>";
} elseif (!empty($composestack)) {
echo "<div><span><i class='fa fa-docker fa-fw'/></i> Compose</span></div>";
echo "<div><span><i class='fa fa-docker fa-fw'/></i> "._("Compose")."</span></div>";
echo "<span tyle='white-space:nowrap;'><i class='fa fa-check fa-fw'></i> "._('up-to-date')."</span>";
} else {
echo "<div><span><i class='fa fa-docker fa-fw'/></i> 3rd Party</span></div>";
echo "<div><span><i class='fa fa-docker fa-fw'/></i> "._("3rd Party")."</span></div>";
echo "<span tyle='white-space:nowrap;'><i class='fa fa-check fa-fw'></i> "._('up-to-date')."</span>";
}
break;
@@ -222,10 +222,10 @@ foreach ($containers as $ct) {
echo "<span class='orange-text' style='white-space:nowrap;'><i class='fa fa-unlink'></i> "._('not available')."</span>";
echo "<div class='advanced'><a class='exec' onclick=\"updateContainer('".addslashes(htmlspecialchars($name))."');\"><span style='white-space:nowrap;'><i class='fa fa-cloud-download fa-fw'></i> "._('force update')."</span></a></div>";
} elseif (!empty($composestack)) {
echo "<div><span><i class='fa fa-docker fa-fw'/></i> Compose</span></div>";
echo "<div><span><i class='fa fa-docker fa-fw'/></i> "._("Compose")."</span></div>";
echo "<span style='white-space:nowrap;'><i class='fa fa-unlink'></i> "._('not available')."</span>";
} else {
echo "<div><span><i class='fa fa-docker fa-fw'/></i> 3rd Party</span></div>";
echo "<div><span><i class='fa fa-docker fa-fw'/></i> "._("3rd Party")."</span></div>";
echo "<span style='white-space:nowrap;'><i class='fa fa-unlink'></i> "._('not available')."</span>";
}
break;
@@ -240,27 +240,27 @@ foreach ($containers as $ct) {
// Construct TSinfo from TSstats
$TSinfo = '';
if (!$TSstats["Self"]["Online"]) {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Online:</span><span class='ui-tailscale-value'>&#10060;<br/>Please check the logs!</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Online:")."</span><span class='ui-tailscale-value'>&#10060;<br/>"._("Please check the logs!")."</span></div>";
} else {
$TS_version = explode('-', $TSstats["Version"])[0];
if (!empty($TS_version)) {
if (!empty($TS_latest_version)) {
if ($TS_version !== $TS_latest_version) {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Tailscale:</span><span class='ui-tailscale-value'>v" . $TS_version . " &#10132; v" . $TS_latest_version . " available!</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Tailscale:")."</span><span class='ui-tailscale-value'>v" . $TS_version . " &#10132; v" . $TS_latest_version . " "._("available!")."</span></div>";
} else {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Tailscale:</span><span class='ui-tailscale-value'>v" . $TS_version . "</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Tailscale:")."</span><span class='ui-tailscale-value'>v" . $TS_version . "</span></div>";
}
} else {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Tailscale:</span><span class='ui-tailscale-value'>v" . $TS_version . "</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>".("Tailscale:")."</span><span class='ui-tailscale-value'>v" . $TS_version . "</span></div>";
}
}
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Online:</span><span class='ui-tailscale-value'>&#9989;</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Online:")."</span><span class='ui-tailscale-value'>&#9989;</span></div>";
$TS_DNSName = $TSstats["Self"]["DNSName"];
$TS_HostNameActual = substr($TS_DNSName, 0, strpos($TS_DNSName, '.'));
if (strcasecmp($TS_HostNameActual, $TShostname) !== 0 && !empty($TS_DNSName)) {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Hostname:</span><span class='ui-tailscale-value'>Real Hostname &#10132; " . $TS_HostNameActual . "</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Hostname:")."</span><span class='ui-tailscale-value'>"._("Real Hostname")." &#10132; " . $TS_HostNameActual . "</span></div>";
} else {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Hostname:</span><span class='ui-tailscale-value'>" . $TShostname . "</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Hostname:")."</span><span class='ui-tailscale-value'>" . $TShostname . "</span></div>";
}
// Map region relay code to cleartext region if TS_derp_list is available
if (!empty($TS_derp_list)) {
@@ -271,31 +271,31 @@ foreach ($containers as $ct) {
}
}
if (!empty($TSregion)) {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>DERP Relay:</span><span class='ui-tailscale-value'>" . $TSregion . "</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("DERP Relay:")."</span><span class='ui-tailscale-value'>" . $TSregion . "</span></div>";
} else {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>DERP Relay:</span><span class='ui-tailscale-value'>" . $TSstats["Self"]["Relay"] . "</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("DERP Relay:")."</span><span class='ui-tailscale-value'>" . $TSstats["Self"]["Relay"] . "</span></div>";
}
} else {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>DERP Relay:</span><span class='ui-tailscale-value'>" . $TSstats["Self"]["Relay"] . "</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("DERP Relay").":</span><span class='ui-tailscale-value'>" . $TSstats["Self"]["Relay"] . "</span></div>";
}
if (!empty($TSstats["Self"]["TailscaleIPs"])) {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Addresses:</span><span class='ui-tailscale-value'>" . implode("<br/>", $TSstats["Self"]["TailscaleIPs"]) . "</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Addresses:")."</span><span class='ui-tailscale-value'>" . implode("<br/>", $TSstats["Self"]["TailscaleIPs"]) . "</span></div>";
}
if (!empty($TSstats["Self"]["PrimaryRoutes"])) {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Routes:</span><span class='ui-tailscale-value'>" . implode("<br/>", $TSstats["Self"]["PrimaryRoutes"]) . "</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Routes:")."</span><span class='ui-tailscale-value'>" . implode("<br/>", $TSstats["Self"]["PrimaryRoutes"]) . "</span></div>";
}
if ($TSstats["Self"]["ExitNodeOption"]) {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Is Exit Node:</span><span class='ui-tailscale-value'>&#9989;</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Is Exit Node:")."</span><span class='ui-tailscale-value'>&#9989;</span></div>";
} else {
if (!empty($TSstats["ExitNodeStatus"])) {
$TS_exit_node_status = ($TSstats["ExitNodeStatus"]["Online"]) ? "&#9989;" : "&#10060;";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Exit Node:</span><span class='ui-tailscale-value'>" . strstr($TSstats["ExitNodeStatus"]["TailscaleIPs"][0], '/', true) . " | Status: " . $TS_exit_node_status ."</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Exit Node:")."</span><span class='ui-tailscale-value'>" . strstr($TSstats["ExitNodeStatus"]["TailscaleIPs"][0], '/', true) . " | Status: " . $TS_exit_node_status ."</span></div>";
} else {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Is Exit Node:</span><span class='ui-tailscale-value'>&#10060;</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Is Exit Node:")."</span><span class='ui-tailscale-value'>&#10060;</span></div>";
}
}
if (!empty($TSwebGui)) {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>URL:</span><span class='ui-tailscale-value'>" . $TSwebGui . "</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("URL:")."</span><span class='ui-tailscale-value'>" . $TSwebGui . "</span></div>";
}
if (!empty($TSstats["Self"]["KeyExpiry"])) {
$TS_expiry = new DateTime($TSstats["Self"]["KeyExpiry"]);
@@ -303,21 +303,21 @@ foreach ($containers as $ct) {
$TS_expiry_formatted = $TS_expiry->format('Y-m-d');
$TS_expiry_diff = $current_Date->diff($TS_expiry);
if ($TS_expiry_diff->invert) {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Key Expiry:</span><span class='ui-tailscale-value'>&#10060; Expired! Renew/Disable key expiry!</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Key Expiry:")."</span><span class='ui-tailscale-value'>&#10060; "._("Expired! Renew/Disable key expiry!")."</span></div>";
} else {
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>Key Expiry:</span><span class='ui-tailscale-value'>" . $TS_expiry_formatted . " (" . $TS_expiry_diff->days . " days)</span></div>";
$TSinfo .= "<div class='ui-tailscale-row'><span class='ui-tailscale-label'>"._("Key Expiry:")."</span><span class='ui-tailscale-value'>" . $TS_expiry_formatted . " (" . $TS_expiry_diff->days . " days)</span></div>";
}
}
}
// Display TSinfo if data was fetched correctly
$TS_status = "<br/><div class='TS_tooltip' style='display: inline-block;' title='" . htmlspecialchars($TSinfo) . "'><img src='/plugins/dynamix.docker.manager/images/tailscale.png' style='height: 1.23em;'> Tailscale</div>";
$TS_status = "<br/><div class='TS_tooltip' style='cursor:pointer; display: inline-block;' data-tstitle='" . htmlspecialchars($TSinfo) . "'><img src='/plugins/dynamix.docker.manager/images/tailscale.png' style='height: 1.23em;'> Tailscale</div>";
} else {
// Display message to refresh page if Tailscale in the container wasn't maybe ready to get the data
$TS_status = "<br/><div class='TS_tooltip' style='display: inline-block;' title='Error gathering Tailscale information from container.<br/>Please check the logs and refresh the page.'><img src='/plugins/dynamix.docker.manager/images/tailscale.png' style='height: 1.23em;'> Tailscale</div>";
$TS_status = "<br/><div class='TS_tooltip' style='display: inline-block;' data-tstitle='"._("Error gathering Tailscale information from container.")."<br/>"._("Please check the logs and refresh the page.")."'><img src='/plugins/dynamix.docker.manager/images/tailscale.png' style='height: 1.23em;'> Tailscale</div>";
}
} else {
// Display message that container isn't running
$TS_status = "<br/><div class='TS_tooltip' style='display: inline-block;' title='Container not runnig'><img src='/plugins/dynamix.docker.manager/images/tailscale.png' style='height: 1.23em;'> Tailscale</div>";
$TS_status = "<br/><div class='TS_tooltip' style='cursor:pointer;display: inline-block;' data-tstitle='"._("Container not running")."'><img src='/plugins/dynamix.docker.manager/images/tailscale.png' style='height: 1.23em;'> Tailscale</div>";
}
}
echo "<div class='advanced'><i class='fa fa-info-circle fa-fw'></i> ".compress(_($version),12,0)."</div></td>";