From 543c4856846bd711d06d5a2e1a584afe84eaf97a Mon Sep 17 00:00:00 2001 From: Iuri Matias Date: Mon, 3 Dec 2018 21:41:19 -0500 Subject: [PATCH] move UI to typescript --- src/index.js | 4 +- src/{ui.js => ui.ts} | 305 ++++++++++++++++++++++--------------------- 2 files changed, 160 insertions(+), 149 deletions(-) rename src/{ui.js => ui.ts} (59%) diff --git a/src/index.js b/src/index.js index df00bfe..5cc3ef4 100644 --- a/src/index.js +++ b/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; diff --git a/src/ui.js b/src/ui.ts similarity index 59% rename from src/ui.js rename to src/ui.ts index f0e920d..3595582 100644 --- a/src/ui.js +++ b/src/ui.ts @@ -1,21 +1,35 @@ -require('colors'); +require("colors"); const blessed = require("neo-blessed"); const Events = require("events"); class UI { - constructor(_options) { - let options = _options || {}; + private events: any; + 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, - title: options.title || ("StatusX"), + autoPadding: true, 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) { - let stateColors = { - 'on': 'green', - 'off': 'grey' + public availableUsers(users: any) { + const stateColors = { + off: "grey", + on: "green", }; - let user_list = Object.keys(users).map((user) => { - let userObj = users[user]; + const userList = Object.keys(users).map((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) { - this.channels.setContent(channels.map((c, i) => `(${i}) ${c}`).join('\n')); + public availableChannels(channels: string[]) { + 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() { - this.logText.log(...arguments); + public logEntry(...args: any[]) { + 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); } - - layoutCmd() { + private 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, - name: 'input', + height: "50%", 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', - fg: 'green' - } - } + bg: "black", + fg: "green", + }, + }, + top: 0, + width: "100%-2", }); - let self = this; - - this.input.key(["C-c"], function () { - self.events.emit('exit'); + this.input.key(["C-c"], () => { + this.events.emit("exit"); process.exit(0); }); - this.input.key(["C-w"], function () { - self.input.clearValue(); - self.input.focus(); + this.input.key(["C-w"], () => { + this.input.clearValue(); + this.input.focus(); }); - this.input.key('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), function () { - self.events.emit("typing", self.input.value); + this.input.key("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""), () => { + 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%', - left: '12%', - top: '92%', - layout: "grid" + height: "5%", + layout: "grid", + left: "12%", + top: "92%", + 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) { - if (cmd !== '') { - this.events.emit('cmd', cmd); + private submitCmd(cmd: string) { + if (cmd !== "") { + this.events.emit("cmd", cmd); } this.input.clearValue(); this.input.focus(); @@ -294,4 +305,4 @@ class UI { } -module.exports = UI; +export default UI;