Skip to content

Commit e2725b0

Browse files
SuaYooSuaYoo
committed
update badges
1 parent 3fdbaeb commit e2725b0

File tree

5 files changed

+112
-31
lines changed

5 files changed

+112
-31
lines changed

‎frontend/src/features/browser-profiles/select-browser-profile.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ import { ifDefined } from "lit/directives/if-defined.js";
1010
import { when } from "lit/directives/when.js";
1111
import orderBy from "lodash/fp/orderBy";
1212

13-
import { channelBadge, proxyBadge } from "./templates/badges";
14-
1513
import { BtrixElement } from "@/classes/BtrixElement";
1614
import { none } from "@/layouts/empty";
1715
import { pageHeading } from "@/layouts/page";
@@ -178,15 +176,16 @@ export class SelectBrowserProfile extends BtrixElement {
178176
: none}
179177
</btrix-desc-list-item>
180178
<btrix-desc-list-item label=${msg("Crawler Channel")}>
181-
${channelBadge(
182-
profile.crawlerChannel || CrawlerChannelImage.Default,
183-
)}
179+
<btrix-crawler-channel-badge
180+
channelId=${profile.crawlerChannel ||
181+
CrawlerChannelImage.Default}
182+
></btrix-crawler-channel-badge>
184183
</btrix-desc-list-item>
185184
${when(
186185
profile.proxyId,
187-
(proxy) => html`
186+
(proxyId) => html`
188187
<btrix-desc-list-item label=${msg("Proxy")}>
189-
${proxyBadge(proxy)}
188+
<btrix-proxy-badge proxyId=${proxyId}></btrix-proxy-badge>
190189
</btrix-desc-list-item>
191190
`,
192191
)}

‎frontend/src/features/browser-profiles/templates/badges.ts‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import { msg } from "@lit/localize";
22
import { html, nothing } from "lit";
33
import { when } from "lit/directives/when.js";
4-
import capitalize from "lodash/fp/capitalize";
54

6-
import { CrawlerChannelImage, type Profile } from "@/types/crawler";
5+
import { type Profile } from "@/types/crawler";
76

87
export const usageBadge = (inUse: boolean) =>
9-
html`<sl-tooltip content=${msg("Crawl Workflow Usage")}>
8+
html`<sl-tooltip
9+
content="${msg("Crawl Workflow Usage")}: ${inUse
10+
? msg("In Use")
11+
: msg("Not In Use")}"
12+
>
1013
<btrix-badge variant=${inUse ? "cyan" : "neutral"} class="font-monostyle">
1114
<sl-icon
1215
name=${inUse ? "check-circle" : "dash-circle"}
@@ -16,32 +19,25 @@ export const usageBadge = (inUse: boolean) =>
1619
</btrix-badge>
1720
</sl-tooltip>`;
1821

19-
export const channelBadge = (channel: CrawlerChannelImage | AnyString) =>
20-
html`<sl-tooltip content=${msg("Crawler Release Channel")}>
21-
<btrix-badge
22-
variant=${channel === CrawlerChannelImage.Default ? "neutral" : "blue"}
23-
class="font-monostyle"
24-
>
25-
<sl-icon name="boxes" class="mr-1.5"></sl-icon>
26-
${capitalize(channel)}
27-
</btrix-badge>
28-
</sl-tooltip>`;
29-
30-
export const proxyBadge = (proxy: string) =>
31-
html`<sl-tooltip content=${msg("Crawler Proxy Server")}>
32-
<btrix-badge variant="blue" class="font-monostyle">
33-
<sl-icon name="globe2" class="mr-1.5"></sl-icon>
34-
${proxy}
35-
</btrix-badge>
36-
</sl-tooltip>`;
37-
3822
export const badges = (
3923
profile: Partial<Pick<Profile, "inUse" | "crawlerChannel" | "proxyId">>,
4024
) => {
4125
return html`<div class="flex flex-wrap gap-3 whitespace-nowrap">
4226
${profile.inUse === undefined ? nothing : usageBadge(profile.inUse)}
43-
${when(profile.crawlerChannel, channelBadge)}
44-
${when(profile.proxyId, proxyBadge)}
27+
${when(
28+
profile.crawlerChannel,
29+
(channelImage) => html`
30+
<btrix-crawler-channel-badge
31+
channelId=${channelImage}
32+
></btrix-crawler-channel-badge>
33+
`,
34+
)}
35+
${when(
36+
profile.proxyId,
37+
(proxyId) => html`
38+
<btrix-proxy-badge proxyId=${proxyId}></btrix-proxy-badge>
39+
`,
40+
)}
4541
</div> `;
4642
};
4743

‎frontend/src/features/crawls/crawler-channel-badge.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { consume } from "@lit/context";
2+
import { localized, msg } from "@lit/localize";
3+
import { html } from "lit";
4+
import { customElement, property } from "lit/decorators.js";
5+
6+
import { TailwindElement } from "@/classes/TailwindElement";
7+
import {
8+
orgCrawlerChannelsContext,
9+
type OrgCrawlerChannelsContext,
10+
} from "@/context/org-crawler-channels";
11+
import { CrawlerChannelImage } from "@/types/crawler";
12+
13+
@customElement("btrix-crawler-channel-badge")
14+
@localized()
15+
export class CrawlerChannelBadge extends TailwindElement {
16+
@consume({ context: orgCrawlerChannelsContext, subscribe: true })
17+
private readonly crawlerChannels?: OrgCrawlerChannelsContext;
18+
19+
@property({ type: String })
20+
channelId?: CrawlerChannelImage | AnyString;
21+
22+
render() {
23+
if (!this.channelId || !this.crawlerChannels) return;
24+
25+
const crawlerChannel = this.crawlerChannels.find(
26+
({ id }) => id === this.channelId,
27+
);
28+
29+
return html`<sl-tooltip
30+
content="${msg("Crawler Release Channel")}${crawlerChannel
31+
? `: ${crawlerChannel.image}`
32+
: ""}"
33+
hoist
34+
>
35+
<btrix-badge
36+
variant=${this.channelId === CrawlerChannelImage.Default
37+
? "neutral"
38+
: "blue"}
39+
class="font-monostyle"
40+
>
41+
<sl-icon name="boxes" class="mr-1.5"></sl-icon>
42+
<span class="capitalize">${this.channelId}</span>
43+
</btrix-badge>
44+
</sl-tooltip>`;
45+
}
46+
}

‎frontend/src/features/crawls/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
import("./crawl-list");
22
import("./crawl-state-filter");
3+
import("./crawler-channel-badge");
4+
import("./proxy-badge");

‎frontend/src/features/crawls/proxy-badge.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { consume } from "@lit/context";
2+
import { localized, msg } from "@lit/localize";
3+
import { html } from "lit";
4+
import { customElement, property } from "lit/decorators.js";
5+
6+
import { TailwindElement } from "@/classes/TailwindElement";
7+
import {
8+
orgProxiesContext,
9+
type OrgProxiesContext,
10+
} from "@/context/org-proxies";
11+
12+
@customElement("btrix-proxy-badge")
13+
@localized()
14+
export class ProxyBadge extends TailwindElement {
15+
@consume({ context: orgProxiesContext, subscribe: true })
16+
private readonly orgProxies?: OrgProxiesContext;
17+
18+
@property({ type: String })
19+
proxyId?: string;
20+
21+
render() {
22+
if (!this.proxyId || !this.orgProxies) return;
23+
24+
const proxy = this.orgProxies.servers.find(({ id }) => id === this.proxyId);
25+
26+
return html`<sl-tooltip
27+
content="${msg("Crawler Proxy Server")}${proxy
28+
? `: ${proxy.description}`
29+
: ""}"
30+
hoist
31+
>
32+
<btrix-badge variant="blue" class="font-monostyle">
33+
<sl-icon name="globe2" class="mr-1.5"></sl-icon>
34+
${proxy?.label || this.proxyId}
35+
</btrix-badge>
36+
</sl-tooltip>`;
37+
}
38+
}

0 commit comments

Comments
 (0)