128 lines
3.7 KiB
JavaScript
128 lines
3.7 KiB
JavaScript
// 1. Create the 'catcher' element (invisible to the user)
|
|
const catcher = document.createElement('input');
|
|
catcher.style.cssText = 'position:fixed; opacity:0; pointer-events:none; top:0;';
|
|
document.body.appendChild(catcher);
|
|
|
|
const ext = typeof browser !== "undefined" ? browser : chrome;
|
|
|
|
ext.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
|
if (request.action === "ARM_SCANNER") {
|
|
catcher.focus();
|
|
sendResponse({status: "ready"});
|
|
}
|
|
});
|
|
|
|
// 3. Handle the Scanner Input
|
|
catcher.addEventListener('keydown', async (e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
// Decode the Base64 string back into a JSON string
|
|
const decodedData = atob(catcher.value);
|
|
const data = JSON.parse(decodedData);
|
|
|
|
await processHardwareData(data);
|
|
catcher.value = '';
|
|
|
|
}
|
|
});
|
|
|
|
async function fillMatSelect(selectId, targetText) {
|
|
const selectEl = document.getElementById(selectId);
|
|
if (!selectEl) return;
|
|
|
|
selectEl.focus();
|
|
// 1. Open dropdown using mousedown (more reliable than click)
|
|
selectEl.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
|
|
|
|
// 2. Wait for overlay panel to appear
|
|
let panel;
|
|
for (let i = 0; i < 10; i++) {
|
|
panel = document.querySelector('.cdk-overlay-pane');
|
|
if (panel) break;
|
|
await new Promise(r => setTimeout(r, 50));
|
|
}
|
|
if (!panel) return;
|
|
|
|
// 3. Find options inside overlay
|
|
const options = panel.querySelectorAll('mat-option, .mdc-list-item');
|
|
|
|
for (let option of options) {
|
|
const text = option.textContent.trim();
|
|
if (text.includes(targetText)) {
|
|
option.click();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
function triggerEnter(input) {
|
|
const enterDown = new KeyboardEvent('keydown', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
key: 'Enter',
|
|
code: 'Enter',
|
|
keyCode: 13
|
|
});
|
|
|
|
const enterUp = new KeyboardEvent('keyup', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
key: 'Enter',
|
|
code: 'Enter',
|
|
keyCode: 13
|
|
});
|
|
|
|
input.dispatchEvent(enterDown);
|
|
input.dispatchEvent(enterUp);
|
|
}
|
|
|
|
// 4. Fill the actual Angular/jQuery form
|
|
async function processHardwareData(data) {
|
|
|
|
const group = 'input-product-group';
|
|
const sub = 'input-sub-group';
|
|
const cat = 'input-product-category';
|
|
|
|
const groupEl = document.getElementById(group);
|
|
groupEl.focus();
|
|
groupEl.value = "ELECTRONICS";
|
|
groupEl.dispatchEvent(new Event('input', { bubbles: true }));
|
|
triggerEnter(groupEl);
|
|
|
|
const subEl = document.getElementById(sub);
|
|
subEl.focus();
|
|
subEl.value = "COMPUTERS";
|
|
subEl.dispatchEvent(new Event('input', { bubbles: true }));
|
|
triggerEnter(subEl);
|
|
|
|
const catEl = document.getElementById(cat);
|
|
catEl.focus();
|
|
catEl.value = "MISC (COMPUTERS)";
|
|
catEl.dispatchEvent(new Event('input', { bubbles: true }));
|
|
triggerEnter(catEl);
|
|
|
|
const map = {
|
|
'b': 'input-brand',
|
|
'd': 'input-prodDescrip',
|
|
'n': 'text-condition-notes',
|
|
's': 'input-style',
|
|
'e': 'serial-tags'
|
|
};
|
|
|
|
for (const [key, id] of Object.entries(map)) {
|
|
const input = document.getElementById(id);
|
|
if (input && data[key]) {
|
|
input.value = data[key];
|
|
|
|
// Trigger events so the webpage 'wakes up' to the new data
|
|
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
input.dispatchEvent(new Event('change', { bubbles: true }));
|
|
}
|
|
}
|
|
|
|
// Handle the special Angular Material dropdown
|
|
if (data['c']) {
|
|
await fillMatSelect('mat-select-10', data['c']);
|
|
}
|
|
|
|
} |