More UI stuff
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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(){}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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
@@ -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
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user