1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

{{define "page_title"}}Endpoints{{end}}
{{define "gateway_name"}}{{end}}

{{define "content"}}
<div class="flex items-center justify-between mb-6">
  <h2 style="font-size:16px;font-weight:600">Services &amp; Endpoints</h2>
  <div class="flex gap-2">
    <button class="btn btn-secondary btn-sm"
      hx-get="/admin/reload"
      hx-target="#toast-area"
      hx-swap="innerHTML">
      ↺ Reload Gateway
    </button>
    <button class="btn btn-primary btn-sm" onclick="document.getElementById('add-service-form').style.display='block'">
      + Add Service
    </button>
  </div>
</div>

<!-- Add service form -->
<div id="add-service-form" class="card mb-6" style="display:none">
  <div class="card-title">New Service</div>
  <form class="flex gap-2 items-center"
    hx-post="/admin/htmx/service/add"
    hx-target="#toast-area"
    hx-swap="innerHTML"
    hx-on::after-request="this.reset();document.getElementById('add-service-form').style.display='none'">
    <input type="text" name="name" placeholder="Service name (e.g. myapi)" class="form-control" style="max-width:280px" required>
    <button type="submit" class="btn btn-primary btn-sm">Create</button>
    <button type="button" class="btn btn-secondary btn-sm" onclick="document.getElementById('add-service-form').style.display='none'">Cancel</button>
  </form>
</div>

<!-- Services table, refreshed via HTMX -->
<div id="endpoints-table-wrap"
  hx-get="/admin/htmx/endpoints-table"
  hx-trigger="refreshEndpoints from:body"
  hx-swap="innerHTML">
  {{template "endpoints_table" .}}
</div>

<!-- Endpoint Editor (inline) -->
<div id="editor" class="mt-4"></div>
{{end}}

{{define "endpoints_table"}}
<div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th>Type</th>
        <th>Route</th>
        <th>Endpoint URL</th>
        <th>Active</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {{range .Services}}
      {{$svc := .}}
      <tr style="background:#f8fafc">
        <td><span class="badge badge-blue">Basic</span></td>
        <td style="font-weight:600">{{.Name}}</td>
        <td class="font-mono text-sm">{{.BasicEndpoint.Endpoint}}</td>
        <td>
          {{if .Active}}<span class="badge badge-green">Active</span>
          {{else}}<span class="badge badge-gray">Inactive</span>{{end}}
        </td>
        <td>
          <div class="flex gap-2">
            <button class="btn btn-secondary btn-sm"
              hx-get="/admin/htmx/endpoint/edit/{{.UUID}}/{{.BasicEndpoint.UUID}}"
              hx-target="#editor"
              hx-swap="innerHTML">
              Edit
            </button>
            <button class="btn btn-secondary btn-sm {{if .WAF.Enabled}}waf-on{{end}}"
              hx-get="/admin/htmx/waf/edit/{{.UUID}}"
              hx-target="#editor"
              hx-swap="innerHTML"
              title="Web Application Firewall">
              {{if .WAF.Enabled}}🛡 WAF{{else}}WAF{{end}}
            </button>
            <button class="btn btn-primary btn-sm"
              hx-post="/admin/htmx/endpoint/add/{{.UUID}}"
              hx-vals='{"name":"sub"}'
              hx-target="#toast-area"
              hx-swap="innerHTML"
              hx-confirm="Add sub-endpoint to {{.Name}}?">
              + Sub
            </button>
            <button class="btn btn-danger btn-sm"
              hx-delete="/admin/htmx/service/{{.UUID}}"
              hx-target="#toast-area"
              hx-swap="innerHTML"
              hx-confirm="Delete service {{.Name}} and all its endpoints?">
              Delete
            </button>
          </div>
        </td>
      </tr>
      {{range .Endpoints}}
      <tr>
        <td style="padding-left:28px"><span class="badge badge-gray">Sub</span></td>
        <td class="text-muted text-sm">{{$svc.Name}} → {{.Name}}</td>
        <td class="font-mono text-sm">{{.Endpoint}}</td>
        <td>
          {{if .Active}}<span class="badge badge-green">Active</span>
          {{else}}<span class="badge badge-gray">Inactive</span>{{end}}
        </td>
        <td>
          <div class="flex gap-2">
            <button class="btn btn-secondary btn-sm"
              hx-get="/admin/htmx/endpoint/edit/{{$svc.UUID}}/{{.UUID}}"
              hx-target="#editor"
              hx-swap="innerHTML">
              Edit
            </button>
            <button class="btn btn-danger btn-sm"
              hx-delete="/admin/htmx/endpoint/{{$svc.UUID}}/{{.UUID}}"
              hx-target="#toast-area"
              hx-swap="innerHTML"
              hx-confirm="Delete endpoint {{.Name}}?">
              Delete
            </button>
          </div>
        </td>
      </tr>
      {{end}}
      {{end}}
      {{if not .Services}}
      <tr><td colspan="5" class="text-muted text-sm" style="padding:20px;text-align:center">No services configured. Click "+ Add Service" to create one.</td></tr>
      {{end}}
    </tbody>
  </table>
</div>
{{end}}