move UI to typescript

src/index.js

@@ -1,6 +1,6 @@
-var UI = require('./ui.js');
 var StatusJS = require('status-js-api');
-var ChannelManager = require('./channelManager.js');
+import UI from './ui';
+import ChannelManager from './channelManager';
 
 const DEFAULT_CHANNEL = "mytest";
 const CONTACT_CODE_REGEXP = /^(0x)?[0-9a-f]{130}$/i;

src/ui.ts

@@ -1,21 +1,35 @@
-require('colors');
+require("colors");
 const blessed = require("neo-blessed");
 const Events = require("events");
 
 class UI {
-  constructor(_options) {
+  private events: any;
-    let options = _options || {};
+  private color: string;
+  private minimal: boolean;
+  private screen: any;
+  private input: any;
+  private consoleBox: any;
+  private consoleStateContainer: any;
+  private consoleState: any;
+  private wrapper: any;
+  private users: any;
+  private channels: any;
+  private log: any;
+  private logText: any;
+  private operations: any;
+
+  constructor(options: any = {}) {
     this.events = new Events();
 
     this.color = options.color || "green";
     this.minimal = options.minimal || false;
 
     this.screen = blessed.screen({
-      smartCSR: true,
+      autoPadding: true,
-      title: options.title || ("StatusX"),
       dockBorders: false,
       fullUnicode: true,
-      autoPadding: true
+      smartCSR: true,
+      title: options.title || ("StatusX"),
     });
 
     this.layoutLog();
@@ -24,7 +38,7 @@ class UI {
     this.layoutCmd();
     this.layoutState();
 
-    this.screen.key(["C-c"], function () {
+    this.screen.key(["C-c"], () => {
       process.exit(0);
     });
 
@@ -36,257 +50,254 @@ class UI {
     this.input.focus();
   }
 
-  availableUsers(users) {
+  public availableUsers(users: any) {
-    let stateColors = {
+    const stateColors = {
-      'on':  'green',
+      off: "grey",
-      'off': 'grey'
+      on:  "green",
     };
 
-    let user_list = Object.keys(users).map((user) => {
+    const userList = Object.keys(users).map((user) => {
-      let userObj = users[user];
+      const userObj = users[user];
       if (userObj.status in stateColors) {
-        let color = stateColors[userObj.status];
+        const color = stateColors[userObj.status];
         return userObj.name[color];
       }
       return userObj.name;
     });
 
-    this.users.setContent(user_list.join('\n'));
+    this.users.setContent(userList.join("\n"));
     this.screen.render();
   }
 
-  availableChannels(channels) {
+  public availableChannels(channels: string[]) {
-    this.channels.setContent(channels.map((c, i) => `(${i}) ${c}`).join('\n'));
+    this.channels.setContent(channels.map((c, i) => `(${i}) ${c}`).join("\n"));
     this.screen.render();
   }
 
-  setStatus(status) {
+  // TODO: to remove, might not be used anymore
+  private setStatus(status: string) {
     this.operations.setContent(status);
     this.screen.render();
   }
 
-  logEntry() {
+  public logEntry(...args: any[]) {
-    this.logText.log(...arguments);
+    this.logText.log(...args);
     this.screen.render();
   }
 
-  layoutLog() {
+  private layoutLog() {
     this.log = blessed.box({
-      label: "Logs",
-      padding: 1,
-      width: "68%",
-      height: "92%",
-      left: "12%",
-      top: "0%",
       border: {
-        type: "line"
+        type: "line",
       },
+      height: "92%",
+      label: "Logs",
+      left: "12%",
+      padding: 1,
       style: {
-        fg: -1,
         border: {
-          fg: this.color
+          fg: this.color,
-        }
+        },
-      }
+        fg: -1,
+      },
+      top: "0%",
+      width: "68%",
     });
 
     this.logText = blessed.log({
-      parent: this.log,
-      tags: true,
-      width: "100%-5",
-      //height: '90%',
-      scrollable: true,
-      input: false,
       alwaysScroll: true,
+      // height: "90%",
+      input: false,
+      keys: false,
+      mouse: true,
+      parent: this.log,
+      scrollable: true,
       scrollbar: {
         ch: " ",
-        inverse: true
+        inverse: true,
       },
-      keys: false,
+      tags: true,
       vi: false,
-      mouse: true
+      width: "100%-5",
     });
 
     this.screen.append(this.log);
   }
 
-  layoutUsers() {
+  private layoutUsers() {
-
     this.wrapper = blessed.layout({
-      width: "20%",
       height: "100%",
-      top: "0%",
+      layout: "grid",
       left: "80%",
-      layout: "grid"
+      top: "0%",
+      width: "20%",
     });
 
     this.users = blessed.box({
-      parent: this.wrapper,
-      label: "Users",
-      tags: true,
-      padding: this.minimal ? {
-        left: 1
-      } : 1,
-      width: "100%",
-      height: "95%",
-      valign: "top",
-      border: {
-        type: "line"
-      },
-      scrollable: true,
       alwaysScroll: true,
+      border: {
+        type: "line",
+      },
+      height: "95%",
+      label: "Users",
+      padding: this.minimal ? {
+        left: 1,
+      } : 1,
+      parent: this.wrapper,
+      scrollable: true,
       scrollbar: {
         ch: " ",
-        inverse: true
+        inverse: true,
       },
       style: {
-        fg: -1,
         border: {
-          fg: this.color
+          fg: this.color,
-        }
+        },
-      }
+        fg: -1,
+      },
+      tags: true,
+      valign: "top",
+      width: "100%",
     });
 
     this.screen.append(this.wrapper);
   }
 
-  layoutChannels() {
+  private layoutChannels() {
 
     this.wrapper = blessed.layout({
-      width: "12%",
       height: "100%",
-      top: "0%",
+      layout: "grid",
       left: "0%",
-      layout: "grid"
+      top: "0%",
+      width: "12%",
     });
 
     this.channels = blessed.box({
-      parent: this.wrapper,
-      label: "Channels",
-      tags: true,
-      padding: this.minimal ? {
-        left: 1
-      } : 1,
-      width: "100%",
-      height: "95%",
-      valign: "top",
-      border: {
-        type: "line"
-      },
-      scrollable: true,
       alwaysScroll: true,
+      border: {
+        type: "line",
+      },
+      height: "95%",
+      label: "Channels",
+      padding: this.minimal ? {
+        left: 1,
+      } : 1,
+      parent: this.wrapper,
+      scrollable: true,
       scrollbar: {
         ch: " ",
-        inverse: true
+        inverse: true,
       },
       style: {
-        fg: -1,
         border: {
-          fg: this.color
+          fg: this.color,
-        }
+        },
-      }
+        fg: -1,
+      },
+      tags: true,
+      valign: "top",
+      width: "100%",
     });
 
     this.screen.append(this.wrapper);
   }
 
-
+  private layoutCmd() {
-  layoutCmd() {
     this.consoleBox = blessed.box({
-      label: 'Messages',
-      tags: true,
-      padding: 0,
-      width: '100%',
-      height: '6%',
-      left: '0%',
-      top: '95%',
       border: {
-        type: 'line'
+        type: "line",
       },
+      height: "6%",
+      label: "Messages",
+      left: "0%",
+      padding: 0,
       style: {
-        fg: 'black',
         border: {
-          fg: this.color
+          fg: this.color,
-        }
+        },
-      }
+        fg: "black",
+      },
+      tags: true,
+      top: "95%",
+      width: "100%",
     });
 
     this.input = blessed.textbox({
-      parent: this.consoleBox,
+      height: "50%",
-      name: 'input',
       input: true,
-      keys: false,
-      top: 0,
-      left: 1,
-      height: '50%',
-      width: '100%-2',
       inputOnFocus: true,
+      keys: false,
+      left: 1,
+      name: "input",
+      parent: this.consoleBox,
       style: {
-        fg: 'green',
+        bg: "black",
-        bg: 'black',
+        fg: "green",
         focus: {
-          bg: 'black',
+          bg: "black",
-          fg: 'green'
+          fg: "green",
-        }
+        },
-      }
+      },
+      top: 0,
+      width: "100%-2",
     });
 
-    let self = this;
+    this.input.key(["C-c"], () => {
-
+      this.events.emit("exit");
-    this.input.key(["C-c"], function () {
-      self.events.emit('exit');
       process.exit(0);
     });
 
-    this.input.key(["C-w"], function () {
+    this.input.key(["C-w"], () => {
-      self.input.clearValue();
+      this.input.clearValue();
-      self.input.focus();
+      this.input.focus();
     });
 
-    this.input.key('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), function () {
+    this.input.key("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""), () => {
-      self.events.emit("typing", self.input.value);
+      this.events.emit("typing", this.input.value);
     });
 
-    this.input.on('submit', this.submitCmd.bind(this));
+    this.input.on("submit", this.submitCmd.bind(this));
 
     this.screen.append(this.consoleBox);
   }
 
-  layoutState() {
+  private layoutState() {
     this.consoleStateContainer = blessed.layout({
-      width: '68%',
+      height: "5%",
-      height: '5%',
+      layout: "grid",
-      left: '12%',
+      left: "12%",
-      top: '92%',
+      top: "92%",
-      layout: "grid"
+      width: "68%",
     });
 
     this.consoleState = blessed.box({
-      parent: this.consoleStateContainer,
-      label: "",
-      tags: true,
-      padding: {
-        left: 1
-      },
-      width: "100%",
-      height: "100%",
-      valign: "middle",
       border: {
-        type: "line"
+        type: "line",
       },
+      height: "100%",
+      label: "",
+      padding: {
+        left: 1,
+      },
+      parent: this.consoleStateContainer,
       style: {
-        fg: -1,
         border: {
-          fg: this.color
+          fg: this.color,
-        }
+        },
-      }
+        fg: -1,
+      },
+      tags: true,
+      valign: "middle",
+      width: "100%",
     });
 
     this.screen.append(this.consoleStateContainer);
   }
 
-  submitCmd(cmd) {
+  private submitCmd(cmd: string) {
-    if (cmd !== '') {
+    if (cmd !== "") {
-      this.events.emit('cmd', cmd);
+      this.events.emit("cmd", cmd);
     }
     this.input.clearValue();
     this.input.focus();
@@ -294,4 +305,4 @@ class UI {
 
 }
 
-module.exports = UI;
+export default UI;