🚀 3.11.0, #221

borisbu · Sep 27, 2023 · 316e8f4 · 316e8f4
2 parents ab4f333 + ab53e09
commit 316e8f4
Show file tree

Hide file tree

Showing 7 changed files with 1,035 additions and 804 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,21 @@
 
 ## Version 3
 
+### 3.11.0
+
+- UI improvement: better handling of multiple upcoming switches.
+  - No overlapping popovers: single popover for all upcoming events instead.
+  - Sorted by the time left.
+  - Assigned to the relay having the closest switching. 
+
+![UI](https://user-images.githubusercontent.com/13189514/270194227-b763214f-d237-4d0e-aab8-78de3215fb45.png)
+
+### 3.10.0
+
+- New feature: AutoConnect delay setting.
+  - Only visible for a Printer Relay (another setting).
+  - Only functional for OctoPrint 1.9.0+.
+
 ### 3.9.1
 
 - Renamed setting: "Confirm turning OFF".

diff --git a/octoprint_octorelay/static/css/octorelay.css b/octoprint_octorelay/static/css/octorelay.css
@@ -88,6 +88,12 @@
 }
 
 #navbar_plugin_octorelay .popover .popover-content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+#navbar_plugin_octorelay .popover .popover-content > div {
     display: flex;
     align-items: center;
     justify-content: space-between;

diff --git a/ts/OctoPrint.d.ts b/ts/OctoPrint.d.ts
@@ -22,6 +22,7 @@ interface JQuery {
       | "show"
       | {
           html?: boolean;
+          animation?: boolean;
           placement?: "top" | "bottom" | "left" | "right";
           trigger?: "click" | "hover" | "focus" | "manual";
           title?: string;

diff --git a/ts/__snapshots__/octorelay.spec.ts.snap b/ts/__snapshots__/octorelay.spec.ts.snap
@@ -135,22 +135,28 @@ exports[`OctoRelayViewModel Message handler should process the supplied configur
     "destroy",
   ],
   [
-    {
-      "placement": "bottom",
-      "title": "Nozzle Light",
-    },
+    "destroy",
+  ],
+  [
+    "destroy",
+  ],
+  [
+    "destroy",
   ],
   [
     "destroy",
   ],
   [
     {
       "placement": "bottom",
-      "title": "Printer",
+      "title": "Nozzle Light",
     },
   ],
   [
-    "destroy",
+    {
+      "placement": "bottom",
+      "title": "Printer",
+    },
   ],
   [
     {
@@ -159,23 +165,41 @@ exports[`OctoRelayViewModel Message handler should process the supplied configur
     },
   ],
   [
-    "destroy",
+    {
+      "placement": "bottom",
+      "title": "Chassis Light",
+    },
   ],
   [
     {
       "placement": "bottom",
-      "title": "Chassis Light",
+      "title": "R5",
     },
   ],
+]
+`;
+
+exports[`OctoRelayViewModel Should display a single popover for several upcoming events: .popover() 1`] = `
+[
+  [
+    "destroy",
+  ],
   [
     "destroy",
   ],
   [
     {
+      "animation": false,
+      "content": "<div><span>Nozzle Light goes <span class="label">OFF</span> <time id="time-tag-r1" datetime="2023-08-13T22:32:00.000Z" title="8/13/2023, 10:32:00 PM">in 2 minutes</time></span><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button></div><div><span>Printer goes <span class="label">OFF</span> <time id="time-tag-r2" datetime="2023-08-13T22:35:00.000Z" title="8/13/2023, 10:35:00 PM">in 5 minutes</time></span><button id="cancel-btn-r2" class="btn btn-mini" type="button">Cancel</button></div>",
+      "html": true,
       "placement": "bottom",
-      "title": "R5",
+      "title": "<span>Several relay switches ahead</span><button id="pop-closer" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
+      "trigger": "manual",
     },
   ],
+  [
+    "show",
+  ],
 ]
 `;
 
@@ -186,10 +210,11 @@ exports[`OctoRelayViewModel Should display upcoming state popover for delay 15 a
   ],
   [
     {
-      "content": "<time id="time-tag-r1" datetime="2023-08-13T22:30:15.000Z" title="8/13/2023, 10:30:15 PM">in 15 seconds</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button>",
+      "animation": false,
+      "content": "<div><time id="time-tag-r1" datetime="2023-08-13T22:30:15.000Z" title="8/13/2023, 10:30:15 PM">in 15 seconds</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button></div>",
       "html": true,
       "placement": "bottom",
-      "title": "<span>Nozzle Light goes <span class="label">OFF</span></span><button id="pop-closer-r1" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
+      "title": "<span>Nozzle Light goes <span class="label">OFF</span></span><button id="pop-closer" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
       "trigger": "manual",
     },
   ],
