update
This commit is contained in:
208
ts_web/elements/sz-network-dns-view.ts
Normal file
208
ts_web/elements/sz-network-dns-view.ts
Normal file
@@ -0,0 +1,208 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-network-dns-view': SzNetworkDnsView;
|
||||
}
|
||||
}
|
||||
|
||||
export interface IDnsRecord {
|
||||
domain: string;
|
||||
type: 'A' | 'AAAA' | 'CNAME' | 'MX' | 'TXT';
|
||||
value: string;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
@customElement('sz-network-dns-view')
|
||||
export class SzNetworkDnsView extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<div style="padding: 24px; max-width: 1000px;">
|
||||
<sz-network-dns-view
|
||||
.records=${[
|
||||
{ domain: 'pr.task.vc', type: 'A', value: '195.201.98.232' },
|
||||
{ domain: 'outline.task.vc', type: 'A', value: '195.201.98.232' },
|
||||
{ domain: 'ns1.task.vc', type: 'A', value: '212.95.99.130' },
|
||||
{ domain: 'bleu.de', type: 'A', value: '212.95.99.130' },
|
||||
{ domain: 'mail.bleu.de', type: 'MX', value: '10 mail.bleu.de' },
|
||||
]}
|
||||
></sz-network-dns-view>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@property({ type: Array })
|
||||
public accessor records: IDnsRecord[] = [];
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.sync-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.sync-button:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 80px 2fr 100px;
|
||||
gap: 16px;
|
||||
padding: 12px 16px;
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 80px 2fr 100px;
|
||||
gap: 16px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
transition: background 200ms ease;
|
||||
}
|
||||
|
||||
.table-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
}
|
||||
|
||||
.domain {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2px 8px;
|
||||
background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: monospace;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.3)')};
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.delete-button:hover {
|
||||
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 48px 24px;
|
||||
text-align: center;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="header">
|
||||
<span class="description">Manage DNS records synced with Cloudflare</span>
|
||||
<button class="sync-button" @click=${() => this.handleSync()}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.66 0 3-4.03 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4.03-3-9s1.34-9 3-9"/>
|
||||
</svg>
|
||||
Sync Cloudflare
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="table-header">
|
||||
<span>Domain</span>
|
||||
<span>Type</span>
|
||||
<span>Value</span>
|
||||
<span>Actions</span>
|
||||
</div>
|
||||
${this.records.length > 0 ? this.records.map(record => html`
|
||||
<div class="table-row">
|
||||
<span class="domain">${record.domain}</span>
|
||||
<span><span class="type-badge">${record.type}</span></span>
|
||||
<span class="value">${record.value}</span>
|
||||
<span>
|
||||
<button class="delete-button" @click=${() => this.handleDelete(record)}>Delete</button>
|
||||
</span>
|
||||
</div>
|
||||
`) : html`
|
||||
<div class="empty-state">No DNS records found</div>
|
||||
`}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private handleSync() {
|
||||
this.dispatchEvent(new CustomEvent('sync', { bubbles: true, composed: true }));
|
||||
}
|
||||
|
||||
private handleDelete(record: IDnsRecord) {
|
||||
this.dispatchEvent(new CustomEvent('delete', { detail: record, bubbles: true, composed: true }));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user