☰

TutorDBOps Helper

try to improve TutorDBOps

当前为 2021-09-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         TutorDBOps Helper
  3. // @namespace    http://tpdbops.tutorabc.com/
  4. // @version      0.2
  5. // @description  try to improve TutorDBOps
  6. // @author       Tex
  7. // @match        http://tpdbops.tutorabc.com/mysqlmanage/*
  8. // @icon         https://www.google.com/s2/favicons?domain=tutorabc.com
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     const dbopsStorage = {
  14.         prefix: location.pathname.includes('mssql') ? 'dbops-mssql-' : 'dbops-mysql-',
  15.         set:(key, value) => localStorage.setItem(dbopsStorage.prefix+key, value),
  16.         get:(key) => localStorage.getItem(dbopsStorage.prefix+key),
  17.     }
  18.     function addCss(cssString) {
  19.         const head = document.getElementsByTagName('head')[0];
  20.         const newCss = document.createElement('style');
  21.         newCss.type = "text/css";
  22.         newCss.innerHTML = cssString;
  23.         head.appendChild(newCss);
  24.     }
  25.  
  26.     const searchBtn = document.getElementById("search");
  27.     function submitSql() {
  28.         searchBtn.click();
  29.     }
  30.  
  31.     function collapse(showLeftArea) {
  32.         // hide sidebar
  33.         const sidebar = document.querySelector("#container > aside");
  34.         sidebar.style.width = showLeftArea? '230px' : '0px';
  35.         sidebar.style.opacity = showLeftArea? '1' : '0';
  36.         sidebar.style['z-index'] = showLeftArea? 'unset' : '-1';
  37.         //  remove right area margin left
  38.         const rightblock = document.querySelector("#container > section");
  39.         rightblock.style['margin-left'] = showLeftArea ? '230px':'0px';
  40.     }
  41.  
  42.     const storageVal = dbopsStorage.get('showLeftArea');
  43.     let showLeftArea = storageVal === 'true' ?? true;
  44.     collapse(showLeftArea)
  45.  
  46.     function toggleRightArea() {
  47.         // toggle state
  48.         showLeftArea = !showLeftArea;
  49.         dbopsStorage.set('showLeftArea',showLeftArea);
  50.         collapse(showLeftArea)
  51.     }
  52.  
  53.     const hint = document.querySelector("div.box.box-success > form > table > tbody > tr > td:nth-child(2)");
  54.     hint.style.display = 'none';
  55.  
  56.     const executePlanBtn = document.querySelector("div.box.box-success > form > table > tbody > tr > td:nth-child(1) > div > div > button:nth-child(7)")
  57.     const hostTitle = document.querySelector("form > div.box-header.with-border.table_sort_form > a:nth-child(1) > input");
  58.     const dbTitle = document.querySelector("form > div.box-header.with-border.table_sort_form > a:nth-child(3) > input");
  59.     if(executePlanBtn) executePlanBtn.innerText="查看執行計畫";
  60.     searchBtn.innerText="執行"
  61.     hostTitle.value="主機 (雙擊清空)"
  62.     dbTitle.value="資料庫"
  63.  
  64.     const hostSelector = document.querySelector("#doc-vld-post-1");
  65.     const dbSelector = document.querySelector("#doc-vld-level-1")
  66.  
  67.     const storedHost = dbopsStorage.get('host');
  68.     const storedDB = dbopsStorage.get('db');
  69.  
  70.     const hosts = Array.from(hostSelector.children).map(e => e.value);
  71.     const hostInput = document.createElement('input');
  72.     hostInput.setAttribute("list", "hostlist");
  73.     hostInput.id='hosts';
  74.     hostInput.name='hosts';
  75.     hostInput.placeholder="請選擇主機";
  76.     hostInput.className="topInput"
  77.     hostInput.ondblclick = (e) => {
  78.         e.target.value='';
  79.     }
  80.     if(storedHost) hostInput.value = storedHost;
  81.     const hostDataList = document.createElement('datalist');
  82.     hostDataList.id = 'hostlist';
  83.     hosts.forEach(e => {
  84.         const op = document.createElement('option');
  85.         op.value = e;
  86.         hostDataList.appendChild(op)
  87.     });
  88.  
  89.     const hostAnchor = document.querySelector("form > div.box-header.with-border.table_sort_form > a:nth-child(1)");
  90.     hostAnchor.parentNode.insertBefore(hostDataList, hostAnchor.nextSibling);
  91.     hostAnchor.parentNode.insertBefore(hostInput, hostAnchor.nextSibling);
  92.  
  93.     //hostSelector.remove();
  94.     hostSelector.style.display="none";
  95.     hostSelector.removeAttribute("required");
  96.     hostSelector.name="hh";
  97.  
  98.  
  99.     function updateDBInput(val, callback) {
  100.      fetch('http://tpdbops.tutorabc.com/mysqlmanage/ipdbname/'+val)
  101.             .then(r => r.json())
  102.             .then(dbs => {
  103.             dbDataList.replaceChildren(null);
  104.             dbInput.value="";
  105.             dbs.forEach((e, index) => {
  106.                 const op = document.createElement('option');
  107.                 op.value = e;
  108.                 dbDataList.appendChild(op)
  109.             })
  110.             const dbAnchor = document.querySelector("form > div.box-header.with-border.table_sort_form > a:nth-child(5)");
  111.             dbAnchor.parentNode.insertBefore(dbDataList, dbAnchor.nextSibling);
  112.             dbAnchor.parentNode.insertBefore(dbInput, dbAnchor.nextSibling);
  113.             callback();
  114.         })
  115.     }
  116.  
  117.     const dbInput = document.createElement('input');
  118.     dbInput.setAttribute("list", "dblist");
  119.     dbInput.id='dbs';
  120.     dbInput.name='dbs';
  121.     dbInput.placeholder="請選擇資料庫";
  122.     dbInput.className="topInput"
  123.     dbInput.ondblclick = (e) => {
  124.         e.target.value='';
  125.     }
  126.     if(storedHost && storedDB) {
  127.       updateDBInput(storedHost, () => {dbInput.value = storedDB})
  128.     };
  129.     const dbDataList = document.createElement('datalist');
  130.     dbDataList.id='dblist'
  131.     hostInput.onchange = (e) => {
  132.         dbopsStorage.set('host',e.target.value);
  133.         updateDBInput(e.target.value)
  134.         hostSelector.value=e.target.value;
  135.     }
  136.  
  137.     dbInput.onchange = (e) => {
  138.         dbopsStorage.set('db',e.target.value);
  139.         dbSelector.value=e.target.value;
  140.     }
  141.  
  142.     //dbSelector.remove();
  143.     dbSelector.style.display="none";
  144.     dbSelector.removeAttribute("required");
  145.     dbSelector.name="dd";
  146.  
  147.     // autofocus sql textarea
  148.     const sqlTextArea = document.querySelector("form > table > tbody > tr > td:nth-child(1) > div > div > textarea")
  149.     sqlTextArea.focus();
  150.  
  151.     // enroll event
  152.     document.onkeydown = function(e) {
  153.         if(e.code === 'Enter' && e.ctrlKey) {
  154.             submitSql();
  155.         }
  156.         if(e.code === 'KeyB' && e.ctrlKey) {
  157.             toggleRightArea();
  158.         }
  159.     }
  160.  
  161.     addCss(`
  162.        * {
  163.         font-family: Consolas;
  164.         font-weight: bold;
  165.         font-size: 14px;
  166.        }
  167.        .form-group, div.box.box-success > form > table {
  168.          width: 100%;
  169.        }
  170.        textarea.form-control {
  171.          width: 100% !important;
  172.          height: 60vh;
  173.        }
  174.        table.table-hover, small{
  175.          transform: rotateX(180deg);
  176.        }
  177.        .box-footer {
  178.        transform: rotateX(180deg);
  179.        }
  180.        .box-footer ~ .box-footer{
  181.          margin-top: 30px;
  182.          overflow: unset !important;
  183.          overflow-x: auto !important;
  184.        }
  185.        .box-footer table {
  186.          width: 99%;
  187.          margin: 0 auto;
  188.        }
  189.        .topInput {
  190.          margin-left: 10px;
  191.          width: 250px;
  192.        }
  193.     `)
  194. })();