Better UI for DNS

nodejs/models/dnsProvider.js

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

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

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

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

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

@@ -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) {
+		for(let el of toMake){
-			if ( $(e.target).is('[jq-repeat]') ){
+			make(el);
-				make( e.target );
+		}
+
+		$(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]');
+				var toMake = [];
-				t.each(function(key, value){
+				$el.find('[jq-repeat]').each(function(key, el){
-					make(value);
+					if($(el).parent().closest('[jq-repeat]').length) return;
+					toMake.push(el);
 				});
+
+				for(let el of toMake){
+					make(el);
+				}
 			}
 		});
 	} );

nodejs/routes/render.js

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

@@ -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');
+			if(error) return app.util.actionMessage(error, $.scope.DnsProvider.$this, 'danger');
-			for(let row of res.results){
+			$.scope.DnsProvider.push(...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}))
-				});
-			}
 		});
 	}
 
 	$(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">
+			<ul class="card-body list-group list-group-flush" style="padding:0;">
-				<li jq-repeat="DnsProvider" jq-repeat-index="id" style="display:none" class="align-middle list-group-item" onload="provider">
+				<li jq-repeat="DnsProvider" jq-repeat-index="id" style="display:none" class="list-group-item" onload="provider">
-					<div>
+					<div class="row">
-						<b>{{ name }}</b> using <b>{{ dnsProvider }}</b>
+						<div class="col-6">
-						<span class="float-end">
+							<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>
+					<div class="mb-3">
-						{{#domains}}
+						<b jq-repeat='Domain_{{id}}' jq-repeat-index="domain" class="m-1 badge text-bg-info rounded-pill" style="display:none;">
-							<b>{{domain}}</b>,
+							{{domain}}
-						{{/domains}}
+						</b>
-						{{^domains}}
+						<script type="text/javascript">
-							<span>No domains...</span>
+							$.scope.Domain_{{id}}.put = function($el){
-						{{/domains}}
+								$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

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

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