TutorDBOps Helper

try to improve TutorDBOps
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         TutorDBOps Helper
// @namespace    http://tpdbops.tutorabc.com/
// @version      0.62
// @description  try to improve TutorDBOps
// @author       Tex
// @match        http://tpdbops.tutorabc.com/mysqlmanage/select_*
// @icon         https://www.google.com/s2/favicons?domain=tutorabc.com
// @grant        none
// ==/UserScript==

(function() {
    const isMssqlPage = location.pathname.includes('mssql');

    const dbopsStorage = {
        prefix: isMssqlPage ? 'dbops-mssql-' : 'dbops-mysql-',
        set:(key, value) => localStorage.setItem(dbopsStorage.prefix+key, value),
        get:(key) => localStorage.getItem(dbopsStorage.prefix+key),
    }
    function addCss(cssString) {
        const head = document.getElementsByTagName('head')[0];
        const newCss = document.createElement('style');
        newCss.type = "text/css";
        newCss.innerHTML = cssString;
        head.appendChild(newCss);
    }
    function loadScript(url, callback) {
        if(!url) return;
        const head = document.getElementsByTagName('head')[0];
        const script = document.createElement('script');
        head.appendChild(script);
        script.src = url;
        script.onload = script.onreadystagechange = function() {
            console.log('loaded:', url);
            callback && callback();
        }
    }

    const searchBtn = document.getElementById("search");
    function submitSql() {
        searchBtn.click();
    }

    function collapse(showLeftArea) {
        // hide sidebar
        const sidebar = document.querySelector("#container > aside");
        sidebar.style.width = showLeftArea? '230px' : '0px';
        sidebar.style.opacity = showLeftArea? '1' : '0';
        sidebar.style['z-index'] = showLeftArea? 'unset' : '-1';
        //  remove right area margin left
        const rightblock = document.querySelector("#container > section");
        rightblock.style['margin-left'] = showLeftArea ? '230px':'0px';
    }

    function aceLoadCallback() {
        ace.config.loadModule('ace/ext/textarea', function(m) {
            const textArea = document.querySelector("form div > textarea");
            m.transformTextarea(textArea, {fontSize: '14px', mode: isMssqlPage ? 'sqlserver':'mysql', theme: 'cobalt', showPrintMargin: false });
        })
    }

    loadScript('https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js', aceLoadCallback);

    const storageVal = dbopsStorage.get('showLeftArea');
    let showLeftArea = storageVal === 'true' ?? true;
    collapse(showLeftArea)

    function toggleRightArea() {
        // toggle state
        showLeftArea = !showLeftArea;
        dbopsStorage.set('showLeftArea',showLeftArea);
        collapse(showLeftArea)
    }

    const hint = document.querySelector("div.box.box-success > form > table > tbody > tr > td:nth-child(2)");
    hint.style.display = 'none';

    const executePlanBtn = document.querySelector("div.box.box-success > form > table > tbody > tr > td:nth-child(1) > div > div > button:nth-child(7)")
    const hostTitle = document.querySelector("form > div.box-header.with-border.table_sort_form > a:nth-child(1) > input");
    const dbTitle = document.querySelector("form > div.box-header.with-border.table_sort_form > a:nth-child(3) > input");
    if(executePlanBtn) executePlanBtn.innerText="查看執行計畫";
    searchBtn.innerText="執行"
    hostTitle.value="主機 (雙擊輸入框清空)"
    dbTitle.value="資料庫"

    const hostSelector = document.querySelector("#doc-vld-post-1");
    const dbSelector = document.querySelector("#doc-vld-level-1")

    const storedHost = dbopsStorage.get('host');
    const storedDB = dbopsStorage.get('db');

    const hosts = Array.from(hostSelector.children).map(e => e.value);
    const hostInput = document.createElement('input');
    hostInput.setAttribute("list", "hostlist");
    hostInput.id='hosts';
    hostInput.name='hosts';
    hostInput.placeholder="請選擇主機";
    hostInput.className="topInput"
    hostInput.ondblclick = (e) => {
        e.target.value='';
    }
    if(storedHost) hostInput.value = storedHost;
    const hostDataList = document.createElement('datalist');
    hostDataList.id = 'hostlist';
    hosts.forEach(e => {
        const op = document.createElement('option');
        op.value = e;
        hostDataList.appendChild(op)
    });

    const hostAnchor = document.querySelector("form > div.box-header.with-border.table_sort_form > a:nth-child(1)");
    hostAnchor.parentNode.insertBefore(hostDataList, hostAnchor.nextSibling);
    hostAnchor.parentNode.insertBefore(hostInput, hostAnchor.nextSibling);

    //hostSelector.remove();
    hostSelector.style.display="none";
    hostSelector.removeAttribute("required");
    hostSelector.name="hh";


    function updateDBInput(val, callback) {
        fetch('http://tpdbops.tutorabc.com/mysqlmanage/ipdbname/'+val)
            .then(r => r.json())
            .then(dbs => {
            dbDataList.replaceChildren(null);
            dbInput.value='';
            dbs.forEach((e, index) => {
                const op = document.createElement('option');
                op.value = e;
                dbDataList.appendChild(op)
            })
            const dbAnchor = document.querySelector("form > div.box-header.with-border.table_sort_form > a:nth-child(5)");
            dbAnchor.parentNode.insertBefore(dbDataList, dbAnchor.nextSibling);
            dbAnchor.parentNode.insertBefore(dbInput, dbAnchor.nextSibling);
            callback();
        })
    }

    const dbInput = document.createElement('input');
    dbInput.setAttribute("list", "dblist");
    dbInput.id='dbs';
    dbInput.name='dbs';
    dbInput.placeholder="請選擇資料庫";
    dbInput.className="topInput"
    dbInput.ondblclick = (e) => {
        e.target.value='';
    }
    if(storedHost && storedDB) {
        updateDBInput(storedHost, () => {dbInput.value = storedDB})
    };
    const dbDataList = document.createElement('datalist');
    dbDataList.id='dblist'
    hostInput.onchange = (e) => {
        dbopsStorage.set('host',e.target.value);
        updateDBInput(e.target.value)
        hostSelector.value=e.target.value;
    }

    dbInput.onchange = (e) => {
        dbopsStorage.set('db',e.target.value);
        dbSelector.value=e.target.value;
    }

    //dbSelector.remove();
    dbSelector.style.display="none";
    dbSelector.removeAttribute("required");
    dbSelector.name="dd";

    // autofocus sql textarea
    const sqlTextArea = document.querySelector("form > table > tbody > tr > td:nth-child(1) > div > div > textarea")
    sqlTextArea.focus();

    // enroll event
    document.onkeydown = function(e) {
        if(e.code === 'Enter' && e.ctrlKey) {
            submitSql();
        }
        if(e.code === 'KeyB' && e.ctrlKey) {
            toggleRightArea();
        }
    }

    addCss(`
       * {
        font-family: Consolas;
        font-weight: bold;
        font-size: 14px;
       }
       .form-group, div.box.box-success > form > table {
         width: 100%;
       }
       textarea.form-control {
         width: 100% !important;
         height: 60vh;
       }
       table.table-hover, small{
         transform: rotateX(180deg);
       }
       .box-footer {
       transform: rotateX(180deg);
       }
       .box-footer ~ .box-footer{
         margin-top: 30px;
         overflow: unset !important;
         overflow-x: auto !important;
       }
       .box-footer table {
         width: 99%;
         margin: 0 auto;
       }
       .topInput {
         margin-left: 10px;
         width: 250px;
       }
       .table_sort_form > a:nth-child(1) > input {
         cursor: default;
       }
       .table_sort_form > a:nth-child(3) > input {
         cursor: default;
       }
       form > table > tbody > tr > td:nth-child(1) > div > div > div {
         width: 100% !important;
       ]
    `)
})();