feat: colorize status ans latency

fe-app-podkop/src/dashboard/initDashboardController.ts

@@ -26,8 +26,8 @@ async function fetchServicesInfo() {
   console.log('singbox', singbox);
   store.set({
     services: {
-      singbox: singbox.running ? '✔ Enabled' : singbox.status,
-      podkop: podkop.status ? '✔ Enabled' : podkop.status,
+      singbox: singbox.running,
+      podkop: podkop.enabled,
     },
   });
 }
@@ -132,9 +132,22 @@ async function renderServiceInfoWidget() {
     items: [
       {
         key: 'Podkop',
-        value: String(services.podkop),
+        value: services.podkop ? '✔ Enabled' : '✘ Disabled',
+        attributes: {
+          class: services.podkop
+            ? 'pdk_dashboard-page__widgets-section__item__row--success'
+            : 'pdk_dashboard-page__widgets-section__item__row--error',
+        },
+      },
+      {
+        key: 'Sing-box',
+        value: services.singbox ? '✔ Running' : '✘ Stopped',
+        attributes: {
+          class: services.singbox
+            ? 'pdk_dashboard-page__widgets-section__item__row--success'
+            : 'pdk_dashboard-page__widgets-section__item__row--error',
+        },
       },
-      { key: 'Sing-box', value: String(services.singbox) },
     ],
   });
 

fe-app-podkop/src/dashboard/renderer/renderOutboundGroup.ts

@@ -5,6 +5,23 @@ export function renderOutboundGroup({
   displayName,
 }: Podkop.OutboundGroup) {
   function renderOutbound(outbound: Podkop.Outbound) {
+    function getLatencyClass() {
+
+      if (!outbound.latency) {
+        return 'pdk_dashboard-page__outbound-grid__item__latency--empty';
+      }
+
+      if (outbound.latency < 200) {
+        return 'pdk_dashboard-page__outbound-grid__item__latency--green';
+      }
+
+      if (outbound.latency < 400) {
+        return 'pdk_dashboard-page__outbound-grid__item__latency--yellow';
+      }
+
+      return 'pdk_dashboard-page__outbound-grid__item__latency--red';
+    }
+
     return E(
       'div',
       {
@@ -20,7 +37,7 @@ export function renderOutboundGroup({
           ),
           E(
             'div',
-            { class: 'pdk_dashboard-page__outbound-grid__item__latency' },
+            { class: getLatencyClass() },
             outbound.latency ? `${outbound.latency}ms` : 'N/A',
           ),
         ]),

fe-app-podkop/src/dashboard/renderer/renderWidget.ts

@@ -3,14 +3,38 @@ interface IRenderWidgetParams {
   items: Array<{
     key: string;
     value: string;
+    attributes?: {
+      class?: string;
+    };
   }>;
 }
 
 export function renderDashboardWidget({ title, items }: IRenderWidgetParams) {
   return E('div', { class: 'pdk_dashboard-page__widgets-section__item' }, [
-    E('b', {}, title),
+    E(
+      'b',
+      { class: 'pdk_dashboard-page__widgets-section__item__title' },
+      title,
+    ),
     ...items.map((item) =>
-      E('div', {}, [E('span', {}, `${item.key}: `), E('span', {}, item.value)]),
+      E(
+        'div',
+        {
+          class: `pdk_dashboard-page__widgets-section__item__row ${item?.attributes?.class || ''}`,
+        },
+        [
+          E(
+            'span',
+            { class: 'pdk_dashboard-page__widgets-section__item__row__key' },
+            `${item.key}: `,
+          ),
+          E(
+            'span',
+            { class: 'pdk_dashboard-page__widgets-section__item__row__value' },
+            item.value,
+          ),
+        ],
+      ),
     ),
   ]);
 }

fe-app-podkop/src/store.ts

@@ -70,13 +70,13 @@ export const store = new Store<{
     uploadTotal: number;
   };
   services: {
-    singbox: string;
-    podkop: string;
+    singbox: number;
+    podkop: number;
   };
 }>({
   sections: [],
   traffic: { up: 0, down: 0 },
   memory: { inuse: 0, oslimit: 0 },
   connections: { connections: [], memory: 0, downloadTotal: 0, uploadTotal: 0 },
-  services: { singbox: '', podkop: '' },
+  services: { singbox: -1, podkop: -1 },
 });

fe-app-podkop/src/styles.ts

@@ -72,6 +72,30 @@ export const GlobalStyles = `
     padding: 10px;
 }
 
+.pdk_dashboard-page__widgets-section__item__title {
+    
+}
+
+.pdk_dashboard-page__widgets-section__item__row {
+
+}
+
+.pdk_dashboard-page__widgets-section__item__row--success .pdk_dashboard-page__widgets-section__item__row__value {
+    color: var(--success-color-medium);
+}
+
+.pdk_dashboard-page__widgets-section__item__row--error .pdk_dashboard-page__widgets-section__item__row__value {
+    color: var(--error-color-medium);
+}
+
+.pdk_dashboard-page__widgets-section__item__row__key {
+    
+}
+
+.pdk_dashboard-page__widgets-section__item__row__value {
+
+}
+
 .pdk_dashboard-page__outbound-section {
     margin-top: 10px;
     border: 2px var(--background-color-low) solid;
@@ -123,11 +147,21 @@ export const GlobalStyles = `
     
 }
 
-.pdk_dashboard-page__outbound-grid__item__latency {
-    
+.pdk_dashboard-page__outbound-grid__item__latency--empty {
+    color: var(--primary-color-low);
 }
 
+.pdk_dashboard-page__outbound-grid__item__latency--green {
+    color: var(--success-color-medium);
+}
 
+.pdk_dashboard-page__outbound-grid__item__latency--yellow {
+    color: var(--warn-color-medium);
+}
+
+.pdk_dashboard-page__outbound-grid__item__latency--red {
+    color: var(--error-color-medium);
+}
 
 /* Skeleton styles*/
 .skeleton {