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

Better UI for DNS

Browse Source
This commit is contained in:
William Mantly
2024-08-11 22:57:18 -04:00
parent cb87f22d98
commit e86de04a69
10 changed files with 210 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nodejs/models/dnsProvider.js
+3 -1
View File
@@ -135,7 +135,9 @@ class DnsProvider extends Table{
toJSON(){
return {
...super.toJSON(),
domains: this.domains,
displayName: this.provider.constructor.displayName,
displayIconHtml: this.provider.constructor.displayIconHtml,
displayIconUni: this.provider.constructor.displayIconUni,
};
}
}
nodejs/models/dns_provider/digitalocean.js
+6 -1
View File
@@ -9,7 +9,12 @@ class DigitalOcean{
}
static displayName = 'DigitalOcean'
static displayIconHtml = '<i class="fa-brands fa-digital-ocean"></i>'
static displayIconHtml = `
<svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<circle cx="512" cy="512" r="512" style="fill:#0080ff"/>
<path d="m273.8 669.2-.1-63.7h63.7v63.7h76v-98.8h98.8v98.5c105.1-.1 186.2-104.1 146.1-214.6-14.9-40.9-47.6-73.6-88.5-88.4-110.7-40.2-214.7 41.2-214.7 146.3H256c0-167.5 161.8-298 337.4-243.2 76.8 24 137.7 84.9 161.6 161.6C809.9 606.2 679.4 768 511.9 768v-98.8h-98.6v75.9h-75.9v-75.9h-63.6z" style="fill:#fff"/>
</svg>`
// '<i class="fa-brands fa-digital-ocean"></i>'
static displayIconUni = '&#xf391;'
constructor(token){
nodejs/models/dns_provider/porkbun.js
+17
View File
@@ -10,6 +10,23 @@ class PorkBun{
'secretApiKey': {isRequired: true, type: 'string', isPrivate: true, displayName: 'API Secret key'},
}
static displayName = 'DigitalOcean';
static displayIconHtml = `<?xml version="1.0" encoding="utf-8"?>
<svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<style>
.st1{fill:#fff}
</style>
<g id="Icon">
<circle cx="512" cy="512" r="512" style="fill:#ef7878"/>
<g id="Logo">
<path class="st1" d="M398.3 331.8c-33.2-17.9-70.3-31.9-108.6-40.9-7.7 16.6-11.5 33.2-11.5 52.4 0 28.1 8.9 53.7 24.3 74.1 24.2-35.7 56.2-66.4 95.8-85.6zm323.3 85.6c15.3-20.4 24.3-46 24.3-74.1 0-19.2-3.8-37.1-11.5-52.4-38.3 7.7-75.4 21.7-108.6 40.9 38.3 19.2 71.5 49.9 95.8 85.6zm-152.1 58.8c-7.7 0-14.1 6.4-14.1 14.1 0 2.6 1.3 5.1 2.6 7.7 5.1 7.7 12.8 12.8 21.7 15.3 2.6-5.1 3.8-11.5 3.8-17.9V489c-1.2-7.7-6.3-12.8-14-12.8z"/>
<path class="st1" d="M503.1 320.3c-126.5 5.1-224.9 112.4-224.9 239v131.6c0 23 19.2 42.2 42.2 42.2 23 0 42.2-19.2 42.2-42.2v-34.5H659v34.5c0 23 19.2 42.2 42.2 42.2 23 0 42.2-19.2 42.2-42.2v-138c1.2-131.6-107.5-237.7-240.3-232.6zm132.8 184c-7.7 12.8-19.2 21.7-33.2 26.8-8.9 17.9-28.1 30.7-49.8 30.7h-6.4c-7.7 0-14.1-6.4-14.1-14.1s6.4-14.1 14.1-14.1c6.4 0 12.8-2.6 17.9-5.1-7.7-3.8-15.3-8.9-20.4-16.6-5.1-6.4-7.7-12.8-7.7-21.7 0-17.9 15.3-33.2 33.2-33.2 11.5 0 20.4 5.1 26.8 14.1 7.7 10.2 12.8 21.7 12.8 35.8v5.1c6.4-2.6 11.5-7.7 15.3-12.8 2.6-3.8 6.4-3.8 10.2-2.6 2.6-1.2 3.9 3.9 1.3 7.7z"/>
</g>
</g>
</svg>`
// '<i class="fa-solid fa-bacon"></i>';
static displayIconUni = '&#xf7e5';
baseUrl = 'https://api.porkbun.com/api/json/v3';
constructor(args){
nodejs/package-lock.json
Generated
+1 -1
View File
@@ -10,6 +10,7 @@
"license": "MIT",
"dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2",
"@popperjs/core": "^2.11.8",
"acme-client": "^5.4.0",
"axios": "^1.7.2",
"bcrypt": "^5.1.1",
@@ -197,7 +198,6 @@
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
nodejs/package.json
+1
View File
@@ -13,6 +13,7 @@
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2",
"@popperjs/core": "^2.11.8",
"acme-client": "^5.4.0",
"axios": "^1.7.2",
"bcrypt": "^5.1.1",
nodejs/public/lib/js/jq-repeat_new.js
+95 -11
View File
@@ -10,7 +10,7 @@ MIT license
$.scope = {};
}
var make = function(element){
var make = function(element, template){
var result = [];
result.splice = function(inputValue, ...args){
@@ -82,7 +82,7 @@ MIT license
//figure out new elements index
var key = I + index;
// apply values to template
var render = Mustache.render(this.__jqTemplate, toAdd[I]);
var render = Mustache.render(this.__jqTemplate, this.__buildData(i, toAdd[I]));
//set call name and index keys to DOM element
var $render = $( render ).addClass( 'jq-repeat-'+ this.__jqRepeatId ).attr( 'jq-repeat-index', key );
@@ -217,7 +217,7 @@ MIT license
}
this[index] = $.extend( true, this[index], data );
var $render = $(Mustache.render(this.__jqTemplate, this[index]));
var $render = $(Mustache.render(this.__jqTemplate, this.__buildData(index, this[index])));
$render.attr('jq-repeat-index', index);
this.__update(this[index].__jq_$el, $render, this[index], this);
@@ -228,6 +228,8 @@ MIT license
return this[this.indexOf(key, value)];
}
// User definable helper methods
result.__put = function($el, item, list){
$el.show();
};
@@ -241,6 +243,58 @@ MIT license
$el.show();
};
result.__parseData = function(data){
return data;
}
// internal helper methods
result.__buildData = function(index, data){
return {
...this.__parseData(data),
nestedTemplates: this.__parseNestedTemplates(index, data),
_parent: this.__jqParent ? $.scope[this.__jqParent][this.__jqParentIndex] : undefined,
};
};
result.__parseNestedTemplates = function(index, data){
let templates = []
let tempData = {
...data,
_parent: data,
};
for(let idx in this.nestedTemplates){
let $el = $(`${this.nestedTemplates[idx]}`);
$el.attr('jq-repeat', Mustache.render($el.attr('jq-repeat'), tempData));
$el.attr('jq-repeat-index', Mustache.render($el.attr('jq-repeat-index'), tempData));
$el.attr('jq-repeat-parent', this.__jqRepeatId);
$el.attr('jq-repeat-parent-index', index);
templates[idx] = $el[0].outerHTML;
}
return templates;
}
for(let prop of ['put', 'take', 'update', 'parseData']){
Object.defineProperty(result, prop, {
enumerable: false,
get(){
return this[`__${prop}`]
},
set(value) {
this[`__${prop}`] = value;
},
});
}
result.__setPut = function(fn) {
Object.defineProperty(this, '__put', {
value: fn,
@@ -268,10 +322,25 @@ MIT license
});
};
var $this = $( element );
var $this = $(element);
result.nestedTemplates = [];
result.__jqRepeatId = $this.attr( 'jq-repeat' );
$this.removeAttr('jq-repeat');
result.__index = $this.attr('jq-repeat-index');
if($this.attr('jq-repeat-parent')){
result.__jqParent = $this.attr('jq-repeat-parent');
result.__jqParentIndex = $this.attr('jq-repeat-parent-index');
}
$this.find('[jq-repeat]').each((idx, el)=>{
let templateIdx = result.nestedTemplates.length;
let template = `${el.outerHTML}`;
result.nestedTemplates.push(template);
$(el).replaceWith(`{{{ nestedTemplates.${templateIdx} }}}`);
});
result.__jqTemplate = $this[0].outerHTML;
$this.replaceWith( '<script type="x-tmpl-mustache" id="jq-repeat-holder-' + result.__jqRepeatId + '"><\/script>' );
result.$this = $('#jq-repeat-holder-' + result.__jqRepeatId);
@@ -291,18 +360,33 @@ MIT license
};
$( document ).ready( function(){
let toMake = [];
$( '[jq-repeat]' ).each(function(key, value){
make(value);
if($(value).parent().closest('[jq-repeat]').length) return;
toMake.push(value);
});
$(document).on('DOMNodeInserted', function(e) {
if ( $(e.target).is('[jq-repeat]') ){
make( e.target );
for(let el of toMake){
make(el);
}
$(document).on('DOMNodeInserted', function(event) {
var $el = $(event.target);
var toMake = [];
if($el.is('[jq-repeat]')){
make(event.target);
}else{
var t = $(e.target).find('[jq-repeat]');
t.each(function(key, value){
make(value);
var toMake = [];
$el.find('[jq-repeat]').each(function(key, el){
if($(el).parent().closest('[jq-repeat]').length) return;
toMake.push(el);
});
for(let el of toMake){
make(el);
}
}
});
} );
nodejs/routes/render.js
+1 -1
View File
@@ -11,7 +11,7 @@ const values ={
// List of front end node modules to be served
const frontEndModules = ['bootstrap', 'mustache', 'jquery', '@fortawesome',
'moment',
'moment', '@popper',
];
// Server front end modules
nodejs/views/dns.ejs
+37 -32
View File
@@ -19,19 +19,13 @@
}
select {
font-family: "system-ui", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", 'FontAwesome',;
font-family: "system-ui", "FontAwesome";
}
</style>
<script type="text/javascript">
function providerParseRow(row){
row['created_on_text'] = moment(row['updated_on'], "x").fromNow();
return row
}
function providerGet(cb){
app.api.options('dns', function(error, res){
for(let provider of res.results){
@@ -60,35 +54,38 @@
let $el = $(this)
$el.show()
$el.find('input').prop("disabled",false)
})
});
}
function DnsProviderPopulate(){
app.api.get('/dns?detail=true', function(error, res){
if(error) return app.util.actionMessage(error, $.scope.users.$this, 'danger');
for(let row of res.results){
app.api.get(`dns/domain/byProvider/${row.id}`, function(error, domains){
console.log({...row, domains:domains.results})
$.scope.DnsProvider.push(providerParseRow({...row, domains:domains.results}))
});
}
if(error) return app.util.actionMessage(error, $.scope.DnsProvider.$this, 'danger');
$.scope.DnsProvider.push(...res.results)
});
}
$(document).ready(function(){
$.scope.providerField.__setPut(function(){})
// Set the jq Templates
$.scope.providerField.put = function(){};
$.scope.DnsProvider.parseData = function(row){
row['created_on_text'] = moment(row['updated_on'], "x").fromNow();
return row
}
// Populate
DnsProviderPopulate(); //populate the table
providerGet();
app.subscribe(/^model:/, function(data, topic){
let [group, Model, action, pk] = topic.split(':');
console.log(group, Model, action, pk);
console.log('WS:', group, Model, action, pk, data);
});
app.subscribe(/^model:.+:create/, function(data, topic){
try{
let [group, Model, action, pk] = topic.split(':');
$.scope[Model].unshift(providerParseRow(data))
$.scope[Model].unshift(data)
}catch{}
});
@@ -102,7 +99,7 @@
app.subscribe(/^model:.+:update/, function(data, topic){
try{
let [group, Model, action, pk] = topic.split(':');
$.scope[Model].update(pk, providerParseRow(data))
$.scope[Model].update(pk, data)
}catch{}
});
@@ -181,11 +178,14 @@
</div>
<div class="card-header actionMessage" style="display:none"></div>
<ul class="card-body list-group list-group-flush" style="margin-bottom:0">
<li jq-repeat="DnsProvider" jq-repeat-index="id" style="display:none" class="align-middle list-group-item" onload="provider">
<div>
<b>{{ name }}</b> using <b>{{ dnsProvider }}</b>
<span class="float-end">
<ul class="card-body list-group list-group-flush" style="padding:0;">
<li jq-repeat="DnsProvider" jq-repeat-index="id" style="display:none" class="list-group-item" onload="provider">
<div class="row">
<div class="col-6">
<h3>{{{ displayIconHtml }}} {{ dnsProvider }}</h3>
<h4>{{ name }}</h4>
</div>
<div class="col-6 text-end">
<b class="momentFromNow" data-date="{{ updated_on }}">{{ created_on_text }}</b> by <b>{{ created_by }}</b>
<button type="button" class="btn btn-warning" method="POST" action="/dns/domain/refresh/{{id}}" onclick="formAJAX()">
<i class="fa-solid fa-rotate"></i>
@@ -193,15 +193,20 @@
<button type="button" class="btn btn-danger" method="DELETE" action="dns/{{id}}" onclick="formAJAX()">
<i class="fa-solid fa-trash-can"></i>
</button>
</span>
</div>
</div>
<div>
{{#domains}}
<b>{{domain}}</b>,
{{/domains}}
{{^domains}}
<span>No domains...</span>
{{/domains}}
<div class="mb-3">
<b jq-repeat='Domain_{{id}}' jq-repeat-index="domain" class="m-1 badge text-bg-info rounded-pill" style="display:none;">
{{domain}}
</b>
<script type="text/javascript">
$.scope.Domain_{{id}}.put = function($el){
$el.fadeIn(10000)
};
app.api.get(`dns/domain/byProvider/{{id}}`, function(error, domains){
$.scope.Domain_{{id}}.push(...domains.results);
});
</script>
</div>
</li>
</ul>
nodejs/views/hosts.ejs
+2 -2
View File
@@ -359,7 +359,7 @@
</label>
<input type="search" oninput="hostSearchInput()">
</div>
<table class="card-body table table-striped" style="margin-bottom:0">
<table class="m-0 card-body table table-striped table-sm overflow-x-scroll">
<thead>
<th>
@@ -379,7 +379,7 @@
</th>
</thead>
<tbody class="card-body" id="hostsTable">
<tbody>
<tr action="api" jq-repeat="hosts" jq-repeat-index='host' style="display:none">
<td class="table-{{wildcard_text_bg}}">
{{{ wildcard_text }}}
nodejs/views/top.ejs
+47 -7
View File
@@ -13,7 +13,7 @@
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src='/static-modules/jquery/dist/jquery.js'></script>
<!-- <script type="text/javascript" src="/static/lib/js/popper-1.16.0.min.js"></script> -->
<script type="text/javascript" src="/static-modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="/static-modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
<script type="text/javascript" src="/static-modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/static-modules/@fortawesome/fontawesome-free/js/all.min.js"></script>
<script type="text/javascript" src='/static-modules/mustache/mustache.min.js'></script>
@@ -31,12 +31,56 @@
</head>
<body>
<!-- <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav> -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dynamic Proxy <%- title %></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav top-nav">
<li class="nav-item">
<a class="nav-link active" href="/hosts"><i class="fa-solid fa-network-wired"></i> Hosts</a>
@@ -57,7 +101,6 @@
</li>
</ul>
<div class="form-inline mt-2 mt-md-0">
<!-- Show the login/logout button -->
<a id="cl-login-button" class="btn btn-outline-danger my-2 my-sm-0" onclick="app.auth.forceLogin()" style="display: none;">
<i class="fas fa-sign-out"></i>
Login
@@ -67,9 +110,6 @@
<i class="fas fa-sign-out"></i>
Log Out
</button>
<!-- <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
</div>
</div>
</nav>