@wxn0brp/db 0.0.1

package/remote/server/gui/js/queryApi.js

@@ -0,0 +1,51 @@
+const dbActionUtils = {
+    async query(data, path){
+        if(!vars.selectedServer) return false;
+        if(!vars.selectedDb) return false;
+        if(!vars.selectedTable) return false;
+
+        const body = {
+            db: vars.selectedDb,
+            collection: vars.selectedTable,
+            ...data
+        }
+
+        const server = serversMeta[vars.selectedServer];
+        const res = await fetch(server.url + "db/" + path, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": server.token
+            },
+            body: JSON.stringify(body)
+        }).then(res => res.json());
+        if(res.err){
+            alert(res.msg);
+            return false;
+        }
+
+        return res.result;
+    }
+}
+
+const dbActions = {
+    async find(query, context=undefined, opts=undefined){
+        const body = {
+            search: query,
+            context,
+            opts
+        }
+
+        return await dbActionUtils.query(body, "database/find");
+    },
+}
+
+const graphActions = {
+    async find(node){
+        return await dbActionUtils.query({ node }, "graph/find");
+    },
+
+    async getAll(){
+        return await dbActionUtils.query({}, "graph/getAll");
+    },
+}

package/remote/server/gui/js/queryDb.js

@@ -0,0 +1,79 @@
+const queryDbFunc = {
+    queryInput: document.querySelector("#query"),
+    queryTypeSelect: document.querySelector("#query-type"),
+    queryContextInput: document.querySelector("#query-context"),
+    queryContextLabel: document.querySelector("#query-context-label"),
+    queryOptsInput: document.querySelector("#query-opts"),
+
+    renderData(){
+        if(!db_data || db_data.length == 0){
+            data_output.innerHTML = "<p>No data</p>";
+            return;
+        }
+        data_output.innerHTML = templates.tableData({ data: db_data });
+    },
+
+    init(){
+        document.querySelector("#query-db-btn").addEventListener("click", async () => {
+            let query = queryDbFunc.queryInput.value.trim();
+            let type = queryDbFunc.queryTypeSelect.value.trim();
+            let context = queryDbFunc.queryContextInput.value.trim();
+            let opts = queryDbFunc.queryOptsInput.value.trim();
+
+            if(!query) query = "{}";
+            if(!type) type = "json";
+            if(!context) context = "{}";
+            if(!opts) opts = "{}";
+
+            switch(type){
+                case "js-function":
+                    try{
+                        (new Function("return " + query))();
+                    }catch{
+                        return alert("Invalid query context");
+                    }
+                break;
+                case "json5":
+                    if(!query.startsWith("{")) query = "{" + query + "}";
+                    query = JSON5.parse(query);
+                break;
+                case "json":
+                    query = JSON.parse(query);
+                break;
+            }
+
+            context = JSON5.parse(context);
+            opts = JSON5.parse(opts);
+            if(!context) context = {};
+            if(!opts) opts = {};
+            
+            const data = await dbActions.find(query, context, opts);
+            if(!data) return;
+            db_data = data;
+            queryDbFunc.renderData();
+        });
+
+        queryDbFunc.queryTypeSelect.addEventListener("change", () => {
+            queryDbFunc.queryContextLabel.style.display = queryTypeSelect.value == "js-function" ? "block" : "none";
+        });
+
+        document.querySelector("#sortData").addEventListener("click", () => {
+            const sortKey = prompt("Enter key to sort by:");
+            if(!sortKey) return;
+            queryDbFunc.sortData(sortKey);
+        });
+    },
+
+    sortData(key){
+        db_data.sort((a, b) => {
+            const aValue = a[key] !== undefined ? a[key] : "";
+            const bValue = b[key] !== undefined ? b[key] : "";
+            if(aValue > bValue) return 1;
+            if(aValue < bValue) return -1;
+            return 0;
+        });
+        this.renderData();
+    }
+}
+
+queryDbFunc.init();

package/remote/server/gui/js/queryGraph.js

