UI: settings show/hide update display (#1072)

* UI: settings show/hide update display

This PR replaces the PR #1003

In this PR, the visual for available update is added to the foreground.

There are new settings to generally show/hide the update display, and only administrators receive the update display.

* change to `Bean`

* Update AppUpdateShowService.java

* add update message

* revision service

* change shouldShow

* Update githubVersion.js

* rm folder

* Update AppUpdateService.java

src/main/resources/static/css/home.css

@@ -89,3 +89,38 @@
 .jumbotron {
   padding: 3rem 3rem; /* Reduce vertical padding */
 }
+
+.lookatme {
+  opacity: 1;
+  position: relative;
+  display: inline-block;
+}
+
+.lookatme::after {
+  color: #e33100;
+  text-shadow: 0 0 5px #e33100;
+  /* in the html, the data-lookatme-text attribute must */
+  /* contain the same text as the .lookatme element */
+  content: attr(data-lookatme-text);
+  padding: inherit;
+  position: absolute;
+  inset: 0 0 0 0;
+  z-index: 1;
+  /* 20 steps / 2 seconds = 10fps */
+  -webkit-animation: 2s infinite Pulse steps(20);
+  animation: 2s infinite Pulse steps(20);
+}
+
+@keyframes Pulse {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

src/main/resources/static/images/update.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,10.12H14.22L16.96,7.3C14.23,4.6 9.81,4.5 7.08,7.2C4.35,9.91 4.35,14.28 7.08,17C9.81,19.7 14.23,19.7 16.96,17C18.32,15.65 19,14.08 19,12.1H21C21,14.08 20.12,16.65 18.36,18.39C14.85,21.87 9.15,21.87 5.64,18.39C2.14,14.92 2.11,9.28 5.62,5.81C9.13,2.34 14.76,2.34 18.27,5.81L21,3V10.12M12.5,8V12.25L16,14.33L15.28,15.54L11,13V8H12.5Z" /></svg>

src/main/resources/static/js/githubVersion.js

@@ -30,19 +30,39 @@ async function getLatestReleaseVersion() {
 
 async function checkForUpdate() {
   // Initialize the update button as hidden
-  var updateBtn = document.getElementById("update-btn");
+  var updateBtn = document.getElementById("update-btn") || null;
+  var updateLink = document.getElementById("update-link") || null;
   if (updateBtn !== null) {
     updateBtn.style.display = "none";
   }
+  if (updateLink !== null) {
+    console.log("hidden!");
+    if (!updateLink.classList.contains("visually-hidden")) {
+      updateLink.classList.add("visually-hidden");
+    }
+  }
 
   const latestVersion = await getLatestReleaseVersion();
   console.log("latestVersion=" + latestVersion);
   console.log("currentVersion=" + currentVersion);
   console.log("compareVersions(latestVersion, currentVersion) > 0)=" + compareVersions(latestVersion, currentVersion));
   if (latestVersion && compareVersions(latestVersion, currentVersion) > 0) {
-    document.getElementById("update-btn").style.display = "block";
+    if (updateBtn != null) {
+      document.getElementById("update-btn").style.display = "block";
+    }
+    if (updateLink !== null) {
+      document.getElementById("app-update").innerHTML = updateAvailable.replace("{0}", '<b>' + currentVersion + '</b>').replace("{1}", '<b>' + latestVersion + '</b>');
+      if (updateLink.classList.contains("visually-hidden")) {
+        updateLink.classList.remove("visually-hidden");
+      }
+    }
     console.log("visible");
   } else {
+    if (updateLink !== null) {
+      if (!updateLink.classList.contains("visually-hidden")) {
+        updateLink.classList.add("visually-hidden");
+      }
+    }
     console.log("hidden");
   }
 }

src/main/resources/static/js/homecard.js

@@ -46,6 +46,12 @@ function reorderCards() {
   cards.sort(function (a, b) {
     var aIsFavorite = localStorage.getItem(a.id) === "favorite";
     var bIsFavorite = localStorage.getItem(b.id) === "favorite";
+    if (a.id === "update-link") {
+      return -1;
+    }
+    if (b.id === "update-link") {
+      return 1;
+    }
     if (aIsFavorite && !bIsFavorite) {
       return -1;
     }