Fix selected line highlighting (#1922)

Also, extract logic to function
This commit is contained in:
runephilosof-karnovgroup 2023-07-06 19:49:21 +02:00 committed by GitHub
parent 0cf602a1f6
commit 5d72060bbd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -38,16 +38,16 @@
> >
<div v-for="line in log" :key="line.index" class="contents font-mono"> <div v-for="line in log" :key="line.index" class="contents font-mono">
<a <a
:id="`L${line.index + 1}`" :id="`L${line.number}`"
:href="`#L${line.index + 1}`" :href="`#L${line.number}`"
class="text-gray-500 whitespace-nowrap select-none text-right pl-1 pr-2" class="text-gray-500 whitespace-nowrap select-none text-right pl-1 pr-2"
:class="{ :class="{
'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error', 'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning', 'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
'bg-opacity-20 bg-blue-600': $route.hash === `#L${line.index + 1}`, 'bg-opacity-20 bg-blue-600': isSelected(line),
underline: $route.hash === `#L${line.index}`, underline: isSelected(line),
}" }"
>{{ line.index + 1 }}</a >{{ line.number }}</a
> >
<!-- eslint-disable vue/no-v-html --> <!-- eslint-disable vue/no-v-html -->
<span <span
@ -55,7 +55,7 @@
:class="{ :class="{
'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error', 'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning', 'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
'bg-opacity-20 bg-blue-600': $route.hash === `#L${line.index}`, 'bg-opacity-20 bg-blue-600': isSelected(line),
}" }"
v-html="line.text" v-html="line.text"
/> />
@ -65,7 +65,7 @@
:class="{ :class="{
'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error', 'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning', 'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
'bg-opacity-20 bg-blue-600': $route.hash === `#L${line.index}`, 'bg-opacity-20 bg-blue-600': isSelected(line),
}" }"
>{{ formatTime(line.time) }}</span >{{ formatTime(line.time) }}</span
> >
@ -111,6 +111,7 @@ import { findStep, isStepFinished, isStepRunning } from '~/utils/helpers';
type LogLine = { type LogLine = {
index: number; index: number;
number: number;
text: string; text: string;
time?: number; time?: number;
type: 'error' | 'warning' | null; type: 'error' | 'warning' | null;
@ -155,6 +156,10 @@ const logBuffer = ref<LogLine[]>([]);
const maxLineCount = 500; // TODO: think about way to support lazy-loading more than last 300 logs (#776) const maxLineCount = 500; // TODO: think about way to support lazy-loading more than last 300 logs (#776)
function isSelected(line: LogLine): boolean {
return route.hash === `#L${line.number}`;
}
function formatTime(time?: number): string { function formatTime(time?: number): string {
return time === undefined ? '' : `${time}s`; return time === undefined ? '' : `${time}s`;
} }
@ -162,6 +167,7 @@ function formatTime(time?: number): string {
function writeLog(line: Partial<LogLine>) { function writeLog(line: Partial<LogLine>) {
logBuffer.value.push({ logBuffer.value.push({
index: line.index ?? 0, index: line.index ?? 0,
number: (line.index ?? 0) + 1,
text: ansiUp.value.ansi_to_html(line.text ?? ''), text: ansiUp.value.ansi_to_html(line.text ?? ''),
time: line.time ?? 0, time: line.time ?? 0,
type: null, // TODO: implement way to detect errors and warnings type: null, // TODO: implement way to detect errors and warnings