catalog/ts_web/elements/sz-demo-view-config.ts

import {
  DeesElement,
  customElement,
  html,
  css,
  cssManager,
  type TemplateResult,
} from '@design.estate/dees-element';
import type { IConfigField } from './sz-config-section.js';
import './index.js';

declare global {
  interface HTMLElementTagNameMap {
    'sz-demo-view-config': SzDemoViewConfig;
  }
}

@customElement('sz-demo-view-config')
export class SzDemoViewConfig extends DeesElement {
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        padding: 24px;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
      }
    `,
  ];

  public render(): TemplateResult {
    const systemFields: IConfigField[] = [
      { key: 'Base Directory', value: '/home/user/.serve.zone/dcrouter' },
      { key: 'Data Directory', value: '/home/user/.serve.zone/dcrouter/data' },
      { key: 'Public IP', value: '203.0.113.50' },
      { key: 'Proxy IPs', value: ['203.0.113.10', '203.0.113.11'], type: 'pills' },
      { key: 'Uptime', value: '3d 14h 22m' },
      { key: 'Storage Backend', value: 'filesystem', type: 'badge' },
    ];

    const proxyFields: IConfigField[] = [
      { key: 'Route Count', value: 12 },
      { key: 'ACME Enabled', value: true, type: 'boolean' },
      { key: 'Account Email', value: 'admin@serve.zone' },
      { key: 'Use Production', value: true, type: 'boolean' },
      { key: 'Auto Renew', value: true, type: 'boolean' },
      { key: 'Renew Threshold', value: '30 days' },
    ];

    const emailFields: IConfigField[] = [
      { key: 'Ports', value: ['25', '465', '587'], type: 'pills' },
      { key: 'Hostname', value: 'mail.serve.zone' },
      { key: 'Domains', value: ['serve.zone', 'mail.serve.zone'], type: 'pills' },
      { key: 'Email Routes', value: 5 },
      { key: 'Received Path', value: '/data/emails' },
    ];

    const dnsFields: IConfigField[] = [
      { key: 'Port', value: 53 },
      { key: 'NS Domains', value: ['ns1.serve.zone', 'ns2.serve.zone'], type: 'pills' },
      { key: 'Scopes', value: ['serve.zone', 'example.com'], type: 'pills' },
      { key: 'Record Count', value: 24 },
      { key: 'DNS Challenge', value: true, type: 'boolean' },
    ];

    const tlsFields: IConfigField[] = [
      { key: 'Contact Email', value: 'admin@serve.zone' },
      { key: 'Domain', value: 'serve.zone' },
      { key: 'Source', value: 'acme', type: 'badge' },
      { key: 'Certificate Path', value: null },
      { key: 'Key Path', value: null },
    ];

    const cacheFields: IConfigField[] = [
      { key: 'Storage Path', value: '/home/user/.serve.zone/dcrouter/tsmdb' },
      { key: 'DB Name', value: 'dcrouter' },
      { key: 'Default TTL', value: '30 days' },
      { key: 'Cleanup Interval', value: '1 hour' },
    ];

    const radiusFields: IConfigField[] = [
      { key: 'Auth Port', value: null },
      { key: 'Accounting Port', value: null },
    ];

    const remoteIngressFields: IConfigField[] = [
      { key: 'Tunnel Port', value: 8443 },
      { key: 'Hub Domain', value: 'hub.serve.zone' },
      { key: 'TLS Configured', value: true, type: 'boolean' },
    ];

    return html`
      <sz-config-overview
        infoText="This view displays the current running configuration. DcRouter is configured through code or remote management."
      >
        <sz-config-section
          title="System"
          subtitle="Base paths and infrastructure"
          icon="lucide:server"
          status="enabled"
          .fields=${systemFields}
        ></sz-config-section>

        <sz-config-section
          title="SmartProxy"
          subtitle="HTTP/HTTPS and TCP/SNI reverse proxy"
          icon="lucide:network"
          status="enabled"
          .fields=${proxyFields}
        ></sz-config-section>

        <sz-config-section
          title="Email Server"
          subtitle="SMTP email handling with smartmta"
          icon="lucide:mail"
          status="enabled"
          .fields=${emailFields}
        ></sz-config-section>

        <sz-config-section
          title="DNS Server"
          subtitle="Authoritative DNS with smartdns"
          icon="lucide:globe"
          status="enabled"
          .fields=${dnsFields}
        ></sz-config-section>

        <sz-config-section
          title="TLS / Certificates"
          subtitle="Certificate management and ACME"
          icon="lucide:shield-check"
          status="enabled"
          .fields=${tlsFields}
        ></sz-config-section>

        <sz-config-section
          title="Cache Database"
          subtitle="Persistent caching with smartdata"
          icon="lucide:database"
          status="enabled"
          .fields=${cacheFields}
        ></sz-config-section>

        <sz-config-section
          title="RADIUS Server"
          subtitle="Network authentication and VLAN assignment"
          icon="lucide:wifi"
          status="not-configured"
          .fields=${radiusFields}
        ></sz-config-section>

        <sz-config-section
          title="Remote Ingress"
          subtitle="Edge tunnel nodes"
          icon="lucide:cloud"
          status="enabled"
          .fields=${remoteIngressFields}
        ></sz-config-section>
      </sz-config-overview>
    `;
  }
}