@wxn0brp/db 0.0.4 → 0.0.6

package/dist/esm/remote/server/gui/js/render.js

@@ -0,0 +1,64 @@
+const databaseServerList = document.querySelector("#database-server-list");
+const data_output = document.querySelector("#data-output");
+const queryDivDb = document.querySelector("#query-div-db");
+const queryDivGraph = document.querySelector("#query-div-graph");
+
+const renderFunc = {
+    renderServerList(){
+        const serversList = [];
+        Object.keys(serversMeta).forEach(id => {
+            serversList.push({
+                id,
+                name: serversMeta[id].name,
+                saved: serversMeta[id].saved || false
+            });
+        })
+        databaseServerList.innerHTML = templates.databasesList({ serversList });
+
+        Object.keys(serversMeta).forEach(id => {
+            renderFunc.rednerServer(id);
+        })
+    },
+
+    async rednerServer(id){
+        const server = serversMeta[id];
+        if(!server) return;
+        const nav = document.querySelector("#database-nav-"+id);
+        nav.innerHTML = "";
+
+        const dbsObj = await databaseGetMetaFunc.loadDbList(id);
+        const dbsArray = [];
+        Object.keys(dbsObj).forEach(db => {
+            dbsArray.push({
+                serverId: id,
+                name: db
+            });
+        })
+        nav.innerHTML = templates.databaseNav({ dbs: dbsArray });
+    },
+
+    async renderTables(serverId, dbName){
+        const nav = document.querySelector("#database-nav-"+serverId+"-"+dbName);
+        nav.innerHTML = "";
+        vars.selectedServer = serverId;
+        vars.selectedDb = dbName;
+        vars.selectedTable = null;
+        renderFunc.updateQueryStyle();
+        const tables = await databaseGetMetaFunc.getDbTables(serverId, dbName);
+        nav.innerHTML = templates.databasesTables({ tables, server: serverId, db: dbName });
+    },
+
+    updateQueryStyle(){
+        const dbType = getSelectedDatabase().type;
+        switch(dbType){
+            case "database":
+                queryDivDb.style.display = "block";
+                queryDivGraph.style.display = "none";
+            break;
+            case "graph":
+                queryDivDb.style.display = "none";
+                queryDivGraph.style.display = "block";
+            break;
+        }
+    },
+}

package/dist/esm/remote/server/gui/js/templates.js

@@ -0,0 +1,31 @@
+const templatesUtils = {
+    load(id){
+        const templateEle = document.querySelector("#"+id);
+        const html = templateEle.innerHTML;
+        const template = Handlebars.compile(html);
+        templateEle.remove();
+        return template;
+    }
+}
+
+Handlebars.registerHelper("isObject", function (value){
+    return typeof value === "object" && value !== null;
+});
+
+Handlebars.registerHelper("json5", function (context){
+    const json5 = JSON5.stringify(context, null, 4);
+    return json5.substring(1, json5.length - 1);
+});
+
+Handlebars.registerHelper("br", function(height){
+    return new Handlebars.SafeString(`<div style="height: ${height}px;"></div>`);
+});
+
+const templates = {
+    databasesList: templatesUtils.load("databases-list-template"),
+    databaseNav: templatesUtils.load("database-nav-template"),
+    databasesTables: templatesUtils.load("databases-tables-template"),
+    tableData: templatesUtils.load("table-data-template"),
+    addServer: templatesUtils.load("addServer-template"),
+    menageServers: templatesUtils.load("menageServers-template"),
+}

package/dist/esm/remote/server/gui/js/utils.js

@@ -0,0 +1,36 @@
+class AutoUpdater{
+    constructor(obj, key, selector, updateCB){
+        this.obj = obj;
+        this.key = key;
+        this.element = document.querySelector(selector);
+        this.updateCB = updateCB;
+        this.init();
+    }
+
+    init(){
+        this.updateElement();
+        this.watch();
+    }
+
+    updateElement(){
+        let value = this.obj[this.key];
+        const formattedValue = this.updateCB ? this.updateCB(value) : value;
+        this.element.innerHTML = formattedValue; 
+    }
+
+    watch(){
+        let currentValue = this.obj[this.key];
+        
+        Object.defineProperty(this.obj, this.key, {
+            set: (newValue) => {
+                currentValue = newValue;
+                this.updateElement();
+            },
+            get: () => currentValue
+        });
+    }
+}
+
+function getSelectedDatabase(){
+    return serversData[vars.selectedServer][vars.selectedDb];
+}

