feat: added EMEL system messages and added icons to alert boxes

assets/style.css

@@ -2105,9 +2105,19 @@ input:-webkit-autofill:active{
 	max-width: 100%;
 }
 
+#alertBox #title {
+	color: var(--green);
+	font-weight: bold;
+	font-size: 1.2rem;
+	display: block;
+	margin-top: 1rem;
+	margin-left: 1.5rem;
+}
+
 #alertBox p {
-	padding: 8%;
+	padding: 0.5rem 1.5rem 1.5rem 1.5rem;
 	margin: 0;
+	font-size: 0.9rem;
 }
 
 #alertBox #customTextPromptInput {

index.html

@@ -174,9 +174,9 @@
 
 			// define a custom alert box
 			if (document.getElementById) {
-				window.alert = message => {
+				window.alert = (message, title = `<i class="bi bi-exclamation-triangle"></i>`) => {
 					// set timeout so that if the user clicks on the place where the button is, it doesn't get automatically clicked
-					setTimeout(() => createCustomAlert(message), 50);
+					setTimeout(() => createCustomAlert(message, title), 50);
 				};
 			}
 

scripts/dialogs.js

@@ -1,5 +1,5 @@
 // Custom styled alert with OK option
-function createCustomAlert(message) {
+function createCustomAlert(message, title = null) {
 	if (document.getElementById("modalContainer")) return;
 
 	const mObj = document.createElement("div");
@@ -8,6 +8,12 @@ function createCustomAlert(message) {
 	const alertObj = mObj.appendChild(document.createElement("div"));
 	alertObj.id = "alertBox";
 
+	if (title) {
+		const titleObj = alertObj.appendChild(document.createElement("span"));
+		titleObj.id = "title";
+		titleObj.innerHTML = title;
+	}
+
 	const msg = alertObj.appendChild(document.createElement("p"));
 	msg.innerHTML = message;
 

scripts/map.js

@@ -109,23 +109,8 @@ async function initMap() {
 		user.accessToken = accessTokenCookie;
 	}
 
-	// Start WebSocket connection
-	startWSConnection();
-
-	// Get all user details
-	getUserInformation();
-
-	// Check if update info should be shown
-	showUpdateInfoIfNeeded();
-
-	// Get the user location on app open
-	getLocation();
-
-	// Start rotation of location dot
-	startLocationDotRotation();
-
-	// Get the stations and load them to the map
-	await getStations();
+	/* Run the startup functions */
+	await runStartupFunctions();
 }
 
 function mapDotSVG(ratio, docks = false) {

scripts/user.js

@@ -63,24 +63,7 @@ async function login(event) {
 		user.expiration = response.data.expiration;
 
 		/* Run the startup functions */
-
-		// Start WebSocket connection
-		startWSConnection();
-
-		// Get all user details
-		getUserInformation();
-
-		// Check if update info should be shown
-		showUpdateInfoIfNeeded();
-
-		// Get the stations and load them to the map
-		await getStations();
-
-		// Get the user location on app open
-		getLocation();
-
-		// Start rotation of location dot
-		startLocationDotRotation();
+		await runStartupFunctions();
 
 		// Set the cookie expiry to 1 year after today.
 		const refreshTokenExpiryDate = new Date();
@@ -103,6 +86,48 @@ async function login(event) {
 	}
 }
 
+async function runStartupFunctions() {
+	// Start WebSocket connection
+	startWSConnection();
+
+	// Get all user details
+	getUserInformation();
+
+	// Check if update info should be shown
+	showUpdateInfoIfNeeded();
+
+	// Get the user location on app open
+	getLocation();
+
+	// Start rotation of location dot
+	startLocationDotRotation();
+
+	// Get the stations and load them to the map
+	await getStations();
+
+	// Show any messages from EMEL
+	await validateLogin();
+}
+
+async function validateLogin() {
+	const response = await makePostRequest(
+		"https://apigira.emel.pt/graphql",
+		JSON.stringify({
+			query: `mutation { 
+				validateLogin(in: { 
+					language: "pt",
+					userAgent: "Gira/3.3.5 (Android 34)",
+					firebaseToken: "cwEUfibvTHCRZ6z3R1l3B8"
+				}) { messages { code text } } 
+			}`,
+		})
+	);
+
+	for (const message of response?.data?.validateLogin?.messages) {
+		createCustomAlert(message.text, `<i class="bi bi-info-circle"></i>`);
+	}
+}
+
 // Gets all the user information
 async function getUserInformation() {
 	// get the general information (without using the proxy)

scripts/version.js

@@ -26,7 +26,7 @@ function showUpdateInfoIfNeeded() {
 		// Check version to show update notes
 		const userVersion = getCookie("version");
 		if (userVersion !== currentVersion) {
-			alert(changelogHTML);
+			alert(changelogHTML, `<i class="bi bi-newspaper"></i>`);
 			createCookie("version", currentVersion, expiryDate);
 		}
 	}, 1500);