@@ -206,10 +231,11 @@ exports[`OctoRelayViewModel Should display upcoming state popover for delay 15 a
   ],
   [
     {
-      "content": "<time id="time-tag-r1" datetime="2023-08-13T22:30:15.000Z" title="8/13/2023, 10:30:15 PM">in 15 seconds</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button>",
+      "animation": false,
+      "content": "<div><time id="time-tag-r1" datetime="2023-08-13T22:30:15.000Z" title="8/13/2023, 10:30:15 PM">in 15 seconds</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button></div>",
       "html": true,
       "placement": "bottom",
-      "title": "<span>Nozzle Light goes <span class="label">ON</span></span><button id="pop-closer-r1" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
+      "title": "<span>Nozzle Light goes <span class="label">ON</span></span><button id="pop-closer" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
       "trigger": "manual",
     },
   ],
@@ -226,10 +252,11 @@ exports[`OctoRelayViewModel Should display upcoming state popover for delay 75 a
   ],
   [
     {
-      "content": "<time id="time-tag-r1" datetime="2023-08-13T22:31:15.000Z" title="8/13/2023, 10:31:15 PM">in 1.3 minutes</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button>",
+      "animation": false,
+      "content": "<div><time id="time-tag-r1" datetime="2023-08-13T22:31:15.000Z" title="8/13/2023, 10:31:15 PM">in 1.3 minutes</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button></div>",
       "html": true,
       "placement": "bottom",
-      "title": "<span>Nozzle Light goes <span class="label">OFF</span></span><button id="pop-closer-r1" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
+      "title": "<span>Nozzle Light goes <span class="label">OFF</span></span><button id="pop-closer" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
       "trigger": "manual",
     },
   ],
@@ -246,10 +273,11 @@ exports[`OctoRelayViewModel Should display upcoming state popover for delay 75 a
   ],
   [
     {
-      "content": "<time id="time-tag-r1" datetime="2023-08-13T22:31:15.000Z" title="8/13/2023, 10:31:15 PM">in 1.3 minutes</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button>",
+      "animation": false,
+      "content": "<div><time id="time-tag-r1" datetime="2023-08-13T22:31:15.000Z" title="8/13/2023, 10:31:15 PM">in 1.3 minutes</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button></div>",
       "html": true,
       "placement": "bottom",
-      "title": "<span>Nozzle Light goes <span class="label">ON</span></span><button id="pop-closer-r1" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
+      "title": "<span>Nozzle Light goes <span class="label">ON</span></span><button id="pop-closer" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
       "trigger": "manual",
     },
   ],
@@ -266,10 +294,11 @@ exports[`OctoRelayViewModel Should display upcoming state popover for delay 150
   ],
   [
     {
-      "content": "<time id="time-tag-r1" datetime="2023-08-13T22:32:30.000Z" title="8/13/2023, 10:32:30 PM">in 3 minutes</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button>",
+      "animation": false,
+      "content": "<div><time id="time-tag-r1" datetime="2023-08-13T22:32:30.000Z" title="8/13/2023, 10:32:30 PM">in 3 minutes</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button></div>",
       "html": true,
       "placement": "bottom",
-      "title": "<span>Nozzle Light goes <span class="label">OFF</span></span><button id="pop-closer-r1" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
+      "title": "<span>Nozzle Light goes <span class="label">OFF</span></span><button id="pop-closer" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
       "trigger": "manual",
     },
   ],
@@ -286,10 +315,11 @@ exports[`OctoRelayViewModel Should display upcoming state popover for delay 150
   ],
   [
     {
-      "content": "<time id="time-tag-r1" datetime="2023-08-13T22:32:30.000Z" title="8/13/2023, 10:32:30 PM">in 3 minutes</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button>",
+      "animation": false,
+      "content": "<div><time id="time-tag-r1" datetime="2023-08-13T22:32:30.000Z" title="8/13/2023, 10:32:30 PM">in 3 minutes</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button></div>",
       "html": true,
       "placement": "bottom",
-      "title": "<span>Nozzle Light goes <span class="label">ON</span></span><button id="pop-closer-r1" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
+      "title": "<span>Nozzle Light goes <span class="label">ON</span></span><button id="pop-closer" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
       "trigger": "manual",
     },
   ],
@@ -306,10 +336,11 @@ exports[`OctoRelayViewModel Should display upcoming state popover for delay 5000
   ],
   [
     {
-      "content": "<time id="time-tag-r1" datetime="2023-08-13T23:53:20.000Z" title="8/13/2023, 11:53:20 PM">in 1 hour</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button>",
+      "animation": false,
+      "content": "<div><time id="time-tag-r1" datetime="2023-08-13T23:53:20.000Z" title="8/13/2023, 11:53:20 PM">in 1 hour</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button></div>",
       "html": true,
       "placement": "bottom",
-      "title": "<span>Nozzle Light goes <span class="label">OFF</span></span><button id="pop-closer-r1" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
+      "title": "<span>Nozzle Light goes <span class="label">OFF</span></span><button id="pop-closer" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
       "trigger": "manual",
     },
   ],