package/dist/esm/remote/server/gui/js/vars.js

@@ -0,0 +1,9 @@
+let serversData = {};
+let serversMeta = {};
+let db_data = [];
+
+const vars = {
+    selectedServer: null,
+    selectedDb: null,
+    selectedTable: null,
+}

package/dist/esm/remote/server/gui/libs/core.js

@@ -0,0 +1,176 @@
+var lo = console.log;
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
+const cw = {};
+
+cw.proto = {
+    html(v){
+        if(this.innerHTML != undefined){
+            this.innerHTML = v;
+            return this;
+        }else{
+            return this.innerHTML;
+        }
+    },
+
+    v(v){
+        if(this.value != undefined){
+            this.value = v;
+            return this;
+        }else{
+            return this.value;
+        }
+    },
+
+    on(event, fn){
+        this.addEventListener(event, fn);
+    },
+
+    css(style, val=null){
+        const ele = this;
+        if(typeof style == "string"){
+            if(val != null){
+                ele.style[style] = val;
+            }else{
+                ele.style = style;
+            }
+        }else if(typeof style == "object"){
+            Object.assign(ele.style, style);
+        }
+    },
+
+    atrib(att, arg=null){
+        if(arg){
+            this.setAttribute(att, arg);
+        }else{
+            return this.getAttribute(att);
+        }
+        return this;
+    },
+    
+    clA(arg){
+        this.classList.add(arg);
+        return this;
+    },
+    
+    clR(arg){
+        this.classList.remove(arg);
+        return this;
+    },
+    
+    clT(className){
+        this.classList.toggle(className);
+        return this;
+    },
+    
+    animateFade(from, { time=200, cb=null }){
+        const style = this.style;
+        const steps = 50;
+        const timeToStep = time / steps;
+        const d = (from == 0 ? 1 : -1)/steps;
+        let index = 0;
+        style.opacity = from;
+
+        const interval = setInterval(() => {
+            if(index >= steps){
+                clearInterval(interval);
+                if(cb && typeof cb == "function") cb();
+                return;
+            }
+            style.opacity = parseFloat(style.opacity) + d;
+            index++;
+        }, timeToStep);
+        return this;
+    },
+
+    fadeIn(display="block", cb=null){
+        if(typeof display == "function"){
+            cb = display;
+            display = "block";
+        }
+        
+        this.css("display", display);
+        this.animateFade(0, { cb });
+        this.fade = true;
+        return this;
+    },
+
+    fadeOut(cb=null){
+        this.animateFade(1, { time: 300, cb });
+        setTimeout(() => this.css("display", "none"), 300);
+        this.fade = false;
+        return this;
+    },
+
+    fade: true,
+    fadeToogle(){
+        if(this.fade){
+            this.fadeOut();
+        }else{
+            this.fadeIn();
+        }
+        return this;
+    },
+
+    add(child){
+        this.appendChild(child);
+        return this;
+    },
+
+    addUp(child){
+        this.insertBefore(child, this.firstChild);
+        return this;
+    },
+};
+
+cw.init = function(){
+    Object.assign(HTMLElement.prototype, this.proto);
+}
+cw.init();
+
+
+cw.grid = function(doc=document.body){
+    function getSize(className, size){
+        const match = className.match(new RegExp(`${size}_(\\d+)`));
+        return match ? parseInt(match[0].replace(size+"_","")) : 12;
+    }
+    function add(ele, start, size){
+        for(let i=start; i<prefixes.length; i++){
+            ele.classList.add(prefixes[i] + "_" + size);
+        }
+    }
+    const prefixes = "smlu";
+    const elementy = doc.querySelectorAll(".s, [class^='s_']");
+    elementy.forEach(ele => {
+        const cm = ele.className;
+        let foundPrefix = 0;
+        for(let i=0; i<prefixes.length; i++){
+            if(!cm.includes(prefixes[i] + "_")) continue;
+            foundPrefix = i;
+        }
+        const size = getSize(cm, prefixes[foundPrefix])
+        add(ele, foundPrefix, size);
+    });
+}
+
+cw.rand = function(min, max){
+	return Math.round(Math.random() * (max-min) + min);
+}
+
+cw.round = function(a, b){
+	const factor = Math.pow(10, b);
+	return Math.round(a*factor)/factor;
+}
+
+cw.get = function(url){
+    if(!url) return false;
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url, false);
+    xhr.send();
+    
+    if(xhr.status == 200){
+        return xhr.responseText;
+    }else if(xhr.status == 404){
+        return false;
+    }else return null;
+}