kirby-ocpp 0.1.1 → 0.1.2

package/dist/tui.js

@@ -11,7 +11,7 @@ const TABS = [
     { id: "scenarios", label: "Scenarios" }
 ];
 const LEVEL_STYLE = {
-    info: "{blue-fg}info{/blue-fg}",
+    info: "{white-fg}info{/white-fg}",
     success: "{green-fg}ok{/green-fg}",
     warn: "{yellow-fg}warn{/yellow-fg}",
     error: "{red-fg}err{/red-fg}",
@@ -20,14 +20,27 @@ const LEVEL_STYLE = {
 };
 const DEFAULT_MEASURANDS = "Energy.Active.Import.Register,Power.Active.Import,Current.Import,Voltage,Temperature,SoC";
 const THEME = {
+    background: "black",
+    foreground: "white",
     panelBorder: "cyan",
     headerBg: "black",
     headerFg: "white",
     footerBg: "black",
     footerFg: "white",
+    mutedFg: "cyan",
     selectedBg: "white",
-    selectedFg: "black"
+    selectedFg: "black",
+    focusBorder: "yellow"
 };
+function fgTag(color, content) {
+    return `{${color}-fg}${content}{/${color}-fg}`;
+}
+function muted(content) {
+    return fgTag(THEME.mutedFg, content);
+}
+function disabledLine(content) {
+    return muted(`${content} (disabled)`);
+}
 export class Tui {
     station;
     screen;
@@ -72,6 +85,8 @@ export class Tui {
             border: "line",
             padding: { left: 1, right: 1 },
             style: {
+                fg: THEME.foreground,
+                bg: THEME.background,
                 selected: { bg: THEME.selectedBg, fg: THEME.selectedFg },
                 border: { fg: THEME.panelBorder }
             }
@@ -86,6 +101,8 @@ export class Tui {
             border: "line",
             padding: { left: 1, right: 1 },
             style: {
+                fg: THEME.foreground,
+                bg: THEME.background,
                 border: { fg: THEME.panelBorder }
             }
         });
@@ -101,6 +118,8 @@ export class Tui {
             border: "line",
             padding: { left: 1, right: 1 },
             style: {
+                fg: THEME.foreground,
+                bg: THEME.background,
                 selected: { bg: THEME.selectedBg, fg: THEME.selectedFg },
                 border: { fg: THEME.panelBorder }
             }
@@ -124,6 +143,8 @@ export class Tui {
                 style: { bg: THEME.panelBorder }
             },
             style: {
+                fg: THEME.foreground,
+                bg: THEME.background,
                 border: { fg: THEME.panelBorder }
             }
         });
@@ -282,7 +303,7 @@ export class Tui {
         const compact = this.screenColumns() < 110;
         const tabLine = TABS.map((tab, index) => {
             const label = compact ? `${index + 1}:${tab.label.slice(0, 4)}` : `${index + 1}:${tab.label}`;
-            return tab.id === this.activeTab ? `{black-fg}{white-bg}${label}{/white-bg}{/black-fg}` : `{gray-fg}${label}{/gray-fg}`;
+            return tab.id === this.activeTab ? `{black-fg}{white-bg}${label}{/white-bg}{/black-fg}` : muted(label);
         }).join("  ");
         this.header.setContent([
             ` {bold}kirby-ocpp{/bold}  ${this.station.config.chargePointId} -> ${this.station.config.centralSystemUrl}`,
@@ -358,9 +379,11 @@ export class Tui {
         this.actions = this.actionsForTab();
         const width = this.centerContentWidth();
         const items = this.actions.map((action) => {
-            const prefix = action.disabled?.() ? "{gray-fg}" : "";
-            const suffix = action.disabled?.() ? "{/gray-fg}" : "";
-            return `${prefix}${action.key.padEnd(2)} ${truncateText(action.label, Math.max(12, width - 6))}${suffix}`;
+            const disabled = action.disabled?.() ?? false;
+            const suffix = disabled ? " (disabled)" : "";
+            const labelWidth = Math.max(12, width - 6 - suffix.length);
+            const line = `${action.key.padEnd(2)} ${truncateText(action.label, labelWidth)}`;
+            return disabled ? disabledLine(line) : line;
         });
         this.actionList.setLabel(` ${this.tabLabel(this.activeTab)} actions `);
         this.actionList.setItems(items);
@@ -546,6 +569,8 @@ export class Tui {
             tags: true,
             keys: true,
             style: {
+                fg: THEME.foreground,
+                bg: THEME.background,
                 border: { fg: THEME.panelBorder }
             }
         });
@@ -559,6 +584,8 @@ export class Tui {
             keys: true,
             tags: true,
             style: {
+                fg: THEME.foreground,
+                bg: THEME.background,
                 border: { fg: THEME.panelBorder }
             }
         });
@@ -574,6 +601,8 @@ export class Tui {
             vi: false,
             items: [],
             style: {
+                fg: THEME.foreground,
+                bg: THEME.background,
                 selected: { bg: THEME.selectedBg, fg: THEME.selectedFg },
                 border: { fg: THEME.panelBorder }
             }
@@ -585,7 +614,8 @@ export class Tui {
             right: 2,
             height: 1,
             tags: true,
-            content: "{gray-fg}Type to filter  Up/Down select  Enter run  Esc cancel{/gray-fg}"
+            style: { fg: THEME.foreground, bg: THEME.background },
+            content: muted("Type to filter  Up/Down select  Enter run  Esc cancel")
         });
         let entries = [];
         let selectedIndex = 0;
@@ -612,7 +642,7 @@ export class Tui {
             selectedIndex = clamp(selectedIndex, 0, Math.max(0, entries.length - 1));
             box.setLabel(` Commands${trimmedQuery ? `: ${truncateText(trimmedQuery, 28)}` : ""} `);
             if (entries.length === 0) {
-                list.setItems(["{gray-fg}No matching commands{/gray-fg}"]);
+                list.setItems([muted("No matching commands")]);
                 list.select(0);
                 this.screen.render();
                 return;
@@ -701,6 +731,8 @@ export class Tui {
             alwaysScroll: false,
             padding: { left: 2, right: 2 },
             style: {
+                fg: THEME.foreground,
+                bg: THEME.background,
                 border: { fg: THEME.panelBorder }
             },
             scrollbar: {
@@ -724,7 +756,7 @@ export class Tui {
             `  id=${this.station.config.chargePointId}`,
             `  url=${this.station.config.centralSystemUrl}`,
             "",
-            "{gray-fg}Esc or q closes this help.{/gray-fg}"
+            muted("Esc or q closes this help.")
         ].join("\n"));
         const close = () => {
             box.destroy();
@@ -742,9 +774,8 @@ export class Tui {
     paletteEntryLine(entry) {
         const tab = this.tabLabel(entry.tab).padEnd(11);
         const key = entry.action.key.padEnd(2);
-        const state = entry.action.disabled?.() ? "{gray-fg}" : "";
-        const endState = entry.action.disabled?.() ? "{/gray-fg}" : "";
-        return `${state}${tab} ${key} ${entry.action.label}${endState}`;
+        const line = `${tab} ${key} ${entry.action.label}`;
+        return entry.action.disabled?.() ? disabledLine(line) : line;
     }
     paletteEntries(query) {
         const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
@@ -963,6 +994,8 @@ export class Tui {
             tags: true,
             keys: true,
             style: {
+                fg: THEME.foreground,
+                bg: THEME.background,
                 border: { fg: THEME.panelBorder }
             }
         });
@@ -979,6 +1012,8 @@ export class Tui {
             keys: true,
             tags: true,
             style: {
+                fg: THEME.foreground,
+                bg: THEME.background,
                 border: { fg: THEME.panelBorder }
             }
         }));
@@ -989,7 +1024,8 @@ export class Tui {
             right: 2,
             height: 1,
             tags: true,
-            content: "{gray-fg}Tab/Up/Down field  Left/Right cursor  C-u clear  Enter submit  Esc cancel{/gray-fg}"
+            style: { fg: THEME.foreground, bg: THEME.background },
+            content: muted("Tab/Up/Down field  Left/Right cursor  C-u clear  Enter submit  Esc cancel")
         });
         let focusedIndex = 0;
         let closed = false;
@@ -1002,7 +1038,7 @@ export class Tui {
             const value = values[index] ?? "";
             const cursor = clamp(cursors[index] ?? value.length, 0, value.length);
             input.setContent(renderFieldValue(value, cursor, width, focusedIndex === index));
-            input.style.border = { fg: focusedIndex === index ? "yellow" : THEME.panelBorder };
+            input.style.border = { fg: focusedIndex === index ? THEME.focusBorder : THEME.panelBorder };
         };
         const renderInputs = () => {
             inputBoxes.forEach((_input, index) => renderInput(index));
@@ -1135,6 +1171,8 @@ export class Tui {
             vi: true,
             items: choices.map((choice) => ` ${choice}`),
             style: {
+                fg: THEME.foreground,
+                bg: THEME.background,
                 selected: { bg: THEME.selectedBg, fg: THEME.selectedFg },
                 border: { fg: THEME.panelBorder }
             }
@@ -1212,12 +1250,12 @@ export class Tui {
             alwaysScroll: false,
             content: this.plainLogContent(),
             style: {
-                fg: "white",
-                bg: "black"
+                fg: THEME.foreground,
+                bg: THEME.background
             },
             scrollbar: {
                 ch: " ",
-                style: { bg: "cyan" }
+                style: { bg: THEME.panelBorder }
             }
         });
         this.bindLogNavigationKeys(this.plainLogView);
@@ -1282,7 +1320,7 @@ export class Tui {
     appendLogEntry(entry) {
         this.logBox.log(this.formatLogEntryForTui(entry));
         if (entry.details) {
-            this.logBox.log(`  {gray-fg}${entry.details}{/gray-fg}`);
+            this.logBox.log(`  ${muted(entry.details)}`);
         }
     }
     filteredLogs() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kirby-ocpp",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A terminal OCPP charge point emulator.",
   "type": "module",
   "author": "archhaze24",