From 35d3a399e3654fb80f93c21e9dde5418504f6839 Mon Sep 17 00:00:00 2001
From: William Mantly <wmantly@gmail.com>
Date: Mon, 12 Aug 2024 13:53:37 -0400
Subject: [PATCH] More UI stuff

---
 nodejs/models/dns_provider/porkbun.js |   2 +-
 nodejs/public/lib/js/app-base.js      |  32 +++----
 nodejs/public/lib/js/jq-repeat_new.js | 124 +++++++++++++-------------
 nodejs/views/dns.ejs                  |  31 +++----
 nodejs/views/hosts.ejs                |  20 ++---
 5 files changed, 103 insertions(+), 106 deletions(-)

diff --git a/nodejs/models/dns_provider/porkbun.js b/nodejs/models/dns_provider/porkbun.js
index fd0e336..a39189e 100644
--- a/nodejs/models/dns_provider/porkbun.js
+++ b/nodejs/models/dns_provider/porkbun.js
@@ -11,7 +11,7 @@ class PorkBun{
 	}
 
 	static displayName = 'DigitalOcean';
-	static displayIconHtml = `<?xml version="1.0" encoding="utf-8"?>
+	static displayIconHtml = `
 <svg width="32px" height="32px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
    <style>
       .st1{fill:#fff}
diff --git a/nodejs/public/lib/js/app-base.js b/nodejs/public/lib/js/app-base.js
index e8a4fbe..33511e0 100644
--- a/nodejs/public/lib/js/app-base.js
+++ b/nodejs/public/lib/js/app-base.js
@@ -76,7 +76,8 @@ app.api = (function(app){
 	var baseURL = '/api/'
 
 	function post(url, data, callback){
-		$.ajax({
+		if(!$.isFunction(callback)) callback = callback2;
+		return $.ajax({
 			type: 'POST',
 			url: baseURL+url,
 			headers:{
@@ -86,17 +87,18 @@ app.api = (function(app){
 			contentType: "application/json; charset=utf-8",
 			dataType: "json",
 			complete: function(res, text){
-				callback(
+				callback ? callback(
 					text !== 'success' ? res.statusText : null,
 					JSON.parse(res.responseText),
 					res.status
-				)
+				) : function(){}
 			}
 		});
 	}
 
 	function put(url, data, callback){
-		$.ajax({
+		if(!$.isFunction(callback)) callback = callback2;
+		return $.ajax({
 			type: 'PUT',
 			url: baseURL+url,
 			headers:{
@@ -106,18 +108,18 @@ app.api = (function(app){
 			contentType: "application/json; charset=utf-8",
 			dataType: "json",
 			complete: function(res, text){
-				callback(
+				callback ? callback(
 					text !== 'success' ? res.statusText : null,
 					JSON.parse(res.responseText),
 					res.status
-				)
+				) : function(){}
 			}
 		});
 	}
 
 	function remove(url, callback, callback2){
 		if(!$.isFunction(callback)) callback = callback2;
-		$.ajax({
+		return $.ajax({
 			type: 'delete',
 			url: baseURL+url,
 			headers:{
@@ -126,17 +128,17 @@ app.api = (function(app){
 			contentType: "application/json; charset=utf-8",
 			dataType: "json",
 			complete: function(res, text){
-				callback(
+				callback ? callback(
 					text !== 'success' ? res.statusText : null,
 					JSON.parse(res.responseText),
 					res.status
-				)
+				) : function(){}
 			}
 		});
 	}
 
 	function options(url, callback){
-		$.ajax({
+		return $.ajax({
 			type: 'OPTIONS',
 			url: baseURL+url,
 			headers:{
@@ -145,17 +147,17 @@ app.api = (function(app){
 			contentType: "application/json; charset=utf-8",
 			dataType: "json",
 			complete: function(res, text){
-				callback(
+				callback ? callback(
 					text !== 'success' ? res.statusText : null,
 					JSON.parse(res.responseText),
 					res.status
-				)
+				) : function(){}
 			}
 		});
 	}
 
 	function get(url, callback){
-		$.ajax({
+		return $.ajax({
 			type: 'GET',
 			url: baseURL+url,
 			headers:{
@@ -164,11 +166,11 @@ app.api = (function(app){
 			contentType: "application/json; charset=utf-8",
 			dataType: "json",
 			complete: function(res, text){
-				callback(
+				callback ? callback(
 					text !== 'success' ? res.statusText : null,
 					JSON.parse(res.responseText),
 					res.status
-				)
+				) : function(){}
 			}
 		});
 	}
diff --git a/nodejs/public/lib/js/jq-repeat_new.js b/nodejs/public/lib/js/jq-repeat_new.js
index f5663ee..1506741 100644
--- a/nodejs/public/lib/js/jq-repeat_new.js
+++ b/nodejs/public/lib/js/jq-repeat_new.js
@@ -6,10 +6,21 @@ MIT license
 
 (function($, Mustache){
 'use strict';
-	if (!$.scope) {
-		$.scope = {};
-	}
-	
+	var scope = {};
+
+	$.scope = new Proxy(scope, {
+		get(obj, prop){
+			if(!obj[prop]){
+				scope[prop] = [];
+			}
+			return Reflect.get(...arguments);
+		},
+		set(obj, prop, value) {
+
+		    return Reflect.set(...arguments);
+		},
+	});
+
 	var make = function(element, template){
 		var result = [];
 
@@ -250,7 +261,6 @@ MIT license
 		// internal helper methods
 
 		result.__buildData = function(index, data){
-
 			return {
 				...this.__parseData(data),
 				nestedTemplates: this.__parseNestedTemplates(index, data),
@@ -290,50 +300,11 @@ MIT license
 			});
 		}
 
-
-
-
-
-
-		result.__setPut = function(fn) {
-			Object.defineProperty(this, '__put', {
-				value: fn,
-				writable: true,
-				enumerable: false,
-				configurable: true
-			});
-		};
-
-		result.__setTake = function(fn) {
-			Object.defineProperty(this, '__take', {
-				value: fn,
-				writable: true,
-				enumerable: false,
-				configurable: true
-			});
-		};
-
-		result.__setUpdate = function(fn) {
-			Object.defineProperty(this, '__update', {
-				value: fn,
-				writable: true,
-				enumerable: false,
-				configurable: true
-			});
-		};
-
-		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}`;
@@ -341,6 +312,11 @@ MIT license
 			$(el).replaceWith(`{{{ nestedTemplates.${templateIdx} }}}`);
 		});
 
+		var $this = $(element); 
+		result.nestedTemplates = [];
+		result.__jqRepeatId = $this.attr( 'jq-repeat' );
+		$this.removeAttr('jq-repeat');
+		result.__index = $this.attr('jq-repeat-index');
 		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);
@@ -356,10 +332,51 @@ MIT license
 			});
 		}
 
+		var temp = $.scope[result.__jqRepeatId] || [];
 		$.scope[result.__jqRepeatId] = result;
+
+		for(let prop of Object.keys(temp)){
+			if(prop,Number.isInteger(Number(prop))){
+				$.scope[result.__jqRepeatId].push(temp[prop]);
+			}else{
+				$.scope[result.__jqRepeatId][prop] = temp[prop];
+			}
+		}
+		
 	};
 
 	$( document ).ready( function(){
+
+		// Create an instance of MutationObserver and pass the callback function
+		const observer = new MutationObserver(function(mutationsList) {
+			mutationsList.forEach(mutation => {
+				if (mutation.type === 'childList') {
+					const addedNodes = mutation.addedNodes;
+					addedNodes.forEach(node => {
+						if (node.nodeType === Node.ELEMENT_NODE) {
+							const $el = $(node);
+							if ($el.is('[jq-repeat]')) {
+								make(node);
+							} else {
+								const toMake = [];
+								$el.find('[jq-repeat]').each((key, el) => {
+									if ($(el).parent().closest('[jq-repeat]').length) return;
+									toMake.push(el);
+								});
+
+								toMake.forEach(el => {
+									make(el);
+								});
+							}
+						}
+					});
+				}
+			});
+		});
+
+		// Start observing the document
+		observer.observe(document.body, { childList: true, subtree: true });
+
 		let toMake = [];
 
 		$( '[jq-repeat]' ).each(function(key, value){
@@ -370,25 +387,6 @@ MIT license
 		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 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);
-				}
-			}
-		});
 	} );
 
 })(jQuery, Mustache);
diff --git a/nodejs/views/dns.ejs b/nodejs/views/dns.ejs
index 7721a47..70dd325 100644
--- a/nodejs/views/dns.ejs
+++ b/nodejs/views/dns.ejs
@@ -57,24 +57,24 @@
 		});
 	}
 
-	function DnsProviderPopulate(){
-		app.api.get('/dns?detail=true', function(error, res){
-			if(error) return app.util.actionMessage(error, $.scope.DnsProvider.$this, 'danger');
-			$.scope.DnsProvider.push(...res.results)
-		});
-	}
+	$.scope.DnsProvider.parseData = function(row){
+		row['created_on_text'] = moment(row['updated_on'], "x").fromNow();
 
-	$(document).ready(function(){
+		return row
+	};
+
+	(async function(){
+
+	})()
+
+
+
+	$(document).ready(async 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
-		}
+		$.scope.DnsProvider.push(...(await app.api.get('/dns?detail=true')).results);
 
 		// Populate 
-		DnsProviderPopulate(); //populate the table
 		providerGet();
 
 		app.subscribe(/^model:/, function(data, topic){
@@ -196,13 +196,10 @@
 						</div>
 					</div>
 					<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;">
+						<b jq-repeat='Domain_{{id}}' jq-repeat-index="domain" class="m-1 badge text-bg-info rounded-pill">
 							{{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);
 							});
diff --git a/nodejs/views/hosts.ejs b/nodejs/views/hosts.ejs
index 67d16e5..5582a52 100755
--- a/nodejs/views/hosts.ejs
+++ b/nodejs/views/hosts.ejs
@@ -69,12 +69,12 @@
 				$.scope.hosts.push(hostParseRow(host));
 			}
 
-			$.scope.hosts.__setPut(function($el, item, list){
+			$.scope.hosts.put = function($el, item, list){
 				$el.addClass('table-success');
 				$el.fadeIn(2000, function(){
 					$el.removeClass('table-success');
 				});
-			});
+			};
 		});
 	}
 
@@ -130,25 +130,25 @@
 		$editHostForm.find('[name=is_wildcard').attr('disabled', true);
 		hostPopulate(); //populate the table
 
-		$.scope.hosts.__setTake(function($el, item, list){
+		$.scope.hosts.take = function($el, item, list){
 			$el.addClass('table-danger');
 			$el.fadeOut(1000, function(){
 				$el.remove()
 			});
-		});
+		};
 
-		$.scope.hosts.__setUpdate(function($el, $render, item, list){
+		$.scope.hosts.update = function($el, $render, item, list){
 			$render.show()
 			$el.replaceWith($render);
-		});
+		};
 
-		$.scope.editHost.__setPut(function($el, item, list){
+		$.scope.editHost.put = function($el, item, list){
 			$el.slideDown();
-		});
+		};
 
-		$.scope.editHost.__setTake(function($el, item, list){
+		$.scope.editHost.take = function($el, item, list){
 			$el.slideUp();
-		});
+		};
 
 		// app.subscribe(/^model:Host/, function(data, topic){
 		// 	console.log(topic, data);