copenhagentruckwash/pleno-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace double-Alt shortcut with triple-Shift for expanding and displaying RequestQueueProgress:

Browse Source 
- Update shortcut detection logic to use triple-Shift within a configurable time window.
- Rename variables and constants for clarity (`lastShiftKeyPressedAtMs`, `SHIFT_MULTI_PRESS_WINDOW_MS`, etc.).
- Adjust unit tests to validate new triple-Shift behavior and visibility changes.
This commit is contained in:
Jeppe Bundgaard
2026-03-19 15:27:54 +01:00
parent 23f5fdfcbf
commit cb81058611
2 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/global/RequestQueueProgress.vue
+14 -6
View File
@@ -16,7 +16,7 @@ const METHOD_ICON_CLASS = Object.freeze({
DELETE: "fa-trash",
DEFAULT: "fa-exchange-alt",
});
const FN_DOUBLE_PRESS_WINDOW_MS = 450;
const SHIFT_MULTI_PRESS_WINDOW_MS = 700;
const isVisible = ref(false);
const isExpanded = ref(REQUEST_QUEUE_CONFIG.inspector.expandedByDefault);
@@ -24,7 +24,8 @@ const isShortcutActivated = ref(false);
const nowMs = ref(Date.now());
const pingLatencyMs = ref(null);
const pingIsUnavailable = ref(false);
const lastFnKeyPressedAtMs = ref(0);
const lastShiftKeyPressedAtMs = ref(0);
const shiftKeyPressCount = ref(0);
let hideTimer = null;
let tickerTimer = null;
@@ -187,21 +188,28 @@ const toggleExpanded = () => {
};
const handleWindowKeydown = (event) => {
if (event?.key !== "Fn" || event?.repeat === true) {
if (event?.key !== "Shift" || event?.repeat === true) {
return;
}
const pressedAt = Date.now();
if (
Number(lastFnKeyPressedAtMs.value) > 0
&& (pressedAt - Number(lastFnKeyPressedAtMs.value)) <= FN_DOUBLE_PRESS_WINDOW_MS
Number(lastShiftKeyPressedAtMs.value) > 0
&& (pressedAt - Number(lastShiftKeyPressedAtMs.value)) <= SHIFT_MULTI_PRESS_WINDOW_MS
) {
shiftKeyPressCount.value = Number(shiftKeyPressCount.value) + 1;
} else {
shiftKeyPressCount.value = 1;
}
if (shiftKeyPressCount.value >= 3) {
isShortcutActivated.value = true;
isExpanded.value = true;
isVisible.value = true;
shiftKeyPressCount.value = 0;
}
lastFnKeyPressedAtMs.value = pressedAt;
lastShiftKeyPressedAtMs.value = pressedAt;
};
const handleClearErrors = () => {
tests/unit/request-queue-progress.spec.js
+12 -11
View File
@@ -32,9 +32,10 @@ const createDeferred = () => {
return { promise, resolve, reject };
};
const triggerAltDoublePress = async () => {
window.dispatchEvent(new KeyboardEvent("keydown", { key: "Alt" }));
window.dispatchEvent(new KeyboardEvent("keydown", { key: "Alt" }));
const triggerShiftTriplePress = async () => {
window.dispatchEvent(new KeyboardEvent("keydown", { key: "Shift" }));
window.dispatchEvent(new KeyboardEvent("keydown", { key: "Shift" }));
window.dispatchEvent(new KeyboardEvent("keydown", { key: "Shift" }));
await flushMicrotasks();
};
@@ -72,7 +73,7 @@ describe("RequestQueueProgress", () => {
vi.useRealTimers();
});
it("is hidden by default and becomes visible + expanded on double-alt", async () => {
it("is hidden by default and becomes visible + expanded on shift 3 times", async () => {
const wrapper = mount(RequestQueueProgress);
expect(wrapper.find("[data-testid='request-queue-progress']").exists()).toBe(false);
@@ -86,7 +87,7 @@ describe("RequestQueueProgress", () => {
await flushMicrotasks();
expect(wrapper.find("[data-testid='request-queue-progress']").exists()).toBe(false);
await triggerAltDoublePress();
await triggerShiftTriplePress();
expect(wrapper.get("[data-testid='request-queue-progress']").text()).toContain("1 active, 1 queued");
expect(wrapper.find("[data-testid='request-queue-progress-details']").exists()).toBe(true);
@@ -107,7 +108,7 @@ describe("RequestQueueProgress", () => {
expect(wrapper.find("[data-testid='request-queue-progress']").exists()).toBe(true);
});
it("stays hidden until double-alt even for small batches", async () => {
it("stays hidden until shift 3 times even for small batches", async () => {
const wrapper = mount(RequestQueueProgress);
const onlyRequest = createDeferred();
@@ -115,7 +116,7 @@ describe("RequestQueueProgress", () => {
await flushManyMicrotasks();
expect(wrapper.find("[data-testid='request-queue-progress']").exists()).toBe(false);
await triggerAltDoublePress();
await triggerShiftTriplePress();
expect(wrapper.find("[data-testid='request-queue-progress']").exists()).toBe(true);
onlyRequest.resolve({ status: 200 });
@@ -132,7 +133,7 @@ describe("RequestQueueProgress", () => {
const requestTwo = enqueueRequest(() => second.promise, { method: "GET", url: "/order/items" });
await flushManyMicrotasks();
await triggerAltDoublePress();
await triggerShiftTriplePress();
await flushManyMicrotasks();
expect(wrapper.find("[data-testid='request-queue-errors-box']").exists()).toBe(true);
@@ -179,7 +180,7 @@ describe("RequestQueueProgress", () => {
const requestTwo = enqueueRequest(() => second.promise, { method: "GET", url: "/subuser-check-2" });
await flushManyMicrotasks();
await triggerAltDoublePress();
await triggerShiftTriplePress();
await flushManyMicrotasks();
const userBox = wrapper.get("[data-testid='request-queue-user-box']");
@@ -253,7 +254,7 @@ describe("RequestQueueProgress", () => {
expect(requestQueueState.missingPermissions.length).toBe(1);
expect(requestQueueState.missingPermissions[0].permission).toBe("department_notification_sms_get");
await triggerAltDoublePress();
await triggerShiftTriplePress();
await flushManyMicrotasks();
const errorsBox = wrapper.get("[data-testid='request-queue-errors-box']");
@@ -302,7 +303,7 @@ describe("RequestQueueProgress", () => {
await flushManyMicrotasks();
expect(wrapper.find("[data-testid='request-queue-progress']").exists()).toBe(false);
await triggerAltDoublePress();
await triggerShiftTriplePress();
expect(wrapper.find("[data-testid='request-queue-progress']").exists()).toBe(true);
vi.advanceTimersByTime(30_000);