Add /preview pages

2026-05-04 20:19:06 +02:00
parent fbb0ac86d5
commit a7658c33b1
43 changed files with 500 additions and 28 deletions
@@ -0,0 +1,98 @@
+"use strict";
+
+function getMembersRow(x, y, w=1236) {
+    const r = 1236 / w;
+    x *= r;
+    y *= r;
+    if (x <= 12 || x > 346) return -1;
+    const row = Math.floor((y - 113) / 20.5);
+    return (row >= 0 && row < 5) ? row : -1;
+}
+
+function getDeliveriesRow(x, y, w=1136) {
+    const r = 1136 / w;
+    x *= r;
+    y *= r;
+    if (x <= 12 || x > 395) return -1;
+    const row = Math.floor((y - 120) / 20.5);
+    return (row >= 0 && row < 2) ? row : -1;
+}
+
+function getDeliveryPartsRow(x, y, w=1136) {
+    const r = 1136 / w;
+    x *= r;
+    y *= r;
+    if (x <= 424 || x > 753) return [-1, -1];
+    const win = document.getElementsByClassName("window")[1];
+    const idx = Array.prototype.indexOf.call(win.children, win.getElementsByClassName("selected")[0]);
+    const len = {1: 2, 2: 2, 3: 3, 4: 3, 5: 3}[idx] ?? 0;
+    const row = Math.floor((y - 319) / 20);
+    return [{0: 0, 1: 1, 2: 1, 3: 2, 4: 2, 5: 2}[idx], len === 0 ? -1 : (row >= 0 && row < len) ? row : -1];
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    const windows = document.getElementsByClassName("window");
+
+    const w1 = windows[0];
+    const canvas1 = w1.getElementsByTagName("canvas")[0];
+    const ctx1 = canvas1.getContext("2d");
+    w1.addEventListener("mousemove", (evt) => {
+        ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
+        const row = getMembersRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
+        if (row === -1) return;
+        ctx1.fillStyle = "#0078d740";
+        ctx1.fillRect(12, 113 + 20.5 * row, 334, 20.5);
+    });
+    w1.addEventListener("click", (evt) => {
+        const row = getMembersRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
+        for (const img of w1.getElementsByTagName("img")) img.classList.remove("selected");
+        w1.getElementsByTagName("img")[row + 1].classList.add("selected");
+    });
+
+    const w2 = windows[1];
+    const canvas2 = w2.getElementsByTagName("canvas")[0];
+    const ctx2 = canvas2.getContext("2d");
+    w2.addEventListener("mousemove", (evt) => {
+        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+        const row = getDeliveriesRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
+        const partRow = getDeliveryPartsRow(evt.offsetX, evt.offsetY, evt.target.clientWidth)[1];
+        if (row !== -1) {
+            ctx2.fillStyle = "#0078d740";
+            ctx2.fillRect(12, 120 + 20.5 * row, 383, 20.5);
+        } else if (partRow !== -1) {
+            ctx2.fillStyle = "#0078d740";
+            ctx2.fillRect(424, 319 + 20 * partRow, 329, 20);
+        }
+    });
+    w2.addEventListener("click", (evt) => {
+        const row = getDeliveriesRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
+        const partRow = getDeliveryPartsRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
+        if (row !== -1 || partRow[1] !== -1) {
+            const idx = row !== -1 ? row * 2 + 1 : (partRow[0] - 1) * 2 + partRow[1] + 1;
+            for (const img of w2.getElementsByTagName("img")) img.classList.remove("selected");
+            w2.getElementsByTagName("img")[idx].classList.add("selected");
+        } else {
+            for (const img of w2.getElementsByTagName("img")) img.classList.remove("selected");
+            w2.getElementsByTagName("img")[0].classList.add("selected");
+        }
+    });
+});
+
+document.addEventListener("keydown", (evt) => {
+    const act = document.activeElement;
+    if (!act.classList.contains("window")) return;
+    let el = null;
+    if (evt.key === "ArrowUp" || evt.key === "ArrowLeft") {
+        el = act.getElementsByClassName("selected")[0].previousElementSibling;
+        evt.stopImmediatePropagation();
+        evt.preventDefault();
+    } else if (evt.key === "ArrowDown" || evt.key === "ArrowRight") {
+        el = act.getElementsByClassName("selected")[0].nextElementSibling;
+        evt.stopImmediatePropagation();
+        evt.preventDefault();
+    }
+    if (el && el.tagName === "IMG") {
+        for (const img of act.getElementsByTagName("img")) img.classList.remove("selected");
+        el.classList.add("selected");
+    }
+});