theta42/proxy
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dynamic DNS UI: fix blank columns, redesign the record list

Browse Source 
The Host and Last-updated columns were blank because they relied on a jq-repeat
parseData hook that the rest of the app doesn't actually use for display (working
rows derive dates from the .momentFromNow class, not parseData).

- Derive fqdn server-side via DynamicRecord.toJSON so it flows through both the
  REST list and websocket payloads; the template uses {{fqdn}} directly.
- Render last-updated with the .momentFromNow class (data-date) like the rest of
  the app instead of a parseData-computed string.
- apply() now clears last_status on success so the UI only surfaces real errors.
- Redesign the section: prominent public-IP badge, cleaner add form, and a
  Bootstrap list-group of records (fqdn, IP badge, "updated N ago", inline error)
  with outline refresh/remove buttons.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
William Mantly
2026-07-11 00:32:21 -04:00
parent a2d194f855
commit 83e9753b18
2 changed files with 65 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nodejs/models/dynamic_record.js
+8 -1
View File
@@ -51,6 +51,12 @@ class DynamicRecord extends Table{
return (this.name === '@' || !this.name) ? this.domain : `${this.name}.${this.domain}`; return (this.name === '@' || !this.name) ? this.domain : `${this.name}.${this.domain}`;
} }
// Expose a derived fqdn to the client (REST list + websocket payloads both
// serialize via toJSON), so the UI doesn't depend on client-side parsing.
toJSON(){
return {...super.toJSON(), fqdn: this.fqdn()};
}
// Point this record at `ip` and record the outcome. Never throws — a single // Point this record at `ip` and record the outcome. Never throws — a single
// bad record must not abort a whole refresh cycle. // bad record must not abort a whole refresh cycle.
async apply(ip){ async apply(ip){
@@ -58,7 +64,8 @@ class DynamicRecord extends Table{
let Domain = require('.').models.Domain; let Domain = require('.').models.Domain;
let domain = await Domain.get(this.domain); let domain = await Domain.get(this.domain);
let res = await domain.upsertARecord(this.name, ip); let res = await domain.upsertARecord(this.name, ip);
await this.update({last_ip: ip, last_status: 'ok', last_updated: Date.now()}); // Empty status on success so the UI only surfaces actual errors.
await this.update({last_ip: ip, last_status: '', last_updated: Date.now()});
return res; return res;
}catch(error){ }catch(error){
console.error('DynamicRecord.apply', this.id, error.message); console.error('DynamicRecord.apply', this.id, error.message);
nodejs/views/dns.ejs
+57 -45
View File
@@ -63,12 +63,6 @@
return row return row
}; };
$.scope.DynamicRecord.parseData = function(row){
row['fqdn'] = (row.name === '@' || !row.name) ? row.domain : `${row.name}.${row.domain}`;
row['last_updated_text'] = row.last_updated ? moment(row.last_updated, "x").fromNow() : 'never';
return row;
};
async function ddnsLoadCurrentIp(){ async function ddnsLoadCurrentIp(){
try{ try{
let res = await app.api.get('dns/dynamic/ip'); let res = await app.api.get('dns/dynamic/ip');
@@ -229,58 +223,76 @@
<div class="row mb-3"> <div class="row mb-3">
<div class="col-12"> <div class="col-12">
<div class="card shadow-lg"> <div class="card shadow-lg">
<div class="card-header"> <div class="card-header d-flex align-items-center">
<span class="card-icon float-start"><i class="fa-solid fa-tower-broadcast"></i></span> <span class="card-icon me-2"><i class="fa-solid fa-tower-broadcast"></i></span>
<span class="card-title">Dynamic A Records (WAN IP)</span> <span class="card-title">Dynamic A Records</span>
<span class="float-end">Current public IP: <b id="ddns-current-ip">…</b></span> <span class="ms-auto text-muted small">
This server's public IP:
<span class="badge text-bg-primary fs-6"><i class="fa-solid fa-globe me-1"></i><span id="ddns-current-ip">…</span></span>
</span>
</div> </div>
<div class="card-header actionMessage" style="display:none"></div> <div class="card-header actionMessage" style="display:none"></div>
<div class="card-body"> <div class="card-body">
<p class="text-muted"> <p class="text-muted mb-3">
These A records are updated to this server's current public IP every 4 hours These A records are pointed at this server's public IP automatically —
(and immediately when added). Use <b>@</b> as the subdomain for the domain apex. every 4 hours and immediately when added. Enter <code>@</code> as the host
for the domain apex.
</p> </p>
<form action="dns/dynamic" onsubmit="formAJAX(this)" class="row g-2 align-items-end mb-3"> <!-- Add form -->
<div class="col-md-4 form-group"> <form action="dns/dynamic" onsubmit="formAJAX(this)" class="row g-2 align-items-end mb-4">
<label for="domain" class="form-label">Domain</label> <div class="col-12 col-md-5">
<label class="form-label">Domain</label>
<select name="domain" class="form-select" validate=":1"> <select name="domain" class="form-select" validate=":1">
<option value="" selected>Select a domain</option> <option value="" selected>Select a domain…</option>
<option jq-repeat="ddnsDomain" value="{{domain}}">{{domain}}</option> <option jq-repeat="ddnsDomain" value="{{domain}}">{{domain}}</option>
</select> </select>
</div> </div>
<div class="col-md-4 form-group"> <div class="col-8 col-md-5">
<label for="name" class="form-label">Subdomain</label> <label class="form-label">Host</label>
<input type="text" name="name" class="form-control" placeholder="ex: home (or @ for apex)" validate=":1" /> <input type="text" name="name" class="form-control" placeholder="home · @ for apex" validate=":1" />
<b class="invalid-feedback"></b>
</div> </div>
<div class="col-md-4 form-group"> <div class="col-4 col-md-2 d-grid">
<button type="submit" class="btn btn-success"> <button type="submit" class="btn btn-success"><i class="fa-solid fa-plus me-1"></i>Add</button>
<i class="fa-solid fa-plus"></i> Add
</button>
</div> </div>
</form> </form>
<table class="table table-sm align-middle"> <!-- Record list -->
<thead> <div class="list-group">
<tr><th>Host</th><th>Current IP</th><th>Last updated</th><th>Status</th><th class="text-end">Actions</th></tr> <div jq-repeat="DynamicRecord" jq-repeat-index="id"
</thead> class="list-group-item d-flex align-items-center flex-wrap gap-2">
<tbody>
<tr jq-repeat="DynamicRecord" jq-repeat-index="id"> <div class="me-auto">
<td><b>{{ fqdn }}</b></td> <div class="fw-bold fs-5">
<td>{{ last_ip }}</td> <i class="fa-solid fa-circle-nodes text-secondary me-1"></i>{{ fqdn }}
<td>{{ last_updated_text }}</td> </div>
<td>{{ last_status }}</td> <div class="small text-muted">
<td class="text-end"> {{#last_ip}}
<button type="button" class="btn btn-sm btn-warning" method="POST" action="dns/dynamic/{{id}}/refresh" onclick="formAJAX()"> <i class="fa-solid fa-arrow-right-long"></i>
<i class="fa-solid fa-rotate"></i> <span class="badge text-bg-success">{{ last_ip }}</span>
</button> updated <span class="momentFromNow" data-date="{{ last_updated }}">recently</span>
<button type="button" class="btn btn-sm btn-danger" method="DELETE" action="dns/dynamic/{{id}}" onclick="formAJAX()"> {{/last_ip}}
<i class="fa-solid fa-trash-can"></i> {{^last_ip}}
</button> <span class="badge text-bg-secondary">awaiting first update…</span>
</td> {{/last_ip}}
</tr> {{#last_status}}
</tbody> <span class="text-danger ms-2"><i class="fa-solid fa-triangle-exclamation me-1"></i>{{ last_status }}</span>
</table> {{/last_status}}
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary" title="Update now"
method="POST" action="dns/dynamic/{{id}}/refresh" onclick="formAJAX()">
<i class="fa-solid fa-rotate"></i>
</button>
<button type="button" class="btn btn-sm btn-outline-danger" title="Remove"
method="DELETE" action="dns/dynamic/{{id}}" onclick="formAJAX()">
<i class="fa-solid fa-trash-can"></i>
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>