Merge pull request #73 from borisbu/develop

Releasing 1.4.0

.github/workflows/CI.yaml

@@ -0,0 +1,51 @@
+# https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: CI
+
+on:
+  push:
+    branches: [ master, develop ]
+  pull_request:
+    branches: [ master, develop ]
+
+jobs:
+  UI:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get yarn cache dir
+        id: yarnCache
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+      - name: Cache node modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-yarn
+        with:
+          path: ${{ steps.yarnCache.outputs.dir }}
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
+      - name: Install dependencies
+        working-directory: ts
+        run: yarn install
+      - name: Lint
+        working-directory: ts
+        run: yarn lint
+      - name: Test
+        working-directory: ts
+        run: yarn test
+      - name: Build JS
+        working-directory: ts
+        run: yarn build
+      - name: Check changes
+        # https://unix.stackexchange.com/questions/155046/determine-if-git-working-directory-is-clean-from-a-script
+        run: |
+          if output=$(git status --porcelain) && [ -z "$output" ]; then
+            echo OK
+          else
+            echo Building the JS caused changes that has to be committed and pushed manually.
+            exit 1
+          fi

octoprint_octorelay/static/js/octorelay.js

@@ -1,37 +1,60 @@
-$(function() {
-    function OctoRelayViewModel(parameters) {
+"use strict";
+$(function () {
+    var OctoRelayViewModel = function (_a) {
+        var settingsViewModel = _a[0], loginStateViewModel = _a[1];
+        var ownCode = "octorelay";
         var self = this;
-        self.settingsViewModel = parameters[0]
-        self.loginState = parameters[1];
-
-        self.onDataUpdaterPluginMessage = function(plugin, data) {
-            if (plugin !== "octorelay") {
+        self.settingsViewModel = settingsViewModel;
+        self.loginState = loginStateViewModel;
+        self.onDataUpdaterPluginMessage = function (plugin, data) {
+            if (plugin !== ownCode) {
                 return;
             }
-            // console.log("onDataUpdaterPluginMessage: " + JSON.stringify(data));
-            for (const [key, value] of Object.entries(data)) {
-                // console.log(JSON.stringify(key));
-                // console.log(JSON.stringify(value));
+            var handleClick = function (key, value) {
+                var command = function () {
+                    return OctoPrint.simpleApiCommand(ownCode, "update", { pin: key });
+                };
+                if (!value.confirmOff) {
+                    return command();
+                }
+                var dialog = $("#octorelay-confirmation-dialog");
+                dialog.find(".modal-title").text("Turning " + value.labelText + " off");
+                dialog
+                    .find("#octorelay-confirmation-text")
+                    .text("Are you sure you want to turn the " + value.labelText + " off?");
+                dialog
+                    .find(".btn-cancel")
+                    .off("click")
+                    .on("click", function () { return dialog.modal("hide"); });
+                dialog
+                    .find(".btn-confirm")
+                    .off("click")
+                    .on("click", function () {
+                    command();
+                    dialog.modal("hide");
+                });
+                dialog.modal("show");
+            };
+            var _loop_1 = function (key, value) {
+                var btn = $("#relais" + key);
                 if (value.active !== undefined) {
-                    if (value.active === 1) {
-                        $("#relais" + key).show();
-                    } else {
-                        $("#relais" + key).hide();
-                    }
+                    btn.toggle(value.active === 1);
                 }
+                var icon = $("#ralayIcon" + key);
                 if (value.iconText !== undefined) {
-                    $("#ralayIcon" + key).html(value.iconText);
+                    icon.html(value.iconText);
                 }
                 if (value.labelText !== undefined) {
-                    $("#ralayIcon" + key).attr("title", value.labelText);
-                }
-                if (value.confirmOff !== undefined) {
-                    $("#ralayIcon" + key).attr("data-confirm", value.confirmOff);
+                    icon.attr("title", value.labelText);
                 }
+                icon.off("click").on("click", function () { return handleClick(key, value); });
+            };
+            for (var _i = 0, _a = Object.entries(data); _i < _a.length; _i++) {
+                var _b = _a[_i], key = _b[0], value = _b[1];
+                _loop_1(key, value);
             }
         };
-    }
-
+    };
     OCTOPRINT_VIEWMODELS.push({
         construct: OctoRelayViewModel,
         dependencies: ["settingsViewModel", "loginStateViewModel"],

octoprint_octorelay/templates/octorelay_navbar.jinja2

@@ -1,28 +1,7 @@
-<script type="application/javascript">
-    function OctoRelayConfirmClick(pin, title, confirmOff) {
-        // console.log("confirmOff " + confirmOff);
-        if (confirmOff === "false") {
-            return OctoPrint.simpleApiCommand("octorelay", "update", pin);
-        }
-        $("#octorelay-confirmation-dialog .modal-title").text("Turning " + title + " off");
-        $("#octorelay-confirmation-text").text("Are you sure you want to turn the " + title + " off?")
-        $("#octorelay-confirmation-dialog .btn-cancel").off("click").on("click", function() {
-            $("#octorelay-confirmation-dialog").modal("hide");
-        });
-        $("#octorelay-confirmation-dialog .btn-confirm").off("click").on("click", function() {
-            OctoPrint.simpleApiCommand("octorelay", "update", pin);
-            $("#octorelay-confirmation-dialog").modal("hide");
-        });
-        $("#octorelay-confirmation-dialog").modal("show");
-    }
-</script>
-
 {% for n in range(1,9) %}
     <div id="relaisr{{n}}" style="float: left; padding: 8px; font-size: 1.3em; {% if n > 4 %} display:none; {% endif %}">
         <a
             id="ralayIconr{{n}}"
-            onclick='OctoRelayConfirmClick({"pin":"r{{n}}"}, this.title, this.getAttribute("data-confirm"))'
-            data-confirm="false"
             title="relay {{n}}"
             style="text-decoration:none; cursor:pointer;"
         >

setup.py

@@ -15,11 +15,11 @@
 plugin_name = "OctoRelay"
 
 # The plugin's version. Can be overwritten within OctoPrint's internal data via __plugin_version__ in the plugin module
-plugin_version = "1.3.0"
+plugin_version = "1.4.0"
 
 # The plugin's description. Can be overwritten within OctoPrint's internal data via __plugin_description__ in the plugin
 # module
-plugin_description = """A plugin, that add's buttons to the navbar, toggleing GPIO on the RPi. It can be used for turning on and off relays."""
+plugin_description = """A plugin that adds buttons to the navbar for toggling GPIO on the RPi. It can be used for turning relays on and off."""
 
 # The plugin's author. Can be overwritten within OctoPrint's internal data via __plugin_author__ in the plugin module
 plugin_author = "Boris Burgstaller"

ts/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "env": {
+    "es6": true,
+    "browser": true,
+    "jest": true
+  },
+  "extends": [
+    "airbnb-typescript/base",
+    "prettier",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "script",
+    "project": "./tsconfig.json"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "prettier",
+    "import"
+  ],
+  "rules": {
+  }
+}

ts/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+coverage

ts/OctoPrint.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="jquery" />
+
+interface JQuery {
+  /** @see https://github.com/OctoPrint/OctoPrint/blob/1.9.0/src/octoprint/static/js/lib/bootstrap/bootstrap-modal.js */
+  modal(option: "show" | "hide"): JQuery;
+}
+
+interface ViewModel {
+  construct: (params: object[]) => void;
+  dependencies: string[];
+}
+
+declare const OCTOPRINT_VIEWMODELS: Array<ViewModel>;
+
+/** @see https://github.com/OctoPrint/OctoPrint/blob/1.9.0/docs/jsclientlib/base.rst */
+declare const OctoPrint: {
+  simpleApiCommand: (
+    plugin: string,
+    command: string,
+    payload: object,
+    opts?: object
+  ) => JQuery.Promise<any>;
+};

ts/__snapshots__/octorelay.spec.ts.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OctoRelayViewModel Constructor should set its certain properties 1`] = `
+{
+  "loginState": {
+    "login": true,
+  },
+  "onDataUpdaterPluginMessage": [Function],
+  "settingsViewModel": {
+    "settings": true,
+  },
+}
+`;
+
+exports[`OctoRelayViewModel Message handler should process the supplied configuration: $() 1`] = `
+[
+  [
+    "#relaisr1",
+  ],
+  [
+    "#ralayIconr1",
+  ],
+  [
+    "#relaisr2",
+  ],
+  [
+    "#ralayIconr2",
+  ],
+  [
+    "#relaisr3",
+  ],
+  [
+    "#ralayIconr3",
+  ],
+  [
+    "#relaisr4",
+  ],
+  [
+    "#ralayIconr4",
+  ],
+  [
+    "#relaisr5",
+  ],
+  [
+    "#ralayIconr5",
+  ],
+]
+`;
+
+exports[`OctoRelayViewModel Message handler should process the supplied configuration: .attr() 1`] = `
+[
+  [
+    "title",
+    "Nozzle Light",
+  ],
+  [
+    "title",
+    "Printer",
+  ],
+  [
+    "title",
+    "Fan",
+  ],
+  [
+    "title",
+    "Chassis Light",
+  ],
+  [
+    "title",
+    "R5",
+  ],
+]
+`;
+
+exports[`OctoRelayViewModel Message handler should process the supplied configuration: .find() 1`] = `
+[
+  [
+    ".modal-title",
+  ],
+  [
+    "#octorelay-confirmation-text",
+  ],
+  [
+    ".btn-cancel",
+  ],
+  [
+    ".btn-confirm",
+  ],
+]
+`;
+
+exports[`OctoRelayViewModel Message handler should process the supplied configuration: .html() 1`] = `
+[
+  [
+    "<div>&#128161;</div>",
+  ],
+  [
+    "<img src="plugin/dashboard/static/img/printer-icon.png">",
+  ],
+  [
+    "<img src="plugin/dashboard/static/img/fan-icon.png">",
+  ],
+  [
+    "<div>&#127774;</div>",
+  ],
+  [
+    "ON",
+  ],
+]
+`;
+
+exports[`OctoRelayViewModel Message handler should process the supplied configuration: .text() 1`] = `
+[
+  [
+    "Turning Printer off",
+  ],
+  [
+    "Are you sure you want to turn the Printer off?",
+  ],
+]
+`;
+
+exports[`OctoRelayViewModel Message handler should process the supplied configuration: .toggle() 1`] = `
+[
+  [
+    true,
+  ],
+  [
+    true,
+  ],
+  [
+    true,
+  ],
+  [
+    true,
+  ],
+  [
+    false,
+  ],
+]
+`;
+
+exports[`OctoRelayViewModel Should push the model into the registry 1`] = `
+{
+  "construct": [Function],
+  "dependencies": [
+    "settingsViewModel",
+    "loginStateViewModel",
+  ],
+}
+`;

ts/jest.config.json

@@ -0,0 +1,14 @@
+{
+  "transform": {
+    "^.+\\.ts$": [
+      "@swc/jest"
+    ]
+  },
+  "collectCoverage": true,
+  "coverageReporters": [
+    "json",
+    "lcov",
+    "text",
+    "html"
+  ]
+}