☰

MEST Sidebar

fast switch account cookies

// ==UserScript==
// @name         MEST Sidebar
// @namespace    joyings.com.cn
// @version      1.1.9
// @description  fast switch account cookies
// @author       zmz125000
// @match        http://*/mest/*
// @icon         http://www.google.com/s2/favicons?domain=openwrt.org
// @grant        none
// @license      MIT
// @run-at       document-end
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js
// ==/UserScript==

(function () {
  'use strict';

  // Your code here...
  document.onkeydown = function (e) {
    if (e.ctrlKey && e.code == 'KeyF') {
      // ctrl+f
      e.preventDefault();
      document.querySelector("input.search-filter").select();
    }
  };

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
  window.mini = true

  async function insertDiv() {
    var div = document.createElement('div');
    div.id = "mySidebar";
    div.className = "sidebar";

    var radio = document.createElement('div');
    radio.innerHTML = `
                <div class="InputContainer">
                    <input placeholder="Search..." class ="search-filter"/>
                </div>
                <div id="sidebar-filter" class="radio filter">
                    <input label="全部" type="radio" name="materialType" data-filter="all">
                    <input label="原料" type="radio" name="materialType" data-filter="material">
                    <input label="包装物料" type="radio" name="materialType" data-filter="packaging">
                </div>
                `
    div.appendChild(radio)
    while (!$('#app')) {
      await sleep(200);
    }
    $('#app')[0].appendChild(div);

    // filter action
    var $filters = $('.filter [data-filter]');
    $filters.on('click', function (e) {
      $('.grid-container').removeClass("grid-expanded");
      var $this = $(this);
      var $item = $('.grid-container [data-type]');
      var $filterType = $this.attr('data-filter');

      if ($filterType == 'all') {
        $item.addClass('item');
        $item.removeClass('item-hidden');
      } else {
        $item.removeClass('item');
        $item.addClass('item-hidden');
        $item.filter('[data-type =' + $filterType + ']').addClass('item');
        $item.filter('[data-type =' + $filterType + ']').removeClass('item-hidden');
      }
    });

    // search action
    document.querySelector("input.search-filter").addEventListener("input", function () {
      if (this.value == '' && $('input[name="materialType"]').filter(':checked').length != 0) {
        $('input[name="materialType"]').filter(':checked').click();
      } else {
        var items = $('.grid-container [data-type]');
        for (let elm of items) {
          if (elm.innerHTML.toLowerCase().includes(this.value.toLowerCase())) {
            elm.classList.remove("item-hidden");
            elm.classList.add("item");
          } else {
            elm.classList.remove("item");
            elm.classList.add("item-hidden");
          }
        }
        $('.grid-container').addClass("grid-expanded");
      }
    })

    // load data
    var data = loadData();
    if (data && data['record']['orders']) {
      updateSidebar(data);
    }
    getLatestMat();
  }

  function getLatestMat() {
    fetch('https://api.jsonbin.io/v3/b/637eceb165b57a31e6c15f19/latest')
      .then((response) =>
        response.json()
      )
      .then((data) => {
        updateSidebar(data);
        saveData(data);
        return data;
      })
      .catch(console.error);
  }

  function updateSidebar(data) {
    if ($('ul', $('#mySidebar')[0])[0]) {
      $('#mySidebar')[0].removeChild($('ul', $('#mySidebar')[0])[0]);
    }
    var chkcount = 0;
    var topUL = document.createElement('ul');
    $('#mySidebar')[0].appendChild(topUL);
    var orderArray = data['record']['orders'];
    for (let order of orderArray) {
      let oElm = document.createElement('li');
      oElm.className = "order";
      topUL.appendChild(oElm);
      let ielm = document.createElement("input");
      ielm.className = "toggle";
      ielm.type = "radio";
      ielm.name = "order";
      ielm.id = "collapsible" + chkcount;
      oElm.appendChild(ielm);
      let lelm = document.createElement("label");
      lelm.htmlFor = "collapsible" + chkcount++;
      lelm.className = "lbl-toggle";
      lelm.innerText = order['order'];
      oElm.appendChild(lelm);
      // osElm customer 下的 orders
      let gElm = document.createElement('div');
      gElm.className = "grid-container";
      oElm.appendChild(gElm);
      for (let item of order['material']) {
        let iElm = document.createElement('div');
        iElm.className = 'item';
        gElm.appendChild(iElm);

        switch (item['type']) {
          case 'material':
            iElm.setAttribute('data-type', 'material');
            break;
          case 'packaging':
            iElm.setAttribute('data-type', 'packaging');
            break;
        }
        for (let property in item) {
          if (property != 'code' && property != 'type') {
            let selm = document.createElement('span');
            selm.setAttribute('data-code', item['code']);
            selm.innerText = item[property];
            iElm.appendChild(selm);
          }
        }
        iElm.onclick = function () {
          event.stopPropagation();
          if (document.querySelector('[placeholder*="订单号"]')) {
            document.querySelector('[placeholder*="订单号"]').value = order['order'];
            document.querySelector('[placeholder*="订单号"]').dispatchEvent(new Event('input', {
              bubbles: true
            }));
          }
          if (document.querySelector('[placeholder*="物料名称、编码、别名"]')) {
            document.querySelector('[placeholder*="物料名称、编码、别名"]').value = item['code'];
            document.querySelector('[placeholder*="物料名称、编码、别名"]').dispatchEvent(new Event('input', {
              bubbles: true
            }));
          }
          let sbtn = null;
          if ($('button:contains("查询")')[0]) {
            sbtn = $('button:contains("查询")')[0];
          } else if ($('button:contains("搜索")')[0]) {
            sbtn = $('button:contains("搜索")')[0];
          } else if ($('button:contains("搜 索")')[0]) {
            sbtn = $('button:contains("搜 索")')[0];
          }
          if (sbtn) {
            sbtn.click();
          }
        }
      }
    }
  }

  // 保存 读取 导入 切换 删除cookie
  // cookieData={ name:cookie,...}
  function loadData() {
    try {
      return JSON.parse(localStorage["matjson"]);
    } catch (e) {
      localStorage["matjson"] = null;
      return {};
    }
  }

  function saveData(data) {
    localStorage["matjson"] = JSON.stringify(data);
  }

  function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) {
      return;
    }
    style = document.createElement('style');
    // style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
  }

  // init
  insertDiv();

  addGlobalStyle(`
        .sidebar {
            height: 100%;
            position: fixed;
            z-index: 5000;
            top: 0;
            right: 0;
            background-color: #111;
            max-width: 0px;
            transition: all 0.5s;
            overflow-x: hidden;
            white-space: nowrap;
            color: #ffffff;
            background: #009578;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
            padding: 5px;
        }

        .search-filter::selection {
            background: #1e1f28;
            color: white;
        }

        #app .sidebar {
            position: absolute;
            top: 0;
            right: 0px;
        }

        .sidebar .grid-container {
            max-height: 0px;
            transition: all 0.3s ease-in-out;
        }

        .sidebar .grid-container div {
            margin: 7px;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: #2196F3;
            padding: 8px;
            border-radius: 5px;
            color: aliceblue;
            box-shadow: 0 3px #999;
            cursor: pointer;
        }

        .sidebar .grid-container div:hover {
            background-color: rgb(0, 102, 255);
        }

        .sidebar .grid-container>div:active {
        background-color: #3b693d;
        box-shadow: 0 1px #666;
        transform: translateY(2px);
        }

        .sidebar .order {
            width: auto;
            background-color: azure;
            border-radius: 5px;
            color: #111;
            overflow-y: hidden;
            font-size: smaller;
        }

        .sidebar .order::-webkit-scrollbar {
            display: none;
        }

        .sidebar .orderNo {
            padding: 5px;
            font-size: larger;
        }

        .sidebar:hover, .sidebar:focus-within {
            max-width: 600px;
        }

        .sidebar .order:hover {
            background-color: beige;
        }

        .sidebar li {
            list-style: none;
            margin-left: 15px;
            margin-right: 15px;
            margin: 10px;
        }

        .sidebar ul {
            padding: 0;
            list-style-type: none;
        }

        .sidebar label {
            margin: 10px;
        }

        .sidebar span {
            margin-left: 2px;
        }
        
        .sidebar .item-hidden {
            display: none;
        }

        .sidebar .item {
            display: grid;
        }

        .sidebar::-webkit-scrollbar {
            display: none;
        }

        .sidebar .radio {
            margin: 10px;
            margin-left: 5px;
            padding: 0;
            position: relative;
        }

        .sidebar .radio input {
            width: auto;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            outline: none;
            cursor: pointer;
            border-radius: 5px;
            padding: 4px 8px;
            background: #1e1f28;
            color: white;
            font-size: 14px;
            transition: all 100ms linear;
        }

        .sidebar .radio input:checked {
            background-image: linear-gradient(180deg, #95d891, #74bbad);
            color: #fff;
            box-shadow: 0 1px 1px #0000002e;
            text-shadow: 0 1px 0px #79485f7a;
        }

        .sidebar .radio input:before {
            content: attr(label);
            display: inline-block;
            text-align: center;
            width: 100%;
        }

        .sidebar .InputContainer input {
            background-color: #e3edf7;
            padding: 8px 16px;
            border: none;
            display: block;
            font-family: 'Orbitron', sans-serif;
            font-weight: 600;
            color: #a9b8c9;
            transition: all 240ms ease-out;
            width: 100%;
        }

        .sidebar .InputContainer input::placeholder {
            color: #6d7f8f;
        }

        .sidebar .InputContainer input:focus {
            outline: none;
            color: #6d7f8f;
            background-color: #eff5fa;
        }

        .sidebar .InputContainer {
            margin: 5px;
            --top-shadow: inset 1px 1px 3px #c5d4e3, inset 2px 2px 6px #c5d4e3;
            --bottom-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.7);
            position: relative;
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .sidebar .InputContainer:before,
        .sidebar .InputContainer:after {
            pointer-events: none;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .sidebar .InputContainer:before {
            box-shadow: var(--bottom-shadow);
        }

        .sidebar .InputContainer:after {
            box-shadow: var(--top-shadow);
        }

        .sidebar .order input[type="radio"] {
            display: none;
        }

        .sidebar .lbl-toggle {
            display: block;
            cursor: pointer;
            font-size: larger;
        }

        .sidebar .grid-container.grid-expanded {
            max-height: 10000px;
        }

        .sidebar .toggle:checked+.lbl-toggle+.grid-container {
            max-height: 10000px;
        }
    `);
})();