Collapsible panel with Load Note Templates, SMC Scheduling Codes, Rail Ramps Hours of Operation and T&T Status with Search function.
// ==UserScript==
// @name QS IMDL Quick Reference
// @namespace http://tampermonkey.net/
// @version 4.3
// @description Collapsible panel with Load Note Templates, SMC Scheduling Codes, Rail Ramps Hours of Operation and T&T Status with Search function.
// @author gracashm
// @license MIT
// @match https://trans-logistics.amazon.com/fmc/execution*
// @match https://smc-na-iad.iad.proxy.amazon.com/*
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function() {
'use strict';
const panelState = localStorage.getItem('qrPanelState') || 'closed';
const styles = `
#qr-panel {
position: fixed;
bottom: 60px;
right: 20px;
width: 450px;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
font-family: "Amazon Ember", Arial, sans-serif;
z-index: 10000;
display: ${panelState === 'open' ? 'block' : 'none'};
}
#qr-toggle {
position: fixed;
bottom: 60px;
right: 20px;
background: #FF9900;
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-family: "Amazon Ember", Arial, sans-serif;
font-size: 15px;
font-weight: 700;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 10001;
}
#qr-toggle:hover {
background: #E88B00;
}
#qr-header {
background: #232F3E;
color: #fff;
padding: 12px 16px;
border-radius: 8px 8px 0 0;
cursor: move;
display: flex;
justify-content: space-between;
align-items: center;
}
#qr-header h3 {
margin: 0;
font-size: 19px;
font-weight: 700;
}
#qr-close {
background: transparent;
border: none;
color: #fff;
font-size: 25px;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
}
#qr-tabs {
display: flex;
background: #f0f0f0;
border-bottom: 1px solid #ddd;
}
.qr-tab {
flex: 1;
padding: 12px 8px;
background: #f0f0f0;
border: none;
cursor: pointer;
font-family: "Amazon Ember", Arial, sans-serif;
font-size: 14px;
font-weight: 500;
border-right: 1px solid #ddd;
}
.qr-tab:last-child {
border-right: none;
}
.qr-tab.active {
background: #fff;
border-bottom: 2px solid #FF9900;
}
.qr-tab:hover {
background: #e8e8e8;
}
#qr-search-container {
padding: 12px 16px;
background: #fff;
border-bottom: 1px solid #ddd;
}
#qr-search-input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: "Amazon Ember", Arial, sans-serif;
font-size: 14px;
box-sizing: border-box;
}
#qr-search-input:focus {
outline: none;
border-color: #FF9900;
box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.2);
}
#qr-content {
padding: 16px;
max-height: 500px;
overflow-y: auto;
}
.qr-no-results {
text-align: center;
padding: 40px 20px;
color: #666;
font-size: 14px;
}
.qr-template-section {
margin-bottom: 12px;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}
.qr-template-header {
background: #f9f9f9;
padding: 12px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ddd;
}
.qr-template-header:hover {
background: #f0f0f0;
}
.qr-template-header h4 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #232F3E;
}
.qr-template-toggle {
font-size: 20px;
color: #666;
transition: transform 0.3s;
}
.qr-template-toggle.expanded {
transform: rotate(180deg);
}
.qr-template-body {
display: none;
padding: 12px;
background: #fff;
}
.qr-template-body.expanded {
display: block;
}
.qr-template-content {
background: #f9f9f9;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
line-height: 1.6;
white-space: pre-wrap;
margin-bottom: 8px;
}
.qr-copy-btn {
background: #FF9900;
color: #fff;
border: none;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
font-family: "Amazon Ember", Arial, sans-serif;
font-size: 12px;
font-weight: 700;
margin-right: 6px;
}
.qr-copy-btn:hover {
background: #E88B00;
}
.qr-region {
margin-bottom: 20px;
}
.qr-region h4 {
margin: 0 0 10px 0;
font-size: 16px;
font-weight: 700;
color: #232F3E;
border-bottom: 2px solid #FF9900;
padding-bottom: 4px;
}
.qr-rail-item {
margin-bottom: 8px;
padding: 8px;
background: #f9f9f9;
border-radius: 4px;
font-size: 14px;
}
.qr-rail-name {
font-weight: 700;
color: #232F3E;
}
.qr-code-category {
margin-bottom: 20px;
}
.qr-code-category h4 {
margin: 0 0 10px 0;
font-size: 16px;
font-weight: 700;
color: #232F3E;
}
.qr-code-item {
margin-bottom: 12px;
padding: 10px;
background: #f9f9f9;
border-left: 3px solid #FF9900;
border-radius: 4px;
}
.qr-code-title {
font-weight: 700;
color: #232F3E;
font-size: 15px;
margin-bottom: 4px;
}
.qr-code-desc {
font-size: 14px;
color: #555;
line-height: 1.5;
}
.qr-status-category {
margin-bottom: 20px;
}
.qr-status-category h4 {
margin: 0 0 10px 0;
font-size: 16px;
font-weight: 700;
color: #232F3E;
border-bottom: 2px solid #FF9900;
padding-bottom: 4px;
}
.qr-status-list {
list-style: none;
padding: 0;
margin: 0;
}
.qr-status-list li {
padding: 8px 10px;
background: #f9f9f9;
margin-bottom: 4px;
border-radius: 4px;
font-size: 14px;
}
.qr-hidden {
display: none !important;
}
.qr-highlight {
background-color: #fff3cd;
padding: 2px 4px;
border-radius: 2px;
}
`;
const styleSheet = document.createElement('style');
styleSheet.textContent = styles;
document.head.appendChild(styleSheet);
const toggleBtn = document.createElement('button');
toggleBtn.id = 'qr-toggle';
toggleBtn.textContent = 'Quick Reference';
document.body.appendChild(toggleBtn);
const panel = document.createElement('div');
panel.id = 'qr-panel';
panel.innerHTML = `
<div id="qr-header">
<h3>IMDL Quick Reference</h3>
<button id="qr-close">\u00d7</button>
</div>
<div id="qr-tabs">
<button class="qr-tab active" data-tab="templates">Templates</button>
<button class="qr-tab" data-tab="schedule">Scheduling Codes</button>
<button class="qr-tab" data-tab="rail">Rail Ramps</button>
<button class="qr-tab" data-tab="status">T&T Status</button>
</div>
<div id="qr-search-container">
<input type="text" id="qr-search-input" placeholder="Search...">
</div>
<div id="qr-content"></div>
`;
document.body.appendChild(panel);
const templates = {
stop1Instructions: `\u2022 Driver has to be UIIA Certified.
\u2022 Driver is not allowing to bobtail to 3P site. If there are no empties available, driver should be redirected to a close by Amazon site for empties.
\u2022 Driver must slide tandems according to the site preference.
\u2022 Driver must upload clear copies of all the BOL pages.
\u2022 BOL must remain in the document box at all times.
\u2022 Driver must remove all zip ties from the container before departing the rail yard.`,
stop1Fields: `Container ID:
Shipper Ref:
BOL:
PO:
Weight:
Pickup Date &Time:`,
stop1: `\u2022 Driver has to be UIIA Certified.
\u2022 Driver is not allowing to bobtail to 3P site. If there are no empties available, driver should be redirected to a close by Amazon site for empties.
\u2022 Driver must slide tandems according to the site preference.
\u2022 Driver must upload clear copies of all the BOL pages.
\u2022 BOL must remain in the document box at all times.
\u2022 Driver must remove all zip ties from the container before departing the rail yard.
Container ID:
Shipper Ref:
BOL:
PO:
Weight:
Pickup Date &Time:`,
stop2Instructions: `\u2022 Driver has to be UIIA Certified.
\u2022 Driver must slide tandems according to the site preference.
\u2022 Driver must have paper copy of BOL for delivery.
\u2022 Please make sure to Upload the POD (signed and stamped) on the app.`,
stop2Fields: `Container ID:
Rail Pickup:
Shipper Ref:
BOL:
PO:
Weight:
Delivery Date &Time:`,
stop2: `\u2022 Driver has to be UIIA Certified.
\u2022 Driver must slide tandems according to the site preference.
\u2022 Driver must have paper copy of BOL for delivery.
\u2022 Please make sure to Upload the POD (signed and stamped) on the app.
Container ID:
Rail Pickup:
Shipper Ref:
BOL:
PO:
Weight:
Delivery Date &Time:`,
bolEmail: `Hello Carrier,
Please see attachment for the Bill of Lading (BOL). Please adhere to the instructions provided below. Not following these guidelines will affect carrier performance
\u2022 Driver has to be UIIA Certified.
\u2022 Driver must slide tandems according to the site preference.
\u2022 Driver must have paper copy of BOL for delivery.
\u2022 Please make sure to Upload the POD (signed and stamped) on the app.`,
carrierCapacity: `Hello Carrier,
We have (Number of) loads ready for (pickup/delivery) on (date) at (time). Please confirm if you have capacity.`,
deliveryAppointment: `Hello,
I am requesting delivery appointment for the shipment listed below. Please confirm the appointment by providing the time that works best for your operation.
Shipper Ref:
BOL:
PO:
Container ID
Requested Date`,
pitstopEmail: `Hello [Site Code] TAMs,
I am pit-stopping an OB Dedicated External Freight at [Site Code] for holding. Asset [Container ID] is expected to arrive on [Date & Time] under [Pit-stop VRID] and will be removed on [Date & Time] under [Recovery VRID]. Please do not break the seal, move it to a dock door, or send it to another site. For additional information regarding this container, please do not hesitate to reach out.`
};
const scheduleCodes = {
amazon: [
{ title: 'No Trailer Available', desc: 'The Amazon facility has no empty container to take to the 3P/customer site.' },
{ title: 'Delay on Previous Leg', desc: 'A prior segment of the multi-leg route is running late, impacting the scheduled pickup or delivery time.' },
{ title: 'Incorrect Shipping Requirements', desc: 'Amazon provided incorrect or incomplete shipping details (e.g., wrong container type or size, commodity type, delivery address, or weight).' },
{ title: 'ISA Push', desc: 'Amazon\'s internal scheduling system (ISA) automatically rescheduled or changed the appointment time.' },
{ title: 'Invalid ISA Displayed', desc: 'The ISA tool shows incorrect or invalid scheduling information, causing a mismatch between actual availability and planned movement.' },
{ title: 'No Carrier/Asset Assigned', desc: 'The shipment cannot be performed at the scheduled time because a carrier, truck, or driver has not yet been assigned, resulting in a delay.' },
{ title: 'Planning Modification', desc: 'Amazon\'s team made changes to routing, destination, or load details after scheduling began.' },
{ title: 'Scheduling Error', desc: 'The appointment was incorrectly scheduled in Amazon\'s system due to human or data entry error (e.g., wrong date & time, fulfillment center, or shipment ID).' }
],
carrier: [
{ title: 'Carrier In-Transit Error', desc: 'The carrier experienced an issue while enroute (e.g., mechanical breakdown, incorrect routing, driver hours-of-service limits, or other non-Amazon/customer-related delays).' }
],
customer: [
{ title: '3P Appointment Pull', desc: 'The third-party customer requested to move the appointment earlier than originally scheduled.' },
{ title: 'Customer Scheduling Error', desc: 'The customer provided incorrect appointment details or created a scheduling conflict (e.g., wrong date, time, or location).' },
{ title: '3P Appointment Push', desc: 'The third-party customer requested to delay or move the appointment to a later time.' },
{ title: 'Freight Not Ready', desc: 'The customer\'s freight was not ready for pickup at the scheduled time (e.g., still being loaded, packaged, or awaiting paperwork).' }
],
normal: [
{ title: 'Normal Appointment', desc: 'The appointment is proceeding as planned with no exceptions or issues.' }
],
uncontrollable: [
{ title: 'Severe Weather', desc: 'Pickup or delivery is delayed or canceled due to weather conditions (e.g., snowstorm, hurricane, flooding) beyond anyone\'s control.' }
]
};
const railRamps = {
west: [
{ name: 'BNSF Albuquerque', hours: 'Sun 0900-1700, Mon 0600-2200, Tues-Fri 0300-2000, Sat 0300-1200' },
{ name: 'BNSF Commerce', hours: '24 hours' },
{ name: 'BNSF Denver', hours: '24 hours' },
{ name: 'BNSF Los Angeles', hours: '24 hours' },
{ name: 'BNSF Phoenix', hours: '24 hours' },
{ name: 'BNSF Portland', hours: '24 hours' },
{ name: 'BNSF San Bernardino', hours: '24 hours' },
{ name: 'BNSF South Seattle', hours: '24 hours' },
{ name: 'BNSF Spokane', hours: 'Sun 0700-1400 & 2100-2359, Weekdays 24 hours, Sat 0000-1400' },
{ name: 'BNSF Stockton', hours: '24 hours' }
],
midwest: [
{ name: 'BNSF Chicago (Corwith, Cicero, Willow Springs)', hours: '24 hours' },
{ name: 'BNSF Logistics Park KS', hours: '24 hours' },
{ name: 'BNSF Northwest Ohio', hours: 'Daily 0500-2359' },
{ name: 'BNSF St. Louis', hours: '24 hours' },
{ name: 'BNSF St. Paul', hours: '24 hours' },
{ name: 'CSXT Bedford Park', hours: '24 hours' },
{ name: 'CSXT Chicago 59th St', hours: '24 hours' },
{ name: 'CSXT Cincinnati', hours: 'Sun closed, Weekdays 0600-2000, Sat 0700-1400' },
{ name: 'CSXT Cleveland', hours: 'Weekends 0700-1500, Weekdays 0700-2100' },
{ name: 'CSXT Columbus', hours: 'Weekends 0700-1500, Weekdays 0600-2359' },
{ name: 'CSXT Indianapolis', hours: 'Sun 1200-1600, Mon-Sat 0800-1600' },
{ name: 'CSXT Louisville', hours: 'Sun closed, Weekdays 0600-2200, Sat 0600-1500' },
{ name: 'CSXT Northwest Ohio', hours: 'Daily 0500-2359' },
{ name: 'NSRR Calumet', hours: '24 hours' },
{ name: 'NSRR Chicago 47th', hours: '24 hours' },
{ name: 'NSRR Chicago 63rd', hours: '24 hours' },
{ name: 'NSRR Cincinnati', hours: 'Sun 0600-1800, Mon 0600-2359, Tues-Fri 24 hours, Sat 0000-1800' },
{ name: 'NSRR Landers', hours: '24 hours' },
{ name: 'NS Columbus', hours: 'Daily 0600-1800' }
],
texas: [
{ name: 'BNSF Alliance', hours: '24 hours' },
{ name: 'BNSF Houston', hours: '24 hours' }
],
southeast: [
{ name: 'BNSF Fairburn', hours: '24 hours' },
{ name: 'BNSF Memphis', hours: '24 hours' },
{ name: 'CSXT Central Florida', hours: '24 hours' },
{ name: 'CSXT Charlotte', hours: 'Sun 0830-1800, Mon-Sat 0300-1800' },
{ name: 'CSXT Fairburn', hours: '24 hours' },
{ name: 'CSXT Jacksonville', hours: '24 hours' },
{ name: 'CSXT Memphis', hours: 'Sun 1100-1700, Mon-Fri 0700-1900, Sat 0700-1500' },
{ name: 'CSXT Tampa', hours: 'Sun 0700-1400 & 2300-2359, Mon-Fri 0000-1700 & 2300-2359, Sat 0000-1400' },
{ name: 'FECR Miami', hours: '24 hours' },
{ name: 'NSRR Atlanta Austell', hours: '24 hours' },
{ name: 'NSRR Atlanta Inman', hours: '24 hours' },
{ name: 'NSRR Charlotte', hours: '24 hours' },
{ name: 'NSRR Greensboro', hours: 'Sun 0000-1400, Mon-Fri 24 hours, Sat 0600-1600' },
{ name: 'NSRR Jacksonville', hours: '24 hours' },
{ name: 'NSRR Memphis Rossville', hours: '24 hours' }
],
northeast: [
{ name: 'CSXT Baltimore', hours: 'Sun 0400-1600, Mon-Fri 0400-2359, Sat 0500-1200' },
{ name: 'CSXT Buffalo', hours: 'Weekends 0800-1200, Weekdays 0800-1800' },
{ name: 'CSXT Chambersburg', hours: '24 hours' },
{ name: 'CSXT North Bergen', hours: '24 hours' },
{ name: 'CSXT North Kearny', hours: '24 hours' },
{ name: 'CSXT Philadelphia', hours: 'Weekends 0500-1200, Weekdays 0800-1800' },
{ name: 'CSXT Springfield', hours: 'Sun 0600-1400, Mon-Sat 0600-1600' },
{ name: 'CSXT Syracuse', hours: 'Sun 1200-1600, Weekdays 0500-2030, Sat 0500-1900' },
{ name: 'CSXT Worcester', hours: 'Daily 0600-2000' },
{ name: 'NSRR Ayer', hours: 'Sun 0600-1600, Mon 0400-2359, Tues-Fri 24 hours, Sat 0000-1600' },
{ name: 'NSRR Buffalo', hours: 'Sun closed, Mon 0500-2200, Tues-Fri 0700-2200, Sat 0700-1100' },
{ name: 'NSRR Croxton', hours: '24 hours' },
{ name: 'NSRR Harrisburg', hours: '24 hours' },
{ name: 'NSRR Morrisville', hours: '24 hours' },
{ name: 'NSRR Norfolk', hours: 'Weekends 0700-1700, Weekdays 0700-1900' },
{ name: 'NSRR Pittsburgh', hours: '24 hours' },
{ name: 'NSRR Rutherford', hours: '24 hours' },
{ name: 'NSRR Taylor', hours: 'Sun closed, Weekdays 0700-1900, Sat 0700-1500' }
]
};
const ttStatus = {
prePickup: [
'Awaiting load ready confirmation',
'Awaiting container ID',
'Verify asset in AAP',
'Request carrier capacity from dedicated carrier via email',
'Awaiting pickup carrier confirmation'
],
pickup: [
'Request pickup appointment from shipper',
'Awaiting pickup confirmation from shipper',
'Update pickup timings in SMC automation',
'Awaiting VRIDS from SMC automation',
'Pending RLB1 on pickup',
'Add load notes for RLB1 carrier',
'Pending pickup from shipper site'
],
rail: [
'Needs to arrive at rail',
'Needs to depart rail',
'Train departed from rail',
'Train arrived at destination rail',
'Train arrived at crosstown rail',
'Set up crosstown',
'Pending RLB1 on crosstown',
'Pending crosstown pickup',
'Pending crosstown drop',
'Train departed crosstown rail',
'Needs to be notify at destination rail',
'Load notified at destination rail'
],
delivery: [
'Request delivery appointment',
'Awaiting delivery confirmation from receiver',
'Adjust delivery times in SMC and FMC',
'Request carrier capacity from dedicated carrier via email',
'Awaiting delivery carrier confirmation',
'Pending RLB1 on delivery',
'Add load notes for RLB1 carrier',
'Send BOL to delivery carrier',
'Pending delivery'
],
postDelivery: [
'Confirm empty drop in AAP',
'Verify POD (Signed and Stamped)',
'Verify all timestamps',
'Close Parent VRID',
'Pending invoice in SMC',
'SMC invoicing completed'
],
pitStop: [
'Pending RLB1 on Pit-stop',
'Pit-stop completed',
'Recovery created'
]
};
let currentTab = 'templates';
function renderTemplates() {
return `
<div class="qr-template-section">
<div class="qr-template-header" data-template="pickup">
<h4>Pickup Template</h4>
<span class="qr-template-toggle">\u25bc</span>
</div>
<div class="qr-template-body" data-template-body="pickup">
<div class="qr-template-content">${templates.stop1}</div>
<button class="qr-copy-btn" data-copy="stop1Instructions">Copy Instructions Only</button>
<button class="qr-copy-btn" data-copy="stop1Fields">Copy Fields Only</button>
<button class="qr-copy-btn" data-copy="stop1">Copy All</button>
</div>
</div>
<div class="qr-template-section">
<div class="qr-template-header" data-template="delivery">
<h4>Delivery Template</h4>
<span class="qr-template-toggle">\u25bc</span>
</div>
<div class="qr-template-body" data-template-body="delivery">
<div class="qr-template-content">${templates.stop2}</div>
<button class="qr-copy-btn" data-copy="stop2Instructions">Copy Instructions Only</button>
<button class="qr-copy-btn" data-copy="stop2Fields">Copy Fields Only</button>
<button class="qr-copy-btn" data-copy="stop2">Copy All</button>
</div>
</div>
<div class="qr-template-section">
<div class="qr-template-header" data-template="bolEmail">
<h4>BOL for Delivery Email</h4>
<span class="qr-template-toggle">\u25bc</span>
</div>
<div class="qr-template-body" data-template-body="bolEmail">
<div class="qr-template-content">${templates.bolEmail}</div>
<button class="qr-copy-btn" data-copy="bolEmail">Copy BOL Email</button>
</div>
</div>
<div class="qr-template-section">
<div class="qr-template-header" data-template="carrierCapacity">
<h4>Seeking Carrier Capacity</h4>
<span class="qr-template-toggle">\u25bc</span>
</div>
<div class="qr-template-body" data-template-body="carrierCapacity">
<div class="qr-template-content">${templates.carrierCapacity}</div>
<button class="qr-copy-btn" data-copy="carrierCapacity">Copy Carrier Capacity Request</button>
</div>
</div>
<div class="qr-template-section">
<div class="qr-template-header" data-template="deliveryAppointment">
<h4>Requesting Delivery Appointment</h4>
<span class="qr-template-toggle">\u25bc</span>
</div>
<div class="qr-template-body" data-template-body="deliveryAppointment">
<div class="qr-template-content">${templates.deliveryAppointment}</div>
<button class="qr-copy-btn" data-copy="deliveryAppointment">Copy Delivery Appointment Request</button>
</div>
</div>
<div class="qr-template-section">
<div class="qr-template-header" data-template="pitstopEmail">
<h4>IMDL Pit-stop Email</h4>
<span class="qr-template-toggle">\u25bc</span>
</div>
<div class="qr-template-body" data-template-body="pitstopEmail">
<div class="qr-template-content">${templates.pitstopEmail}</div>
<button class="qr-copy-btn" data-copy="pitstopEmail">Copy Pit-stop Email</button>
</div>
</div>
`;
}
function renderScheduleCodes() {
let html = '';
const categories = [
{ key: 'amazon', title: 'Amazon' },
{ key: 'carrier', title: 'Carrier' },
{ key: 'customer', title: 'Customer' },
{ key: 'normal', title: 'Normal' },
{ key: 'uncontrollable', title: 'Uncontrollable' }
];
categories.forEach(cat => {
html += `<div class="qr-code-category"><h4>${cat.title}</h4>`;
scheduleCodes[cat.key].forEach(code => {
html += `
<div class="qr-code-item" data-search-text="${code.title.toLowerCase()} ${code.desc.toLowerCase()}">
<div class="qr-code-title">${code.title}</div>
<div class="qr-code-desc">${code.desc}</div>
</div>
`;
});
html += '</div>';
});
return html;
}
function renderRailRamps() {
let html = '';
const regions = [
{ key: 'west', title: 'WEST REGION' },
{ key: 'midwest', title: 'MIDWEST REGION' },
{ key: 'texas', title: 'TEXAS REGION' },
{ key: 'southeast', title: 'SOUTHEAST REGION' },
{ key: 'northeast', title: 'NORTHEAST REGION' }
];
regions.forEach(region => {
html += `<div class="qr-region"><h4>${region.title}</h4>`;
railRamps[region.key].forEach(rail => {
html += `
<div class="qr-rail-item" data-search-text="${rail.name.toLowerCase()} ${region.title.toLowerCase()}">
<div class="qr-rail-name">${rail.name}</div>
<div>${rail.hours}</div>
</div>
`;
});
html += '</div>';
});
return html;
}
function renderTTStatus() {
let html = '';
const categories = [
{ key: 'prePickup', title: 'Pre-Pickup' },
{ key: 'pickup', title: 'Pickup' },
{ key: 'rail', title: 'Rail' },
{ key: 'delivery', title: 'Delivery' },
{ key: 'postDelivery', title: 'Post Delivery' },
{ key: 'pitStop', title: 'Pit-Stop' }
];
categories.forEach(cat => {
html += `<div class="qr-status-category"><h4>${cat.title}</h4><ul class="qr-status-list">`;
ttStatus[cat.key].forEach(status => {
html += `<li data-search-text="${status.toLowerCase()}">${status}</li>`;
});
html += '</ul></div>';
});
return html;
}
function updateContent(tab) {
currentTab = tab;
const content = document.getElementById('qr-content');
const searchInput = document.getElementById('qr-search-input');
searchInput.value = '';
switch(tab) {
case 'templates':
content.innerHTML = renderTemplates();
searchInput.placeholder = 'Search templates...';
break;
case 'schedule':
content.innerHTML = renderScheduleCodes();
searchInput.placeholder = 'Search scheduling codes...';
break;
case 'rail':
content.innerHTML = renderRailRamps();
searchInput.placeholder = 'Search rail ramps...';
break;
case 'status':
content.innerHTML = renderTTStatus();
searchInput.placeholder = 'Search status items...';
break;
}
}
function performSearch(query) {
const content = document.getElementById('qr-content');
const searchQuery = query.toLowerCase().trim();
if (searchQuery === '') {
updateContent(currentTab);
return;
}
let hasResults = false;
switch(currentTab) {
case 'templates':
const templateSections = content.querySelectorAll('.qr-template-section');
templateSections.forEach(item => {
const text = item.textContent.toLowerCase();
if (text.includes(searchQuery)) {
item.classList.remove('qr-hidden');
hasResults = true;
} else {
item.classList.add('qr-hidden');
}
});
break;
case 'schedule':
const codeCategories = content.querySelectorAll('.qr-code-category');
codeCategories.forEach(category => {
const items = category.querySelectorAll('.qr-code-item');
let categoryHasResults = false;
items.forEach(item => {
const searchText = item.getAttribute('data-search-text');
if (searchText.includes(searchQuery)) {
item.classList.remove('qr-hidden');
categoryHasResults = true;
hasResults = true;
} else {
item.classList.add('qr-hidden');
}
});
if (categoryHasResults) {
category.classList.remove('qr-hidden');
} else {
category.classList.add('qr-hidden');
}
});
break;
case 'rail':
const railRegions = content.querySelectorAll('.qr-region');
railRegions.forEach(region => {
const items = region.querySelectorAll('.qr-rail-item');
let regionHasResults = false;
items.forEach(item => {
const searchText = item.getAttribute('data-search-text');
if (searchText.includes(searchQuery)) {
item.classList.remove('qr-hidden');
regionHasResults = true;
hasResults = true;
} else {
item.classList.add('qr-hidden');
}
});
if (regionHasResults) {
region.classList.remove('qr-hidden');
} else {
region.classList.add('qr-hidden');
}
});
break;
case 'status':
const statusCategories = content.querySelectorAll('.qr-status-category');
statusCategories.forEach(category => {
const items = category.querySelectorAll('li');
let categoryHasResults = false;
items.forEach(item => {
const searchText = item.getAttribute('data-search-text');
if (searchText.includes(searchQuery)) {
item.classList.remove('qr-hidden');
categoryHasResults = true;
hasResults = true;
} else {
item.classList.add('qr-hidden');
}
});
if (categoryHasResults) {
category.classList.remove('qr-hidden');
} else {
category.classList.add('qr-hidden');
}
});
break;
}
if (!hasResults) {
content.innerHTML = '<div class="qr-no-results">No results found for "' + query + '"</div>';
}
}
updateContent('templates');
document.querySelectorAll('.qr-tab').forEach(tab => {
tab.addEventListener('click', function() {
document.querySelectorAll('.qr-tab').forEach(t => t.classList.remove('active'));
this.classList.add('active');
updateContent(this.dataset.tab);
});
});
const searchInput = document.getElementById('qr-search-input');
searchInput.addEventListener('input', function(e) {
performSearch(e.target.value);
});
document.getElementById('qr-content').addEventListener('click', function(e) {
if (e.target.classList.contains('qr-template-header') || e.target.parentElement.classList.contains('qr-template-header')) {
const header = e.target.classList.contains('qr-template-header') ? e.target : e.target.parentElement;
const templateId = header.getAttribute('data-template');
const body = document.querySelector(`[data-template-body="${templateId}"]`);
const toggle = header.querySelector('.qr-template-toggle');
if (body.classList.contains('expanded')) {
body.classList.remove('expanded');
toggle.classList.remove('expanded');
} else {
body.classList.add('expanded');
toggle.classList.add('expanded');
}
}
if (e.target.classList.contains('qr-copy-btn')) {
const copyType = e.target.dataset.copy;
const text = templates[copyType];
navigator.clipboard.writeText(text).then(() => {
const originalText = e.target.textContent;
e.target.textContent = 'Copied!';
setTimeout(() => {
e.target.textContent = originalText;
}, 2000);
});
}
});
toggleBtn.addEventListener('click', function() {
const isVisible = panel.style.display === 'block';
panel.style.display = isVisible ? 'none' : 'block';
localStorage.setItem('qrPanelState', isVisible ? 'closed' : 'open');
});
document.getElementById('qr-close').addEventListener('click', function() {
panel.style.display = 'none';
localStorage.setItem('qrPanelState', 'closed');
});
let isDragging = false;
let initialX;
let initialY;
const header = document.getElementById('qr-header');
header.addEventListener('mousedown', function(e) {
if (e.target.id === 'qr-close') return;
isDragging = true;
initialX = e.clientX - panel.offsetLeft;
initialY = e.clientY - panel.offsetTop;
});
document.addEventListener('mousemove', function(e) {
if (isDragging) {
e.preventDefault();
const currentX = e.clientX - initialX;
const currentY = e.clientY - initialY;
panel.style.left = currentX + 'px';
panel.style.top = currentY + 'px';
panel.style.right = 'auto';
panel.style.bottom = 'auto';
}
});
document.addEventListener('mouseup', function() {
isDragging = false;
});
})();