Mirror/podkop
1
0
Fork 0
mirror of https://github.com/itdoginfo/podkop.git synced 2025-12-06 11:36:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: colorize status ans latency

Browse Source
This commit is contained in:
divocat
2025-10-06 19:56:11 +03:00
parent 5418187dd3
commit 6117b0ef9b
6 changed files with 186 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
fe-app-podkop/src/dashboard/initDashboardController.ts
View File

@@ -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) },
],
});

19
fe-app-podkop/src/dashboard/renderer/renderOutboundGroup.ts
View File

@@ -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',
),
]),

28
fe-app-podkop/src/dashboard/renderer/renderWidget.ts
View File

@@ -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,
),
],
),
),
]);
}

6
fe-app-podkop/src/store.ts
View File

@@ -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 },
});

38
fe-app-podkop/src/styles.ts
View File

@@ -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 {

96
luci-app-podkop/htdocs/luci-static/resources/view/podkop/main.js
View File

@@ -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);