☰

Calm Code 2.0

Calm Code Helper

  1. // ==UserScript==
  2. // @name         Calm Code 2.0
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2024-04-02.3.2
  5. // @description  Calm Code Helper
  6. // @author       xabdaziz
  7. // @match        https://fcmenu-dub-regionalized.corp.amazon.com/CDG7/laborTrackingKiosk
  8. // @match        https://fcmenu-dub-regionalized.corp.amazon.com/CDG7/calmCode
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=amazon.com
  10. // @grant        none
  11. // @license      AzAbd
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     const style = document.createElement('style');
  18.     style.textContent = `
  19.         .button-container {
  20.             position: relative;
  21.             display: flex;
  22.             align-items: center;
  23.             margin: 2px;
  24.         }
  25.         
  26.         .code-button {
  27.             display: flex;
  28.             justify-content: space-between;
  29.             align-items: center;
  30.             width: 100%;
  31.             padding: 6px 10px;
  32.             margin: 0;
  33.         }
  34.         
  35.         .code-text {
  36.             color: #FFD700;
  37.             font-weight: bold;
  38.         }
  39.         
  40.         .code-label {
  41.             margin-left: 10px;
  42.             color: #98FB98;
  43.             font-size: 11px;
  44.         }
  45.  
  46.         .category-inbound .code-text,
  47.         .category-training .code-text {
  48.             color: #000000;
  49.         }
  50.         
  51.         .category-inbound .code-label,
  52.         .category-training .code-label {
  53.             color: #FFFFFF;
  54.         }
  55.     `;
  56.     document.head.appendChild(style);
  57.  
  58.     const categories = [
  59.         {
  60.             name: "Inbound",
  61.             color: "#FF9900",
  62.             codes: [
  63.                 { code: "ICQAPS", label: "Dock/JPE/Corral/Bras-KO" },
  64.                 { code: "ICQAPSR", label: "NPC/RCV/DCT/PREP" },
  65.                 { code: "ICQAPST", label: "MFI/TTO/TTF/TTH" },
  66.                 { code: "QARSH", label: "IOL/Authors" }
  67.             ]
  68.         },
  69.         {
  70.             name: "Outbound",
  71.             color: "#01B0F1",
  72.             codes: [
  73.                 { code: "ICQAPSO", label: "SORT" },
  74.                 { code: "PSRSPS", label: "UIS" },
  75.                 { code: "PSTOPS", label: "MP/RP" },
  76.                 { code: "PSRPPS", label: "JPW/ATAC" }
  77.             ]
  78.         },
  79.         {
  80.             name: "ICQA",
  81.             color: "#146EB4",
  82.             codes: [
  83.                 { code: "ICQDMP", label: "DMG Processing" },
  84.                 { code: "ICQADMP", label: "Recolte DMG" },
  85.                 { code: "ICQAQA", label: "AUDIT" },
  86.                 { code: "AUDITPC", label: "Pallet Defect Capture" }
  87.             ]
  88.         },
  89.         {
  90.             name: "Training",
  91.             color: "#FF9900",
  92.             codes: [
  93.                 { code: "ICQATR", label: "ICQA Peer Trainer" },
  94.                 { code: "ICQAIC", label: "ICQA Trainee" }
  95.             ]
  96.         },
  97.         {
  98.             name: "Other",
  99.             color: "#37475A",
  100.             codes: [
  101.                 { code: "FACJAN", label: "Facility Janitorial" },
  102.                 { code: "ICQA5S", label: "5S" },
  103.                 { code: "OPSEMPENG", label: "Engagement" },
  104.                 { code: "ICQALQA", label: "LEAD" }
  105.             ]
  106.         }
  107.     ];
  108.  
  109.     function createButton(codeObj, color, categoryName) {
  110.         const buttonContainer = document.createElement('div');
  111.         buttonContainer.className = `button-container category-${categoryName.toLowerCase()}`;
  112.  
  113.         const button = document.createElement('button');
  114.         button.className = 'code-button';
  115.         button.style.cssText = `
  116.             border: none;
  117.             border-radius: 4px;
  118.             background-color: ${color};
  119.             cursor: pointer;
  120.             font-size: 11px;
  121.             transition: all 0.3s;
  122.             width: 100%;
  123.             text-align: left;
  124.         `;
  125.  
  126.         const codeSpan = document.createElement('span');
  127.         codeSpan.className = 'code-text';
  128.         codeSpan.textContent = codeObj.code;
  129.         
  130.         const labelSpan = document.createElement('span');
  131.         labelSpan.className = 'code-label';
  132.         labelSpan.textContent = codeObj.label;
  133.  
  134.         button.appendChild(codeSpan);
  135.         button.appendChild(labelSpan);
  136.  
  137.         button.addEventListener('mouseover', () => button.style.transform = 'scale(1.05)');
  138.         button.addEventListener('mouseout', () => button.style.transform = 'scale(1)');
  139.         button.addEventListener('click', () => {
  140.             const input = document.querySelector('#calmCode');
  141.             if (input) {
  142.                 input.value = codeObj.code;
  143.                 const form = input.closest('form');
  144.                 if (form) form.submit();
  145.             }
  146.         });
  147.  
  148.         buttonContainer.appendChild(button);
  149.         return buttonContainer;
  150.     }
  151.  
  152.     function toggleCategory(categoryDiv, buttonsDiv) {
  153.         const isExpanded = buttonsDiv.style.display !== 'none';
  154.         buttonsDiv.style.display = isExpanded ? 'none' : 'flex';
  155.         categoryDiv.querySelector('.toggle-icon').textContent = isExpanded ? '+' : '-';
  156.     }
  157.  
  158.     const container = document.createElement('div');
  159.     container.style.cssText = `
  160.         position: absolute;
  161.         top: 50%;
  162.         left: 20px;
  163.         transform: translateY(-50%);
  164.         background: #232F3E;
  165.         padding: 12px;
  166.         border-radius: 8px;
  167.         box-shadow: 0 0 15px rgba(0,0,0,0.3);
  168.         display: flex;
  169.         flex-direction: column;
  170.         gap: 10px;
  171.         z-index: 9999;
  172.         font-family: Amazon Ember, Arial, sans-serif;
  173.         font-size: 12px;
  174.         min-width: 300px;
  175.     `;
  176.  
  177.     categories.forEach(category => {
  178.         const categoryDiv = document.createElement('div');
  179.         categoryDiv.style.cssText = `
  180.             display: flex;
  181.             flex-direction: column;
  182.             gap: 6px;
  183.         `;
  184.  
  185.         const categoryHeader = document.createElement('div');
  186.         categoryHeader.style.cssText = `
  187.             display: flex;
  188.             align-items: center;
  189.             cursor: pointer;
  190.             user-select: none;
  191.             padding: 4px 0;
  192.             border-bottom: 2px solid #FF9900;
  193.         `;
  194.  
  195.         const toggleIcon = document.createElement('span');
  196.         toggleIcon.textContent = '+';
  197.         toggleIcon.className = 'toggle-icon';
  198.         toggleIcon.style.cssText = `
  199.             color: #FFFFFF;
  200.             margin-right: 8px;
  201.             font-weight: bold;
  202.             font-size: 16px;
  203.             width: 15px;
  204.         `;
  205.  
  206.         const categoryTitle = document.createElement('span');
  207.         categoryTitle.textContent = category.name;
  208.         categoryTitle.style.cssText = `
  209.             font-weight: bold;
  210.             color: #FFFFFF;
  211.             font-size: 13px;
  212.         `;
  213.  
  214.         const buttonsDiv = document.createElement('div');
  215.         buttonsDiv.style.cssText = `
  216.             display: none;
  217.             flex-direction: column;
  218.             gap: 6px;
  219.             margin-top: 6px;
  220.         `;
  221.  
  222.         categoryHeader.appendChild(toggleIcon);
  223.         categoryHeader.appendChild(categoryTitle);
  224.         categoryDiv.appendChild(categoryHeader);
  225.  
  226.         category.codes.forEach(codeObj => {
  227.             buttonsDiv.appendChild(createButton(codeObj, category.color, category.name));
  228.         });
  229.  
  230.         categoryDiv.appendChild(buttonsDiv);
  231.  
  232.         categoryHeader.addEventListener('click', () => toggleCategory(categoryDiv, buttonsDiv));
  233.  
  234.         container.appendChild(categoryDiv);
  235.     });
  236.  
  237.     document.body.appendChild(container);
  238. })();