From 1184b5902be66c474f904fdbd8deb4445f4fc092 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Wed, 17 Aug 2022 08:53:54 -0700
Subject: Device numbers by status

---
 modern/src/main/MainPage.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'modern/src/main')

diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index c42b5be5..59141cf6 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -178,6 +178,8 @@ const MainPage = () => {
     setDevicesOpen(!devicesOpen);
   };
 
+  const deviceStatusCount = (status) => Object.values(devices).filter((d) => d.status === status).length;
+
   useEffect(() => setDevicesOpen(desktop), [desktop]);
 
   useEffect(() => {
@@ -299,9 +301,9 @@ const MainPage = () => {
                     onChange={(e) => setFilterStatuses(e.target.value)}
                     multiple
                   >
-                    <MenuItem value="online">{t('deviceStatusOnline')}</MenuItem>
-                    <MenuItem value="offline">{t('deviceStatusOffline')}</MenuItem>
-                    <MenuItem value="unknown">{t('deviceStatusUnknown')}</MenuItem>
+                    <MenuItem value="online">{`${t('deviceStatusOnline')} (${deviceStatusCount('online')})`}</MenuItem>
+                    <MenuItem value="offline">{`${t('deviceStatusOffline')} (${deviceStatusCount('offline')})`}</MenuItem>
+                    <MenuItem value="unknown">{`${t('deviceStatusUnknown')} (${deviceStatusCount('unknown')})`}</MenuItem>
                   </Select>
                 </FormControl>
                 <FormControl>
-- 
cgit v1.2.3