move UI to typescript
This commit is contained in:
Iuri Matias
parent
a924549479
commit
543c485684
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
border: {
|
||||
type: "line",
|
||||
},
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
valign: "middle",
|
||||
border: {
|
||||
type: "line"
|
||||
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;
|
||||
Loading…
Reference in New Issue