/**
* Db Component<BR>
* <BR><BR><img src=/tk/lib/components/w/img/db.png width=30% style="border:1px lime dashed;padding:20px">
* <BR><BR><a href="/tk/lib/components/w/html/db.html">DEMO</a>
*/
class Db extends HTMLElement {
constructor() {
wc.group("Db.constructor")
super();
wc.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
wc.group("Db.observedAttributes");
this.observables = [];
wc.groupEnd();
return this.observables;
};
/**
* Called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
wc.group("Db.connectedCallback")
let self = this;
// ADD A RANDOM ID IF NONE EXIST
if (!this.id) {
this.id = this.constructor.name.toLowerCase() + "-" + wc.uid();
}
// GET PROPERTIES AND INTERESTING ELEMENTS
this._initialize();
// ADD COMPONENT MARKTOP
this.innerHTML = this._template()
// GET IT FROM URL IF ANY
this.properties.db = wc.getSearchParam("db") || this.properties.db;
wc.wait4("#db-path", () => {
let path = this.querySelector("#db-path");
$(path).html(this.properties.db);
$("#btn-query-toggle").on("click", function() {
$("#query-container").slideToggle(200, function() {
// if ($("#query-container").is(":visible") === true) {
// $("#query-container").addClass("shadow")
// $("#main-container").slideUp();
// } else {
// $("#query-container").removeClass("shadow")
// $("#main-container").slideDown();
// }
});
});
$("#btn-query-clear").on("click", function() {
$("#query-textarea").val("")
$("#query-result").html("<div class='p-5'>Waiting...</div>");
});
$("#btn-query").on("click", function() {
let val = $("#query-textarea").val().trim()
console.log("=======" + val + "============");
self.query(val, function (data) {
self.result(data);
});
});
});
self.query("SELECT name FROM sqlite_master WHERE type='table' ORDER BY name", function (data) {
$(".list-group").empty();
for (var i = 0; i < data.size; i++) {
$(".list-group").append(`<a href="#" class="list-group-item border-radius-0 list-group-item-action" table='${data.values[i].name}'>${data.values[i].name}</a>`)
}
// ADD CALLBACKS
$(".list-group .list-group-item").on("click", function() {
$(".list-group .list-group-item").removeClass("active")
$(this).addClass("active")
self.show($(this).attr("table"));
});
});
// ADD STATS AND OTHER FINAL STUFF
this._finalize();
ga('send', {'hitType': 'event','eventCategory': 'wc-connected','eventAction': 'connected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
wc.groupEnd();
};
/**
* Initial Markup
* @private
* @_template
*/
_template() {
wc.group("Db.template");
var temp = "<wc-include href='/tk/lib/components/w/html/parts/db/main.html'></wc-include>"
wc.groupEnd();
return temp;
};
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
wc.group("Db.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
let obs = Db.observedAttributes;
for (let i = 0; i < obs.length; i++) {
if (newval) {
this.properties[obs[i]] = newval;
}
}
// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
try {
switch(attr)
{
case "header":
//this.querySelector("h1").innerHTML = newval;
break;
default:
break;
}
} catch(e) {
wc.warn(e.name + ' > ' + e.message);
}
wc.groupEnd();
};
/**
* Stores DOM elements of interest for future use
* @private
* @_fetchElements
*/
_fetchElements() {
wc.group("Db._fetchElements");
this.dom = this.dom || [];
this.dom.content = this.innerHTML;
wc.groupEnd();
};
/**
* Component attributes are _fetched and defaults are set if undefined
* @private
* @_fetchAttributes
*/
_fetchAttributes() {
wc.group("Db._fetchAttributes");
this.properties = {
uparam : "",
cname : "Db",
author : "Mel M. Heravi",
version : "1.0"
};
// SAVE WIDGET SPECIFIC PROPERTIES
this.propertiesW = [];
// SAVE ALL OTHER PROPERTIES
let attrs = wc.getAttributes(this)
for (var key in attrs) {
let attr = this.getAttribute(key) || this.properties.key;
this.properties[key] = this.getAttribute(key);
this.propertiesW[key] = this.getAttribute(key);
wc.log(key + ": " + attrs[key]);
}
// SET ALL INITIAL ATTRIBUTES
for (var key in this.properties) {
switch(key)
{
case "header":
break;
default:
break;
}
}
wc.log("ATTRIBUTES: ", this.properties);
wc.groupEnd();
};
/**
* configure the instance object and artifacts
* @configure
* @param {string} data use data if exist else use 'this.properties.cfg' parameter
*/
configure(data) {
wc.group("Db.configure:", data);
// IF JSON VARIABLE (data) IS PROVIDED
if (data) {
this._process(data);
} else {
let self = this;
$.getJSON(this.properties.cfg, function(data) {
self._process(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
});
}
wc.groupEnd();
};
/**
* _process the instance object and artifacts
* @private
* @_process
*/
_process(data) {
wc.group("Db._process:", data);
// DO WHATEVER WITH THE DATA
wc.groupEnd();
};
/**
* Initialize component
* @private
* @_initialize
*/
_initialize() {
wc.group("Db._initialize:", this.id);
// FETCH ALL INTERESTING ELEMENTS
this._fetchElements();
// FETCH ALL ATTRIBUTES
this._fetchAttributes();
wc.groupEnd();
};
/**
* Save data for analytics and final wrap up
* @private
* @_finalize
*/
_finalize() {
wc.group("Db._finalize:", this.id);
this.classList.add("wc");
// ADD ANALYTICS HERE
wc.setStats(this, this.properties.cname, this.properties.version);
// SHOW IT NOW (NO FLICKERS)
this.style.visibility = "visible";
wc.groupEnd();
};
/**
* Invoked When component is removed. Usually with a .remove() function call
* @disconnectedCallback
*/
disconnectedCallback() {
wc.group("Db.disconnectedCallback")
ga('send', {'hitType': 'event','eventCategory': 'wc-disconnected','eventAction': 'disconnected','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
wc.groupEnd();
};
/**
* Destroy the instance object and artifacts
* @destroy
*/
destroy() {
wc.group("Db.destroy");
// FREE ALL MEMORY
// you should delete all created objects here
// FREE POINTER
delete this;
// REMOVE ITEM FROM DOM
this.parentNode.removeChild(this);
ga('send', {'hitType': 'event','eventCategory': 'wc-destroyed','eventAction': 'distroy','eventLabel': this.properties.cname, 'eventValue':JSON.stringify({'env':wcENV,'app':wcAPP,'url':wcURL})});
wc.groupEnd();
};
/**
* @show
*/
show(table) {
wc.group("Db.show");
let self = this;
$("#db-result").empty().append(`<h4 class="text-uppercase wc-far">${table}</h4><table class='table table-responsive table-striped'><thead><tr></tr></thead><tbody></table>`);
tkloading.show();
this.query(`SELECT * from ${table}`, function (data) {
let headers = 0;
for (var i = 0; i < data.size; i++) {
let b = "<tr>"
if (!headers) {
headers = 1;
for (var key in data.values[i]) {
$("#db-result table thead tr").append(`<th>${key}</th>`);
b += `<td title="${data.values[i][key]}"><div><span>${data.values[i][key]}</span></div></td>`
}
} else {
for (var key in data.values[i]) {
b += `<td title="${data.values[i][key]}"><div><span>${data.values[i][key]}</span></div></td>`
}
}
b += "</tr>"
$("#db-result table tbody").append(b)
}
if (self.properties.datatables == "true") {
wc.table("table", {
"order": [],
"bProcessing": true,
"bInfo": false,
"bFilter": true,
"paging": false,
"scrollY": "500px",
"aaSorting": {"column":1, "direction":"asc"}
});
wc.wait4(".dataTables_wrapper", ()=> {
$(".dataTables_wrapper").css("margin-top", "-40px");
$(".dataTables_scrollBody").css("border-bottom","1px #CCC solid");
});
}
tkloading.hide();
});
wc.groupEnd();
};
/**
* @query
*/
query(qstr, callback) {
wc.group("Db.query:", qstr);
let self = this;
function dbQuery(qstr, successCB, errorCB) {
$.getJSON(`/mtk/restDB?db=${self.properties.db}&query=${qstr}`, function(data) {
successCB(data)
}).fail(function(jqXHR, textStatus, errorThrown) {
errorCB([])
});
}
dbQuery(qstr, successCB, errorCB)
function successCB(data) {
$("#query").html("SUCCESS:<hr>" + JSON.stringify(data))
console.log("SUCCESS:", data.length, data);
callback(data);
}
function errorCB(data) {
$("#query").html("ERROR:<hr>" + JSON.stringify(data))
console.log("ERROR:", data.length, data);
callback(data);
}
wc.groupEnd();
}
/**
* @result
*/
result(data) {
wc.group("Db.result:", JSON.stringify(data));
$("#query-result")
.empty()
.append("<table class='table table-bordered table-striped table-hover'><thead><tr></tr></thead><tbody></table>");
let headers = 0;
for (var i = 0; i < data.size; i++) {
let b = "<tr>"
if (!headers) {
headers = 1;
for (var key in data.values[i]) {
$("#query-result table thead tr").append(`<th>${key}</th>`);
b += `<td>${data.values[i][key]}</td>`
}
} else {
for (var key in data.values[i]) {
b += `<td>${data.values[i][key]}</td>`
}
}
b += "</tr>"
$("#query-result tbody").append(b)
}
wc.groupEnd();
};
}
window.customElements.define('wc-db', Db);