diff --git a/fe-app-podkop/src/dashboard/initDashboardController.ts b/fe-app-podkop/src/dashboard/initDashboardController.ts index a6e3808..a85a130 100644 --- a/fe-app-podkop/src/dashboard/initDashboardController.ts +++ b/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) }, ], }); diff --git a/fe-app-podkop/src/dashboard/renderer/renderOutboundGroup.ts b/fe-app-podkop/src/dashboard/renderer/renderOutboundGroup.ts index 865dc58..0b8ad3f 100644 --- a/fe-app-podkop/src/dashboard/renderer/renderOutboundGroup.ts +++ b/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', ), ]), diff --git a/fe-app-podkop/src/dashboard/renderer/renderWidget.ts b/fe-app-podkop/src/dashboard/renderer/renderWidget.ts index 850e263..5575cc3 100644 --- a/fe-app-podkop/src/dashboard/renderer/renderWidget.ts +++ b/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, + ), + ], + ), ), ]); } diff --git a/fe-app-podkop/src/store.ts b/fe-app-podkop/src/store.ts index 7770631..b920e4b 100644 --- a/fe-app-podkop/src/store.ts +++ b/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 }, }); diff --git a/fe-app-podkop/src/styles.ts b/fe-app-podkop/src/styles.ts index 9ab5ed5..836baab 100644 --- a/fe-app-podkop/src/styles.ts +++ b/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 { diff --git a/luci-app-podkop/htdocs/luci-static/resources/view/podkop/main.js b/luci-app-podkop/htdocs/luci-static/resources/view/podkop/main.js index e869094..3fc7fc3 100644 --- a/luci-app-podkop/htdocs/luci-static/resources/view/podkop/main.js +++ b/luci-app-podkop/htdocs/luci-static/resources/view/podkop/main.js @@ -420,6 +420,30 @@ var 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; @@ -471,11 +495,21 @@ var 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 { @@ -1043,6 +1077,18 @@ function renderOutboundGroup({ displayName }) { function renderOutbound(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", { @@ -1058,7 +1104,7 @@ function renderOutboundGroup({ ), E( "div", - { class: "pdk_dashboard-page__outbound-grid__item__latency" }, + { class: getLatencyClass() }, outbound.latency ? `${outbound.latency}ms` : "N/A" ) ]) @@ -1132,7 +1178,7 @@ var store = new Store({ 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 } }); // src/socket.ts @@ -1216,9 +1262,30 @@ var socket = SocketManager.getInstance(); // src/dashboard/renderer/renderWidget.ts function renderDashboardWidget({ title, items }) { 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)]) + (item) => 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 + ) + ] + ) ) ]); } @@ -1247,8 +1314,8 @@ async function fetchServicesInfo() { console.log("singbox", singbox); store.set({ services: { - singbox: singbox.running ? "\u2714 Enabled" : singbox.status, - podkop: podkop.status ? "\u2714 Enabled" : podkop.status + singbox: singbox.running, + podkop: podkop.enabled } }); } @@ -1337,9 +1404,18 @@ async function renderServiceInfoWidget() { items: [ { key: "Podkop", - value: String(services.podkop) + value: services.podkop ? "\u2714 Enabled" : "\u2718 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: String(services.singbox) } + { + key: "Sing-box", + value: services.singbox ? "\u2714 Running" : "\u2718 Stopped", + attributes: { + class: services.singbox ? "pdk_dashboard-page__widgets-section__item__row--success" : "pdk_dashboard-page__widgets-section__item__row--error" + } + } ] }); container.replaceChildren(renderedWidget);