From d1cb74e37f7d9afa25b47f1b5f313c063b44620f Mon Sep 17 00:00:00 2001
From: Mark Haslinghuis <mark@numloq.nl>
Date: Sun, 23 Jul 2023 19:12:54 +0200
Subject: [PATCH] Fix GPS waiting info margin (#3525)

* Fix GPS waiting info margin

* Add colors to GPS Signal Strenght info
---
 src/css/tabs/gps.less | 11 ++++++++++-
 src/js/tabs/gps.js    | 27 ++++++++++++++++++++++++---
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/css/tabs/gps.less b/src/css/tabs/gps.less
index e297bb14..1cf67c6c 100644
--- a/src/css/tabs/gps.less
+++ b/src/css/tabs/gps.less
@@ -139,7 +139,7 @@
 		float: left;
 		width: 100%;
 		.info {
-			margin-top: 50%;
+			margin-top: 30%;
 		}
 	}
 	#loadmap {
@@ -212,6 +212,15 @@ progress[value] {
 		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25) inset;
 	}
 }
+@media only screen and (max-width: 1455px) {
+	.tab-gps {
+		#waiting {
+			.info {
+				margin-top: 50%;
+			}
+		}
+	}
+}
 @media only screen and (max-width: 1055px) {
 	.tab-gps {
 		iframe {
diff --git a/src/js/tabs/gps.js b/src/js/tabs/gps.js
index e72fba83..f4deef2c 100644
--- a/src/js/tabs/gps.js
+++ b/src/js/tabs/gps.js
@@ -259,9 +259,30 @@ gps.initialize = async function (callback) {
                     } else {
                         rowContent += `<td>${FC.GPS_DATA.svid[i]}</td>`;
                         rowContent += `<td><progress value="${FC.GPS_DATA.cno[i]}" max="99"></progress></td>`;
-                        const quality = i18n.getMessage(qualityArray[FC.GPS_DATA.quality[i] & 0x7]);
-                        const used = i18n.getMessage(usedArray[(FC.GPS_DATA.quality[i] & 0x8) >> 3]);
-                        const healthy = i18n.getMessage(healthyArray[(FC.GPS_DATA.quality[i] & 0x30) >> 4]);
+
+                        let quality = i18n.getMessage(qualityArray[FC.GPS_DATA.quality[i] & 0x7]);
+                        let used = i18n.getMessage(usedArray[(FC.GPS_DATA.quality[i] & 0x8) >> 3]);
+                        let healthy = i18n.getMessage(healthyArray[(FC.GPS_DATA.quality[i] & 0x30) >> 4]);
+
+                        // Add color to the text
+                        if (quality.startsWith('fully locked')) {
+                            quality = `<span class="colorToggle ready">${quality}</span>`;
+                        } else {
+                            quality = `<span class="colorToggle">${quality}</span>`;
+                        }
+
+                        if (used.startsWith('used')) {
+                            used = `<span class="colorToggle ready">${used}</span>`;
+                        } else {
+                            used = `<span class="colorToggle">${used}</span>`;
+                        }
+
+                        if (healthy.startsWith('healthy')) {
+                            healthy = `<span class="colorToggle ready">${healthy}</span>`;
+                        } else {
+                            healthy = `<span class="colorToggle">${healthy}</span>`;
+                        }
+
                         rowContent += `<td>${quality} | ${used} | ${healthy}</td>`;
                     }
                     eSsTable.append(`<tr>${rowContent}</tr>`);