@@ -0,0 +1,144 @@
+const queryGraphFunc = {
+    queryInput: document.querySelector("#query-graph-node"),
+    outputMethodSelect: document.querySelector("#query-graph-output-method"),
+
+    init(){
+        document.querySelector("#query-graph-btn").addEventListener("click", async () => {
+            const node = queryGraphFunc.queryInput.value.trim();
+            const edges = await graphActions.find(node);
+            db_data = edges;
+            queryGraphFunc.displayEdges();
+        });
+
+        document.querySelector("#query-graph-all-btn").addEventListener("click", async () => {
+            const edges = await graphActions.getAll();
+            db_data = edges;
+            queryGraphFunc.displayEdges();
+        });
+    },
+
+    displayEdges(){
+        const method = queryGraphFunc.outputMethodSelect.value;
+
+        switch(method){
+            case "table":
+                if(!db_data || db_data.length == 0){
+                    data_output.innerHTML = "<p>No data</p>";
+                    return;
+                }
+                data_output.innerHTML = templates.tableData({ data: db_data });
+            break;
+            case "graph":
+                queryGraphFunc.displayEdgesGraph();
+            break;
+        }
+    },
+
+    displayEdgesGraph(){
+        if(!db_data || db_data.length == 0){
+            data_output.innerHTML = "<p>No data</p>";
+            return;
+        }
+        data_output.innerHTML = "";
+        const { nodes, links } = queryGraphFunc.transformData(db_data);
+
+        const div = document.createElement("div");
+        div.style.height = "500px";
+        div.style.width = "99%";
+        data_output.appendChild(div);
+
+        const width = div.clientWidth;
+        const height = div.clientHeight;
+        
+        const zoom = d3.zoom()
+            .scaleExtent([0.1, 4])
+            .on("zoom", (event) => {
+                g.attr("transform", event.transform);
+            })
+
+        const svg = d3.create("svg")
+            .attr("width", width)
+            .attr("height", height)
+            .call(zoom);
+        
+        const g = svg.append("g");
+        
+        const simulation = d3.forceSimulation(nodes)
+            .force("link", d3.forceLink().id(d => d.id).distance(90))
+            .force("charge", d3.forceManyBody().strength(-90))
+            .force("center", d3.forceCenter(width / 2, height / 2))
+            .force("collision", d3.forceCollide().radius(50))
+            .force("gravity", d3.forceManyBody().strength(20));
+        
+        const link = g.append("g")
+            .attr("class", "links")
+            .selectAll("line")
+            .data(links)
+            .enter().append("line")
+            .attr("stroke-width", 2)
+            .style("stroke", "var(--accent)");
+        
+        const node = g.append("g")
+            .attr("class", "nodes")
+            .selectAll("g")
+            .data(nodes)
+            .enter().append("g");
+        
+        node.append("circle")
+            .attr("r", 8)
+            .attr("fill", "var(--accent)");
+        
+        node.append("text")
+            .attr("dx", 12)
+            .attr("dy", ".35em")
+            .attr("fill", "var(--txt)")
+            .text(d => d.id)
+            .style("cursor", "pointer")
+            .on("click", function(event, d) {
+                queryGraphFunc.copyToClipboard(d.id);
+            });
+        
+        simulation
+            .nodes(nodes)
+            .on("tick", () => {
+                link.attr("x1", d => d.source.x)
+                    .attr("y1", d => d.source.y)
+                    .attr("x2", d => d.target.x)
+                    .attr("y2", d => d.target.y);
+        
+                node.attr("transform", d => `translate(${d.x},${d.y})`);
+            });
+        
+        simulation.force("link").links(links);
+        div.appendChild(svg.node());
+
+        const resetView = document.createElement("button");
+        resetView.innerText = "Reset view";
+        resetView.addEventListener("click", () => {
+            svg.transition().duration(750)
+                .call(zoom.transform, d3.zoomIdentity);
+        });
+        data_output.appendChild(resetView);
+    },
+
+    transformData(inputData){
+        const nodesSet = new Set();
+        
+        const links = inputData.map(({ a, b }) => {
+            nodesSet.add(a);
+            nodesSet.add(b);
+            return { source: a, target: b };
+        });
+
+        const nodes = Array.from(nodesSet).map(id => ({ id }));
+        return { nodes, links };
+    },
+
+    copyToClipboard(text){
+        navigator.clipboard.writeText(text).then(() => alert("Copied in clipboard!")).catch(() => {
+            alert("Failed to copy in clipboard. Manually select and copy it:\n" + text);
+        });
+    },
+}
+
+queryGraphFunc.init();

package/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/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/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/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/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;
+}