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/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>