@robdobsn/raftjs 1.8.5 → 1.11.5

package/examples/dashboard/src/styles.css

@@ -0,0 +1,570 @@
+/* Main.css */
+
+/* General styling for the dark theme */
+body,
+.device-panel,
+.device-block-heading,
+.device-attrs-and-actions,
+.device-attrs-form,
+.device-actions-form,
+.device-line-chart {
+    /* Dark background for all components */
+    color: #fff;
+    /* Light text for better readability */
+    font-family: 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: #282c34;
+    color: #ffffff;
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+        monospace;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    border: 1px solid #666;
+    /* Adjusting border color for dark theme */
+    border-radius: 8px;
+    margin-bottom: 10px;
+}
+
+h1 {
+    margin: 0;
+}
+
+.always-enabled {
+    pointer-events: auto !important;
+    /* Ensures interactions are always enabled */
+}
+
+.content-body {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.content-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    flex-direction: col;
+}
+
+.conn-indication {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    border-radius: 8px;
+    margin-bottom: 10px;
+}
+
+.action-button {
+    color: #fff;
+    cursor: pointer;
+    background-color: #007bff;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 20px;
+    font-size: 1rem;
+}
+
+.settings-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border: 1px solid #666;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+
+.info-boxes {
+    display: flex;
+    justify-content: flex-start;
+    margin-bottom: 10px;
+    gap: 10px;
+}
+
+.connected-panel {
+    display: flex;
+    justify-content: flex-start;
+    gap: 20px;
+    align-items: stretch;
+    flex-direction: row;
+    width: 100%;
+    /* Space between the Connected panel and StatusPanel */
+}
+
+.info-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 10px;
+    padding: 10px 20px;
+    border: 1px solid #666;
+}
+
+.ip-addr-input {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    padding: 10px;
+    width: 100%;
+}
+
+.serial-no-input {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    padding: 10px;
+    width: 100%;
+}
+
+.command-input {
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.send-command-button {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    background-color: #007bff;
+    color: white;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+.send-command-button:hover {
+    background-color: #0056b3;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.info-line {
+    display: flex;
+    justify-content: space-between;
+}
+
+.info-label {
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.info-value {
+    font-weight: normal;
+}
+
+.info-columns {
+    display: flex;
+    gap: 20px;
+}
+
+.info-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.collapsible-section {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+}
+
+.collapsible-header {
+    background-color: #444;
+    color: #fff;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+    font-size: 16px;
+    outline: none;
+    border-radius: 4px;
+}
+
+.collapsible-content {
+    padding: 10px;
+    background-color: #333;
+    border: 1px solid #666;
+    border-radius: 4px;
+}
+
+.command-input-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-commands-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-command {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.example-load-button {
+    padding: 5px 10px;
+    background-color: #007bff;
+    border: none;
+    border-radius: 4px;
+    color: #fff;
+    cursor: pointer;
+    margin-left: 10px;
+    font-size: 1rem;
+}
+
+.example-load-button:hover {
+    background-color: #0056b3;
+}
+
+/* Style for the overall container that holds all devices */
+.devices-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    /* Adds space between each DeviceScreen */
+}
+
+/* Style for each individual device screen */
+.device-panel {
+    display: flex;
+    flex-direction: column;
+    /* Stack heading and data blocks vertically */
+    gap: 10px;
+    /* Adds space between the heading and the data block */
+    padding: 10px;
+    border: 1px solid #666;
+    /* Adjusting border color for dark theme */
+    border-radius: 8px;
+}
+
+.device-panel.offline {
+    opacity: 0.5;
+    /* Reduces the opacity to 50% */
+    background-color: rgba(50, 50, 50, 0.8);
+    /* Optional: Adds a grey tint */
+    pointer-events: none;
+    /* Disables interactions with all child elements */
+}
+
+/* Style for the device heading */
+.device-block-heading {
+    display: flex;
+    padding: 5px 10px;
+    /* Padding inside the heading block */
+    background: #444;
+    /* Slightly lighter dark background for distinction */
+    border-radius: 4px;
+    /* Slight rounding of corners */
+}
+
+/* Style for the text inside the heading */
+.device-block-heading-text {
+    font-weight: bold;
+    /* Keep heading text bold */
+}
+
+/* Style for the data block containing the form and chart */
+.device-block-data {
+    display: flex;
+    gap: 20px;
+    /* Space between the form and the chart */
+    align-items: flex-start;
+    /* Align items at their top edge */
+    min-height: 10rem;
+    /* Minimum height to ensure sufficient visibility */
+}
+
+.device-attrs-and-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    /* Space between the form and the actions */
+}
+
+
+/* Styles for the form and chart to adjust space */
+.device-attrs-form {
+    flex: 0 1 auto;
+    /* Don't grow, but allow shrinking */
+    width: auto;
+    /* Adjust based on content or set a max-width */
+    min-width: 200px;
+    /* Ensure it doesn't shrink too much */
+    padding: 10px;
+    border: 1px solid #666;
+    /* Adjusting border color for dark theme */
+    border-radius: 4px;
+    background: #444;
+    /* Slightly lighter dark background for distinction */
+}
+
+.device-actions-form {
+    flex: 0 1 auto;
+    /* Don't grow, but allow shrinking */
+    width: auto;
+    /* Adjust based on content or set a max-width */
+    min-width: 200px;
+    /* Ensure it doesn't shrink too much */
+    padding: 10px;
+    border: 1px solid #666;
+    /* Adjusting border color for dark theme */
+    border-radius: 4px;
+    background: #444;
+    /* Slightly lighter dark background for distinction */
+}
+
+.device-line-chart {
+    flex: 1 1 auto;
+    min-width: 50%;
+    padding: 10px;
+    border: 1px solid #666;
+    /* Adjusting border color for dark theme */
+    border-radius: 4px;
+    min-height: 15rem;
+    /* Setting a minimum height to ensure the chart is clearly visible */
+    height: 25vh;
+    /* Chart is approximately 1/4 of the viewport height in landscape */
+}
+
+.menu-icon,
+.header-menu-icon {
+    cursor: pointer;
+    font-size: 1.5rem;
+    margin-left: auto;
+    margin-right: 10px;
+    color: #fff;
+}
+
+.dropdown-menu {
+    position: absolute;
+    right: 70px;
+    background-color: #444;
+    border: 1px solid #666;
+    border-radius: 4px;
+    padding: 5px;
+    z-index: 10;
+}
+
+.header .dropdown-menu {
+    margin-top: 30px;
+}
+
+.menu-item {
+    padding: 10px;
+    cursor: pointer;
+    color: #fff;
+}
+
+.menu-item:hover {
+    background-color: #555;
+}
+
+.menu-item-toggle {
+    padding: 6px 10px;
+}
+
+.menu-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+
+.menu-toggle input {
+    margin: 0;
+}
+
+.device-stats-panel {
+    flex: 0 0 220px;
+    min-width: 220px;
+    padding: 10px;
+    border: 1px solid #666;
+    border-radius: 4px;
+    background: #444;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.device-stats-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: bold;
+}
+
+.device-stats-reset {
+    background: #555;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: 0.8em;
+}
+
+.device-stats-reset:hover {
+    background: #666;
+}
+
+.device-stats-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+}
+
+.device-stats-item {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.device-stats-label {
+    color: #bbb;
+    font-size: 0.85em;
+}
+
+.device-stats-value {
+    font-weight: 600;
+    font-size: 0.9em;
+}
+
+.poll-rate-dialog-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.poll-rate-dialog {
+    background: #333;
+    border: 1px solid #666;
+    border-radius: 6px;
+    padding: 18px 22px;
+    min-width: 240px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    color: #fff;
+}
+
+.poll-rate-dialog-title {
+    font-size: 1em;
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+
+.poll-rate-dialog-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.poll-rate-input {
+    flex: 1;
+    background: #222;
+    border: 1px solid #666;
+    border-radius: 4px;
+    color: #fff;
+    padding: 6px 8px;
+    font-size: 1em;
+    width: 100%;
+}
+
+.poll-rate-unit {
+    color: #aaa;
+    font-size: 0.9em;
+}
+
+.poll-rate-preview {
+    font-size: 0.8em;
+    color: #aaa;
+}
+
+.poll-rate-status {
+    font-size: 0.85em;
+    color: #f90;
+}
+
+.poll-rate-dialog-buttons {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+}
+
+.poll-rate-btn {
+    padding: 6px 14px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9em;
+}
+
+.poll-rate-btn-set {
+    background: #4a7;
+    color: #fff;
+}
+
+.poll-rate-btn-set:hover {
+    background: #5b8;
+}
+
+.poll-rate-btn-cancel {
+    background: #555;
+    color: #fff;
+}
+
+.poll-rate-btn-cancel:hover {
+    background: #666;
+}
+
+/* Adjust height for portrait orientation */
+@media (orientation: portrait) {
+    .device-line-chart {
+        height: 16.67vh;
+        /* Chart is approximately 1/6 of the viewport height in portrait */
+    }
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 600px) {
+
+    .device-line-chart,
+    .device-attrs-form {
+        height: 25vh;
+        /* Adjust height to a suitable value on small screens */
+    }
+}
+
+/* Considerations for very large screens or high aspect ratios */
+@media (min-width: 1200px) {
+    .device-line-chart {
+        height: 20vh;
+        /* Slightly reduce the height for very wide screens */
+    }
+}

package/examples/dashboard/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "module": "esnext",
+    "target": "es2017",
+    "strict": true,
+    "moduleResolution": "node",
+    "lib": [
+      "ES2017",
+      "DOM"
+    ]
+  },
+  "include": [
+    "src"
+  ]
+}

package/jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    roots: ['<rootDir>'],
+    testMatch: [
+      "**/__tests__/**/*.+(ts|tsx|js)",
+      "**/?(*.)+(spec|test).+(ts|tsx|js)"
+    ],
+    transform: {
+      "^.+\\.(ts|tsx)$": "ts-jest"
+    },
+  }
+  

