Easier navigation on the order list: the order being viewed is highlighted in the table, and the footer has a button to return to it - 2023-05-21, 01:41:37 AM
// ==UserScript==
// @name Better billa.at orders page
// @namespace Violentmonkey Scripts
// @match https://shop.billa.at/profile/orders
// @grant none
// @version 1.0
// @author -
// @run-at document-start
// @description Easier navigation on the order list: the order being viewed is highlighted in the table, and the footer has a button to return to it - 2023-05-21, 01:41:37 AM
// ==/UserScript==
savedLog = console.log; // they overwrite it
// make sure the DOM is loaded before we try to manipulate it.
document.addEventListener("DOMContentLoaded", function(event) {
// this css class will be used for highlighting the table row of the order currently being viewed.
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
.betterBillaHighlightedOrder { border: 0.2em solid black; }
.betterBillaHighlightedOrder td.action button { color: #CCC; }
.betterBillaHighlightedOrder td.action button:hover { color: #AAA; }
`; // put a border around the table row, gray out the Details button
document.getElementsByTagName('head')[0].appendChild(style);
document.scrollToOrder = function () {
tr = document.querySelector('tr.betterBillaHighlightedOrder')
if (tr.previousElementSibling !== null) {
tr.previousElementSibling.scrollIntoView()
} else {
tr.scrollIntoView()
}
}
// main loop
orderId = null;
function doLoop() {
// find the order id of the order currently being viewed
res = document.querySelectorAll('div.basket__articles-header td[data-ng-bind="historicOrder.orderId"]');
if (res.length === 1) {
oldOrderId = orderId;
orderId = res[0].innerText;
if (orderId !== oldOrderId) {
highlightedTrs = document.querySelectorAll("table.account__table-overview-list > tbody > tr.betterBillaHighlightedOrder");
highlightedTrs.forEach(highlightedTr => {
highlightedTr.classList.remove("betterBillaHighlightedOrder"); // remove highlighting from previously highlighted table row
});
// find the order id in the order list up top
var xpath = "//table[@class='account__table-overview-list']/tbody/tr/td[@data-ng-bind='order.orderIdInternal' and text()='" + orderId + "']";
res2 = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
td = res2.singleNodeValue;
// highlight the table row
if (td !== null) {
tr = td.parentElement;
tr.classList.add("betterBillaHighlightedOrder");
}
// remove existing "scroll to order" button
oldButtons = document.querySelectorAll("button.betterBillaFooterButton");
oldButtons.forEach(oldButton => {
oldButton.parentNode.removeChild(oldButton);
});
// re-add "scroll to order" button
res3 = document.querySelectorAll("div#body-content footer button");
if (res3.length === 2) { // there are normally only 2 buttons
// note in the event callback below we have to use previousElementSibling because of the always-visible top toolbar.
newButton = `<button class="no-button betterBillaFooterButton" onclick="document.scrollToOrder()">↑ Zurück zur Liste ↑</button>`;
res3[0].insertAdjacentHTML("afterend", newButton);
}
}
}
}
window.setInterval(doLoop, 1000);
});