More UI stuff

This commit is contained in:
2024-08-12 13:53:37 -04:00
parent e86de04a69
commit 35d3a399e3
5 changed files with 103 additions and 106 deletions
+1 -1
View File
@@ -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}
+17 -15
View File
@@ -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(){}
}
});
}
+61 -63
View File
@@ -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);
+14 -17
View File
@@ -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);
});
+10 -10
View File
@@ -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);