@@ -326,10 +357,11 @@ exports[`OctoRelayViewModel Should display upcoming state popover for delay 5000
   ],
   [
     {
-      "content": "<time id="time-tag-r1" datetime="2023-08-13T23:53:20.000Z" title="8/13/2023, 11:53:20 PM">in 1 hour</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button>",
+      "animation": false,
+      "content": "<div><time id="time-tag-r1" datetime="2023-08-13T23:53:20.000Z" title="8/13/2023, 11:53:20 PM">in 1 hour</time><button id="cancel-btn-r1" class="btn btn-mini" type="button">Cancel</button></div>",
       "html": true,
       "placement": "bottom",
-      "title": "<span>Nozzle Light goes <span class="label">ON</span></span><button id="pop-closer-r1" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
+      "title": "<span>Nozzle Light goes <span class="label">ON</span></span><button id="pop-closer" type="button" class="close"><span class="fa fa-close fa-sm"></span></button>",
       "trigger": "manual",
     },
   ],

diff --git a/ts/octorelay.spec.ts b/ts/octorelay.spec.ts
@@ -238,6 +238,42 @@ describe("OctoRelayViewModel", () => {
     }
   );
 
+  test("Should display a single popover for several upcoming events", () => {
+    const handler = (registry[0].construct as OwnModel & OwnProperties)
+      .onDataUpdaterPluginMessage;
+    handler("octorelay", {
+      r1: {
+        relay_pin: 16,
+        inverted_output: false,
+        relay_state: true,
+        label_text: "Nozzle Light",
+        active: true,
+        icon_html: "<div>&#128161;</div>",
+        confirm_off: false,
+        upcoming: {
+          target: false,
+          owner: "PRINTING_STOPPED",
+          deadline: Date.now() + 120 * 1000,
+        },
+      },
+      r2: {
+        relay_pin: 12,
+        inverted_output: false,
+        relay_state: true,
+        label_text: "Printer",
+        active: true,
+        icon_html: '<img src="plugin/dashboard/static/img/printer-icon.png">',
+        confirm_off: true,
+        upcoming: {
+          target: false,
+          owner: "PRINTING_STOPPED",
+          deadline: Date.now() + 300 * 1000,
+        },
+      },
+    });
+    expect(elementMock.popover.mock.calls).toMatchSnapshot(".popover()");
+  });
+
   test.each([true, false])("Should set countdown %#", (isVisible) => {
     const handler = (registry[0].construct as OwnModel & OwnProperties)
       .onDataUpdaterPluginMessage;
@@ -291,8 +327,8 @@ describe("OctoRelayViewModel", () => {
         },
       },
     });
-    expect(elementMock.on).toHaveBeenCalledTimes(3); // controlBtn, closeBtn, cancelBtn
-    const cancelHandler = elementMock.on.mock.calls[2][1];
+    expect(elementMock.on).toHaveBeenCalledTimes(3); // controlBtn, cancelBtn, closeBtn
+    const cancelHandler = elementMock.on.mock.calls[1][1];
     cancelHandler();
     expect(apiMock).toHaveBeenCalledWith("octorelay", "cancelTask", {
       owner: "PRINTING_STOPPED",
@@ -320,8 +356,8 @@ describe("OctoRelayViewModel", () => {
         },
       },
     });
-    expect(elementMock.on).toHaveBeenCalledTimes(3); // controlBtn, closeBtn, cancelBtn
-    const closeHandler = elementMock.on.mock.calls[1][1];
+    expect(elementMock.on).toHaveBeenCalledTimes(3); // controlBtn, cancelBtn, closeBtn
+    const closeHandler = elementMock.on.mock.calls[2][1];
     closeHandler();
     expect(elementMock.popover).toHaveBeenCalledWith("destroy");
     expect(clearIntervalMock).toHaveBeenCalledWith("mockedInterval");