mirror of
https://github.com/esphome/esp-web-tools.git
synced 2025-07-27 21:56:35 +00:00
Align console with ESPHome (#141)
This commit is contained in:
Paulus Schoutsen
GitHub
parent
64e82d2dff
commit
4f6724a74f
@ -1,4 +1,4 @@
|
||||
import { ColoredConsole } from "../util/console-color";
|
||||
import { ColoredConsole, coloredConsoleStyles } from "../util/console-color";
|
||||
import { sleep } from "../util/sleep";
|
||||
import { LineBreakTransformer } from "../util/line-break-transformer";
|
||||
import { Logger } from "../const";
|
||||
@ -6,6 +6,7 @@ import { Logger } from "../const";
|
||||
export class EwtConsole extends HTMLElement {
|
||||
public port!: SerialPort;
|
||||
public logger!: Logger;
|
||||
public allowInput = true;
|
||||
|
||||
private _console?: ColoredConsole;
|
||||
private _cancelConnection?: () => Promise<void>;
|
||||
@ -24,90 +25,8 @@ export class EwtConsole extends HTMLElement {
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
|
||||
monospace;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.log {
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 28px);
|
||||
font-size: 12px;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.log-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.log-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.log-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.log-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.log-underline.log-strikethrough {
|
||||
text-decoration: underline line-through;
|
||||
}
|
||||
.log-secret {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.log-secret-redacted {
|
||||
opacity: 0;
|
||||
width: 1px;
|
||||
font-size: 1px;
|
||||
}
|
||||
.log-fg-black {
|
||||
color: rgb(128, 128, 128);
|
||||
}
|
||||
.log-fg-red {
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
.log-fg-green {
|
||||
color: rgb(0, 255, 0);
|
||||
}
|
||||
.log-fg-yellow {
|
||||
color: rgb(255, 255, 0);
|
||||
}
|
||||
.log-fg-blue {
|
||||
color: rgb(0, 0, 255);
|
||||
}
|
||||
.log-fg-magenta {
|
||||
color: rgb(255, 0, 255);
|
||||
}
|
||||
.log-fg-cyan {
|
||||
color: rgb(0, 255, 255);
|
||||
}
|
||||
.log-fg-white {
|
||||
color: rgb(187, 187, 187);
|
||||
}
|
||||
.log-bg-black {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
.log-bg-red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
.log-bg-green {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
.log-bg-yellow {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
.log-bg-blue {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
.log-bg-magenta {
|
||||
background-color: rgb(255, 0, 255);
|
||||
}
|
||||
.log-bg-cyan {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
.log-bg-white {
|
||||
background-color: rgb(255, 255, 255);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
@ -121,31 +40,40 @@ export class EwtConsole extends HTMLElement {
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
${coloredConsoleStyles}
|
||||
</style>
|
||||
<div class="log"></div>
|
||||
<form>
|
||||
>
|
||||
<input autofocus>
|
||||
</form>
|
||||
${
|
||||
this.allowInput
|
||||
? `<form>
|
||||
>
|
||||
<input autofocus>
|
||||
</form>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
`;
|
||||
|
||||
this._console = new ColoredConsole(this.shadowRoot!.querySelector("div")!);
|
||||
const input = this.shadowRoot!.querySelector("input")!;
|
||||
|
||||
this.addEventListener("click", () => {
|
||||
// Only focus input if user didn't select some text
|
||||
if (getSelection()?.toString() === "") {
|
||||
input.focus();
|
||||
}
|
||||
});
|
||||
if (this.allowInput) {
|
||||
const input = this.shadowRoot!.querySelector("input")!;
|
||||
|
||||
input.addEventListener("keydown", (ev) => {
|
||||
if (ev.key === "Enter") {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
this._sendCommand();
|
||||
}
|
||||
});
|
||||
this.addEventListener("click", () => {
|
||||
// Only focus input if user didn't select some text
|
||||
if (getSelection()?.toString() === "") {
|
||||
input.focus();
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener("keydown", (ev) => {
|
||||
if (ev.key === "Enter") {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
this._sendCommand();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const abortController = new AbortController();
|
||||
const connection = this._connect(abortController.signal);
|
||||
@ -166,7 +94,7 @@ export class EwtConsole extends HTMLElement {
|
||||
.pipeTo(
|
||||
new WritableStream({
|
||||
write: (chunk) => {
|
||||
this._console!.addLine(chunk);
|
||||
this._console!.addLine(chunk.replace("\r", ""));
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
@ -891,7 +891,6 @@ class EwtInstallDialog extends LitElement {
|
||||
--mdc-dialog-max-width: 90vw;
|
||||
}
|
||||
ewt-console {
|
||||
display: block;
|
||||
width: calc(80vw - 48px);
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ interface ConsoleState {
|
||||
strikethrough: boolean;
|
||||
foregroundColor: string | null;
|
||||
backgroundColor: string | null;
|
||||
// carriageReturn: boolean;
|
||||
carriageReturn: boolean;
|
||||
secret: boolean;
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ export class ColoredConsole {
|
||||
strikethrough: false,
|
||||
foregroundColor: null,
|
||||
backgroundColor: null,
|
||||
// carriageReturn: false,
|
||||
carriageReturn: false,
|
||||
secret: false,
|
||||
};
|
||||
|
||||
@ -27,18 +27,17 @@ export class ColoredConsole {
|
||||
const re = /(?:\033|\\033)(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g;
|
||||
let i = 0;
|
||||
|
||||
// This doesn't work for some reason
|
||||
// if (this.state.carriageReturn) {
|
||||
// if (line !== "\n") {
|
||||
// // don't remove if \r\n
|
||||
// this.targetElement.removeChild(this.targetElement.lastChild!);
|
||||
// }
|
||||
// this.state.carriageReturn = false;
|
||||
// }
|
||||
if (this.state.carriageReturn) {
|
||||
if (line !== "\n") {
|
||||
// don't remove if \r\n
|
||||
this.targetElement.removeChild(this.targetElement.lastChild!);
|
||||
}
|
||||
this.state.carriageReturn = false;
|
||||
}
|
||||
|
||||
// if (line.includes("\r")) {
|
||||
// this.state.carriageReturn = true;
|
||||
// }
|
||||
if (line.includes("\r")) {
|
||||
this.state.carriageReturn = true;
|
||||
}
|
||||
|
||||
const lineSpan = document.createElement("span");
|
||||
lineSpan.classList.add("line");
|
||||
@ -186,3 +185,95 @@ export class ColoredConsole {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const coloredConsoleStyles = `
|
||||
.log {
|
||||
flex: 1;
|
||||
background-color: #1c1c1c;
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
|
||||
monospace;
|
||||
font-size: 12px;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
line-height: 1.45;
|
||||
border-radius: 3px;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.log-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.log-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.log-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.log-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.log-underline.log-strikethrough {
|
||||
text-decoration: underline line-through;
|
||||
}
|
||||
.log-secret {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.log-secret-redacted {
|
||||
opacity: 0;
|
||||
width: 1px;
|
||||
font-size: 1px;
|
||||
}
|
||||
.log-fg-black {
|
||||
color: rgb(128, 128, 128);
|
||||
}
|
||||
.log-fg-red {
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
.log-fg-green {
|
||||
color: rgb(0, 255, 0);
|
||||
}
|
||||
.log-fg-yellow {
|
||||
color: rgb(255, 255, 0);
|
||||
}
|
||||
.log-fg-blue {
|
||||
color: rgb(0, 0, 255);
|
||||
}
|
||||
.log-fg-magenta {
|
||||
color: rgb(255, 0, 255);
|
||||
}
|
||||
.log-fg-cyan {
|
||||
color: rgb(0, 255, 255);
|
||||
}
|
||||
.log-fg-white {
|
||||
color: rgb(187, 187, 187);
|
||||
}
|
||||
.log-bg-black {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
.log-bg-red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
.log-bg-green {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
.log-bg-yellow {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
.log-bg-blue {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
.log-bg-magenta {
|
||||
background-color: rgb(255, 0, 255);
|
||||
}
|
||||
.log-bg-cyan {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
.log-bg-white {
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user