package/package.json

@@ -1,54 +1,51 @@
 {
-  "name": "@robdobsn/raftjs",
-  "version": "1.8.5",
-  "description": "Javascript/TS library for Raft library",
-  "main": "dist/web/main.js",
-  "types": "dist/web/main.d.ts",
-  "react-native": "dist/react-native/main.js",
-  "author": "Rob Dobson <rob@dobson.com>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/robdobsn/raftjs.git"
-  },
-  "bugs": {
-    "url": "https://github.com/robdobsn/raftjs/issues"
-  },
-  "license": "MIT",
-  "keywords": [
-    "Raft"
-  ],
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "build:phone": "tsc -p tsconfig.react-native.json",
-    "build-all": "npm run clean && npm run build && npm run build:phone",
-    "lint": "eslint ./src",
-    "clean": "rimraf dist build package",
-    "docs": "typedoc --entryPoints src/main.ts",
-    "watch-all": "tsc -p tsconfig.json --watch & tsc -p tsconfig.react-native.json --watch"
-  },
-  "devDependencies": {
-    "@types/node": "^22.13.11",
-    "@types/web-bluetooth": "^0.0.21",
-    "@typescript-eslint/eslint-plugin": "^8.27.0",
-    "eslint": "^9.23.0",
-    "react-native-ble-plx": "^3.5.0",
-    "typescript": "^5.8.2",
-    "rimraf": "^6.0.1",
-    "@types/text-encoding": "^0.0.40"
-  },
-  "dependencies": {
-    "isomorphic-ws": "^5.0.0",
-    "tslib": "^2.8.1"
-  },
-  "peerDependencies": {
-    "react-native-ble-plx": "^3.5.0",
-    "react-native": "^0.78.1"
-  },
-  "files": [
-    "dist/web/**/*"
-  ]
+    "name": "@robdobsn/raftjs",
+    "version": "1.11.5",
+    "description": "Javascript/TS library for Raft library",
+    "main": "dist/web/main.js",
+    "types": "dist/web/main.d.ts",
+    "react-native": "dist/react-native/main.js",
+    "author": "Rob Dobson <rob@dobson.com>",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/robdobsn/raftjs.git"
+    },
+    "bugs": {
+        "url": "https://github.com/robdobsn/raftjs/issues"
+    },
+    "license": "MIT",
+    "keywords": [
+        "Raft"
+    ],
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "scripts": {
+        "build": "tsc -p tsconfig.json",
+        "build:phone": "tsc -p tsconfig.react-native.json",
+        "build-all": "npm run clean && npm run build && npm run build:phone",
+        "lint": "eslint ./src",
+        "clean": "rimraf dist build package",
+        "docs": "typedoc --entryPoints src/main.ts",
+        "watch-all": "tsc -p tsconfig.json --watch & tsc -p tsconfig.react-native.json --watch"
+    },
+    "devDependencies": {
+        "@types/node": "^22.13.11",
+        "@types/web-bluetooth": "^0.0.21",
+        "@typescript-eslint/eslint-plugin": "^8.27.0",
+        "eslint": "^9.23.0",
+        "react-native-ble-plx": "^3.5.0",
+        "typescript": "^5.8.2",
+        "rimraf": "^6.0.1",
+        "@types/text-encoding": "^0.0.40"
+    },
+    "dependencies": {
+        "isomorphic-ws": "^5.0.0",
+        "tslib": "^2.8.1"
+    },
+    "peerDependencies": {
+        "react-native-ble-plx": "*",
+        "react-native": "*"
+    }
 }