Merge pull request #4 from prabapro/speed-status

Speed status - v1.2.0

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "slt-bb-usage-checker",
 	"private": true,
-	"version": "1.1.4",
+	"version": "1.2.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",

src/popup/popup.css

@@ -55,11 +55,40 @@ h1 sup {
 	display: none;
 }
 
+#account-info {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 5px;
+	margin: 15px 0;
+}
+
 #account-id {
 	font-size: 15px;
-	color: rgba(128, 128, 128, 0.626);
-	text-align: center;
-	margin: 15px 0;
+	color: gray;
+}
+
+.status-pill {
+	padding: 1px 10px;
+	border-radius: 10px;
+	font-size: 10px;
+	font-weight: 500;
+	text-transform: uppercase;
+}
+
+.status-normal {
+	background-color: #e8f5e9;
+	color: #1b5e20;
+}
+
+.status-throttled {
+	background-color: #fff3e0;
+	color: #e65100;
+}
+
+.status-other {
+	background-color: #e0e0e0;
+	color: #424242;
 }
 
 main {

src/popup/popup.html

@@ -15,7 +15,10 @@ <h1>
 			</h1>
 		</header>
 
-		<div id="account-id"></div>
+		<div id="account-info">
+			<span id="account-id"></span>
+			<span id="speed-status" class="status-pill"></span>
+		</div>
 		<div id="welcome-screen" style="display: none"></div>
 		<div id="errorMessage" class="error-message"></div>
 

src/popup/popup.js

@@ -325,7 +325,7 @@ const displayUsageData = (data, subscriberId) => {
 		return;
 	}
 
-	updateAccountInfo(subscriberId);
+	updateAccountInfo(subscriberId, data.speed_status);
 	createUsageDataGroups(data.usage_data);
 	updateLastUpdatedTime(data.reported_time);
 
@@ -344,13 +344,53 @@ const formatAccountId = (accountId) => {
 	return accountId;
 };
 
-const updateAccountInfo = (accountId) => {
+const updateAccountInfo = (accountId, speedStatus) => {
 	const accountIdElement = document.getElementById('account-id');
+	const speedStatusElement = document.getElementById('speed-status');
+
 	if (accountIdElement) {
 		const formattedId = formatAccountId(accountId);
 		accountIdElement.textContent = `Account: ${formattedId}`;
 		console.log('Formatted Account ID:', formattedId);
 	}
+
+	if (speedStatusElement && speedStatus) {
+		const formattedStatus = formatSpeedStatus(speedStatus);
+		speedStatusElement.textContent = formattedStatus;
+		speedStatusElement.className = `status-pill ${getStatusClass(speedStatus)}`;
+		console.log('Speed Status:', formattedStatus);
+
+		// Send GA4 event for speed status
+		sendEvent(
+			'speed_status_checked',
+			{
+				speed_status: speedStatus.toLowerCase(),
+			},
+			__APP_VERSION__
+		);
+	}
+};
+
+const formatSpeedStatus = (status) => {
+	status = status.toLowerCase();
+	if (status === 'normal') {
+		return 'Speed is Normal';
+	} else if (status === 'throttle' || status === 'throttled') {
+		return 'Speed is Throttled';
+	} else {
+		return status.charAt(0).toUpperCase() + status.slice(1);
+	}
+};
+
+const getStatusClass = (status) => {
+	status = status.toLowerCase();
+	if (status === 'normal') {
+		return 'status-normal';
+	} else if (status === 'throttle' || status === 'throttled') {
+		return 'status-throttled';
+	} else {
+		return 'status-other';
+	}
 };
 
 const createUsageDataGroups = (usageData) => {