From 7d6924d2535ce749bcdeab077244387f263af412 Mon Sep 17 00:00:00 2001
From: Squidly271 <unraidsquid@gmail.com>
Date: Sat, 7 Dec 2024 10:33:06 -0500
Subject: [PATCH 1/3] Fix TS tooltip on mobile

---
 .../DockerContainers.page                     | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/emhttp/plugins/dynamix.docker.manager/DockerContainers.page b/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
index 13d6e42c2..8b2f73eef 100644
--- a/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
+++ b/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
@@ -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')):?>

From f230ee9fde6e89fcb00cae32ae9bb482f3ff033b Mon Sep 17 00:00:00 2001
From: Squidly271 <unraidsquid@gmail.com>
Date: Sat, 7 Dec 2024 10:35:00 -0500
Subject: [PATCH 2/3] Add translations and fix TS tooltip

---
 .../include/DockerContainers.php              | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/emhttp/plugins/dynamix.docker.manager/include/DockerContainers.php b/emhttp/plugins/dynamix.docker.manager/include/DockerContainers.php
index 68925e221..0cdacd6c7 100644
--- a/emhttp/plugins/dynamix.docker.manager/include/DockerContainers.php
+++ b/emhttp/plugins/dynamix.docker.manager/include/DockerContainers.php
@@ -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>";

From e6af8ba5235e39e5ae1df9898b84fd5ddc07c748 Mon Sep 17 00:00:00 2001
From: Squidly271 <unraidsquid@gmail.com>
Date: Sat, 7 Dec 2024 10:41:06 -0500
Subject: [PATCH 3/3] Capitalization

Doesn't affect current browser implementations
---
 emhttp/plugins/dynamix.docker.manager/DockerContainers.page | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/emhttp/plugins/dynamix.docker.manager/DockerContainers.page b/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
index 8b2f73eef..3f1f14d98 100644
--- a/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
+++ b/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
@@ -128,7 +128,7 @@ function loadlist(init) {
       contentAsHTML: true,
       functionBefore: function(instance,helper) {
         var origin = $(helper.origin);
-        var TScontent = $(origin).attr("data-TStitle");
+        var TScontent = $(origin).attr("data-tstitle");
         instance.content(TScontent);
       }
     });