Skip to content

Commit e94466e

Browse files
zonbladezonblade
committed
fix ui
1 parent 05fccd0 commit e94466e

File tree

5 files changed

+235
-248
lines changed

5 files changed

+235
-248
lines changed

‎router-gui/web-gui/src/lib/components/common/Button.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@
2727

2828
<button
2929
{type}
30-
class="{variantClasses} {sizeClasses} {widthClass} {disabledClasses} rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
31-
on:click={onClick}
30+
class="flex gap-1 {variantClasses} {sizeClasses} {widthClass} {disabledClasses} rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
31+
on:click|stopPropagation|preventDefault={()=>onClick()}
3232
{disabled}
3333
>
3434
<slot />

‎router-gui/web-gui/src/lib/components/gwnode/GwNodeCard.svelte‎

Lines changed: 120 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script lang="ts">
22
import type { GwNode } from "$lib/types/gwnode";
33
import { proxies } from "$lib/stores/proxyStore";
4-
import { Edit, Trash2 } from 'lucide-svelte';
4+
import Button from "../common/Button.svelte";
5+
import { Edit, Trash2, ShipWheel } from "lucide-svelte";
56
67
// Props for the component
78
export let gwnode: GwNode;
@@ -16,13 +17,17 @@
1617
1718
// Get proxy details if proxy_id exists
1819
$: if (gwnode.proxy_id && $proxies) {
19-
const selectedProxy = $proxies.find((p) => p.proxy.id === gwnode.proxy_id);
20+
const selectedProxy = $proxies.find(
21+
(p) => p.proxy.id === gwnode.proxy_id,
22+
);
2023
if (selectedProxy) {
2124
proxyListen = selectedProxy.proxy.addr_listen || "";
22-
25+
2326
// If gwnode has a domain_id, find the matching domain
2427
if (gwnode.domain_id && selectedProxy.domains) {
25-
const domain = selectedProxy.domains.find(d => d.id === gwnode.domain_id);
28+
const domain = selectedProxy.domains.find(
29+
(d) => d.id === gwnode.domain_id,
30+
);
2631
if (domain) {
2732
proxyTls = domain.tls || false;
2833
proxyDomain = domain.sni || "";
@@ -34,132 +39,127 @@
3439
proxyTls = false;
3540
proxyDomain = "";
3641
}
37-
42+
3843
proxyTitle = selectedProxy.proxy.title || "";
3944
}
4045
}
4146
</script>
4247

43-
<a href={`/gwnode/${gwnode.id}`} class="block relative">
44-
<div
45-
class="border border-gray-200 dark:border-gray-700 hover:bg-white/40 hover:dark:bg-gray-800/40 hover:border-gray-300 dark:hover:border-gray-600 duration-200 p-4 relative"
46-
>
47-
<!-- Action buttons (positioned absolute top right) -->
48-
<div class="absolute top-5 right-2 flex space-x-2">
49-
<button
50-
on:click|stopPropagation|preventDefault={() => onEdit(gwnode)}
51-
class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
52-
aria-label="Edit"
48+
<div
49+
class="border border-gray-200 dark:border-gray-700 hover:bg-white/40 hover:dark:bg-gray-800/40 hover:border-gray-300 dark:hover:border-gray-600 duration-200 p-4 relative"
50+
>
51+
<!-- Action buttons (positioned absolute top right) -->
52+
<div class="absolute top-2 right-2 flex space-x-2">
53+
<a
54+
href={`/gwnode/${gwnode.id}`}
55+
class="flex flex-row gap-1 items-center text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 px-2"
5356
>
54-
<Edit size={16} />
55-
</button>
56-
<button
57-
on:click|stopPropagation|preventDefault={() =>
58-
onDelete(gwnode.id)}
59-
class="p-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
60-
aria-label="Delete"
61-
>
62-
<Trash2 size={16} />
63-
</button>
64-
</div>
57+
<ShipWheel size={16} class="mr-1" />
58+
Route
59+
</a>
60+
<Button variant="secondary" size="sm" onClick={() => onEdit(gwnode)}>
61+
<Edit size={16} />
62+
Modify
63+
</Button>
64+
<Button variant="danger" size="sm" onClick={() => onDelete(gwnode.id)}>
65+
<Trash2 size={16} />
66+
Delete
67+
</Button>
68+
</div>
6569

66-
<!-- Title -->
67-
<h3
68-
class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2 pr-16"
69-
>
70-
{gwnode.title}
71-
</h3>
70+
<!-- Title -->
71+
<h3
72+
class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2 pt-5 pr-16"
73+
>
74+
{gwnode.title}
75+
</h3>
7276

73-
<!-- Proxy information -->
74-
<div class="mb-2">
75-
<h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">
76-
Proxy Bind
77-
</h4>
78-
<table
79-
class="w-full text-sm text-left text-gray-700 dark:text-gray-300 mt-1"
80-
>
81-
<tbody>
77+
<!-- Proxy information -->
78+
<div class="mb-2">
79+
<h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">
80+
Proxy Bind
81+
</h4>
82+
<table
83+
class="w-full text-sm text-left text-gray-700 dark:text-gray-300 mt-1"
84+
>
85+
<tbody>
86+
<tr>
87+
<td class="py-1 pr-2 italic w-20">Name:</td>
88+
<td class="py-1">{proxyTitle || "Not specified"}</td>
89+
</tr>
90+
{#if proxyListen}
8291
<tr>
83-
<td class="py-1 pr-2 italic w-20">Name:</td>
84-
<td class="py-1">{proxyTitle || "Not specified"}</td>
92+
<td class="py-1 pr-2 italic w-20">Listen:</td>
93+
<td
94+
class="py-1 font-mono text-xs text-gray-500 dark:text-gray-400"
95+
>{proxyListen}</td
96+
>
8597
</tr>
86-
{#if proxyListen}
87-
<tr>
88-
<td class="py-1 pr-2 italic w-20">Listen:</td>
89-
<td
90-
class="py-1 font-mono text-xs text-gray-500 dark:text-gray-400"
91-
>{proxyListen}</td
92-
>
93-
</tr>
94-
{:else}
95-
<tr>
96-
<td class="py-1 pr-2 italic w-20">Listen:</td>
97-
<td
98-
class="py-1 font-mono text-xs text-gray-500 dark:text-gray-400"
99-
>Not specified</td
100-
>
101-
</tr>
102-
{/if}
103-
{#if proxyDomain}
104-
<tr>
105-
<td class="py-1 pr-2 italic w-20">Domain:</td>
106-
<td
107-
class="py-1 font-mono text-xs text-gray-500 dark:text-gray-400"
108-
>{proxyDomain}</td
109-
>
110-
</tr>
111-
{:else}
112-
<tr>
113-
<td class="py-1 pr-2 italic w-20">Domain:</td>
114-
<td
115-
class="py-1 font-mono text-xs text-gray-500 dark:text-gray-400"
116-
>-</td
117-
>
118-
</tr>
119-
{/if}
120-
{#if proxyTls}
121-
<tr>
122-
<td class="py-1 pr-2 italic w-20">Security:</td
123-
>
124-
<td
125-
class="py-1 text-xs text-green-600 dark:text-green-400"
126-
>TLS Enabled</td
127-
>
128-
</tr>
129-
{:else}
130-
<tr>
131-
<td class="py-1 pr-2 italic w-20">Security:</td
132-
>
133-
<td
134-
class="py-1 text-xs text-red-600 dark:text-red-400"
135-
>Disabled</td
136-
>
137-
</tr>
138-
{/if}
139-
</tbody>
140-
</table>
141-
</div>
142-
<hr class="my-2 border-gray-300 dark:border-gray-600" />
143-
<!-- Target -->
144-
<div class="mt-2">
145-
<h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">
146-
Proxy Target
147-
</h4>
148-
<table
149-
class="w-full text-sm text-left text-gray-700 dark:text-gray-300 mt-1"
150-
>
151-
<tbody>
98+
{:else}
15299
<tr>
153-
<td class="py-1 pr-2 italic w-20">Address:</td>
154-
<td class="py-1">
155-
<span
156-
class="font-mono bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded"
157-
>{gwnode.alt_target}</span
158-
>
159-
</td>
100+
<td class="py-1 pr-2 italic w-20">Listen:</td>
101+
<td
102+
class="py-1 font-mono text-xs text-gray-500 dark:text-gray-400"
103+
>Not specified</td
104+
>
160105
</tr>
161-
</tbody>
162-
</table>
163-
</div>
106+
{/if}
107+
{#if proxyDomain}
108+
<tr>
109+
<td class="py-1 pr-2 italic w-20">Domain:</td>
110+
<td
111+
class="py-1 font-mono text-xs text-gray-500 dark:text-gray-400"
112+
>{proxyDomain}</td
113+
>
114+
</tr>
115+
{:else}
116+
<tr>
117+
<td class="py-1 pr-2 italic w-20">Domain:</td>
118+
<td
119+
class="py-1 font-mono text-xs text-gray-500 dark:text-gray-400"
120+
>-</td
121+
>
122+
</tr>
123+
{/if}
124+
{#if proxyTls}
125+
<tr>
126+
<td class="py-1 pr-2 italic w-20">Security:</td>
127+
<td
128+
class="py-1 text-xs text-green-600 dark:text-green-400"
129+
>TLS Enabled</td
130+
>
131+
</tr>
132+
{:else}
133+
<tr>
134+
<td class="py-1 pr-2 italic w-20">Security:</td>
135+
<td class="py-1 text-xs text-red-600 dark:text-red-400"
136+
>Disabled</td
137+
>
138+
</tr>
139+
{/if}
140+
</tbody>
141+
</table>
142+
</div>
143+
<hr class="my-2 border-gray-300 dark:border-gray-600" />
144+
<!-- Target -->
145+
<div class="mt-2">
146+
<h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">
147+
Proxy Target
148+
</h4>
149+
<table
150+
class="w-full text-sm text-left text-gray-700 dark:text-gray-300 mt-1"
151+
>
152+
<tbody>
153+
<tr>
154+
<td class="py-1 pr-2 italic w-20">Address:</td>
155+
<td class="py-1">
156+
<span
157+
class="font-mono bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded"
158+
>{gwnode.alt_target}</span
159+
>
160+
</td>
161+
</tr>
162+
</tbody>
163+
</table>
164164
</div>
165-
</a>
165+
</div>

‎router-gui/web-gui/src/lib/components/proxy/ProxyCard.svelte‎

Lines changed: 29 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script lang="ts">
22
import type { Proxy, TlsDomain } from "$lib/types/proxy";
3+
import { Edit, Trash2 } from "lucide-svelte";
4+
import Button from "../common/Button.svelte";
35
46
export let proxy: Proxy;
57
export let domains: TlsDomain[] = [];
@@ -17,65 +19,25 @@
1719
<div
1820
class="overflow-hidden border border-gray-200 dark:border-gray-700 hover:bg-white/40 hover:dark:bg-gray-800/40 hover:border-gray-300 dark:hover:border-gray-600 duration-200 min-h-[220px]"
1921
>
20-
<div class="p-4">
21-
<div class="flex justify-between items-start">
22+
<div>
23+
<div class="flex justify-end items-start px-4 py-2">
24+
<div class="flex space-x-2">
25+
<Button variant="secondary" size="sm" onClick={onEdit}>
26+
<Edit size={16} />
27+
Modify
28+
</Button>
29+
<Button variant="danger" size="sm" onClick={onDelete}>
30+
<Trash2 size={16} />
31+
Delete
32+
</Button>
33+
</div>
34+
</div>
35+
<div class="text-sm text-gray-600 dark:text-gray-400 pb-4 px-4">
2236
<h3
2337
class="text-lg font-medium text-gray-900 dark:text-white truncate"
2438
>
2539
{proxy.title}
2640
</h3>
27-
<div class="flex space-x-1">
28-
<button
29-
on:click|preventDefault={onEdit}
30-
class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 p-1"
31-
aria-label="Edit proxy"
32-
>
33-
<svg
34-
xmlns="http://www.w3.org/2000/svg"
35-
width="16"
36-
height="16"
37-
viewBox="0 0 24 24"
38-
fill="none"
39-
stroke="currentColor"
40-
stroke-width="2"
41-
stroke-linecap="round"
42-
stroke-linejoin="round"
43-
>
44-
<path
45-
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
46-
></path>
47-
<path
48-
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
49-
></path>
50-
</svg>
51-
</button>
52-
<button
53-
on:click={onDelete}
54-
class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 p-1"
55-
aria-label="Delete proxy"
56-
>
57-
<svg
58-
xmlns="http://www.w3.org/2000/svg"
59-
width="16"
60-
height="16"
61-
viewBox="0 0 24 24"
62-
fill="none"
63-
stroke="currentColor"
64-
stroke-width="2"
65-
stroke-linecap="round"
66-
stroke-linejoin="round"
67-
>
68-
<polyline points="3 6 5 6 21 6"></polyline>
69-
<path
70-
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
71-
></path>
72-
<line x1="10" y1="11" x2="10" y2="17"></line>
73-
<line x1="14" y1="11" x2="14" y2="17"></line>
74-
</svg>
75-
</button>
76-
</div>
77-
</div>
78-
<div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
7941
<table class="w-full">
8042
<tbody>
8143
<tr>
@@ -186,12 +148,23 @@
186148
</tr>
187149
<tr>
188150
<td class="py-1 text-sm italic w-1/3 pl-[20px]">TLS</td>
189-
<td class="py-1">:&ensp;<span class="text-gray-500">{tlsEnabledCount} Domain{tlsEnabledCount>1 ? 's' : ''}</span> </td>
151+
<td class="py-1"
152+
>:&ensp;<span class="text-gray-500"
153+
>{tlsEnabledCount} Domain{tlsEnabledCount > 1
154+
? "s"
155+
: ""}</span
156+
>
157+
</td>
190158
</tr>
191159
<tr>
192160
<td class="py-1 text-sm italic w-1/3 pl-[20px]">TCP</td>
193161
<td class="py-1"
194-
>:&ensp;<span class="text-gray-500">{tlsDisabledCount} Domain{tlsDisabledCount>1 ? 's' : ''}</span> {#if tlsEnabledCount > 0 && tlsDisabledCount > 0}<span
162+
>:&ensp;<span class="text-gray-500"
163+
>{tlsDisabledCount} Domain{tlsDisabledCount > 1
164+
? "s"
165+
: ""}</span
166+
>
167+
{#if tlsEnabledCount > 0 && tlsDisabledCount > 0}<span
195168
class="text-red-600 dark:text-red-400 font-semibold"
196169
>(ignored)</span
197170
>{/if}

0 commit comments

Comments
 (0)